/* PRIME Orthopedics & Regenerative Center case dashboard: the worklist (work/PLAN-dash-ui.md).
   A grey rail of queues with counts, a white sheet of rows, one blue for whatever is live. The page's security
   policy allows no outside fonts, so the type is the system's own. */

:root {
  --ink: #16202b; --ink-2: #4a5563; --ink-3: #5b6774;   /* ink-3 reads at 5.3:1 on the rail, 5.8:1 on white */
  --line: #e3e8ee; --line-2: #edf0f4;
  --paper: #fff; --rail: #f4f6f8; --tint: #f3f7fb;
  --blue: #1a5fb4; --blue-ink: #154c90; --blue-tint: #e6effb;
  --ok: #1f7a45; --pend: #b07a00; --warn: #b4531d; --quiet: #9aa4b1;
  --c-ans: #1a5fb4; --c-vm: #9b6ad6; --c-miss: #d1495b; --c-oth: #c5ccd4;   /* calls: validated (dataviz), 2026-10-15 */
  /* Payments By Month, collected by kind of payer (work/PLAN-dash-next.md): the blue for the practice's main business,
     then hues far apart in hue and lightness; Other is the calls' grey */
  --k-att: #1a5fb4; --k-wc: #e08a00; --k-pip: #9b6ad6; --k-com: #2a9d8f; --k-mcr: #d1495b; --k-cash: #8a6d3b;
  --k-soc: #c2407e;   /* Facebook And Instagram, the desk's log (work/PLAN-roas.md) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  accent-color: var(--blue);
  caret-color: var(--blue);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--ink); background: var(--paper); }
::selection { background: var(--blue-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }
h1, h2, h3, p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- sign-in ------------------------------------------------------------------------------ */
.signin { min-height: 100vh; display: grid; place-items: center; background: var(--paper); padding: 16px; }
.signin-box { width: min(440px, 100%); }
.signin-box h1 { font-size: 20px; font-weight: 600; }
.signin-box .practice { font-size: 14px; color: var(--ink-2); margin: 2px 0 18px; }
.signin-box .logo { display: block; width: 200px; height: auto; margin-bottom: 18px; }
.signin-box .logo + h1 { margin-bottom: 12px; }
.signin-box p + p { margin-bottom: 20px; }
/* the first sign-in's authenticator setup (index.html #setup) */
.setupqr { display: block; width: 200px; height: 200px; image-rendering: pixelated; margin: 4px 0 14px; border: 1px solid var(--line); }
.setupkeyline { font-size: 13px; color: var(--ink-2); }
.setupkey { font-size: 14px; letter-spacing: .04em; word-break: break-all; color: var(--ink); }
.setuplabel { display: block; font-weight: 500; margin: 4px 0 6px; }
.setupcode { width: 9em; font-size: 20px; letter-spacing: .2em; margin-bottom: 12px; }
#setup .signinnote { margin: 0 0 12px; }

/* ---- the frame: rail and sheet ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 22px 12px 18px;
        background: var(--rail); border-right: 1px solid var(--line); }
.rail-head { padding: 0 10px; }
.practice { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
/* the practice's logo over the wordmark: the full name is in it (Jack, 2026-11-07) */
.rail-head .logo { display: block; width: 170px; height: auto; margin-bottom: 6px; }
.wordmark { font-size: 16px; font-weight: 600; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
/* the test tag: an amber dot and its words beside the wordmark; on a phone the dot alone, the words on a press */
.envtag { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 12.5px; font-weight: 400; color: var(--pend); cursor: default; }
.envtag:hover { background: none; }
.envtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pend); flex: none; }
.queues { display: flex; flex-direction: column; gap: 2px; }
.queues a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 6px;
            color: var(--ink-2); text-decoration: none; }
.queues a:hover { background: #ebeef2; text-decoration: none; }
.queues a.active { color: var(--blue); font-weight: 600; }   /* the one blue marks the current tab; no box */
.count { font-size: 12.5px; color: var(--blue); font-variant-numeric: tabular-nums; font-weight: 600; }
.count:empty { display: none; }
/* Relations (work/PLAN-money.md): one heading over the four pages that collect what firms owe, closed by default.
   Closed, its links fold away, its own count stands for them, and it is marked blue while one of them is showing. */
.group { display: flex; flex-direction: column; gap: 2px; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 7px 10px;
              color: var(--ink-2); font-weight: 500; text-align: left; }
/* since 2026-11-05 a plain heading, always open, its pages under it: no chevron, nothing to press */
.group { margin-top: 10px; }
.group-head { cursor: default; color: var(--ink); font-weight: 600; padding-bottom: 3px; }
.group-head .count { display: none; }                     /* each page shows its own count */
.group-links { display: flex; flex-direction: column; gap: 2px; }
.group-links a { padding-left: 22px; }                    /* under the heading */
.rail-foot { margin-top: auto; padding: 0 10px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.who { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink-2); }
/* Referrers and Outreach stay in view (Jack 2026-10-14), quieter, with Phase 2 beneath them in label type */
.queues a.later { color: var(--ink-3); }
.queues a.later.active { color: var(--blue); }
.rail-label { padding: 0 10px 8px; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; }

.main { padding: 30px 40px 48px; min-width: 0; }
.view { animation: fade 150ms ease-out; }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ---- page heads, figures, notes ----------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.page-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.asof { font-size: 13px; color: var(--ink-3); }
.lede { flex-basis: 100%; max-width: 72ch; color: var(--ink-2); }
/* in a page head the paragraph takes its own line under the title, its text still no wider than 72 characters */
.page-head .lede { max-width: none; padding-right: max(0px, calc(100% - 72ch)); }
/* the one line of what to do here (work/PLAN-dash-learn.md step 1): always shown, in the lede's type */
.doline { flex-basis: 100%; max-width: none; padding-right: max(0px, calc(100% - 72ch)); color: var(--ink-2); }
/* The fold (DESIGN.md): a "?" beside a heading opens the page's paragraph beneath it; folded, the paragraph is gone */
.folded { display: none !important; }
button.help { align-self: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3);
              font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
button.help:hover { color: var(--blue); border-color: var(--blue-tint); background: var(--blue-tint); }
button.help[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); background: var(--paper); }
.section-head .help, .calls-head .help { align-self: center; }
.figures { display: flex; flex-wrap: wrap; gap: 14px 44px; padding: 4px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.fig .n { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fig.lead .n { font-size: 26px; }
.fig .l { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.fig .sub, .fig .chg { font-size: 12.5px; margin-top: 2px; }
.fig .sub { color: var(--ink-2); }
.fig .spark, .fig .share { margin-top: 6px; }
a.figlink { color: inherit; text-decoration: none; border-radius: 6px; }
a.figlink:hover { text-decoration: none; }
a.figlink:hover .l { color: var(--blue); }
/* The sparkline (DESIGN.md): 56 by 18, a 1.5px blue line, a dot on the last point, no axes; under a figure only */
.spark { display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--blue); }
/* The share bar (DESIGN.md): a 6px track with a blue fill, the share as words beside it */
.share { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-weight: 400; }
.share-track { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; flex: none; }
.share-fill { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.empty, .pane-empty, .status { color: var(--ink-3); }
.empty { padding: 26px 0; max-width: 60ch; }
.pane-empty { padding: 10px 0; }
.error { background: #fbeae5; color: #8a2f12; padding: 10px 14px; border-radius: 6px; margin-bottom: 18px; }

/* ---- controls ----------------------------------------------------------------------------- */
/* one filled primary per view; every other action is plain text with a hover tint */
button, .btn { font: inherit; line-height: 1.2; border: 1px solid transparent; background: none; color: var(--blue); font-weight: 500;
               border-radius: 6px; padding: 7px 10px; cursor: pointer; transition: background-color 150ms ease-out; }
button:hover, .btn:hover { background: var(--blue-tint); }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; padding: 7px 14px; }
button.primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); }
button:disabled { opacity: 0.5; cursor: default; background: none; }
button.primary:disabled { background: var(--blue); }
button.link { padding: 0; border-radius: 4px; }
button.link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
input, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
input:read-only, textarea:read-only { background: var(--rail); }
/* every select the same (2026-11-07); a page sets only what differs (Chart heads and the audience picker smaller) */
select { font: inherit; color: var(--ink); background-color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
/* a box beside a select stands as tall as it, 37px (2026-11-07) */
.filters input:not([type=checkbox]):not([type=radio]), .grid td input:not([type=checkbox]):not([type=radio]),
.files form input { padding-top: 7.5px; padding-bottom: 7.5px; }
.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.filters input { flex: 1; max-width: 480px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-tint); border-color: transparent; color: var(--blue-ink);
        border-radius: 14px; padding: 5px 12px; font-size: 13px; }
.chip:hover { background: #d9e6f8; }
.chip svg { width: 10px; height: 10px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }

/* ---- tables ------------------------------------------------------------------------------- */
.scroll { overflow-x: auto; }
.grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
           padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid th[data-sort] { cursor: pointer; }
.grid th[data-sort]:hover { color: var(--ink); }
.grid th[aria-sort] { color: var(--blue); }
.grid th[aria-sort]::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: 1px; }
.grid th[aria-sort="descending"]::after { border-top-color: currentColor; border-bottom: 0; }
.grid th[aria-sort="ascending"]::after { border-bottom-color: currentColor; border-top: 0; }
/* the sorted header carries a small triangle, drawn, not a glyph */
.grid .sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }   /* a second line under a figure: the account, the count */
.cases td.paper { max-width: 170px; }
/* Letters on the Cases page (work/PLAN-money.md) */
/* a case in a letter waiting to be sent: a dot and the words on the account line, opening the letter */
.grid .sub .markwrap, .grid .sub .acct { white-space: nowrap; }
.grid .sub button.mark { display: inline; padding: 0; font: inherit; color: inherit; border-radius: 4px; }
.grid .sub button.mark:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.grid .sub button.mark .st { display: inline-flex; gap: 5px; }
.firmletter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 12px; margin-bottom: 10px;
              background: var(--rail); border-radius: 6px; }
