/* chuffd portal. The chuffd.co palette and fonts, turned down for a working
   tool. See DESIGN.md. "Quiet paper": ink on white, a paper sidebar, flat,
   hairline borders. Ember only for the one primary action and for what needs
   the reader; everything else is ink and warm grey. */
:root {
  color-scheme: light;
  --ink: #1A1510;
  --ink-2: #2E2A24;
  --muted: #514B43;
  --soft: #6B655D;
  --line: #E6E3DD;
  --line-2: #EFEDE9;
  --line-strong: #D3CFC7;
  --page: #F6F5F2;
  --surface: #FFFFFF;
  --surface-2: #F9F8F6;
  --cream: #F6EFE2;
  --ember: #A24F2B;
  --ember-600: #8B4325;
  --ember-tint: #F8EEE8;
  --ember-line: #EBD3C4;
  --ember-deep: #7A3A1E;
  --pine: #2F5D57;
  --pine-600: #244A45;
  --pine-tint: #EDF3F1;
  --pine-line: #CFDFDA;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 4px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  /* Roles that differ between themes; [data-theme="dark"] below remaps them. */
  --side-bg: var(--page);         /* the sidebar and the sign-in panel */
  --side-fg: var(--ink);          /* the active item and names on the sidebar */
  --side-text: var(--muted);      /* inactive items and secondary text on the sidebar */
  --side-line: var(--line);       /* edges and dividers on the sidebar */
  --side-hover: rgba(26, 21, 16, .045);
  --side-active: rgba(26, 21, 16, .075);
  --on-accent: #FFFFFF;           /* text on an ember fill */
  --on-ink: #FFFFFF;              /* text on an ink fill */
  --link: var(--ink);
  --link-hover: var(--ember-600);
  --input-bg: var(--surface);
  --logo-tile: var(--surface);    /* the client logo's backing */
  --chart-bar: var(--line-strong);
  --chart-ooh: var(--soft);
  --logo-bubble: var(--ember);
  --logo-smile: var(--ink);
}

