@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif&display=swap');

/* Flowsor portal design, shared by the client portal (round-4) and the admin (admin-2).
   Extracted from round 4 with its chosen options as the defaults: Instrument Serif titles,
   Inter, Geist Mono, button scale B, Phosphor Light (../shared/icons.js), light theme first.
   Text colours were picked for contrast: every text colour is 4.5:1 or better on its page.
   Orange #FF560D is never used as text on paper (2.95:1). It marks, fills and rings only. */

:root {
  --bg: #f9f9f9; --bg2: #fbfbfb; --surface: #ffffff;
  --ink: 38, 38, 38;
  --t1: #1f1f1f;          /* 15.9:1 on --bg */
  --t2: #474747;          /* 9.0:1 */
  --t3: #5a5a5a;          /* 6.6:1, the lightest text we allow */
  --line: #e3e3e3; --line2: #d9d9d9;
  --fill4: rgba(var(--ink), .04); --fill7: rgba(var(--ink), .07); --fill10: rgba(var(--ink), .10);
  --signal: #FF560D; --signal-t: rgba(255, 86, 13, .10); --signal-t2: rgba(255, 86, 13, .18);
  --on-signal: #140600;   /* text on an orange fill: 6.4:1 */
  --ok: #0f7a45;
  --btn: #1f1f1f; --on-btn: #ffffff;
  --pop-shadow: 0 12px 28px -8px rgba(0, 0, 0, .16), 0 4px 8px -4px rgba(0, 0, 0, .08);
  --scrim: rgba(10, 10, 10, .28);

  /* the drawing */
  --fig-ink: rgba(var(--ink), .9); --fig-crease: rgba(var(--ink), .4);
  --pencil: rgba(var(--ink), .5); --pencil-now: rgba(var(--ink), .62); --hatch: rgba(var(--ink), .14);
  --link-dash: rgba(var(--ink), .42);

  --ease: cubic-bezier(.23, 1, .32, 1);
  --sheet: cubic-bezier(.32, .72, 0, 1);
  --display: 'Instrument Serif', Georgia, serif; --display-w: 400;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0a0a; --bg2: #0e0e0e; --surface: #161616;
  --ink: 240, 240, 240;
  --t1: #f2f2f2; --t2: #cfcfcf; --t3: #a8a8a8;   /* t3 is 8.0:1 on #0a0a0a */
  --line: #2a2a2a; --line2: #363636;
  --signal-t: rgba(255, 86, 13, .14); --signal-t2: rgba(255, 86, 13, .24);
  --ok: #4ccf7f;
  --btn: #f2f2f2; --on-btn: #0a0a0a;
  --pop-shadow: 0 16px 36px -8px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .5);
  --fig-ink: rgba(var(--ink), .88); --fig-crease: rgba(var(--ink), .36);
  --pencil: rgba(var(--ink), .42); --pencil-now: rgba(var(--ink), .58); --hatch: rgba(var(--ink), .10);
  --link-dash: rgba(var(--ink), .36);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--t1);
  font: 400 18px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-w); margin: 0; letter-spacing: -.01em; color: var(--t1); }
/* Instrument Serif has one weight and is thin at small sizes, so it stays on h1 and h2. */
h3 { font-family: var(--body); font-weight: 500; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--btn); color: var(--on-btn); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mono { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }

/* hover definitions for technical words */
.gloss { border-bottom: 1.5px dotted currentColor; cursor: help; }
.tip {
  position: fixed; z-index: 90; max-width: 300px; padding: 10px 14px; border-radius: 10px;
  background: var(--btn); color: var(--on-btn); font-size: 16px; line-height: 1.45;
  pointer-events: none; box-shadow: var(--pop-shadow);
}

/* ------------------------------------------------------------ buttons */
/* Button scale B: 40/48/56. sm is for row actions (Copy, Read it), md for everything else,
   lg only for onboarding's forward action. */
:root {
  --b-sm: 40px; --b-md: 48px; --b-lg: 56px; --p-sm: 0 16px; --p-md: 0 20px; --p-lg: 0 28px;
  --f-sm: 15px; --f-md: 17px; --f-lg: 19px; --r-b: 10px; --r-lg: 10px; --b-minw: 188px;
}
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--b-md); padding: var(--p-md); border-radius: var(--r-b); white-space: nowrap;
  font-weight: 500; font-size: var(--f-md);
  background: var(--fill7); color: var(--t1);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--fill10); }
.btn:active { transform: scale(.97); }
.btn.ink { background: var(--btn); color: var(--on-btn); }
.btn.ink:hover { opacity: .9; }
.btn.signal { background: var(--signal); color: var(--on-signal); }
.btn.signal:hover { background: #ff6a29; }
.btn.done { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 1.5px currentColor; pointer-events: none; }
.btn.lg { min-height: var(--b-lg); padding: var(--p-lg); font-size: var(--f-lg); border-radius: var(--r-lg); }
.btn.sm { min-height: var(--b-sm); padding: var(--p-sm); font-size: var(--f-sm); }
/* sm buttons keep a 44px hit area even when they draw smaller. */
.btn.sm::after { content: ''; position: absolute; inset: calc((var(--b-sm) - 44px) / 2) 0; }
.need-main { min-width: var(--b-minw); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .lbl { display: inline-block; }
.link-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--t2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 17px; }
.link-btn:hover { color: var(--t1); }

/* ------------------------------------------------------------ shell */
.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px; padding: 24px 18px;
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font: 500 18px var(--body); letter-spacing: -.01em; }
.logo { width: 28px; height: 28px; border-radius: 7px; display: block; box-shadow: 0 0 0 1px var(--line2); }
/* icon slots: each set brings its own fill or stroke, so we only size them here */
.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 20px; height: 20px; display: block; }
.nav .ico svg { width: 22px; height: 22px; }
.client { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--fill7); font: 500 17px var(--body); letter-spacing: -.01em; flex: none; }
.client b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.client small { display: block; font-size: 15px; color: var(--t3); line-height: 1.3; }

.nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.nav a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 12px; border-radius: 10px; text-decoration: none;
  font-weight: 500; font-size: 17px; color: var(--t2);
  transition: color .2s var(--ease), transform .1s var(--ease);
}
.nav a:hover { color: var(--t1); }
.nav a:active { transform: scale(.98); }
.nav a[aria-current="page"] { color: var(--t1); }
/* One highlight that glides between items instead of jumping. */
.nav-hl {
  position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 10px;
  background: var(--signal-t); transition: transform .32s var(--ease);
}
.nav-hl::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--signal); }
.badge {
  margin-left: auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: inline-grid; place-items: center; overflow: hidden; position: relative;
  background: var(--signal); color: var(--on-signal); font: 600 14px var(--mono);
}
.badge:empty, .badge[data-n="0"] { display: none; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.team { display: flex; align-items: center; gap: 12px; }
.team b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.team small { display: block; font-size: 15px; color: var(--t3); line-height: 1.35; }
/* The bottom of the sidebar: "Contact us" (the whole name block is the button) and the settings gear.
   Hover signal: the row fills, the two avatars fan apart, and an arrow slides in after "Contact us". */
.foot-row { display: flex; align-items: center; gap: 4px; margin: 0 -8px; }
.contact-btn { flex: 1; min-width: 0; padding: 8px; border-radius: 12px; text-align: left; color: inherit; transition: background-color .2s; }
.contact-btn b { white-space: nowrap; }
.contact-btn.team { gap: 10px; }
.contact-btn .av { width: 30px; height: 30px; font-size: 11px; }
.contact-btn .avatars .av + .av { margin-left: -8px; }
.contact-btn small { display: flex; align-items: center; gap: 6px; }
.contact-btn .go { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s cubic-bezier(.23, 1, .32, 1); }
.contact-btn .av { transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.contact-btn:hover, .contact-btn[aria-expanded="true"] { background: var(--fill7); }
.contact-btn:hover small, .contact-btn[aria-expanded="true"] small { color: var(--t1); }
.contact-btn:hover .go, .contact-btn[aria-expanded="true"] .go { opacity: 1; transform: none; }
.contact-btn:hover .av:first-child { transform: translateX(-2px) rotate(-6deg); }
.contact-btn:hover .av + .av { transform: translateX(4px) rotate(6deg); }
@media (prefers-reduced-motion: reduce) { .contact-btn .av, .contact-btn .go { transition: none; } .contact-btn:hover .av { transform: none; } }
.acct-btn { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--t2); }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--fill7); color: var(--t1); }
.acct-btn .ic { width: 22px; height: 22px; }
.pop.acct-menu { position: fixed; z-index: 50; width: 248px; padding: 8px; }
.acct-menu form { margin: 0; }
.acct-menu [role=menuitem] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 16px; color: var(--t1); text-align: left; }
.acct-menu [role=menuitem]:hover, .acct-menu [role=menuitem]:focus-visible { background: var(--fill7); }
.acct-menu [role=menuitem] .ic { width: 20px; height: 20px; color: var(--t2); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.field[readonly] { background: var(--fill4); color: var(--t2); }
.pop.contact-card { position: fixed; z-index: 50; width: 320px; max-width: calc(100vw - 24px); }
.contact-card h3 { font-size: 18px; margin: 4px 0 12px; }
.contact-people { list-style: none; margin: 0 0 8px; padding: 0; }
.contact-people li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.contact-people b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.contact-people a, .contact-mail { color: var(--t2); font-size: 15px; text-decoration: none; }
.contact-people a:hover, .contact-mail:hover { color: var(--t1); text-decoration: underline; }
.contact-mail { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px; border-top: 1px solid var(--line); }
.contact-mail .ic { width: 20px; height: 20px; }
.contact-msg { display: flex; flex-direction: column; gap: 10px; }
.contact-msg .field { resize: vertical; font: inherit; font-size: 16px; }
.contact-msg .btn { align-self: flex-end; }
.avatars { display: flex; flex: none; }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); font: 500 12px var(--mono); color: var(--t2); }
.avatars .av + .av { margin-left: -10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fill7); }
.seg button { min-height: var(--b-sm); border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--t2); transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--t1); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.main { min-width: 0; }
.view { max-width: 1040px; margin: 0 auto; padding: 40px 56px 96px; outline: none; }

/* ------------------------------------------------------------ journey: one view */
.home h1 { font-size: 40px; line-height: 1.12; max-width: 19em; }
.home h1 .quiet { color: var(--t3); }

/* one status line, and the plan as a thin track that forms the drawing's top edge */
.status { margin-top: 18px; }
.status-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.status-line { font-size: 19px; color: var(--t2); }
.status-line b { color: var(--t1); font-weight: 600; }
.track { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tk { height: 4px; border-radius: 2px; position: relative; overflow: hidden; background: var(--fill10); }
.tk.is-done { background: var(--t3); }
.tk.is-now i { position: absolute; inset: 0 auto 0 0; background: var(--signal); border-radius: 2px; }
.tk.is-ahead { background: repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 10px); }

/* the system drawing */
.sys-frame { position: relative; padding: 8px 0 0; }
.sys-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sys-hint { font-size: 16px; color: var(--t3); }