.firmletter.sel { background: var(--blue-tint); }
.firmletter .fl-what { flex: 1 1 260px; }
/* The letter pop-up (Jack 2026-10-15): over whatever page it was opened from, the page dimmed behind it. Flat like the rest:
   a hairline and the dimming set it apart, no shadow. A phone gets the whole screen. */
.letterdlg { width: min(780px, calc(100vw - 48px)); max-height: calc(100vh - 64px); padding: 22px 26px 26px; overflow: auto;
             border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.letterdlg::backdrop { background: rgba(22, 32, 43, 0.38); }
.letterdlg[open] { animation: fade 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .letterdlg[open] { animation: none; } }
@media (max-width: 820px) {
  .letterdlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 18px 16px 28px; }
}
.caseready:empty { display: none; }
.caseready { margin: -8px 0 18px; max-width: 820px; }
/* the open letter: its firm as the heading with a drawn × to close, one meta line, the subject in small type, the body,
   then its ledgers folded into one line */
.item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.item-head h2 { margin-bottom: 4px; }
.item-head .close { flex: none; padding: 6px; margin: -4px -6px 0 0; color: var(--ink-3); }
.item-head .close:hover { color: var(--ink); background: var(--rail); }
.item-head .close svg { display: block; width: 12px; height: 12px; }
.letter .meta .st { vertical-align: baseline; }
.subject-line { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 14px; overflow-wrap: anywhere; }
.ledgers { margin-top: 14px; }
.ledgers ul { list-style: none; margin: 8px 0 0; padding: 0; max-width: 76ch; }
.ledgers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.ledgers li .sub { display: inline; margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.detail-head { font-size: 14px; font-weight: 600; margin: 26px 0 6px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 36px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.section-head h2 { font-size: 16px; font-weight: 600; }
.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
/* a plain-text button in a cell (Handled, Tie, Read Now): its words on the row's line and the column's edge, its hit area kept */
.grid td > button:not([class]) { margin: -7px -10px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid td.wrap { overflow-wrap: break-word; }
.grid td.dim { color: var(--ink-3); white-space: nowrap; }
.grid tbody tr.row { cursor: pointer; transition: background-color 150ms ease-out; }
.grid tbody tr.row:hover { background: var(--tint); }
.grid tbody tr.sel { background: var(--blue-tint); }
.grid tbody tr.sel td { border-bottom-color: #d5e3f6; }
.grid tfoot td { color: var(--ink-3); font-size: 13px; border: 0; padding-top: 14px; }
.firmlink { color: inherit; cursor: pointer; }   /* click: only this firm's cases */
.grid.firms td { vertical-align: top; }
.grid.firms .sub .share { display: inline-flex; margin-top: 3px; }
.grid.firms button.mark, .grid.firms button.mark:hover { padding: 0; font: inherit; color: inherit; background: none; border-radius: 4px; }
.grid.firms button.mark:hover .st { text-decoration: underline; text-underline-offset: 3px; }
.firmlink:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* status: a dot and a word, never a filled pill */
.st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--quiet)); flex: none; }
.st.proposed, .st.drafted { --dot: var(--pend); }
.st.sent, .st.answered { --dot: var(--ok); }
.st.karla, .st.refused, .st.sending { --dot: var(--warn); }

/* ---- the list and the open item --------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(440px, 11fr) minmax(420px, 10fr); } .split .pane { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; } }
.pane:empty { display: none; }
.item h2 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.item .meta { font-size: 13px; color: var(--ink-3); }
.item h3 { font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
.item ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.doc { white-space: pre-wrap; line-height: 1.55; padding: 16px 18px; background: var(--rail); border-radius: 6px; margin-top: 14px; max-width: 76ch; }
.answer { margin-top: 16px; }
.answer:empty { display: none; }
.thread { display: grid; gap: 10px; max-width: 76ch; margin-top: 14px; }
.msg { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.msg.letter, .msg.out { background: var(--rail); border-color: transparent; margin-right: 32px; }
.msg.in { margin-left: 32px; }
.msg.this { border-color: var(--blue); }
.msg .meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.msg .tag { color: var(--blue); font-weight: 600; }
.msg .subj { font-weight: 600; margin: 4px 0; }
/* The Forms tab's past-patient line and column (src/journey/channels.py form_was_patient) */
.msg .past { font-size: 13px; margin: 0 0 8px; color: var(--ink-2); }
.grid td.past-yes { font-weight: 600; white-space: nowrap; }
.msg .body { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.partner-one { margin-bottom: 22px; }            /* Partners: one partner and the people it sent, above the list */
.partner-one h2 { margin-top: 0; }
/* Website Chats: the pause line, and one conversation above the list (the visitor on the right, as the panel shows it) */
.sc-pause { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.sc-pause button { margin-left: auto; }
.sc-one { margin-bottom: 22px; }
.sc-one h2 { margin-top: 0; }
.sc-msg { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: var(--rail); }
.sc-msg.you { margin-left: 32px; background: var(--paper); border: 1px solid var(--line); }
.sc-msg.fixed { border-left: 3px solid var(--line); }
.sc-msg p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.5; }
.sc-who { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sc-drafts { margin-top: 6px; font-size: 13px; }
.sc-draft { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
textarea.reply { width: 100%; max-width: 76ch; min-height: 220px; line-height: 1.5; resize: vertical; display: block; }

/* ---- Ask: a link in the rail's foot (work/PLAN-dash-learn.md step 2), the chat window at the bottom right ---------- */
.askbtn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 0; border: 0; background: none;
          color: var(--blue); font-size: 13px; font-weight: 600; }
.askbtn:hover { color: var(--blue-ink); background: none; text-decoration: underline; text-underline-offset: 3px; }
.askbtn[aria-expanded="true"] { color: var(--blue-ink); }
.askbtn svg { width: 16px; height: 16px; flex: none; }
.askpanel { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 380px; height: 520px; display: flex; flex-direction: column;
            background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
            box-shadow: 0 12px 36px rgba(22, 32, 43, 0.16), 0 2px 6px rgba(22, 32, 43, 0.08); animation: fade 150ms ease-out; }
.askpanel.sizing { user-select: none; }
.askhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--line); }
.asktitle { font-weight: 600; }
.askhead .close { padding: 2px 9px; font-size: 20px; line-height: 1; color: var(--ink-3); }
.askhead .close:hover { color: var(--ink); background: var(--rail); }
.asklog { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.askempty { margin: auto 0; color: var(--ink-3); text-align: center; line-height: 1.5; padding: 0 12px; }
.chat { max-width: 86%; padding: 9px 13px; border-radius: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.chat.ai { align-self: flex-start; background: var(--rail); color: var(--ink); border-bottom-left-radius: 4px; }
.chat.err { color: var(--warn); }
.askform { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.askform textarea { flex: 1 1 auto; min-width: 0; resize: none; max-height: 140px; line-height: 1.4; }
/* the window is resized from its top left corner and its top and left edges; the corner carries a small mark */
.grip { position: absolute; z-index: 1; touch-action: none; }
.grip-l { left: -4px; top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.grip-t { top: -4px; left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.grip-tl { left: -2px; top: -2px; width: 18px; height: 18px; cursor: nwse-resize; }
.grip-tl::before { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-left: 2px solid var(--quiet);
                   border-top: 2px solid var(--quiet); border-top-left-radius: 3px; opacity: 0.7; }
.grip-tl:hover::before, .askpanel.sizing .grip-tl::before { border-color: var(--blue); opacity: 1; }
/* the chat (work/PLAN-chat.md step 4): the person's chats, each read as a grey line, links to rows, action cards */
.asktitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.askhead button.text { flex: none; padding: 4px 8px; font-size: 13px; }
.askhead button.text[aria-expanded="true"] { background: var(--blue-tint); }
.asklist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px; }
.asklist button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 6px; background: none;
                  color: var(--ink); font: inherit; cursor: pointer; }
.asklist button:hover { background: var(--tint); }
.asklist button.sel { background: var(--blue-tint); }
.asklist .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asklist .sub { display: block; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.asklist .askempty { margin: 24px 0; }
.askstep { align-self: flex-start; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); margin: -4px 0 -4px 4px; }
.askstep::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--quiet); flex: none; }
.askstep.bad::before { background: var(--warn); }
.askstep.working::before { background: var(--pend); animation: pulse 1.2s ease-in-out infinite; }
.chat.ai a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.askcost { align-self: flex-start; margin: -6px 0 0 4px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.askcard { align-self: stretch; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.askcard p { margin: 0; }
.askcard .what { font-weight: 600; }
.askcard .does { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.askcard .why { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.askcard details { margin-top: 6px; font-size: 13px; }
.askcard details pre { margin: 6px 0 0; padding: 8px 10px; background: var(--rail); border-radius: 6px; white-space: pre-wrap;
                       overflow-wrap: anywhere; font: inherit; max-height: 180px; overflow-y: auto; }
.askcard .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 9px; }
.askcard .done { font-size: 13px; }
.askcard .press { border-color: var(--blue); }
.askcard .acts .why { margin: 0; }
.askcard .warns { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--warn); }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .askpanel { animation: none; } .askstep.working::before { animation: none; } }
/* a wide screen: docked down the right, full height, the page narrowed beside it (body.asking, --askw from app.js) */
@media (min-width: 1100px) {
  .askpanel { top: 0; right: 0; bottom: 0; width: 400px; height: auto !important; border: 0; border-left: 1px solid var(--line);
              border-radius: 0; box-shadow: none; }
  body.asking .app { margin-right: var(--askw, 400px); }
  .grip-t, .grip-tl { display: none; }
  .grip-l { top: 0; bottom: 0; }
}
@media (max-width: 820px) {
  /* on a phone the window is the whole screen, with its own close, and is not resized by hand */
  .askpanel { inset: 0; width: auto !important; height: auto !important; border: 0; border-radius: 0; box-shadow: none; }
  .grip { display: none; }
}

/* ---- the case page ------------------------------------------------------------------------ */
/* the story (work/PLAN-dash-next.md step 3): the head with its two links, Money and Who side by side, the Timeline, and
   Every Field folded at the foot */
.story { max-width: 980px; }
.story-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 24px; }
.story-head .meta { margin-bottom: 8px; }
.story-links { font-size: 13px; color: var(--ink-3); padding-top: 6px; }
.story-links .link { font-size: 13px; }
.nextstep { margin: 0 0 16px; padding: 9px 12px; background: var(--tint); border-radius: 6px; max-width: 820px; }
.nextstep .dim { font-size: 12.5px; margin-right: 6px; }
/* For The Call: a Personal Injury case past 18 months, everything the caller needs under the next step (2026-10-16) */
.callsheet { margin: 0 0 22px; max-width: 820px; }
@media (min-width: 821px) { .callsheet .who-dl { grid-template-columns: 170px minmax(0, 1fr); } }
.story h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; margin-top: 8px; }
@media (min-width: 1100px) { .story-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); } }
.story-figs { gap: 14px 32px; margin-bottom: 10px; padding-bottom: 14px; }
.story-notes { font-size: 13px; color: var(--ink-2); margin-bottom: 20px; }
.who-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px; margin: 0; }
.who-dl dt, .who-dl dd { padding: 7px 0; border-bottom: 1px solid var(--line-2); margin: 0; }
.who-dl dt { color: var(--ink-3); font-size: 13px; }
.who-dl dd .sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.papers { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.papers .paper-word { color: var(--ink-2); font-size: .92em; }
.story-time { margin-top: 28px; }
/* The timeline (DESIGN.md): a left column of 7px dots on a hairline, the day in label type, the event in body type */
.timeline { list-style: none; margin: 0 0 10px; padding: 0; position: relative; max-width: 820px; }
.timeline::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.tl { display: grid; grid-template-columns: 7px 108px minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 6px 0; }
.tl-dot { position: relative; top: -1px; width: 7px; height: 7px; padding: 0; gap: 0; }
.tl-dot::before { box-shadow: 0 0 0 3px var(--paper); }
.tl-day { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-what { overflow-wrap: anywhere; }
.tl-what .sub { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.tl-what .st { vertical-align: baseline; }
.tl-what button { padding: 0 6px; font-size: 13px; }
.tl-what button.press { padding: 2px 8px; border-color: var(--blue); margin-left: 4px; }
.st.visit, .st.next { --dot: var(--blue); }
details.every { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
details.every dl { margin-top: 12px; }
.detail h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.detail .meta { color: var(--ink-3); margin: 2px 0 20px; }
.detail dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 24px; margin: 0; max-width: 820px; }
.detail dt, .detail dd { padding: 9px 0; border-bottom: 1px solid var(--line-2); margin: 0; }
.detail dt { color: var(--ink-3); }
.detail dd { font-variant-numeric: tabular-nums; }

/* ---- letter wording ----------------------------------------------------------------------- */
.tpl { max-width: 80ch; }
.tpl input, .tpl textarea { width: 100%; display: block; margin-bottom: 8px; }
.tpl textarea { min-height: 220px; line-height: 1.5; resize: vertical; }
.tpl .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.tpl .status:empty { display: none; }

/* ---- narrow windows and phones ------------------------------------------------------------ */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* the rail becomes a head: name and wordmark left, who is signed in right, the tabs beneath */
  .rail { position: static; height: auto; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px;
          padding: 14px 16px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-head { padding: 0; flex: 1 1 0; min-width: 0; }
  .rail-head .practice, .rail-head .logo { display: none; }                     /* the wordmark says it (work/PLAN-dash-next.md) */
  .wordmark { margin-top: 0; flex-wrap: nowrap; white-space: nowrap; }
  .rail-foot { gap: 12px; }
  .envtag span { display: none; }
  .envtag[aria-expanded="true"] span { display: inline; }
  .envtag { cursor: pointer; padding: 4px; margin: -4px; }
  .rail-label { display: none; }
  .rail-foot { order: 1; margin: 0 0 0 auto; flex: none; }   /* top right, level with the wordmark */
  .queues { order: 2; flex-basis: 100%; }
  .queues { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }   /* every tab in view, no hidden overflow */
  .queues a { flex: none; white-space: nowrap; gap: 6px; padding: 5px 9px; }
  .rail-foot { flex-direction: row; justify-content: flex-end; align-items: baseline; padding: 0; }
  .who { gap: 12px; }
  .main { padding: 20px 16px 48px; }
  .page-head { margin-bottom: 14px; }
  .figures { gap: 12px 24px; }
  .fig .n, .fig.lead .n { font-size: 20px; }
  .grid { font-size: 13px; }
  .grid th, .grid td { padding: 8px 10px; }
  .detail dl { grid-template-columns: 1fr; }
  .detail dt { padding-bottom: 0; border: 0; font-size: 12.5px; }
  .who-dl { grid-template-columns: 1fr; }
  .who-dl dt { padding-bottom: 0; border: 0; font-size: 12.5px; }
  .tl { grid-template-columns: 7px minmax(0, 1fr); }
  .tl-day { grid-column: 2; }
  .tl-what { grid-column: 2; }
  .msg.letter, .msg.out { margin-right: 12px; }
  .msg.in { margin-left: 12px; }
}

/* ---- visits: the recorder, the note, the scribe's instructions (work/PLAN-scribe.md) ------- */
.btn { display: inline-flex; align-items: center; }
.recorder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; background: var(--rail);
            border-radius: 8px; margin-bottom: 24px; }
.consent { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.consent input { width: 16px; height: 16px; margin: 0; }
.rectime { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rectime:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c62828; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rectime::before { animation: none; } }
button.recording { border-color: #c62828; color: #c62828; }
.upload { position: relative; overflow: hidden; }
.upload input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.upload:has(input:disabled) { opacity: 0.55; }
.upload:has(input:disabled) input { cursor: default; }
.recmsg { flex-basis: 100%; color: var(--ink-2); font-size: 13px; }
.recmsg:empty { display: none; }
.list h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.st.ready { --dot: var(--blue); }
.st.approved { --dot: var(--ok); }
.st.recording, .st.failed { --dot: var(--warn); }
.st.uploaded, .st.transcribing, .st.writing { --dot: var(--pend); }
.section { margin-top: 18px; }
.section .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.section .head h3, .item .section h3 { margin: 0; }
.section .row { display: inline-flex; align-items: center; gap: 10px; }
.section textarea { width: 100%; min-height: 120px; line-height: 1.5; resize: vertical; display: block; }
details.section summary { cursor: pointer; color: var(--blue); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.section summary::-webkit-details-marker { display: none; }
details.section summary svg { width: 12px; height: 12px; transition: transform 150ms ease-out; }
details.section[open] summary svg { transform: rotate(90deg); }
.turn { margin: 8px 0; line-height: 1.5; color: var(--ink-2); }
.turn b { color: var(--ink); font-weight: 600; }
.instr { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 80ch; }
.instr h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.instr .lede { margin-bottom: 12px; }
.instr textarea { width: 100%; display: block; line-height: 1.5; resize: vertical; margin-bottom: 8px; }
.instr .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* the Files tab (work/PLAN-onedrive.md) */
.files .conn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 20px; }
.files form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; }
.files form input[name=link] { flex: 1 1 320px; min-width: 0; }
.files form input[name=label] { flex: 0 1 200px; min-width: 0; }
.files td.wrap { overflow-wrap: anywhere; }

/* ---- the Phone Calls tab (work/PLAN-calls.md; redrawn, work/PLAN-calls-ui.md) ---------------- */
.st.missed { --dot: var(--c-miss); }
.st.voicemail { --dot: var(--c-vm); }
.st.handled { --dot: var(--ok); }
.calls-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 10px; }
.calls-head h2 { font-size: 16px; font-weight: 600; }
.calls-head.numbers { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.daynav { margin: 0 0 12px; max-width: 560px; }
/* the day stepper (work/PLAN-dash-learn.md step 2): a drawn chevron either side of a date field in label type, the field
   borderless until it is focused or hovered */
.daystepper { display: flex; align-items: center; gap: 4px; }
.daystep { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0;
           border-radius: 6px; background: none; color: var(--ink-2); }
.daystep:hover:not(:disabled) { background: #ebeef2; color: var(--blue); }   /* the rail's hover grey (--rail-hover was never set) */
.daystep:disabled { color: var(--line); cursor: default; }
.daystep svg { width: 12px; height: 12px; }
.dayfield { position: relative; display: inline-block; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px;
            font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.dayfield:hover, .dayfield:focus-within { border-color: var(--line); }
.dayfield:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.dayfield input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.dayfield input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.daystepper .link { margin-left: 12px; white-space: nowrap; font-size: 13px; }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
/* the one-line picker (work/PLAN-dash-open.md): the span in words, its dates and Change; the controls open beneath */
.pickbody { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.picktail { font-size: 13px; margin: 8px 0 0; }
.dates { display: flex; align-items: center; gap: 8px; }
.dates input { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
/* the picker's slider (Jack 2026-10-16): two handles on one track, the span between them in blue, beneath the chips and
   the dates and as wide as they are */
.dslide { flex: 1 1 100%; max-width: 720px; }
.dslide-track { position: relative; height: 26px; }
.dslide-track::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
.dslide-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--blue); }
.dslide input[type=range] { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; padding: 0; background: none; border: 0;
                            pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; }
.dslide input[type=range]::-webkit-slider-runnable-track { background: none; height: 26px; }
.dslide input[type=range]::-moz-range-track { background: none; }
.dslide input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 5px;
                                                  border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); cursor: grab; }
.dslide input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--paper);
                                              border: 2px solid var(--blue); cursor: grab; }
.dslide input[type=range]:focus-visible { outline: none; }
.dslide input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--blue-tint); }
.dslide input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--blue-tint); }
.note { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; max-width: 90ch; }
.owed-read { margin: 10px 0 8px; max-width: 90ch; }
.owed-head { font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
.owed-asks { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); max-width: 90ch; }
.owed-asks li { margin: 0 0 4px; }
.note.late b { color: var(--warn); }
.calls-figs { margin: 18px 0 0; padding-bottom: 16px; }
.chg { color: var(--ink-3); }
.chg.up { color: var(--ok); }
.chg.down { color: var(--warn); }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 28px 0 6px; }
.chart-head h3 { font-size: 14px; font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); }
.chart-head select { font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
/* Where They Came From on Appointments (work/PLAN-roas.md): the list under the chart, the page's own sizes */
.apptcame .filters { margin: 4px 0 8px; }
.apptcame .pat-filters select { max-width: 320px; flex: 1 1 140px; min-width: 0; }
.camecounts { margin: 0 0 10px; font-size: 13px; }
.grid.camefrom td .sub { display: block; }
.grid.camefrom tr.apptmore > td { background: var(--blue-tint); padding: 12px 14px 4px; white-space: normal; }
.grid.camefrom tr.apptmore .pay-mini { border-bottom: 0; margin-bottom: 4px; padding-bottom: 6px; }
.grid.camefrom tr.apptmore p { margin: 0 0 8px; }
/* the patient's whole billing opened under an appointment (Appointments, 2026-11-05): its own tables sit on the tint */
.grid.camefrom .item.inrow { max-width: 980px; }
.grid.camefrom .item.inrow h3 { font-size: 14px; margin: 14px 0 6px; }
.grid.camefrom .item.inrow .grid { background: var(--paper); }
.payvisits .visitsbooked { margin: 12px 0 18px; }
.paysel { margin: 0 0 22px; }
.paysel .payselhead { margin: 0 0 8px; }
/* Consults (work/PLAN-consult.md): the same rows and opened billing as Where They Came From; a row not marked yet is tinted */
.grid.consults td .sub, .grid.consultweeks td .sub { display: block; }
.grid.consultweeks td.nowrap { white-space: nowrap; }
.grid.consults tr.unmarked td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.grid.consults tr.apptmore td { background: var(--blue-tint); padding: 12px 14px 4px; white-space: normal; }
.grid.consults tr.apptmore .pay-mini { border-bottom: 0; margin-bottom: 4px; padding-bottom: 6px; }
.grid.consults tr.apptmore p { margin: 0 0 8px; }
.consulttypes { display: grid; gap: 6px; margin: 8px 0 12px; }
.consulttypes label { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.booked-check { color: var(--ok); font-weight: 600; white-space: nowrap; }
.srcchip { display: inline-flex; align-items: baseline; gap: 6px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.line { height: 2px; border-radius: 1px; background: var(--ink-2); }
.readout { font-size: 13px; color: var(--ink); min-height: 1.45em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.chart { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#callschart { overflow: visible; }
.chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.chart .pinned { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.chart .pin-bg { fill: var(--paper); }
.chart svg { display: block; }
.chart svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chart .tick { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .panel-l { font-size: 12px; fill: var(--ink-2); font-weight: 600; }
.chart .grid-l { stroke: var(--line-2); stroke-width: 1; }
.chart .axis-l { stroke: var(--line); stroke-width: 1; }
.chart .weekend { fill: var(--tint); }
.chart .office { fill: var(--tint); }
.chart .hover-band { fill: var(--blue-tint); opacity: .55; }
.chart .hit { fill: transparent; cursor: default; }
.chart .today-mark { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.chart .rate-line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .rate-dot { fill: var(--ink-2); stroke: var(--paper); stroke-width: 2; }
#callstable .scroll { max-height: 420px; overflow-y: auto; }
@media (max-width: 760px) {
  .calls-figs { gap: 12px 22px; }
  .range { gap: 10px; }
}

/* ---- the Campaigns tab (work/PLAN-campaigns.md) ------------------------------------------------------------------- */
.camp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -6px 0 22px; }
.camp-bar .dim { flex: 1 1 320px; }
.camp-edit textarea.camp-body { min-height: 300px; }
.bands { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px 12px; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.bands legend { font-size: 12.5px; color: var(--ink-3); padding: 0 4px; }
.bands label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.st.draft { --dot: var(--pend); }
.st.paused { --dot: var(--warn); }
.warnline { color: var(--warn); margin: 10px 0 0; max-width: 76ch; }
.camp-button { display: flex; flex-wrap: wrap; gap: 0 10px; }
.camp-button input { flex: 1 1 220px; min-width: 0; }

/* Relations on a phone: the heading and its pages wrap in line with the other tabs */
@media (max-width: 820px) {
  .group, .group-links { display: contents; }
  .group { margin-top: 0; }
  .group-head { width: auto; flex: none; white-space: nowrap; gap: 6px; padding: 5px 9px; }
  .filters { flex-wrap: wrap; }                       /* the firm and Letters Ready chips drop below, never off the edge */
}

/* ---- the Patients view (work/PLAN-patients.md) ---------------------------------------------------------------------- */
.camp-seg { margin: -4px 0 18px; }
.pat-filters { flex-wrap: wrap; }
.pat-filters input { flex: 1 1 240px; min-width: 0; }
.pat-filters select { flex: 1 1 100px; min-width: 0; max-width: 220px; }
/* Relationships (work/PLAN-follow.md): the status picker as the page's other selects; the note box fills its cell */
#view-rel td.wrap input { width: 100%; min-width: 12em; }
/* Workers' Comp (work/PLAN-workcomp.md): a company a block, its people a table */
.wc-co { margin-bottom: 26px; }
.wc-co h2 .dim { font-weight: 400; }
#view-partnerwc .filters label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
#view-partnerwc td.lab a[href^="tel:"] { white-space: nowrap; }
.grid.patients td:nth-child(3) { min-width: 9em; }
.pat-standing { margin: 10px 0 0; }
.st.o-ok { --dot: var(--ok); }
.st.o-pend { --dot: var(--pend); }
.st.o-warn { --dot: var(--warn); }
.st.o-quiet { --dot: var(--quiet); }
.camp-cap { display: block; margin: 2px 0 12px; color: var(--ink-2); }
.camp-cap input { width: 5.5em; display: inline-block; margin: 0 2px; padding: 5px 8px; text-align: right; }
.testers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -12px 0 22px; font-size: 13px; }
.testers-l { color: var(--ink-3); }
.tester { white-space: nowrap; }
.tester .link { font-size: 12.5px; color: var(--ink-3); }
.testers-add { display: inline-flex; gap: 6px; }
.testers-add input { width: 15em; padding: 5px 9px; font-size: 13px; }
.testers-add button { padding: 5px 12px; font-size: 13px; }

/* ---- the Payments tab (work/PLAN-payments.md step 4) ---------------------------------------------------------------- */
.pay-figs { margin: 16px 0 0; padding-bottom: 16px; }
.pay-seg { margin: 0 0 14px; }
.grid.pay td:nth-child(3) { min-width: 10em; }
.grid.pay.owed2 td:nth-child(3) { min-width: 0; }               /* Owed (Patient) and Owed (Other): no Services column */
.grid tr.void td { color: var(--ink-3); }
.grid tr.void td:nth-child(n+3) { text-decoration: line-through; }
.grid tr.payrow td { background: var(--tint); }
.pay-mini { gap: 10px 30px; padding: 2px 0 14px; margin-bottom: 12px; }
.pay-mini .fig .n { font-size: 17px; }
.paynote { color: var(--ink-2); margin: 0 0 4px; }
.paysvc tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.pay-codes-lede { margin: 0 0 12px; max-width: 72ch; }
.paybuilt { color: var(--ink-3); font-size: 12.5px; margin-top: 18px; max-width: 90ch; }
.paywarn { color: var(--warn); }
@media (min-width: 1100px) { .split.wide { grid-template-columns: minmax(0, 1fr); } }

/* why the sign-in page is showing: a sign-in that ran out, or the dashboard not reachable (2026-10-15) */
.signinnote { color: var(--warn); }

/* ---- Today (work/PLAN-dash-next.md step 2) ------------------------------------------------------------------------- */
.today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: start; }
.today h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.need { margin-bottom: 22px; }
.need h3 { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; }
.need ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.need li { border-bottom: 1px solid var(--line-2); }
.need-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; width: 100%; padding: 9px 8px; margin: 0; text-align: left;
             font: inherit; color: var(--ink); border-radius: 0; text-decoration: none; font-weight: 400; }
.need-line:hover { background: var(--tint); text-decoration: none; }
.need-line .st { align-self: center; }
.need-what { font-weight: 500; }
.need-sub { font-size: 13px; color: var(--ink-3); }
.need-more { display: inline-block; margin-top: 8px; font-size: 13px; }
.today-week .asof { margin: -8px 0 12px; }
.fig.unread .l { color: var(--ink-2); }      /* a figure that could not be read: its label and why, no number */
.fig.unread .sub { max-width: 26ch; }
/* the figures big, as many across as fit (Jack 2026-10-16: "make the rest of it bigger") */
.week-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 40px; }
.week-figs .fig { padding: 2px 0; }
.week-figs .fig .n { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.week-figs .fig .l { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }
.week-figs .fig .sub, .week-figs .fig .chg { font-size: 14px; margin-top: 4px; }
.week-figs .spark { width: 120px; height: 38px; margin-top: 10px; }
@media (max-width: 420px) { .week-figs { grid-template-columns: minmax(0, 1fr); gap: 26px; } .week-figs .fig .n { font-size: 34px; } }

/* ---- Phone Calls: the to-do and the numbers apart; Payments By Month ----------------------------------------------- */
.calls-seg { margin: -4px 0 18px; }
.month-table { margin-top: 24px; }
.month-table td .sub { white-space: nowrap; }
.chart .charge-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .charge-dot { fill: var(--ink-2); stroke: var(--paper); stroke-width: 1.5; }
.sub.camein { color: var(--ok); }

/* The Website tab and the small charts under New Leads and Phone Calls (work/PLAN-site-tab.md) */
.mini-table table.grid { max-width: 520px; }



/* The Send column, first in the Payments and Cases lists: as narrow as its button */
.grid th.sendcol, .grid td.sendcol { width: 1%; white-space: nowrap; padding-right: 10px; }

/* Paid Ads (work/PLAN-ads-tab.md step 5): all ads, then Meta and Google side by side, each named under its chart colour */
#adsfigs { margin-top: 18px; }
.ads-group-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0; }
.ads-group-h i, .plat i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.ads-group .calls-figs { margin-top: 10px; }
.plat { display: inline-flex; align-items: baseline; gap: 7px; }
.plat i { transform: translateY(1px); }
#adstable td:first-child .dim, #adsreach .drawers td:first-child .dim { padding-left: 17px; }
/* Who The Ads Reached (work/PLAN-reach.md) takes the campaign table's sizes */
#adstable td .dim, #adsreach td .dim { font-size: 12.5px; }
#adstable td.num .dim, #adsreach td.num .dim { white-space: normal; max-width: 130px; margin-left: auto; font-size: 12px; line-height: 1.35; }

/* ---- Sources, To Act On, how a patient found us (work/PLAN-sources.md) ------------------------------------------------ */
.grid.sources td:first-child .spark { margin-top: 4px; }
.today-act { margin-bottom: 26px; }
.today-act h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
/* Today's More (2026-10-20): the lists and the week folded beneath To Act On, each with its own heading inside */
.act-figs { gap: 14px 36px; }
.journey { margin: -2px 0 12px; font-size: 13px; color: var(--ink-2); max-width: 820px; }
.journey:empty { display: none; }
.journey .dim { margin-right: 6px; }
.journey .st { margin-left: 4px; font-size: 12.5px; }
.camp-aud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; color: var(--ink-2); }
.camp-aud select { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }

/* ---- one place for each thing (work/PLAN-dash-simple.md) --------------------------------------------------------------- */
/* A page's views: one line of words under its head, each a link with its own address; the one showing is blue and
   semibold over a 2px blue bar on the row's hairline (work/PLAN-dash-sort.md step 1) */
.views { display: flex; flex-wrap: wrap; gap: 0 18px; margin: -6px 0 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.views a { color: var(--ink-2); padding: 0 0 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; }
.views a:hover { color: var(--blue); text-decoration: none; }
.views a.on { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); }
.views a .count { margin-left: 6px; }                       /* a view's own count, as Replies' on Money Owed (work/PLAN-dash-split.md) */
/* a filter that is on or off is the native checkbox, in the filters row */
.checkline { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink-2); cursor: pointer; }
.checkline input { width: 16px; height: 16px; margin: 0; }
/* the firm page: a hold said in the warn ink, under the head */
.firmheld { margin: 0 0 14px; }
a.firmlink { color: inherit; }
a.firmlink:hover { color: var(--blue); }
/* a sectioned table: a thin heading row inside the table, on a hairline, no fill (Still To Call Back, Everything Else) */
.grid tr.sect td { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 16px 12px 6px; border-bottom: 1px solid var(--line); }
.grid tbody tr.sect:first-child td { padding-top: 8px; }
.grid.callsday td:first-child { width: 4.5em; }
/* New Leads: the desk's Additional Notes, as typed; kept narrow so the call and its outcome stay in view */
.grid td.notes { min-width: 12em; max-width: 22em; overflow-wrap: break-word; color: var(--ink-2); }

/* Stacked rows on a phone: a table of people or calls draws each row as two or three short lines in reading order, the
   head row dropped; a .num or .lab cell says its column's name before itself; nothing scrolls sideways */
@media (max-width: 820px) {
  .grid.stack { display: block; font-size: 14px; }
  .grid.stack thead { display: none; }
  .grid.stack tbody, .grid.stack tfoot { display: block; }
  .grid.stack tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; padding: 11px 2px; border-bottom: 1px solid var(--line-2); }
  .grid.stack tbody tr.sect { padding: 14px 2px 4px; border-bottom: 1px solid var(--line); }
  .grid.stack tbody tr.sect td { padding: 0; border: 0; flex: 1 1 100%; }
  .grid.stack td { display: block; padding: 0; border: 0; max-width: 100%; }
  .grid.stack td.lead { flex: 1 1 58%; min-width: 0; order: -1; font-weight: 500; }
  .grid.stack td.lead .sub { font-weight: 400; }
  .grid.stack td.num.key { margin-left: auto; order: -1; }
  .grid.stack td.firm { order: 0; flex-basis: 100%; }
  .grid.stack td.notes { flex-basis: 100%; min-width: 0; max-width: 100%; }
  .grid.stack td.sendcol { order: 9; width: auto; padding: 0; }
  .grid.stack td.num[data-l]::before, .grid.stack td.lab[data-l]::before { content: attr(data-l) " "; font-size: 12px; color: var(--ink-3); font-weight: 400; }
  .grid.stack td.num .sub { text-align: right; }
  .grid.stack td:empty { display: none; }
  .grid.stack td.dim { white-space: normal; }
  .grid.stack .clip { white-space: normal; }
  .grid.stack tfoot tr { display: block; }
  .grid.stack tfoot td { display: block; padding: 14px 2px 0; }
  .grid.stack tbody tr.apptmore { display: block; padding: 0 0 6px; }
  .grid.stack tbody tr.apptmore > td { display: block; padding: 10px 10px 2px; }
  .scroll:has(> .grid.stack) { overflow-x: visible; }
}
/* Sources (work/PLAN-dash-simple.md step 3): a channel's colour as a small square before its name; the unknown row quiet */
.chdot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; transform: translateY(1px); }
.grid tr.quiet td { color: var(--ink-3); }
.grid tr.quiet td strong { color: var(--ink-2); }
/* a wide numbers table keeps its sideways scroll with the first column pinned */
.grid.pin td:first-child, .grid.pin th:first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.grid.pin th:first-child { z-index: 2; }
/* Today's To Act On: what is waiting, then the lists to work through, under one hairline */
.act-figs { padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.act-row { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.act-h { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 22px 0 10px; }
.act-none { color: var(--ink-3); }
/* a chart's heading as its grain: the h3 type, no box, a drawn chevron after the words, blue on hover */
.headpick-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.headpick { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0 16px 0 0; margin: 0; cursor: pointer;
            -webkit-appearance: none; appearance: none; border-radius: 4px; }
.headpick:hover, .headpick:hover + svg { color: var(--blue); }
.headpick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.headpick-wrap svg { position: absolute; right: 0; width: 10px; height: 10px; pointer-events: none; color: var(--ink-3); }

/* The picker's presets are words (work/PLAN-dash-sort.md step 5): note type, the chosen one blue and semibold, no boxes */
.presets { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.presetsel { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; display: none; }
@media (max-width: 820px) { .presets { display: none; } .presetsel { display: block; width: auto; } }
.preset { padding: 2px 0; font-size: 13px; font-weight: 400; color: var(--ink-2); border-radius: 4px; }
.preset:hover { background: none; color: var(--blue); }
.preset.on { color: var(--blue); font-weight: 600; }
/* a figure that chooses (Payments): the figure as a button, its label underlined on hover; the pressed one the lead, blue */
button.figpick { display: block; text-align: left; padding: 0; color: var(--ink); font-weight: inherit; border-radius: 6px; }
button.figpick:hover { background: none; }
button.figpick:hover .l { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
button.figpick.on .n { color: var(--blue); }
button.figpick .l svg { width: 10px; height: 10px; margin-left: 4px; vertical-align: 0; color: var(--ink-3); }
button.figpick:hover .l svg, button.figpick.on .l svg { color: var(--blue); }
.figures { align-items: flex-start; }
button.figpick { line-height: 1.45; border: 0; }
/* a page's second half folded under one disclosure (Paid Ads: More From Meta And Google), closed on every load */
/* The drawer (work/PLAN-dash-open.md): one line, closed, its headline after the name; open, its body beneath */
details.drawer { border-top: 1px solid var(--line); }
details.drawer > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer > summary svg { width: 12px; height: 12px; flex: none; align-self: center; color: var(--ink-3); transition: transform 150ms ease-out; }
details.drawer[open] > summary svg { transform: rotate(90deg); }
details.drawer > summary:hover .dname { color: var(--blue); }
details.drawer .dhead { font-size: 13px; font-weight: 400; color: var(--ink-3); }
details.drawer .dhead:not(:empty)::before { content: "· "; }
details.drawer .dbody { padding: 4px 0 22px; }
details.drawer.none > summary { color: var(--ink-3); pointer-events: none; }
details.drawer.none > summary svg { visibility: hidden; }
.drawers { margin-top: 18px; border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { details.drawer > summary svg { transition: none; } }
#adstable table.grid, #adsreach table.grid { max-width: none; }

/* A campaign, an email or the site that sent a link in bio visit, under its channel on Sources and on Payments' By Where
   They Came From (work/PLAN-links.md steps 3 and 4): indented and lighter, so the channel's own row reads first. */
.grid tr.part td { color: var(--ink-2); font-size: 13px; border-top-color: var(--line-2); }
.grid tr.part td.lead { padding-left: 30px; }
.grid tr.part td.lead .sub { display: inline; margin-left: 6px; }
.owedsteps { grid-column: 1 / -1; }      /* Money Owed: the three patient letters side by side, under the figures */
.timingcheck { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
.timingcheck h4 { margin: 0 0 6px; font-size: 13px; }
.timingcheck p { margin: 0 0 6px; }
/* A chart's grain beside its heading (headPick): Day, Week, Month as plain words, the one showing underlined */
.grainlinks { margin-left: 14px; font-weight: 400; font-size: 13px; white-space: nowrap; }
.grainlinks button { background: none; border: 0; padding: 2px 0; margin-right: 12px; font: inherit; color: var(--ink-3); cursor: pointer; }
.grainlinks button:hover { color: var(--blue); }
.grainlinks button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: default; }

/* Partner Outreach (work/PLAN-outreach.md): four columns of partner cards; one column under 900px */
.po-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 4px 0 28px; }
.po-col { background: var(--rail); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
.po-col h2 { font-size: 13.5px; margin: 0 0 10px; }
.po-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; margin-top: 8px; }
.po-who { font-weight: 600; overflow-wrap: anywhere; }
.po-card .sub { display: block; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.po-line { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 900px) { .po-board { grid-template-columns: 1fr; } }

/* Plain lines, one sentence each with a hairline between (Health's What Disagrees and Counted Two Ways,
   work/PLAN-dash-merge.md step 2) */
.lines { list-style: none; margin: 0; padding: 0; max-width: 90ch; }
.lines li { padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.lines li:first-child { padding-top: 2px; }
.lines li:last-child { border-bottom: 0; }
/* Re-Kindling's Unmatched drawer heads its list, as Sent Patients' did (work/PLAN-dash-trim.md step 2) */
#relbody > .drawers:first-child { margin: 0 0 18px; }

/* ---- the Owed sheet (work/PLAN-owed.md step 3): Firms, Adjusters and Insurers on Money Owed ----------------------------
   a row per case and a column per fact; long words clip to one line with the whole on hover, the next step may take two;
   a row opens in place under itself, on blue wash, with what the office types: two columns at desk width, one on a phone */
.grid.sheet .clip { display: block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid.sheet td.lead .clip { max-width: 10em; }
.grid.sheet td.firm { min-width: 10em; max-width: 18em; }
.grid.sheet td.firm .sub a { white-space: nowrap; }
.grid.sheet td.step { min-width: 14em; max-width: 22em; }
.grid.sheet td.step .clip { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.grid.sheet td.notes { min-width: 6em; max-width: 10em; }
.grid.sheet td.wrap.lab { min-width: 9em; max-width: 14em; }
.grid.sheet td.wrap.lab .clip { max-width: 14em; }
.grid.sheet td.notes .clip { max-width: 10em; }
.grid.sheet td.firm .clip, .grid.sheet td.firm a { overflow-wrap: anywhere; }
.grid.sheet .papers { gap: 3px 10px; }
.grid.sheet tr.sheetmore td { background: var(--blue-tint); padding: 14px 16px 12px; white-space: normal; cursor: default; }
.sheetpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 32px; max-width: 1080px; }
.sheetpanel.one { display: block; }
.sheetpanel.one p { margin: 0 0 8px; }
.sheetpanel > .apptlinks, .sheetpanel > .savenote, .sheetpanel > p.dim { grid-column: 1 / -1; margin: 0; }
.sp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sf-l { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sf-hint { font-size: 12.5px; color: var(--ink-3); }
.sf input[type="text"], .sf textarea { width: 100%; min-width: 0; }
.sf textarea { line-height: 1.45; resize: vertical; min-height: 84px; }
.sheetpanel select { max-width: 260px; }
.sheetpanel input:disabled, .sheetpanel textarea:disabled, .sheetpanel select:disabled { background: var(--rail); color: var(--ink-2); }
.sf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-call { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sf-call input[type="text"] { flex: 1 1 200px; width: auto; }
.sf-call input[type="date"] { padding: 8px 10px; }
.calls-typed { list-style: none; margin: -4px 0 0; padding: 0; }
.calls-typed li { padding: 6px 0; border-bottom: 1px solid #d5e3f6; overflow-wrap: anywhere; }
.calls-typed li .sub { display: inline; margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.sheetpanel .papers .checkline { white-space: normal; }
/* The one panel (work/PLAN-owed-simple.md step 2): the thing to do across the top, then what she learns and what is on file */
.sp-do { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px;
  padding-bottom: 12px; border-bottom: 1px solid #d5e3f6; }
.sp-step { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.sp-step .dim { font-weight: 400; font-size: 13px; }
.sp-reach { font-size: 14px; color: var(--ink-2); }
.sp-reach a[href^="tel:"] { white-space: nowrap; }
.sp-find { flex: 1 1 320px; max-width: 460px; }
.sp-more summary { cursor: pointer; font-size: 13px; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.sp-more summary::-webkit-details-marker { display: none; }
.sp-more summary svg { width: 12px; height: 12px; transition: transform .15s; }
.sp-more[open] summary svg { transform: rotate(90deg); }
.sp-morebody { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sp-morebody p { margin: 0; }
.sheetpanel.onpage { background: var(--blue-tint); border-radius: 8px; padding: 16px 18px 12px; margin: 4px 0 24px; }
.sheetpanel > .sp-more { grid-column: 1 / -1; }
.sp-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-decide input[type="number"] { width: 9em; padding: 6px 10px; }
.sp-decide .press { border-color: var(--blue); padding: 5px 12px; }
.sp-decide .checkline { font-size: 13.5px; }
.grid.sheet td.step .does { display: block; margin-top: 4px; }
.story-reach { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
/* A case's files (work/PLAN-owed-simple.md step 5): one line each, its tick under it; Add A File picks, then asks what it is */
.sf textarea[rows="2"] { min-height: 58px; }
.files, .files-more { list-style: none; margin: 0; padding: 0; }
.files li, .files-more li { padding: 6px 0; border-bottom: 1px solid #d5e3f6; overflow-wrap: anywhere; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 4px 12px; }
.files li .sub, .files-more li .sub { display: inline; margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.files li .checkline { font-size: 13px; white-space: normal; }
.files-more li { justify-content: space-between; }
.file-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.file-add .file-name { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.button-like { position: relative; display: inline-flex; align-items: center; color: var(--blue); font-weight: 500; border: 1px solid var(--blue);
  border-radius: 6px; padding: 5px 10px; font-size: 13.5px; cursor: pointer; }
.button-like:hover { background: var(--paper); }
.button-like:focus-within { box-shadow: 0 0 0 3px var(--blue-tint); }
.file-pick { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.letter .goes { margin-top: 14px; }
.letter .goes h3 { font-size: 13px; margin: 0 0 6px; color: var(--ink-3); }
.letter .goes ul { list-style: none; margin: 0; padding: 0; max-width: 76ch; }
.letter .goes li { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.letter .goes li .sub { display: inline; margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.letter .goes p { margin: 8px 0 0; font-size: 12.5px; }
/* What needs doing across the top of the Owed sheet: one button each, the count large, what it is, what it owes */
.worklist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; max-width: 1136px; }
.worklist .work { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 400; min-width: 0; }
.worklist .work:hover { background: var(--blue-tint); }
.worklist .work .n { font-size: 22px; font-weight: 600; line-height: 1.1; }
.worklist .work .l { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.worklist .work .m { font-size: 12.5px; color: var(--ink-3); }
.worklist .work.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-tint); }
.worklist .work.w-send .n { color: var(--blue); }
@media (max-width: 820px) { .worklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.sheet td.step .sendlink { display: inline-block; margin-top: 6px; font-size: 13px; padding: 4px 10px; border-color: var(--blue);
  background: var(--paper); }
.grid.sheet td.step .sendlink:hover { background: var(--blue-tint); }
/* At desk width the sheet reads like a spreadsheet (Jack 2026-10-30, "thinner"): tight rows of two lines, the next step on one
   line with whose turn and its button beside each other under it */
@media (min-width: 821px) {
  .grid.sheet td { padding: 5px 10px; line-height: 1.35; }
  .grid.sheet .sub { margin-top: 0; }
  .grid.sheet td.step .clip { -webkit-line-clamp: 1; }
  .grid.sheet td.step .sub { display: inline; margin-right: 8px; }
  .grid.sheet td.step .sub.does { display: inline; margin-top: 0; }
  .grid.sheet td.step .sendlink { margin-top: 0; font-size: 12.5px; padding: 0 8px; line-height: 1.5; }
}
@media (max-width: 820px) {
  .sheetpanel { grid-template-columns: minmax(0, 1fr); }
  .sheetpanel.onpage { padding: 12px; }
  .sf-row { grid-template-columns: minmax(0, 1fr); }
  .grid.stack tbody tr.sheetmore { display: block; padding: 0 0 6px; }
  .grid.stack tbody tr.sheetmore td { display: block; padding: 12px 10px 10px; }
  .grid.stack.sheet td.step { flex-basis: 100%; max-width: 100%; }
  .grid.stack.sheet .clip { max-width: 100%; }
}

/* ---- the Inbox under Partners (work/PLAN-mkt-inbox.md step 3): the lanes are pressable figures, then the search and
   two selects, then Replies' list and pane; icons are the 12px drawn strokes, nothing new in size or colour ---------- */
.mk-lanes { margin-bottom: 14px; }
.mk-filters { flex-wrap: wrap; }
.mk-filters select { flex: 0 1 auto; }
.mk-subj { display: inline-flex; align-items: center; gap: 6px; }
.mk-flag svg, .mk-clip svg, .mk-files svg, .mk-back svg { width: 12px; height: 12px; flex: none; }
.mk-flag { color: var(--blue); display: inline-flex; }
.mk-clip { color: var(--ink-3); display: inline-flex; }
.mk-who { margin-bottom: 4px; }
.mk-who h2 { margin: 0 0 4px; }
.mk-who p { margin: 2px 0; }
.mk-files { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.mk-files button { display: inline-flex; align-items: center; gap: 4px; }
.mk-file { margin: 0; display: inline-flex; }
@media (min-width: 1100px) { .mk-back { display: none; } }

/* The Inbox's drafted reply (work/PLAN-mkt-inbox.md step 4): a draft held back by the checks, struck through */
.mk-drafted { margin: 0 0 6px; }
.mk-held { margin: 0 0 8px; }
.mk-held p { margin: 0 0 6px; }
.mk-held .body { text-decoration: line-through; color: var(--ink-3); white-space: pre-wrap; font-size: 13px; }

/* The Inbox's Send (step 5): New Email in the bar, To and Subject in the pane */
.mk-new { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.mk-new svg { width: 12px; height: 12px; flex: none; }
.mk-compose { display: grid; gap: 8px; margin: 12px 0; }
.mk-compose label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.mk-compose input { width: 100%; min-width: 0; }

/* Demographics (work/PLAN-demographics.md): a count with its share bar in one cell; Google's bar orange like Paid Ads' */
.demo-table table.grid { max-width: 980px; }
.demo-table td.lead { white-space: nowrap; }
.demo-bar { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.demo-bar .demo-n { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.demo-bar .share-l:empty { display: none; }
.demo-bar.google .share-fill { background: var(--k-wc); }

/* Paid Ads' table in two parts, the running ads first (2026-11-05) */
.ads-part { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }

/* Partners' parts on one page (2026-11-05): Referrers' two lists, Outreach's Brought In and board */
.rel-part { font-size: 16px; font-weight: 600; margin: 26px 0 10px; }   /* the other pages' section heads (2026-11-07) */
.rel-part:first-of-type { margin-top: 6px; }
#tabs a.tracker-link { padding-left: 22px; font-size: 13px; }   /* indented as the pages under Billing; 13px keeps its name on one line */

/* Health's Handoff (2026-11-05): one big button, then the text to copy */
.handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 20px; }
.handoff-btn { font-size: 16px; padding: 11px 22px; }
#handoffbox { flex: 1 1 100%; }
#handofftext { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fff); color: var(--ink); resize: vertical; }
.handoff-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
@media (max-width: 820px) { #tabs a.tracker-link { padding-left: 9px; font-size: inherit; } }
/* This Is Them on New Leads (work/PLAN-unknown.md step 6): the button under the name, never broken */
.tie button { display: block; white-space: nowrap; padding: 2px 0 0; text-align: left; }
/* Since The Start on Today (work/PLAN-totals.md): the same big figures as This Week Against Last, set apart below it */
.today-totals { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.today-totals > .asof { margin: -6px 0 18px; }
.today-totals .note { margin-top: 26px; font-size: 14px; color: var(--ink-2); }
.today-totals #todaytotals > .asof { margin-top: 6px; }