/* ---- Dark theme ----
   chuffd.co's navy and yellow, turned down the same way as light: a near-black
   with only a hint of the navy, warm-free greys, and yellow kept for the one
   primary button and for what needs the reader, exactly where ember is in
   light. The sidebar is a shade darker than the content, as Page is in light.
   A script in the page head sets data-theme on <html> before first paint from
   the visitor's saved choice (localStorage chuffd_theme), then their device
   setting, then light. Only tokens live here; the few component tweaks dark
   needs are near the end of the file. */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEDF1;
  --ink-2: #D4D6DD;
  --muted: #A7AAB5;
  --soft: #888C98;
  --line: #282B34;
  --line-2: #1F222A;
  --line-strong: #383C48;
  --page: #101218;
  --surface: #15171E;
  --surface-2: #1B1E26;
  --cream: #F4F5FA;
  --ember: #F2C14E;
  --ember-600: #F5CD6E;
  --ember-tint: rgba(242, 193, 78, .10);
  --ember-line: rgba(242, 193, 78, .28);
  --ember-deep: #F2C14E;
  --pine: #8CC5BA;
  --pine-600: #A6D3CA;
  --pine-tint: rgba(140, 197, 186, .10);
  --pine-line: rgba(140, 197, 186, .28);
  --side-bg: var(--page);
  --side-fg: var(--ink);
  --side-text: var(--muted);
  --side-line: var(--line);
  --side-hover: rgba(255, 255, 255, .04);
  --side-active: rgba(255, 255, 255, .08);
  --on-accent: #15171E;
  --on-ink: #15171E;
  --link: var(--ink);
  --link-hover: #FFFFFF;
  --input-bg: #121419;
  --logo-tile: #F4F5FA;
  --chart-bar: #383C48;
  --chart-ooh: #A7AAB5;
  --logo-bubble: #ECEDF1;
  --logo-smile: #15171E;
}

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/newsreader-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 15px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
/* A link in running text (no class) is underlined, so it reads as a link without needing colour. */
a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); font-weight: 600; }
a:not([class]):hover { text-decoration-color: currentColor; }
.nav a, .tabs a, .more-menu a { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
::selection { background: var(--ember); color: var(--on-accent); }
h1, h2, h3 { font-weight: 700; }
code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
a.list-row:focus-visible, .list-row .btn:focus-visible, .tabs a:focus-visible, .nav a:focus-visible, table .btn:focus-visible { outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---- Type ---- */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
h1.display { font-size: 26px; }
.h2 { font-weight: 650; font-size: 16px; letter-spacing: -.005em; line-height: 1.35; }
.kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); font-weight: 700; }
.label { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.muted { color: var(--soft); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.serif { font-family: var(--font-serif); font-style: italic; }
.strong { font-weight: 600; }
.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.prose { max-width: 62ch; color: var(--muted); }

/* ---- Brand ---- */
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: inherit; }
.brand:hover { color: inherit; }
.brand svg { width: 22px; height: 22px; flex: none; }
/* The mark is inline SVG with literal fills; these win over presentation attributes, so it follows the theme. */
.brand svg path:first-child { fill: var(--logo-bubble); }
.brand svg path:last-child { stroke: var(--logo-smile); }

/* ---- Sign in ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-left { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-line); padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-left .display { font-size: 36px; max-width: 13ch; line-height: 1.08; letter-spacing: -.03em; }
.auth-left p { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--side-text); max-width: 36ch; }
.auth-left .foot { font-size: 14px; color: var(--side-text); }
.auth-right { background: var(--surface); padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.auth-right > * { max-width: 420px; }
.auth-right h1.display { margin-top: 6px; }
.auth-note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); line-height: 1.5; }

/* ---- App shell ---- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-line); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.side .brand { padding: 0 8px; }
.side-top, .auth-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: var(--r-md); padding: 7px 10px; font-size: 14.5px; font-weight: 500; color: var(--side-text); transition: background .15s var(--ease), color .15s var(--ease); }
.nav a:hover { color: var(--side-fg); background: var(--side-hover); }
.nav a.active { background: var(--side-active); color: var(--side-fg); font-weight: 600; }
.nav .count { font-size: 12.5px; font-weight: 500; color: var(--side-text); font-variant-numeric: tabular-nums; }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.who { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--side-line); padding: 14px 4px 0; }
.who .meta { flex: 1; min-width: 0; }
.who .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .biz { font-size: 12.5px; color: var(--side-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--side-active); color: var(--side-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.btn-out { border: 1px solid var(--side-line); border-radius: var(--r-sm); color: var(--side-text); font-size: 12.5px; padding: 4px 8px; transition: color .12s var(--ease), border-color .12s var(--ease); }
.btn-out:hover { color: var(--side-fg); border-color: var(--line-strong); }
.main { background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.pad { flex: 1; padding: 32px 40px 56px; width: 100%; max-width: 1120px; }
.pad.narrow { max-width: 800px; }
/* Staff viewing as a client: one quiet line, not a coloured bar. */
.banner { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 40px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.banner strong { color: var(--ink); }
.banner form { display: inline; }
.banner button { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; font-weight: 600; font-size: 13.5px; }
.banner button:hover { text-decoration-color: currentColor; }
.topbar .avatar { transition: background .12s var(--ease); }
.topbar .avatar:hover { background: var(--line); }
.topbar-end { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar { display: none; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; min-height: 56px; }
/* The mobile tab bar: the first two sections, then More for the rest. */
.tabs { display: none; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px; z-index: 5; }
.tabs > a, .tabs summary { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); min-height: 44px; padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tabs > a.active, .tabs .more.active summary { background: var(--side-active); color: var(--ink); }
.tabs .count { display: none; }
.tabs .more { flex: 1; display: flex; position: relative; }
.tabs summary { list-style: none; cursor: pointer; gap: 4px; }
.tabs summary::-webkit-details-marker { display: none; }
.tabs summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); margin-left: 4px; }
.tabs .more[open] summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.more-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(26, 21, 16, .10); }
.more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; color: var(--ink); }
.more-menu a:hover { background: var(--surface-2); color: var(--ink); }
.more-menu a.active { background: var(--side-active); font-weight: 600; }