/* what we need: directly under the drawing */
.home-needs { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.needs-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.needs-head h2 { font-size: 26px; line-height: 1.2; display: flex; align-items: center; gap: 12px; }
.needs-head h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--signal); flex: none; }
.needs-head p { color: var(--t2); font-size: 17px; }
.ask-rows { list-style: none; margin: 6px 0 0; padding: 0; }
.ask-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.ask-row + .ask-row { border-top: 1px solid var(--line); }
.ask-text b { display: block; font-weight: 500; font-size: 18px; line-height: 1.35; }
.ask-text .ask-sub { display: block; color: var(--t2); font-size: 16px; line-height: 1.45; }
.ask-text .need-meta { margin-bottom: 2px; }
.more-link { color: var(--t1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; margin-left: 4px; }
.sys-block .sys-link { display: none; }
.home .sys-frame .sys-svg { height: 410px; }
.more-link { white-space: nowrap; }
.pop-link { margin-top: 8px; font-size: 16px; }
.track-m { display: none; }
.ask-row .need-actions { flex-direction: row; align-items: center; gap: 8px; }
.ask-row:not(.is-done) .need-check { display: none; }
.ask-row:not(.is-done) { grid-template-columns: 1fr auto; }
.ask-row .need-actions { margin-top: 0; justify-content: flex-end; }
.ask-row.is-done .need-check, .need.is-done .need-check { background: var(--ok); box-shadow: none; }
.ask-row.is-done .need-check svg { opacity: 1; transform: none; }
.ask-row.is-done .ask-text b { color: var(--t2); }
.ask-row .undo { order: -1; }
.ask-row.is-done .undo { visibility: visible; }

/* one line pointing at Updates */
.latest { margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.latest .mono { flex: none; }
.latest-text { flex: 1; min-width: 0; }
.latest-text b { font-weight: 500; }
.t3 { color: var(--t3); font-size: 16px; margin-left: 6px; }
.latest-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--t1); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.latest-link .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.fill { fill: var(--bg); stroke: none; }
.ink path { fill: none; stroke: var(--fig-ink); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.ink path.crease { stroke: var(--fig-crease); }
.sk { color: var(--pencil); }
.sk path { stroke-linecap: round; }
.sk .hatch { color: var(--hatch); }
.part .ink { opacity: 0; }
.part.is-live .ink { opacity: 1; }
.part.is-live .sk { opacity: 0; }
.part.is-now .sk { color: var(--pencil-now); }
.part { cursor: pointer; outline: none; }
.part .hit { fill: transparent; }
.part .fig { transition: transform .25s var(--ease); }
.part:hover .fig, .part:focus-visible .fig, .part.is-selected .fig { transform: translateY(-4px); }
.part:focus-visible .hit { stroke: var(--signal); stroke-width: 2; }
.parts .part { transition: opacity .25s var(--ease); }
.parts.has-sel .part:not(.is-selected) { opacity: .5; }
.lbl-st { font: 500 12px var(--mono); letter-spacing: .08em; fill: var(--t3); }
.part.is-now .lbl-st { fill: var(--t1); }
.part.is-live .lbl-st { fill: var(--ok); }
.lbl-name { font: 500 18px var(--body); letter-spacing: -.01em; fill: var(--t1); }
.lbl-out { font: 400 15px var(--body); fill: var(--t2); }
.part:hover .lbl-name, .part.is-selected .lbl-name { text-decoration: underline; }
.leader { stroke: var(--line2); stroke-width: 1; }
.link .dash { fill: none; stroke: var(--link-dash); stroke-width: 1.2; stroke-dasharray: 3 5; }
.link .solid { fill: none; stroke: var(--fig-ink); stroke-width: 1.1; opacity: 0; }
.link.is-live .solid { opacity: 1; }
.link.is-live .dash { opacity: 0; }
.packet { fill: var(--fig-ink); }
.marker .ring { fill: none; stroke: var(--signal); stroke-width: 1.8; }
.marker .pulse { fill: none; stroke: var(--signal); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ringpulse 2.6s var(--ease) infinite; }
@keyframes ringpulse { 0% { opacity: .6; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.3); } }

/* anchored popover: points at the part that opened it (feedback item 6) */
.pop.closing { pointer-events: none; }
.pop {
  position: absolute; z-index: 20; width: 380px; padding: 22px 24px 20px;
  background: var(--surface); border-radius: 14px; box-shadow: var(--pop-shadow), inset 0 0 0 1px var(--line);
  transform-origin: var(--ox, 50%) var(--oy, 0);
}
.pop::before {
  content: ''; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; background: var(--surface);
  transform: translateX(-50%) rotate(45deg); box-shadow: inset 1px 1px 0 var(--line);
}
.pop.below::before { top: -7px; }
.pop.above::before { bottom: -7px; box-shadow: inset -1px -1px 0 var(--line); }
.pop.right::before, .pop.left::before { left: auto; top: var(--ay, 50%); transform: translateY(-50%) rotate(45deg); }
.pop.right::before { left: -7px; box-shadow: inset 1px -1px 0 var(--line); }
.pop.left::before { right: -7px; box-shadow: inset -1px 1px 0 var(--line); }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pop-head h3 { font-size: 22px; line-height: 1.25; }
.pop-head .mono { display: block; margin-bottom: 4px; }
.pop-x { width: 44px; height: 44px; margin: -10px -12px 0 0; border-radius: 10px; display: grid; place-items: center; color: var(--t2); flex: none; }
.pop-x:hover { background: var(--fill7); color: var(--t1); }
.pop-x svg, .tray-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.why dl { margin: 0; }
.why dt { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-top: 14px; }
.why dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--t1); }
.why .run { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.why .run i { width: 8px; height: 8px; border-radius: 50%; background: var(--t3); flex: none; }
.why .run.is-live i { background: var(--ok); }
.why .run.is-now i { background: var(--signal); }

/* phone: the drawing becomes a list; each part opens inline */
.sys-list { display: none; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sys-list > li { border-bottom: 1px solid var(--line); }
.sys-row { display: grid; grid-template-columns: 76px 1fr 20px; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 10px 0; text-align: left; }
.sys-row svg.th { width: 76px; height: 58px; overflow: visible; }
.sys-row .r-st { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.sys-row .r-st.is-live { color: var(--ok); }
.sys-row .r-st.is-now { color: var(--t1); }
.sys-row .r-st.is-now::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--signal); margin-right: 6px; vertical-align: 0; }
.sys-row b { display: block; font: 500 18px/1.3 var(--body); letter-spacing: -.01em; }
.sys-row .r-out { display: block; font-size: 16px; color: var(--t2); line-height: 1.4; }
.sys-row .chev { width: 20px; height: 20px; fill: none; stroke: var(--t3); stroke-width: 1.8; transition: transform .3s var(--ease); }
.sys-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.sys-detail { overflow: hidden; }
.sys-detail .why { padding: 0 0 18px; }
.sys-detail .why dt:first-child { margin-top: 0; }

/* ------------------------------------------------------------ updates */
.page-head { margin-bottom: 36px; }
.page-head .mono { display: block; margin-bottom: 12px; }
.page-head h1 { font-size: 44px; line-height: 1.1; }
.page-head p { margin-top: 12px; color: var(--t2); max-width: 36em; }
.week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: -8px 0 36px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--t2); }
.week .mono { font-size: 12px; }
.wk b { font-weight: 500; color: var(--t1); font-variant-numeric: tabular-nums lining-nums; }
.roll { display: inline-flex; position: relative; font-variant-numeric: tabular-nums lining-nums; }
.roll .rd { display: inline-block; height: 1.05em; overflow: hidden; }
.roll > span { line-height: 1.05em; }
.roll .rc { display: flex; flex-direction: column; transition: transform .9s var(--ease); }
.roll .rc span { height: 1.05em; line-height: 1.05em; }
.day + .day { margin-top: 28px; }
/* -.01em, not the .08em of other mono labels: in round 4 the h2 rule's tracking won here. Kept for parity. */
.day-h { font: 500 13px/1.4 var(--mono); letter-spacing: -.01em; text-transform: uppercase; color: var(--t3); padding-bottom: 8px; }
.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.also { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line2); font-size: 16px; color: var(--t2); }
.also li { display: flex; align-items: center; gap: 10px; }
.also .ev-dot, .ev-dot-col .ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.ev-dot-col { justify-self: center; align-self: start; padding-top: 10px; }
.ev-lines { list-style: none; margin: 0; padding: 0; }
.feed > li { border-bottom: 1px solid var(--line); }
.note { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 26px 0; }
.note .av { width: 44px; height: 44px; font-size: 13px; }
.note-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.note-head b { font-weight: 500; }
.note-head .when { color: var(--t3); font-size: 16px; }
.note-head .new { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-signal); background: var(--signal); padding: 2px 8px; border-radius: 4px; display: none; }
.note.is-fresh .new { display: inline-block; }
.note h3 { font-size: 22px; line-height: 1.3; margin: 6px 0 6px; }
.note p { color: var(--t2); max-width: 38em; }
.event { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start; padding: 16px 0; font-size: 17px; color: var(--t2); }
.event .ev-dot { justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.event .when { color: var(--t3); font-size: 15px; font-family: var(--mono); }

/* ------------------------------------------------------------ requests */
.sec-h { font-size: 24px; line-height: 1.25; margin-bottom: 12px; }
.needs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.need { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.need-meta { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 14px; }
.ntag { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--t2); }
.ntag .ico svg { width: 16px; height: 16px; }
.wait { font-size: 14px; color: var(--t3); }
.need .need-meta { margin: 0 0 8px; }
.need-title { font: 500 22px/1.3 var(--body); letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; }
.need-check { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); display: grid; place-items: center; flex: none; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.need-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.need:not(.is-done) .need-check { display: none; }
.need.is-done .need-check { background: var(--ok); box-shadow: none; }
.need.is-done .need-check svg { opacity: 1; transform: none; }
.need.is-changed .need-check, .ask-row.is-changed .need-check { background: var(--t3); }
.btn.done:is(.is-changed *) { color: var(--t2); }
.need.is-done .need-title { color: var(--t2); }
.need-open, .need-closed { margin-left: 0; }
.need.is-done .need-open { display: none; }
.need-closed { display: none; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.need.is-done .need-closed { display: flex; }
.done-note { color: var(--t2); font-size: 17px; }
.need-detail { margin-top: 4px; color: var(--t2); max-width: 36em; }
.need-body { margin-top: 16px; max-width: 640px; }
.need-body:empty { display: none; }
.need-actions { margin-top: 18px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.need-actions:empty { display: none; }
.never { margin-top: 10px; font-size: 15px; color: var(--t3); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.sn { width: 26px; height: 26px; border-radius: 50%; background: var(--fill7); display: grid; place-items: center; flex: none; font: 500 13px var(--mono); margin-top: 1px; }
.invite { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.invite code { font: 500 16px var(--mono); padding: 7px 12px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); }
.preview-text { padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-width: 30em; font-size: 17px; }
.preview-text .mono { display: block; margin-bottom: 4px; font-size: 12px; }
.rec { white-space: nowrap; display: inline-block; font: 500 11px var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--t2); background: var(--fill7); padding: 3px 7px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tick { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line2); cursor: pointer; font-size: 17px; }
.tick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--t1); }
.tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--t1); flex: none; }
.drop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 14px; border: 1.5px dashed var(--line2); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.drop:hover, .drop.is-over { background: var(--fill4); border-color: var(--t3); }
.drop:focus-within { outline: 2px solid var(--signal); outline-offset: 3px; }
.drop-row { display: flex; align-items: center; gap: 14px; }
.drop-row .ico svg { width: 28px; height: 28px; }
.drop b { display: block; font-weight: 500; }
.drop small { display: block; color: var(--t3); font-size: 15px; }
.change-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.change-form[hidden] { display: none; }
.change-form label { font-weight: 500; }
.undo { font-size: 15px; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 4px; visibility: hidden; }
.need.is-done .undo { visibility: visible; }