/* ---- Page header ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.page-head .titles { min-width: 0; }
.page-head .context { color: var(--muted); margin-top: 6px; max-width: 64ch; }
.page-head .context strong { color: var(--ink); font-weight: 600; }
.page-head .actions { flex: none; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--soft); margin-bottom: 12px; }
.crumb:hover { color: var(--ink); }

/* ---- Layout bits ---- */
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-tight { display: flex; flex-direction: column; gap: 12px; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.section { margin-top: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head .h2 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card.pad-lg { padding: 20px 22px; }
.card.pad-md { padding: 16px 18px; }
.card.paper { background: var(--surface-2); }
.card > .h2 + * { margin-top: 12px; }

/* Stat strip: a row of figures between two hairlines, divided by hairlines. No box. */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip .stat { padding: 16px 20px; border-left: 1px solid var(--line); min-width: 0; }
.stat-strip .stat:first-child { border-left: none; padding-left: 0; }
.stat .l { font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.3; }
.stat .n { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .n small { font-size: 15px; font-weight: 500; color: var(--soft); letter-spacing: 0; margin-left: 4px; font-family: var(--font-body); }
.stat .f { font-size: 13px; color: var(--soft); margin-top: 4px; line-height: 1.4; }
.stat.ember .n { color: var(--ember-600); }

/* ---- Lists ---- */
.list { display: flex; flex-direction: column; }
/* Lists and tables are rows between hairlines: no box, no corners, text flush with the page title. */
.list.boxed { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Every cell sits on the caller's line (first baseline), so a row reads straight across; rows are
   tight inside and spaced between, with a visible hairline. */
.list-row { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit; text-align: left; width: 100%; min-height: 56px; }
.list.boxed .list-row:last-child { border-bottom: none; }
a.list-row:hover { color: inherit; }
a.list-row:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.list-row .when { width: 88px; flex: none; font-size: 13.5px; color: var(--soft); font-variant-numeric: tabular-nums; }
.list-row .body { flex: 1; min-width: 0; }
.list-row .state, .list-head .state { width: 150px; flex: none; }
.list-row .title { font-weight: 600; font-size: 15px; }
.list-row .sub { font-size: 14px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.list-row .snippet { font-size: 13.5px; line-height: 1.5; color: var(--soft); margin-top: 4px; }
.list-row .dur { width: 44px; flex: none; text-align: right; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.list-row .end { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.list-head { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--soft); }
.list-head .when { width: 88px; flex: none; }
.list-head .body { flex: 1; }
.list-head .dur { width: 44px; flex: none; text-align: right; }
/* Status. Only what needs the reader (ember) gets a filled pill; done (pine)
   is a small dot and plain text; neutral (ink) is plain soft text. */
.badge, .pill { flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--soft); }
.badge.ember, .pill.ember { color: var(--ember-deep); font-weight: 600; }
.badge.pine, .pill.pine { color: var(--muted); }
.badge.ember::before, .pill.ember::before, .badge.pine::before, .pill.pine::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pine); flex: none; }
.badge.ember::before, .pill.ember::before { background: var(--ember); }
.empty { padding: 20px 0; color: var(--soft); font-size: 14px; line-height: 1.5; }
.age { font-size: 13.5px; color: var(--soft); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex: none; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); height: 36px; padding: 0 14px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); white-space: nowrap; transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
.btn:not(:disabled):hover { background: var(--surface-2); color: var(--ink); }
.btn.primary { background: var(--ember); border-color: var(--ember); color: var(--on-accent); }
.btn.primary:not(:disabled):hover { background: var(--ember-600); border-color: var(--ember-600); color: var(--on-accent); }
.btn.outline { border-color: var(--line); }
/* Dark: the submit inside a form that opens in place (flag, note), so it is clear without being a second ember button. */
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.dark:not(:disabled):hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink); }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--r-sm); }
.btn.block { width: 100%; height: 44px; font-size: 15px; }
.btn.link { height: auto; padding: 0; background: none; border: none; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.btn.link:not(:disabled):hover { color: var(--ink); background: none; text-decoration-color: currentColor; }
.btn.link.muted { color: var(--soft); text-decoration: none; }
.btn.link.muted:not(:disabled):hover { color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.search-bar { display: flex; gap: 8px; align-items: center; }
.search-bar .input.search { flex: 1; min-width: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.filter-row .dates { display: flex; gap: 10px; flex-wrap: wrap; }
.date-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.date-field .input { width: 148px; height: 38px; }
@media (max-width: 560px) { .filter-row .dates { width: 100%; } .date-field { flex: 1 1 0; min-width: 0; } .date-field .input { width: 100%; min-width: 0; } }
.list-row .snippet mark { background: none; color: var(--ink); font-weight: 600; }
.chip { border-radius: var(--r-md); height: 38px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); background: var(--surface); transition: background .12s var(--ease); }
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip.tiny { height: 28px; padding: 0 10px; font-weight: 500; }
.segmented { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.segmented .chip { border: none; border-radius: 0; height: 36px; padding: 0 14px; font-weight: 500; }
.segmented .chip + .chip { border-left: 1px solid var(--line); }
.segmented .chip.active { background: var(--line-2); color: var(--ink); font-weight: 600; }

/* ---- Forms ---- */
.input, .select, .textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--input-bg); font-size: 15px; color: var(--ink); transition: border-color .12s var(--ease); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.input::placeholder, .textarea::placeholder { color: var(--soft); }
.select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B655D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input.search { height: 38px; padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%236B655D' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%236B655D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; }
label.field { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 16px; }
label.field:first-child, .field-row label.field { margin-top: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.field-row:first-child { margin-top: 0; }
label.field + .input, label.field + .select, label.field + .textarea, label.field + .hours { margin-top: 6px; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.hint { font-size: 13px; color: var(--soft); margin-top: 6px; line-height: 1.45; }
.hours { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 8px 10px; align-items: center; }
.hours .select { height: 34px; font-size: 14px; }
.form-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-start; padding-top: 4px; }
.flash { background: var(--pine-tint); border: 1px solid var(--pine-line); color: var(--pine); border-radius: var(--r-lg); padding: 11px 14px; font-size: 14px; line-height: 1.45; }
.flash.warn { background: var(--ember-tint); border-color: var(--ember-line); color: var(--ember-deep); }

/* Role picker: radio cards with a title and a description. */
.choice-group { display: grid; gap: 8px; margin-top: 6px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color .12s var(--ease), background .12s var(--ease); }
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.choice input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
.choice-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.choice-desc { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* Logo upload and preview. */
.logo-tile { display: flex; gap: 16px; align-items: flex-start; margin-top: 6px; }
.logo-preview { width: 132px; height: 80px; flex: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-preview img { max-width: 108px; max-height: 60px; }
.logo-preview .none { font-size: 13px; color: var(--soft); }
.logo-controls { flex: 1; min-width: 0; }
label.btn { cursor: pointer; }
.file:focus-visible + label, .file:focus-visible ~ label { outline: 2px solid var(--ember); outline-offset: 2px; }
.logo-controls .actions .file:focus-visible { position: static; width: auto; height: auto; }
form.auto .no-js { display: none; }
.client-mark { background: var(--logo-tile); border: 1px solid var(--side-line); border-radius: var(--r-lg); padding: 10px 12px; display: flex; align-items: center; justify-content: center; }
.client-mark img { max-height: 32px; max-width: 100%; }
.topbar-mark { flex: 1; display: flex; justify-content: center; min-width: 0; padding: 0 12px; }
.topbar-mark img { max-height: 28px; max-width: 120px; }

/* ---- Tables ---- */
.wrap { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wrap > table { border: none; border-radius: 0; }
table.table, table.admin { width: 100%; border-collapse: collapse; background: var(--surface); }
table.table th, table.admin th { padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--soft); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.table td, table.admin td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: baseline; }
table.table th:first-child, table.table td:first-child, table.admin th:first-child, table.admin td:first-child { padding-left: 0; }
table.table th:last-child, table.table td:last-child, table.admin th:last-child, table.admin td:last-child { padding-right: 0; }
/* A table inside a card keeps its cells off the card's edge. */
.card table.table th:first-child, .card table.table td:first-child { padding-left: 12px; }
.card table.table th:last-child, .card table.table td:last-child { padding-right: 12px; }
.card .wrap { border: 1px solid var(--line); }
table.table tr:last-child td, table.admin tr:last-child td { border-bottom: none; }

table.table td form, table.admin td form { display: inline; }
table.table .r, table.admin .r { text-align: right; font-variant-numeric: tabular-nums; }
table.table td.empty, table.admin td.empty { padding: 20px 0; }
td .sub { display: block; font-size: 13px; color: var(--soft); margin-top: 1px; }
td .name { font-weight: 600; }
.td-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Call detail ---- */
.call-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--soft); }
.call-when .t { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.call-sub { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--muted); margin-top: 6px; }
.outcome { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px 18px; display: flex; gap: 16px; align-items: flex-start; }
.outcome .mark { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); flex: none; margin-top: 8px; }
.outcome .mark.pine { background: var(--pine); }
.outcome .mark.ink { background: var(--soft); }
.outcome .what { font-weight: 650; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.outcome .next { font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.outcome .undo { margin-left: auto; flex: none; }
.kv { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.kv:last-child { border-bottom: none; }
.kv-block { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv-block .kv { padding: 12px 0; }
.kv .k { width: 150px; flex: none; font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.kv .v { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; }
.player { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.play { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .12s var(--ease); }
.play:hover { background: var(--ink-2); }
.play.on { background: var(--muted); color: var(--on-ink); }
.player .track { flex: 1; min-width: 120px; }
.bar { height: 6px; border-radius: 1px; background: var(--line); overflow: hidden; cursor: pointer; }
.bar i { display: block; height: 100%; background: var(--ink); width: 0; }
.bar i.pine { background: var(--pine); }
.bar i.ember { background: var(--ember); }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--soft); margin-top: 6px; font-variant-numeric: tabular-nums; }
.bar.thin { height: 5px; margin-top: 8px; cursor: default; }
/* Admin status: supplier cards and label/value rows inside a card. */
.svc-head { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.03em; line-height: 1.15; margin-top: 12px; font-variant-numeric: tabular-nums; }
.kv-list .kv { padding: 8px 0; gap: 12px; }
.kv-list .kv .k { width: 130px; }
.kv-list .kv .v { font-size: 14px; }
.player .label { font-size: 13.5px; color: var(--soft); flex: none; font-weight: 500; }
/* Volume on the player: a speaker button and a pill above it with the slider,
   as on chuffd.co's example calls. Opens on hover where there is one, on press
   everywhere. The slider's colours follow the pill's text, so ink on cream and
   navy on pale both work. */
.vol { position: relative; flex: none; }
.vol-btn { width: 40px; height: 40px; border-radius: 50%; color: var(--soft); display: flex; align-items: center; justify-content: center; transition: background .12s var(--ease), color .12s var(--ease); }
.vol-btn:hover, .vol.open .vol-btn { color: var(--ink); background: var(--surface-2); }
.vol-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vol-pop { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 6px); display: none; align-items: center; gap: 12px; width: 210px; padding: 8px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); box-shadow: 0 2px 8px rgba(26, 21, 16, .18); }
.vol-pop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.vol.open .vol-pop { display: flex; }
@media (hover: hover) { .vol:hover .vol-pop { display: flex; } }
.vol-level { flex: 1; min-width: 0; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; color: inherit; cursor: pointer; --track-rest: color-mix(in srgb, currentColor 28%, transparent); }
.vol-level::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, currentColor var(--level, 80%), var(--track-rest) var(--level, 80%)); }
.vol-level::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, currentColor var(--level, 80%), var(--track-rest) var(--level, 80%)); }
.vol-level::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: currentColor; border: none; }
.vol-level::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: currentColor; border: none; }
.vol-level:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.vol-pct { flex: none; min-width: 26px; font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.flagged { background: var(--ember-tint); border: 1px solid var(--ember-line); border-radius: var(--r-lg); padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--ember-deep); }
.note { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-lg); padding: 12px 16px; }
.note .by { font-size: 13px; color: var(--soft); font-weight: 600; }
.note .text { font-size: 15px; line-height: 1.5; margin-top: 4px; white-space: pre-wrap; }
.transcript { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.turn { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.turn.agent { align-items: flex-start; }
.turn .who { font-size: 12px; font-weight: 600; color: var(--soft); padding: 0 4px; border: none; }
.bubble { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 6px 6px 2px 6px; padding: 10px 14px; font-size: 15px; line-height: 1.5; max-width: min(560px, 88%); }
.bubble.agent, .turn.agent .bubble { background: var(--line-2); border-color: var(--line-2); border-radius: 6px 6px 6px 2px; }
.toggle { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16px; color: var(--ink); }
.toggle:hover { color: var(--muted); }
.toggle .caret { font-size: 12px; color: var(--soft); display: inline-block; transition: transform .15s var(--ease); }
.toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.detail-actions .group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reveal { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px 18px; }
.reveal .h2 { font-size: 15px; }
.reveal .textarea { margin-top: 10px; background: var(--input-bg); }
.reveal .actions { margin-top: 10px; }

/* ---- Chart ---- */
.chart { display: flex; align-items: flex-end; gap: 5px; height: 140px; margin-top: 16px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.chart.short { height: 100px; }
.chart .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; position: relative; min-width: 0; }
.chart .b[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap; z-index: 2; pointer-events: none; box-shadow: 0 2px 8px rgba(26, 21, 16, .18); }
.chart .n { font-weight: 600; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart .v { width: 100%; max-width: 24px; border-radius: 1px 1px 0 0; background: var(--chart-bar); min-height: 2px; }
.chart .v.ooh { background: var(--chart-ooh); }
.chart .l { font-size: 11px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chart-note { font-size: 13px; color: var(--soft); margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key i { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-bar); display: inline-block; }
.key i.ooh { background: var(--chart-ooh); }
.stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 14px; }
.stats.outcomes { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.stat-mini .n { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-mini .l { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---- Billing ---- */
.plan-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.plan-name { font-weight: 650; font-size: 17px; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price span { font-size: 14px; font-weight: 500; color: var(--soft); letter-spacing: 0; font-family: var(--font-body); }
.usage { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.usage .line { display: flex; justify-content: space-between; font-size: 14.5px; gap: 12px; flex-wrap: wrap; }
.usage .bar { margin-top: 10px; height: 6px; border-radius: 1px; cursor: default; }
.invoice { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); align-items: center; }
.invoice:last-child { border-bottom: none; }
.invoice .m { font-size: 14px; font-weight: 600; width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.invoice .d { font-size: 14px; color: var(--muted); flex: 1; min-width: 120px; }
.invoice .t { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.invoice a { font-size: 14px; font-weight: 600; }

/* ---- Prospects: the discovery sheet as forms ---- */
.new-prospect { display: flex; gap: 12px; align-items: flex-end; }
.new-prospect > div { flex: 1; min-width: 0; }
.new-prospect .btn { flex: none; }
.tabs-inline { gap: 8px; }
.qa { display: flex; flex-direction: column; }
.qa-row { display: grid; grid-template-columns: minmax(200px, 5fr) minmax(0, 6fr); gap: 0 20px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.qa-row:last-child { border-bottom: none; padding-bottom: 4px; }
.qa-row .q .t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; padding-top: 8px; }
.qa-row .q .p { font-size: 13px; color: var(--soft); margin-top: 3px; line-height: 1.45; }
.qa-row .a { min-width: 0; }
.qa-row .a .check { margin-top: 8px; }
.calc { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 0 12px; height: 38px; display: flex; align-items: center; color: var(--muted); }
.calc.big { color: var(--ember-600); font-size: 18px; }
.rows-block { margin-top: 4px; }
table.rows td { padding: 6px 8px; vertical-align: top; }
table.rows td[data-n] { width: 40px; padding-top: 14px; font-size: 13px; color: var(--soft); }
table.rows .input { height: 34px; font-size: 14px; min-width: 140px; }
table.rows tbody tr:hover td { background: transparent; }
table.special-hours .input { min-width: 0; }
table.special-hours input[type="date"] { width: 150px; }
table.special-hours .hours-pair { display: flex; gap: 6px; }
table.special-hours .hours-pair .select { height: 34px; font-size: 14px; min-width: 92px; }
table.special-hours tr.past .input, table.special-hours tr.past .select { color: var(--soft); }
.h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.note-block { margin-top: 4px; }
.note-block .table { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 840px) {
  .qa-row { grid-template-columns: 1fr; gap: 6px; }
  .qa-row .q .t { padding-top: 0; }
  .new-prospect { flex-direction: column; align-items: stretch; }
}

/* ---- Light / dark switch ----
   Added by app.js wherever the page has a [data-theme-slot]: the sidebar,
   the mobile top bar and the sign-in panel. Without JavaScript it could not
   do anything, so it is not written into the page. */
.theme-toggle { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--side-line); border-radius: var(--r-md); background: transparent; color: var(--side-text); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.theme-toggle:hover { color: var(--side-fg); border-color: var(--line-strong); }
.theme-toggle .icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon--sun { display: none; }
[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
/* On the white mobile top bar the switch takes the button palette. */
.topbar .theme-toggle { width: 36px; height: 36px; border-color: var(--line); color: var(--muted); }
.topbar .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---- Dark: the few places tokens alone do not carry ---- */
/* The select caret and search glass are drawn in warm grey; redraw them in the dark soft. */
[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888C98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .input.search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23888C98' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23888C98' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .btn-out:hover, [data-theme="dark"] .theme-toggle:hover { border-color: rgba(255, 255, 255, .35); }
[data-theme="dark"] .chart .b[data-tip]:hover::after, [data-theme="dark"] .vol-pop, [data-theme="dark"] .more-menu { box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }

/* ---- Guides: a page of reading, and the editor behind it ---- */
.guide { max-width: 62ch; font-size: 15.5px; line-height: 1.6; }
.guide > * + * { margin-top: 12px; }
.guide h2 { font-weight: 650; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; margin-top: 28px; }
.guide h3 { font-weight: 650; font-size: 16px; line-height: 1.3; margin-top: 20px; }
.guide > h2:first-child, .guide > h3:first-child { margin-top: 0; }
.guide p { color: var(--ink-2); }
.guide ul, .guide ol { padding-left: 22px; color: var(--ink-2); }
.guide li + li { margin-top: 6px; }
.guide li::marker { color: var(--soft); }
.guide blockquote { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 16px; margin-top: 16px; }
.guide blockquote p { color: var(--muted); font-size: 14.5px; }
.guide hr { border: none; border-top: 1px solid var(--line); margin-top: 20px; }
.guide strong { font-weight: 600; color: var(--ink); }
.guide-steps { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.guide-step { display: flex; flex-direction: column; gap: 2px; color: inherit; min-width: 0; }
.guide-step:last-child { text-align: right; margin-left: auto; }
.guide-step .l { font-size: 13px; font-weight: 600; color: var(--soft); }
.guide-step .t { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.guide-step:hover .t { text-decoration-color: currentColor; }
.textarea.tall { min-height: 440px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; }

/* ---- Responsive ---- */
@media (max-width: 840px) {
  .shell { display: flex; flex-direction: column; min-height: 100vh; }
  .side { display: none; }
  .topbar { display: flex; }
  .tabs { display: flex; }
  .pad { padding: 20px 16px 28px; }
  .banner { padding: 8px 16px; }
  .banner .long { display: none; }
  .page-head { margin-bottom: 20px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .page-head .actions form { flex: 1; display: flex; }
  .page-head .actions form .btn { width: 100%; }
  /* Pressed on a phone between other things: the full 44px. */
  .page-head .actions .btn, .call-sub .btn.link, .outcome .undo .btn { min-height: 44px; }
  .call-sub .btn.link { display: inline-flex; align-items: center; }
  .page-head .actions .btn.primary { flex-basis: 100%; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip .stat { border-left: none; border-top: 1px solid var(--line); }
  .stat-strip .stat:nth-child(-n + 2) { border-top: none; }
  .stat-strip .stat:nth-child(2n) { border-left: 1px solid var(--line); }
  .stat-strip .stat { padding: 14px 0 12px 16px; }
  .stat-strip .stat:nth-child(2n + 1) { padding-left: 0; }
  .stat .n { font-size: 24px; }
  .grid2, .grid3, .field-row { grid-template-columns: 1fr; }
  .field-row > div + div { margin-top: 14px; }
  .auth { grid-template-columns: 1fr; }
  .auth-left, .auth-right { padding: 32px 22px; }
  .auth-left { gap: 28px; border-right: none; border-bottom: 1px solid var(--side-line); }
  .auth-left .display { font-size: 32px; }
  .kv { flex-direction: column; gap: 3px; padding: 12px 16px; }
  .kv-block .kv { padding: 12px 0; }
  .kv .k { width: auto; }
  .list-row { flex-wrap: wrap; padding: 16px 0; row-gap: 6px; }
  .list-row .when { width: auto; order: 3; margin-right: auto; }
  .list-row .body { flex-basis: 100%; }
  .list-row .dur { order: 4; }
  .list-row .badge { order: 2; }
  .list-row .state { order: 2; width: auto; }
  .list-row .end { order: 4; margin-left: 0; }
  .list-head { display: none; }
  .logo-tile { flex-direction: column; }
  .hours { grid-template-columns: 1fr; gap: 4px; }
  .hours .small { margin-top: 8px; }
  .chart .n { display: none; }
  .player { flex-wrap: wrap; row-gap: 4px; }
  .player .label { flex-basis: 100%; padding-left: 54px; }
}