.ask { margin-top: 56px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { font-size: 28px; line-height: 1.2; }
.section-head p { color: var(--t2); margin-top: 6px; }
.ask-form { overflow: hidden; }
.ask-form-inner { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.ask-form label { font-weight: 500; font-size: 18px; }
.ask-form .hint { color: var(--t2); font-size: 16px; margin-top: -8px; }
.field {
  width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 10px; border: 0;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line2); font-size: 18px; line-height: 1.5;
  transition: box-shadow .2s var(--ease); resize: vertical;
}
.field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--t1), 0 0 0 4px var(--signal-t2); }
.field.has-error { box-shadow: inset 0 0 0 2px #c8321c; }
.error { color: #b42a17; font-weight: 500; font-size: 17px; }
:root[data-theme="dark"] .error { color: #ff8a70; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { min-height: 48px; padding: 0 18px; border-radius: 24px; box-shadow: inset 0 0 0 1.5px var(--line2); font-size: 17px; color: var(--t2); transition: background-color .2s, color .2s, box-shadow .2s; }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); box-shadow: none; }
.form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-row > .field { flex: 1 1 160px; min-width: 0; }
/* Clients page: New client sits beside the layout switch. */
.head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* New client: the plan the template makes, phase by phase. Build steps are the part that changes. */
.nc-headline { font: 400 24px/1.25 var(--display); margin: 12px 0 20px; }
.nc-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.nc-plan > li > .mono { display: block; font-size: 12px; margin-bottom: 4px; }
.nc-plan ol { margin: 0; padding-left: 20px; color: var(--t2); font-size: 16px; }
.nc-plan .is-build { color: var(--t1); }
.my-reqs { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.my-req { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.r-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
.my-req .r-title { font-weight: 500; }
.my-req .r-sub { color: var(--t3); font-size: 15px; }
/* Sent -> We're on it -> Done. Past steps are filled ink, the current one has the orange ring. */
.rtrack { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs { position: relative; padding: 30px 12px 0 0; }
.rs::before { content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: var(--line2); }
.rs:last-child::before { display: none; }
.rs.is-past::before { background: var(--t1); }
.rs i { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line2); display: grid; place-items: center; z-index: 1; }
.rs i svg { width: 12px; height: 12px; fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.rs.is-past i { background: var(--t1); box-shadow: none; }
.rs.is-past i svg { opacity: 1; }
.my-req.is-done .rs i { background: var(--ok); }
.my-req.is-done .rs::before { background: var(--ok); }
.rs.is-now i { box-shadow: inset 0 0 0 2px var(--signal); background: radial-gradient(circle, var(--signal) 0 4px, var(--bg) 4.5px); }
.rs b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--t3); }
.rs.is-past b, .rs.is-now b { color: var(--t1); }
.rs span { display: block; font-size: 14px; line-height: 1.35; color: var(--t3); margin-top: 2px; }

/* ------------------------------------------------------------ your system (handoff view) */
.sys-frame.big { margin: 0 0 24px; }
.pdocs { list-style: none; margin: 0; padding: 0; }
.pdoc { padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; border-radius: 4px; }
.pdoc.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0% { background: var(--signal-t); } 100% { background: transparent; } }
.pdoc-head { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; }
.pdoc-head svg.th { width: 96px; height: 72px; overflow: visible; }
.pdoc-head h2 { font-size: 26px; line-height: 1.2; margin-top: 2px; }
.pdoc .r-st { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.pdoc .r-st.is-live { color: var(--ok); }
.pdoc .r-st.is-now { color: var(--t1); }
.pdoc .r-out { color: var(--t2); font-size: 17px; }
.pdoc-dl { margin: 20px 0 0 116px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.pdoc-dl dt { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.pdoc-dl dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.pdoc-dl dd b { font-weight: 500; }
.t2 { color: var(--t2); }
.docs { list-style: none; margin: 0; padding: 0; }
.doc { display: inline-flex; min-height: 32px; align-items: center; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* the "new update" notice: anchored to the Updates nav item, never rising from the bottom */
.notice {
  position: fixed; z-index: 60; width: 340px; padding: 16px 16px 14px 18px;
  background: var(--surface); border-radius: 14px; box-shadow: var(--pop-shadow), inset 0 0 0 1px var(--line);
  transform-origin: 0 50%;
}
.notice::before { content: ''; position: absolute; left: -7px; top: 22px; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); box-shadow: inset 1px -1px 0 var(--line); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.notice .mono { display: block; font-size: 12px; margin-bottom: 4px; }
.notice p { font-size: 17px; line-height: 1.4; }
.notice .row { display: flex; gap: 8px; margin-top: 12px; }
.notice .row { align-items: center; gap: 16px; }

/* ------------------------------------------------------------ onboarding (GOV.UK question pages) */
.onb { position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; display: flex; flex-direction: column; }
.onb[hidden] { display: none; }
.onb-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; border-bottom: 1px solid var(--line); }
.onb-client { color: var(--t2); font-size: 16px; }
.onb-stage { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px 80px; }
.onb-frame {
  width: 100%; max-width: 780px; background: var(--surface); border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; position: relative;
}
.onb-inner { padding: 40px 64px 56px; }
.onb-nav { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 28px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px; font-size: 17px; color: var(--t1); text-decoration: underline; text-underline-offset: 4px; }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.caption { font-size: 18px; color: var(--t3); margin-bottom: 8px; }
.onb h1 { font-size: 44px; line-height: 1.12; max-width: 15em; }
.onb .hint { margin-top: 14px; color: var(--t2); font-size: 19px; max-width: 32em; }
.onb-body { margin-top: 32px; }
.onb-actions { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.onb .error-box { margin-top: 20px; padding: 14px 18px; border-left: 4px solid #c8321c; background: rgba(200, 50, 28, .06); border-radius: 4px; font-size: 18px; }

.connect { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line2); }
.connect .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--fill7); display: grid; place-items: center; flex: none; }
.connect .ico svg { width: 24px; height: 24px; fill: none; stroke: var(--t1); stroke-width: 1.6; stroke-linejoin: round; }
.connect b { display: block; font-weight: 500; font-size: 19px; }
.connect small { display: block; color: var(--t3); font-size: 16px; }
.connect .btn { margin-left: auto; }

.radios { display: flex; flex-direction: column; gap: 12px; }
.radio { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line2); cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.radio:hover { background: var(--fill4); }
.radio input { appearance: none; width: 28px; height: 28px; margin: 0; border-radius: 50%; border: 2px solid var(--t1); flex: none; display: grid; place-items: center; background: var(--surface); cursor: pointer; }
.radio input::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--t1); transform: scale(0); transition: transform .2s var(--ease); }
.radio input:checked::after { transform: scale(1); }
.radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--t1); }
.radio input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.radio b { display: block; font-weight: 500; font-size: 19px; line-height: 1.35; }
.radio small { display: block; color: var(--t2); font-size: 17px; }

.people { list-style: none; margin: 0 0 20px; padding: 0; }
.people li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.people li:first-child { border-top: 1px solid var(--line); }
.people .av { width: 40px; height: 40px; }
.people b { font-weight: 500; }
.people small { display: block; color: var(--t3); font-size: 16px; }
.people .remove { margin-left: auto; }
.add-row { display: flex; gap: 12px; }
.add-row .field { flex: 1; }

.summary { margin: 0; border-top: 1px solid var(--line); }
.summary > div { display: grid; grid-template-columns: 180px 1fr auto; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.summary dt { font-weight: 500; }
.summary dd { margin: 0; color: var(--t2); }

/* ------------------------------------------------------------ phone */
@media (max-width: 820px) {
  body { font-size: 18px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "main" "foot"; }
  .sidebar { display: contents; }
  .sidebar .brand { grid-area: brand; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
  .sidebar .brand::after { content: attr(data-client); margin-left: auto; font: 400 15px var(--body); color: var(--t3); letter-spacing: 0; }
  .client { display: none; }
  /* Bottom tab bar: the three core places plus Your system, in thumb reach, above the home bar. */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 0 2px; font-size: 13px; border-radius: 0; }
  .nav a .nl { white-space: nowrap; }
  .nav .badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; }
  .nav-hl { top: 0; left: 0; right: auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--signal); }
  .nav-hl::before { display: none; }
  .main { grid-area: main; }
  .side-foot { grid-area: foot; padding: 24px 16px 32px; border-top: 1px solid var(--line); }
  .view { padding: 24px 16px 48px; }

  /* Journey on phone: what we need comes right after the status line. */
  .home { display: flex; flex-direction: column; }
  .home > h1 { order: 1; font-size: 30px; }
  .home .status { order: 2; }
  .home .home-needs { order: 3; margin-top: 20px; }
  .home .sys-block { order: 4; margin-top: 28px; }
  .home .latest { order: 5; }
  .status-row, .track { display: none; }
  .track-m { display: block; }
  .tm-line { font-size: 19px; color: var(--t2); }
  .tm-line b { color: var(--t1); font-weight: 600; }
  .tm-bar { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; gap: 3px; width: 140px; }
  .tm-bar li { flex: 1; height: 5px; border-radius: 2px; background: var(--fill10); }
  .tm-bar .is-done { background: var(--t3); }
  .tm-bar .is-now { background: var(--signal); }
  .tm-sub { font-size: 16px; color: var(--t2); }
  .sys-frame, .sys-hint { display: none; }
  .sys-list { display: block; margin-top: 0; }
  .sys-block .sys-link { display: inline-flex; margin-top: 8px; }
  .needs-head .more-link { display: inline-block; margin: 4px 0 0; }
  .ask-row { grid-template-columns: auto 1fr; gap: 0 12px; }
  .ask-row:not(.is-done) .need-check { display: none; }
  .ask-row:not(.is-done) { grid-template-columns: minmax(0, 1fr); }
  .ask-row .need-actions { margin-top: 16px; }
  .ask-row { align-items: start; }
  .ask-row .need-actions { grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
  .ask-row .undo { order: 1; display: none; }
  .ask-row.is-done .undo { display: inline-block; }
  .needs-head h2 { font-size: 22px; }
  .needs-head p { font-size: 16px; }
  .latest { display: grid; gap: 2px; }
  .latest .t3 { display: block; margin: 0; }
  .week { flex-direction: column; gap: 2px; margin-top: -12px; }
  .page-head h1 { font-size: 32px; }
  /* Full-width primary buttons on phone. */
  .need-actions .btn, .ask-row .btn, .onb-actions .btn, .connect .btn, .form-row .btn, .section-head .btn, .drop .btn { width: 100%; }
  .need .need-meta, .need-open, .need-closed { margin-left: 0; }
  .need-actions { flex-direction: column; align-items: stretch; }
  .need-actions .link-btn { justify-content: center; }
  .ticks { grid-template-columns: 1fr; }
  .rs { padding-right: 8px; }
  .pdoc-head { grid-template-columns: 76px 1fr; gap: 14px; }
  .pdoc-head svg.th { width: 76px; height: 58px; }
  .pdoc-head h2 { font-size: 22px; }
  .pdoc-dl { margin-left: 0; grid-template-columns: 1fr; gap: 16px; }
  .onb-top { padding: 16px; }
  .onb-stage { padding: 16px 12px 40px; }
  .onb-inner { padding: 20px 20px 32px; }
  .onb h1 { font-size: 32px; }
  .onb .hint { font-size: 18px; }
  .connect { flex-wrap: wrap; }
  .connect .btn { margin-left: 0; }
  .summary > div { grid-template-columns: 1fr auto; }
  .summary dd { grid-column: 1 / 2; }
  .summary > div > :last-child { grid-row: 1; grid-column: 2; }
  .add-row { flex-direction: column; }
  .notice { left: 12px !important; right: 12px; top: auto !important; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
  .notice::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}



/* ============================================================ admin components
   Added for the admin (admin-2) in the language above: hairline rows instead of boxed cards,
   mono labels, 18px body, scale B buttons, and Signal only where it is earned (the one next
   action per view, a promise we are late on, the nav highlight, focus). None of it is
   admin-only by necessity: the client portal can use any of these. */

.t1 { color: var(--t1); }
.muted { color: var(--t3); }
.empty { color: var(--t3); padding: 24px 0; }
.foot-note { margin-top: 40px; font-size: 15px; color: var(--t3); max-width: 70ch; }
body.modal-open, body.vac-open { overflow: hidden; }

/* Phosphor icons are filled shapes; the round-4 stroke rule for svgs in buttons must not reach them. */
.btn .ico svg, .link-btn .ico svg, .never .ico svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
/* .ink is also the drawing's ink layer (.ink path), which would hollow out an icon in a .btn.ink. */
.btn .ico path { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ keys and the command button */
.kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2), inset 0 -1.5px 0 var(--line2);
  font: 500 12px/1 var(--mono); color: var(--t3);
}
.btn .kbd, .seg .kbd { margin-left: 4px; background: transparent; }
.btn.signal .kbd, .btn.ink .kbd { color: inherit; box-shadow: inset 0 0 0 1px currentColor; opacity: .55; }
.cmd-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--b-md); padding: 0 10px 0 14px; border-radius: 10px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--t3); font-size: 16px; text-align: left;
  transition: box-shadow .2s var(--ease);
}
.cmd-btn:hover { box-shadow: inset 0 0 0 1.5px var(--t3); }
.cmd-l { flex: 1; }
/* Superhuman's strip: the keys that run the admin, always on screen on desktop. */
.keys {
  position: fixed; z-index: 30; left: 272px; right: 0; bottom: 0; display: flex; align-items: center; gap: 24px;
  min-height: 48px; padding: 0 56px; background: var(--bg); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--t3); white-space: nowrap; overflow: hidden;
}
.keys span { display: inline-flex; align-items: center; gap: 8px; }
/* Narrow windows: the strip ran off the right edge. Shortcuts are a big-screen habit; ⌘K stays in the sidebar. */
@media (max-width: 1100px) { .keys { display: none; } .has-keys .view { padding-bottom: 96px; } }
.has-keys .view { padding-bottom: 144px; }
body.vac-open .keys { display: none; }

/* ------------------------------------------------------------ status flags: a dot and a few words */
.flag { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--t2); }
.flag::before { content: ''; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--t3); flex: none; }
.flag.us { color: var(--t1); }
.flag.us::before { background: var(--t1); }
.flag.late { color: var(--t1); }
.flag.late::before { background: var(--signal); }
.flag.them { color: var(--t3); }
.flag.them::before { background: var(--line2); }
.flag.ok { color: var(--t3); }
.flag.ok::before { background: var(--ok); }

/* ------------------------------------------------------------ client list */
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.page-head-row .seg { min-width: 220px; }
.toolbar { margin: -8px 0 40px; }
.chip .num { margin-left: 8px; color: var(--t3); }
.chip[aria-pressed="true"] .num { color: inherit; opacity: .7; }

/* Triage: groups like the client's "We need two things from you", rows like its asks. */
.group + .group { margin-top: 48px; }
.group-head { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.group-head h2 { font-size: 26px; line-height: 1.2; display: flex; align-items: center; gap: 12px; }
.group-head h2 .num { font: 500 15px var(--mono); color: var(--t3); }
.group-head.is-us h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--signal); flex: none; }
.group-head p { color: var(--t2); font-size: 17px; }
.crows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 20px 0 22px; border-bottom: 1px solid var(--line); cursor: pointer; }
.crow .need-meta { margin-bottom: 4px; }
.crow-name { display: inline-block; font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--t1); text-decoration: none; }
.crow:hover .crow-name, .ctable .row:hover .crow-name, .crow-name:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.crow-sub { display: block; color: var(--t2); font-size: 16px; line-height: 1.45; }
.crow-why { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.crow-more { font: 500 12px var(--mono); color: var(--t3); }
.crow-facts { display: flex; flex-wrap: wrap; gap: 2px 24px; margin-top: 6px; font-size: 15px; color: var(--t3); }
.crow .need-actions { margin-top: 0; justify-content: flex-end; }

/* Table: the same rows on one sortable grid. No box: a hairline under every row, mono headers. */
.sortnote { display: flex; align-items: center; gap: 12px; margin: -16px 0 12px; font-size: 15px; color: var(--t3); }
.sortnote b { font-weight: 500; color: var(--t1); }
.sortnote .link-btn { font-size: 15px; }
.sort-sel { display: none; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable th { text-align: left; padding: 0 16px 8px 0; border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); white-space: nowrap; vertical-align: bottom; }
.ctable th button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.ctable th button:hover, .ctable th button.on { color: var(--t1); }
.ctable th .ico svg { width: 14px; height: 14px; }
.ctable td { padding: 18px 16px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; line-height: 1.45; color: var(--t2); }
.ctable th:last-child, .ctable td:last-child { padding-right: 0; }
.ctable td small { display: block; font-size: 15px; color: var(--t3); margin-top: 2px; }
.ctable td .crow-why { margin-top: 8px; }
.ctable .big { font-size: 18px; font-weight: 500; color: var(--t1); }
.ctable .row { cursor: pointer; }
.ctable .c-name { width: 34%; }
.ctable .c-own { width: 48px; }

/* ------------------------------------------------------------ client workspace */
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-top: 16px; }
.ws-id { min-width: 0; }
.ws-head h1 { font-size: 44px; line-height: 1.1; }
.ws-meta { margin-top: 8px; color: var(--t2); font-size: 17px; }
.ws-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-status { margin-top: 28px; }
.steps-bar { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 3px; }
.steps-bar li { flex: 1; height: 5px; border-radius: 2px; background: var(--fill10); }
.steps-bar .is-done { background: var(--t3); }
.steps-bar .is-now { background: var(--signal); }
.reasons { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 24px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ws-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; margin-top: 40px; align-items: start; }
.ws-main { min-width: 0; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
/* Mid widths (laptop windows, split screens): the 280px side panel squeezed the work column and the
   tab labels, which never wrap, spilled into it. Below 1200px the side panel moves under the work,
   and the tab row scrolls sideways instead of overflowing (Teegan, 2026-10-11). */
@media (max-width: 1200px) {
  .ws-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 17px; font-weight: 500; color: var(--t2);
  text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.tab:hover { color: var(--t1); }
.tab[aria-current] { color: var(--t1); box-shadow: inset 0 -2px 0 var(--t1); }
.tab .num { font: 500 13px var(--mono); color: var(--t3); }
.tab .badge { margin-left: 0; }

/* side panel: mono labels and hairlines, no boxes */
.ws-side { display: flex; flex-direction: column; gap: 36px; }
.side-sec > .mono { display: block; margin-bottom: 10px; font-size: 12px; }
.side-people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.side-people li { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.side-people b { display: block; font-weight: 500; }
.side-people small { display: block; font-size: 15px; line-height: 1.45; color: var(--t3); overflow-wrap: anywhere; }
.side-people small b { display: inline; }
.side-people .btn { margin-top: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; }
.kv dt { color: var(--t3); }
.kv dd { margin: 0; text-align: right; }
.activity { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.activity li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.activity small { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--t3); }
.via { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--t2); }
.via.terminal { background: var(--btn); color: var(--on-btn); box-shadow: none; }
.av.agent { font-family: var(--mono); background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
.av.is-client { background: var(--fill7); box-shadow: none; }

/* plan */
.plan-head .status-line { margin-bottom: 4px; }
.phase-h { margin: 32px 0 8px; font-size: 12px; }
.steps-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.step { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.step label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 48px; cursor: pointer; }
.step input { width: 20px; height: 20px; margin: 0; accent-color: var(--t1); flex: none; }
.step.is-done .st { color: var(--t3); }
.step.is-now .st { font-weight: 500; }
.st-meta { display: flex; align-items: center; gap: 12px; flex: none; font-size: 15px; color: var(--t3); }
.st-meta .av { width: 30px; height: 30px; font-size: 11px; }
/* the step we're on: the same mark as "Building now" in the client's drawing */
.now-tag { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t1); }
.now-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--signal); }

/* asks and updates */
.fold { margin-top: 24px; }
.fold summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--t2); font-size: 17px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.note.is-draft > div { padding: 16px 20px; margin: -16px 0; border: 1.5px dashed var(--line2); border-radius: 14px; }
.note .need-actions { margin-top: 14px; }
.note-img { display: block; max-width: 320px; max-height: 200px; margin-top: 14px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.note-facts { margin-top: 10px; font: 400 14px/1.5 var(--mono); color: var(--t3); }
.seen { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: 15px; color: var(--t2); }
.seen span { display: inline-flex; align-items: center; gap: 6px; }
.seen .ico svg { width: 16px; height: 16px; color: var(--ok); }
.seen .not { color: var(--t3); }
.agent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 18px 22px; margin-bottom: 20px; border: 1.5px dashed var(--line2); border-radius: 14px; }
.agent-row .need-meta { margin-bottom: 4px; }
.agent-row .need-actions { margin-top: 0; }

/* messages */
.thread { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.msg .av { width: 44px; height: 44px; font-size: 13px; }
.msg p { color: var(--t1); max-width: 38em; }
.msg .note-head { margin-bottom: 4px; }
.msg.is-note > div { padding: 14px 18px; margin: -14px 0; border: 1.5px dashed var(--line2); border-radius: 14px; background: var(--fill4); }
.note-tag { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; color: var(--t3); }
.note-tag .ico svg, .who .ico svg { width: 16px; height: 16px; }
.waitline { margin-bottom: 16px; }
.composer { display: flex; flex-direction: column; gap: 12px; }
.composer-top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.composer-top .seg { min-width: 320px; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--t2); }
.composer .field { resize: vertical; }
.composer.is-note .field { box-shadow: none; border: 1.5px dashed var(--t3); background: var(--fill4); }
.composer.is-note .field:focus { border-color: var(--t1); box-shadow: 0 0 0 4px var(--signal-t2); }
.composer-foot { justify-content: space-between; font-size: 15px; }

/* ------------------------------------------------------------ drafts from agents */
.trust { flex-wrap: nowrap; gap: 12px; align-items: flex-start; margin: -8px 0 32px; }
.trust > span:last-child { flex: 1; }
.trust .ico svg { width: 20px; height: 20px; color: var(--ok); }
.need-title a { color: inherit; text-decoration: none; }
.need-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.need-title .ntag { margin-left: 4px; }
/* A frame around the client's own component, so a preview reads as "this is their screen". */
.preview { margin-top: 12px; padding: 0 24px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); max-width: 760px; }
.preview .feed, .preview .needs { border-top: 0; }
.preview .feed > li, .preview .needs > li { border-bottom: 0; }
.dcard .never { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.handled { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.handled li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }

/* ------------------------------------------------------------ one door */
.door-last { margin-bottom: 48px; }
.door-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.door-3 > div { min-width: 0; }
.door-3 .mono { display: block; margin-bottom: 10px; font-size: 12px; }
.code { display: block; font: 400 14px/1.6 var(--mono); background: var(--btn); color: var(--on-btn); padding: 12px 14px; border-radius: 10px; overflow-wrap: anywhere; }
.code.wrap { word-break: break-all; background: var(--surface); color: var(--t1); box-shadow: inset 0 0 0 1px var(--line2); margin-bottom: 12px; }
.door-table code { font: 400 14px/1.5 var(--mono); color: var(--t2); overflow-wrap: anywhere; }
.door-table td:nth-child(3) code { white-space: nowrap; }
.allow { display: inline-block; margin: 2px 0; padding: 4px 7px; border-radius: 4px; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line2); color: var(--t2); white-space: nowrap; }
.allow.by-agent { background: var(--fill7); box-shadow: none; }
.allow.by-client { box-shadow: inset 0 0 0 1px var(--t3); color: var(--t1); }

/* ------------------------------------------------------------ modals: the onboarding frame, centred */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px; box-shadow: var(--pop-shadow), inset 0 0 0 1px var(--line);
}
.modal.wide { width: min(1120px, calc(100vw - 48px)); }
.modal.narrow { width: min(600px, calc(100vw - 48px)); }
.m-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 28px 32px 12px; }
.m-head .mono { display: block; margin-bottom: 6px; font-size: 12px; }
.m-head h2 { font-size: 32px; line-height: 1.15; }
.m-head .pop-x { margin: -6px -10px 0 0; }
.m-body { padding: 12px 32px 28px; overflow-y: auto; flex: 1 1 auto; }
.m-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; flex: 1 1 auto; border-top: 1px solid var(--line); }
.m-split .m-body { padding-top: 24px; }
.m-preview { background: var(--bg); border-left: 1px solid var(--line); padding: 24px 32px; overflow-y: auto; }
.m-preview > .mono { display: block; font-size: 12px; }
.m-preview .preview { background: var(--surface); }
.m-preview .never, .m-body > .never { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.m-foot { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 18px 32px 24px; border-top: 1px solid var(--line); }
.m-foot .grow { flex: 1; }
.form { display: flex; flex-direction: column; gap: 24px; }
/* Rows in a form never shrink. Inside a scrolling dialog, a flex column squeezes its rows down to their
   minimum height when the content is taller than the dialog; the tick box's hint then spilled out of it.
   With no shrinking, the dialog scrolls instead. */
.form > * { flex-shrink: 0; }
.form .caption { margin: 0 0 -8px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-field > span, .form-field > legend { font-weight: 500; font-size: 18px; padding: 0; margin-bottom: 8px; }
.form-field > span { margin-bottom: 0; }
.form-field small { font-weight: 400; font-size: 16px; color: var(--t3); }
.form .hint { margin-top: -12px; color: var(--t2); font-size: 16px; }
.field.short { width: 120px; flex: none; }
select.field { cursor: pointer; }
.due-row { color: var(--t2); }
.due-row b { font-weight: 500; color: var(--t1); }
.tick.tall { align-items: flex-start; padding: 14px 16px; }
.tick.tall input { margin-top: 3px; }
.tick b { display: block; font-weight: 500; }
.tick small { display: block; font-size: 16px; color: var(--t2); }
.file-pick { justify-content: flex-start; gap: 14px; padding: 16px 18px; }
.file-pick .ico svg { width: 24px; height: 24px; }
.file-pick small { display: block; color: var(--t3); font-size: 15px; }
.img-row { display: flex; align-items: center; gap: 14px; }
.img-row img { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin: 0 0 16px; border-radius: 12px; background: var(--fill4); font-size: 16px; color: var(--t2); }
.banner .ico { margin-top: 3px; }
.banner .ico svg { width: 18px; height: 18px; }
.confirm { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; }
.confirm .ico svg { width: 22px; height: 22px; color: var(--ok); }
.code-row { margin-top: 12px; }

/* ------------------------------------------------------------ command menu (Cmd or Ctrl + K) */
#palette .scrim { z-index: 70; }
.pal { position: fixed; z-index: 71; left: 50%; top: 12vh; transform: translateX(-50%); width: min(660px, calc(100vw - 24px)); background: var(--surface); border-radius: 14px; box-shadow: var(--pop-shadow), inset 0 0 0 1px var(--line); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); color: var(--t3); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 19px; color: var(--t1); }
.pal-back svg { width: 14px; height: 14px; }
.pal-list { list-style: none; margin: 0; padding: 8px; max-height: min(52vh, 480px); overflow-y: auto; }
.pal-sec { padding: 14px 14px 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.pal-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-size: 17px; }
/* The name never gets cut before the hint does. */
.pal-item > span { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item small { flex: 1; min-width: 0; font-size: 15px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pal-item .kbd { margin-left: auto; }
.pal-item small + .kbd { margin-left: 0; }
/* The selected row looks like the current nav item: a Signal tint and a short Signal bar. */
.pal-item[aria-selected="true"] { background: var(--signal-t); }
.pal-item[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--signal); }
.pal-empty { padding: 20px 14px; color: var(--t3); }
.pal-foot { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--t3); }
.pal-foot span { display: inline-flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------ toasts: the notice card, top right */
.toasts { position: fixed; z-index: 75; top: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; width: min(400px, calc(100vw - 32px)); padding: 16px 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--pop-shadow), inset 0 0 0 1px var(--line); font-size: 17px; line-height: 1.45; }
.toast code { display: block; margin-top: 8px; font: 400 13px/1.5 var(--mono); color: var(--t3); overflow-wrap: anywhere; }
.toast .btn { margin-top: 12px; }
body.vac-open .toasts { top: 80px; }

/* ------------------------------------------------------------ view as client: an ink bar over the real portal */
.vac { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); }
.vac-bar { flex: none; display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; min-height: 64px; padding: 8px 20px; background: var(--btn); color: var(--on-btn); font-size: 16px; }
.vac-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vac-who select { min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--on-btn) 14%, transparent); color: inherit; font-size: 16px; }
.vac-who select option { color: var(--t1); background: var(--surface); }
.vac-co { opacity: .7; }
.vac-ro { display: inline-flex; align-items: center; gap: 8px; opacity: .85; }
.vac-bar .ico svg { width: 18px; height: 18px; }
.vac-seg { margin-left: auto; background: color-mix(in srgb, var(--on-btn) 14%, transparent); }
.vac-seg button { color: inherit; padding: 0 14px; display: inline-grid; place-items: center; }
.vac-seg button[aria-pressed="true"] { background: var(--on-btn); color: var(--btn); box-shadow: none; }
.vac-x { background: var(--bg); color: var(--t1); }
.vac-x:hover { background: var(--surface); }
/* The ribbon sits under the bar's right end and stays put while the page scrolls. */
.vac-ribbon { position: fixed; z-index: 3; right: 0; top: var(--vacbar, 64px); width: 150px; height: 150px; overflow: hidden; pointer-events: none; }
.vac-ribbon span { position: absolute; top: 34px; right: -46px; width: 220px; transform: rotate(45deg); background: var(--signal); color: var(--on-signal); text-align: center; font: 600 13px/1 var(--body); padding: 9px 0; }
.vac-stage { flex: 1; min-height: 0; display: flex; justify-content: center; }
.vac-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.vac.phone .vac-stage { padding: 28px 16px; overflow: auto; }
.vac.phone iframe { flex: none; width: 390px; height: 844px; max-height: 100%; border-radius: 28px; box-shadow: var(--pop-shadow), 0 0 0 1px var(--line2); }

/* ------------------------------------------------------------ admin components on phone */
@media (max-width: 820px) {
  .sidebar .cmd-btn { grid-area: brand; justify-self: end; align-self: center; width: 44px; min-height: 44px; margin-right: 12px; padding: 0; justify-content: center; }
  .sidebar:has(.cmd-btn) .brand { padding-right: 72px; }
  .cmd-l, .cmd-btn .kbd { display: none; }
  .keys { display: none; }
  .has-keys .view { padding-bottom: 48px; }
  .page-head-row .seg { width: 100%; }
  /* Filters scroll sideways in one row on phone instead of stacking three rows deep. */
  .toolbar { margin: -8px -16px 32px; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .toolbar .chip { flex: none; }
  .group-head h2 { font-size: 22px; }
  .group-head p { font-size: 16px; }
  .crow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sortnote { display: none; }
  .sort-sel { display: flex; align-items: center; gap: 12px; margin: -16px 0 16px; color: var(--t3); font-size: 16px; }
  .sort-sel .field { min-height: 48px; padding: 8px 12px; font-size: 17px; }
  .ctable, .ctable tbody, .ctable tr, .ctable td { display: block; }
  .ctable thead { display: none; }
  .ctable tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
  .ctable tbody { border-top: 1px solid var(--line); }
  .ctable td, .ctable td.c-name, .ctable td.c-own { padding: 0; border: 0; width: auto; }
  .ctable td.c-name { grid-column: 1 / -1; padding-right: 44px; }
  .ctable td.c-own { position: absolute; top: 18px; right: 0; }
  .ctable td:not(.c-name):not(.c-own)::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
  .door-table tr { grid-template-columns: 1fr; }
  .door-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
  .ws-head h1 { font-size: 32px; }
  .ws-actions { width: 100%; }
  .ws-actions .btn { flex: 1 1 auto; }
  .ws-actions .kbd, .section-head .kbd, .composer .kbd { display: none; }
  .ws-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tabs { gap: 0; margin-bottom: 24px; }
  .tab { flex: 1 1 auto; justify-content: center; gap: 4px; font-size: 15px; }
  .pm-l { display: none; }
  .agent-row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .composer-top .seg { min-width: 0; width: 100%; }
  .door-3 { grid-template-columns: minmax(0, 1fr); }
  .preview { padding: 0 16px; }
  .modal, .modal.wide, .modal.narrow { left: 0; top: 0; transform: none; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .m-head, .m-body, .m-foot, .m-preview { padding-left: 16px; padding-right: 16px; }
  .m-head h2 { font-size: 26px; }
  .m-split { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .m-split .m-body { overflow: visible; }
  .m-preview { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .m-foot .btn { flex: 1 1 100%; }
  .m-foot .grow { display: none; }
  .m-foot .link-btn { margin: 0 auto; }
  .pal { top: 8px; }
  .pal-item .kbd, .pal-foot span:not(:last-child) { display: none; }
  .toasts { top: auto; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { width: auto; }
  .vac-lbl, .vac-co, .vac-seg, .vac-ribbon { display: none; }
  .vac-bar { gap: 8px 12px; box-shadow: inset 0 -3px 0 var(--signal); padding-bottom: 12px; }
  .vac-x { margin-left: auto; }
  .vac-ro { order: 3; width: 100%; }
  .vac.phone .vac-stage { padding: 0; }
  .vac.phone iframe { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}


/* ===================================================================== round-6 design (2026-10-11)
   Carried over from ../round-6/styles.css so the admin and the client portal show the same, newest
   design. Later rules here win over the round-4 originals above. */
/* The latest title opens the update in a pop-up: it looks like text with a quiet underline. */
.latest { position: relative; }
.latest-open { font: inherit; color: var(--t1); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.latest-open:hover { text-decoration-color: var(--t2); }
.pop.latest-pop { width: 420px; max-width: calc(100vw - 32px); }
.latest-body { margin: 0; font-size: 17px; line-height: 1.55; color: var(--t1); }
.latest-checks { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--t2); }
.latest-checks li { padding: 2px 0; }

/* Rolling digits. Each digit row must be a WHOLE number of pixels tall: at 1.05em (16.8px) every
   column was shifted by a fraction of a pixel, the browser rounded each column differently, and a
   "1" could sit a hair lower than the "2" beside it. round() snaps the row height to whole pixels,
   so the 10% shifts in app.js land on whole pixels too. */
.roll { --dh: round(1.05em, 1px); display: inline-flex; position: relative; font-variant-numeric: tabular-nums lining-nums; }
.roll .rd { display: inline-block; height: var(--dh); overflow: hidden; }
.roll > span { line-height: var(--dh); }
.roll .rc { display: flex; flex-direction: column; transition: transform .9s var(--ease); }
.roll .rc span { height: var(--dh); line-height: var(--dh); }

.radios { display: flex; flex-direction: column; gap: 8px; max-width: 600px; margin-top: 16px; }
/* Choice block proportions (2026-10-11, Teegan: "sizing is off"). The question leads; options sit one
   step down (17px title, 15px note); the radio is sized to the title's line, not double it; boxes are
   hairline until chosen. Each option still has a tap area well over 44px. */
.radio { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.radio:hover { background: var(--fill4); }
.radio input { appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 50%; border: 1.5px solid var(--t1); flex: none; display: grid; place-items: center; background: var(--surface); cursor: pointer; }
.radio input::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--t1); transform: scale(0); transition: transform .2s var(--ease); }
.radio input:checked::after { transform: scale(1); }
.radio:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--t1); background: var(--surface); }
.radio input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.radio b { display: block; font-weight: 500; font-size: 18px; line-height: 24px; }
.radio small { display: block; color: var(--t2); font-size: 16px; line-height: 24px; margin-top: 2px; }

/* ===================================================================== request family (2026-10-11)
   Every request type shares one anatomy: meta line, title, one-line reason, the type's own body, one
   action. The body is the only part that changes per type, so a new type (sign-off, pick a date,
   photos) only needs a body. Sizes come from the scale in research/scale-and-proportion-2026-10-11.md:
   label 13, small 16 (the floor for older readers), body 18, item title 22 (20 on phone).
   Option boxes (radios, ticks, the text preview, the drop zone) all share one box style. */
:root { --opt-pad: 12px 16px; --opt-r: 12px; --opt-line: inset 0 0 0 1px var(--line2); --opt-on: inset 0 0 0 1.5px var(--t1); }

/* the anatomy, on Requests and on Journey */
.need-meta { font-size: 16px; }
.ntag { font-size: 13px; }
.wait { font-size: 16px; }
.need .need-meta, .ask-text .need-meta { margin: 0 0 6px; }
.need-title, .ask-text b { font-size: 22px; line-height: 28px; }
.need-detail, .ask-text .ask-sub { font-size: 18px; line-height: 28px; max-width: 36em; margin-top: 4px; }
.need-body { margin-top: 20px; }
.need-actions { margin-top: 20px; }
.never { font-size: 16px; }

/* Journey rows: room around the button, and the button close to the text it answers */
.ask-rows { max-width: 760px; }
.ask-row { padding: 20px 0; gap: 24px; }
.ask-row:not(.is-done) .undo { display: none; }

/* one box style for every option-like thing */
.preview-text { padding: var(--opt-pad); border-radius: var(--opt-r); box-shadow: var(--opt-line); font-size: 18px; line-height: 28px; }
.preview-text .mono { font-size: 13px; }
.tick { min-height: 48px; padding: var(--opt-pad); border-radius: var(--opt-r); box-shadow: var(--opt-line); font-size: 18px; gap: 12px; }
.tick:hover { background: var(--fill4); }
.tick:has(input:checked) { box-shadow: var(--opt-on); background: var(--surface); }
/* the checkbox matches the radio: same 20px, same 1.5px line, square where the radio is round */
.tick input { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 5px; border: 1.5px solid var(--t1); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.tick input::after { content: ''; width: 10px; height: 6px; border: solid var(--surface); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease); }
.tick input:checked { background: var(--t1); }
.tick input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.tick input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.drop { padding: 16px 20px; border-radius: var(--opt-r); border: 1px dashed var(--line2); }
.drop-row .ico svg { width: 24px; height: 24px; }
.drop small { font-size: 16px; }

@media (max-width: 820px) {
  .need-title, .ask-text b { font-size: 20px; }
  .ask-row { padding: 16px 0; }
  .ticks { grid-template-columns: 1fr; }
}

/* Read-only preview inside the admin: no prototype controls, no theme switch. */
.is-preview .proto, .is-preview .seg[aria-label="Colour theme"] { display: none !important; }

/* Admin Today: the "This week" list. Same hairline rows as the client list, laid out as a dated
   agenda (day, client, what, how far off). A date already past reads in the late colour. */
.week-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.week-row { display: grid; grid-template-columns: 112px minmax(140px, 220px) minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 18px; }
.week-row:hover .week-client { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.week-day { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--t3); }
.week-client { font-weight: 500; }
.week-what { color: var(--t2); }
.week-when { font-size: 16px; color: var(--t3); white-space: nowrap; }
.week-row.is-late .week-when { color: var(--signal-ink, #c2410c); }
@media (max-width: 820px) {
  .week-row { grid-template-columns: 1fr auto; }
  .week-day { grid-column: 1 / -1; }
}

/* The onboarding question heading takes focus so screen readers read it; it is not a control, so no focus ring. */
#ob-title:focus { outline: none; }