/* ===========================================================================
   Design system, rebuilt from tokens rather than patched.
   One accent hue generates its own tints through color-mix, so colour lives in
   surfaces and structure — not just on buttons. Semantic red/amber/green are
   fixed and never themed.
   =========================================================================== */
:root{
  /* hue is the only thing a theme changes */
  /* 28.1 — the approved green, set explicitly.
     27.4 rotated the hue to 165 but left chroma at 0.19, which gives #009A5D:
     a bright emerald, not the muted #2F6F62 that was signed off. The approved
     colour is hue 178 at chroma 0.069 — barely a third as saturated — so the
     chroma has to come down with the hue or it stays the wrong green.
     --h still drives the neutrals and is still what a theme changes. */
  --h: 178;
  --acc:      oklch(49.6% 0.069 var(--h));   /* #2F6F62 */
  --acc-hi:   oklch(58.6% 0.082 var(--h));   /* #3E8C7B */
  --acc-lo:   oklch(37.5% 0.051 var(--h));   /* #1E4A41 */
  --acc-12:   oklch(96.5% 0.014 var(--h));
  --acc-20:   oklch(93.5% 0.026 var(--h));
  --acc-35:   oklch(88% 0.040 var(--h));
  /* 28.5 — this was the SAME fault 28.1 fixed for --acc, missed here.
     It still carried chroma 0.19/0.20 (the rejected bright emerald) and rotated
     the hue by +42 and +96 — and 178 + 96 lands on blue, which is where the
     green-to-blue stripe on the client cards came from. --grad is not only on
     those cards: it is on the hero rule, the background blur and the app's own
     logo mark, so the wrong gradient was on nearly every screen.
     Now the approved ramp #1E4A41 → #2F6F62 → #3E8C7B, identical to
     --hero-grad below, which 28.1 did correct. One hue, chroma held down. */
  --grad: linear-gradient(135deg,
     oklch(37.5% 0.051 var(--h)) 0%,
     oklch(49.6% 0.069 var(--h)) 55%,
     oklch(58.6% 0.082 var(--h)) 100%);

  /* Neutrals are near-grey in the approved palette (#F6F6F3, #E4E5E0), not a
     tinted green. Chroma dropped so pages read as paper. */
  /* 09/09/2026 — the page (--bg) was #F6F6F3, a cream; cards are #fff. On screen
     that read as two colours — a white top area over a cream page below. Owner
     asked for one white background throughout. --bg is now pure white. Cards
     stay legible on it via their border + shadow (not the old cream contrast).
     Only --bg changed; --surface-2 (input/hover wash) is left as-is so fields
     and table headers keep a faint edge and do not disappear into the page.
     Old value kept: --bg: oklch(97.2% 0.004 var(--h));  #F6F6F3 */
  --bg:       #fff;
  --surface:  #fff;
  --surface-2:oklch(98.6% 0.004 var(--h));   /* #FAFBF8 */
  --line:     oklch(92% 0.007 var(--h));     /* #E4E5E0 */
  --line-soft:oklch(95% 0.005 var(--h));
  --ink:      oklch(22.8% 0.008 var(--h));   /* #1B1D1C */
  --ink-2:    oklch(37.3% 0.008 var(--h));   /* #3D423F */
  --muted:    oklch(58% 0.009 var(--h));     /* #767C78 */

  --ok:#0F7350; --ok-bg:oklch(96% 0.04 160);
  --warn:#9A6414; --warn-bg:oklch(96.5% 0.045 85);
  --bad:#B3261E; --bad-bg:oklch(96% 0.04 25);
  --ledger:var(--ok); --amber:var(--warn); --signal:var(--bad);
  --white:var(--surface); --paper:var(--bg); --slate:var(--muted);
  --line-2:var(--line-soft); --tint:var(--acc-12); --brand:var(--acc);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  --e1: 0 1px 2px oklch(20% 0.02 var(--h) / .05);
  --e2: 0 1px 2px oklch(20% 0.02 var(--h) / .04), 0 4px 10px -3px oklch(20% 0.02 var(--h) / .07);
  --e3: 0 2px 4px oklch(20% 0.02 var(--h) / .04), 0 14px 32px -12px oklch(20% 0.02 var(--h) / .16);
  --e4: 0 30px 70px -24px oklch(20% 0.03 var(--h) / .34);

  --mono: ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
  --ui: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  --rail: 224px;
}
@supports not (color: oklch(50% 0.1 250)){
  /* 28.1 — this fallback still carried the pre-green indigo, so a browser
     without oklch showed the old purple app. Now the approved green. */
  /* 28.5 — --acc-hi, --acc-lo and the two gradients were not in this block, so
     a browser without oklch had no value for them at all and the hero rule, the
     logo mark and the card edges rendered with no background. Added in hex. */
  :root{ --acc:#2F6F62; --acc-12:#EAF2EF; --acc-20:#D8E7E2; --acc-35:#BCD5CE;
         --acc-hi:#3E8C7B; --acc-lo:#1E4A41; --acc-m:#3E8C7B; --acc-d:#1E4A41;
         --grad:linear-gradient(135deg,#1E4A41 0%,#2F6F62 55%,#3E8C7B 100%);
         --hero-grad:linear-gradient(135deg,#1E4A41 0%,#2F6F62 55%,#3E8C7B 100%);
         --bg:#fff; --surface-2:#FAFBF8; --line:#E4E5E0; --line-soft:#EFF0EC;
         --ink:#1B1D1C; --ink-2:#3D423F; --muted:#767C78; }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ui);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; font-feature-settings:"cv05","ss01";
}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
.num,td.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);background:var(--surface-2);
    padding:2px 5px;border-radius:var(--r-xs);color:var(--muted)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--acc-35)}

/* ===========================================================================
   Style axis. "Modern" is the default: tight sans, bright accent, soft cards.
   "Editorial" is the quieter register — warm paper, a serif for display sizes,
   hairline rules instead of shadows, more air, small-caps eyebrows. The tokens
   below are the only difference; every component reads from them.
   =========================================================================== */
body[data-style="editorial"]{
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --bg:       oklch(97.6% 0.012 calc(var(--h) + 40));
  --surface:  oklch(99.4% 0.004 calc(var(--h) + 40));
  --surface-2:oklch(97% 0.014 calc(var(--h) + 40));
  --line:     oklch(89% 0.018 calc(var(--h) + 40));
  --line-soft:oklch(93.5% 0.012 calc(var(--h) + 40));
  --ink:      oklch(27% 0.028 calc(var(--h) + 20));
  --muted:    oklch(52% 0.024 calc(var(--h) + 30));
  --acc:      oklch(48% 0.11 var(--h));
  --acc-hi:   oklch(58% 0.12 var(--h));
  --acc-lo:   oklch(38% 0.09 var(--h));
  --acc-12:   oklch(96% 0.02 var(--h));
  --acc-20:   oklch(92% 0.038 var(--h));
  --acc-35:   oklch(86% 0.055 var(--h));
  --e1:none; --e2:none; --e3:none;
  --e4: 0 30px 70px -24px oklch(30% 0.04 var(--h) / .30);
  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:10px;
}
body[data-style="editorial"] h1,
body[data-style="editorial"] .modal .mh h3,
body[data-style="editorial"] .report h1{
  font-family:var(--serif);font-weight:500;letter-spacing:-.012em;line-height:1.14;
}
body[data-style="editorial"] h1{font-size:clamp(26px,2.6vw,34px)}
body[data-style="editorial"] .card,
body[data-style="editorial"] ul.items li,
body[data-style="editorial"] .fold,
body[data-style="editorial"] table,
body[data-style="editorial"] .timeline li,
body[data-style="editorial"] .hero{border-color:var(--line);box-shadow:none}
body[data-style="editorial"] .hero{border-radius:var(--r-lg);padding:var(--s5)}
body[data-style="editorial"] .hero:before{height:2px}
body[data-style="editorial"] .rail{background:transparent;border-right:1px solid var(--line)}
body[data-style="editorial"] .mark .glyph{border-radius:50%;background:var(--acc)}
body[data-style="editorial"] .railnav a.on{background:transparent;border:none;box-shadow:none;
  color:var(--acc)}
body[data-style="editorial"] .railnav a.on .dot{box-shadow:none}
body[data-style="editorial"] .btn{background:var(--acc);border-radius:var(--r-sm);box-shadow:none;
  letter-spacing:.01em;font-weight:520}
body[data-style="editorial"] .btn:hover{transform:none;background:var(--acc-lo)}
body[data-style="editorial"] .chip{border-radius:var(--r-sm)}
body[data-style="editorial"] .tabs{border-radius:0;background:transparent;border:none;
  border-bottom:1px solid var(--line);padding:0;gap:var(--s4)}
body[data-style="editorial"] .tabs a{border-radius:0;padding:9px 0;border-bottom:2px solid transparent}
body[data-style="editorial"] .tabs a.on{background:transparent;box-shadow:none;color:var(--acc);
  border-bottom-color:var(--acc)}
body[data-style="editorial"] h2.sect,
body[data-style="editorial"] .dayhead .dow,
body[data-style="editorial"] .rep-kicker{font-variant:small-caps;text-transform:none;
  letter-spacing:.08em;font-size:12px;font-weight:600}
body[data-style="editorial"] ul.items li:before{width:2px;top:14px;bottom:14px;border-radius:0}
body[data-style="editorial"] .stats .stat{border-radius:var(--r-lg)}
body[data-style="editorial"] main{max-width:1060px}
body[data-style="editorial"] .grow p:first-child{font-size:14.5px}
body[data-style="editorial"] .report{border-radius:0;box-shadow:none;padding:44px 46px}
body[data-style="editorial"] .commentary{font-family:var(--serif);font-size:15px;line-height:1.65}

/* ── hero: light card, accent hairline ───────────────── */
.hero{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r-xl);padding:var(--s5) calc(var(--s5) + 4px);box-shadow:var(--e2)}
.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.hero > *{position:relative;z-index:1}
.dayhead .dow{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:680;
              color:var(--acc)}
.dayhead .line{margin-top:8px;font-size:13.5px;color:var(--muted)}
.dayhead .line b{color:var(--ink);font-weight:620}
.dtitle{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:650;color:var(--muted)}
.dnum{font-family:var(--mono);font-size:26px;font-weight:620;letter-spacing:-.04em;color:var(--acc);
      line-height:1;margin-top:6px}
.dnote{font-size:12px;color:var(--muted);margin-top:3px}

.stats .stat{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--e1)}
/* 24/08/2026 — a three-pixel gradient ran across the top of every tile, from
   the accent hue through +42 to +96 degrees. On a client page that is a band of
   colour crossing red, amber and green above figures whose whole meaning is
   carried by red, amber and green — decoration built from the semantic palette.
   It also disappears entirely in a mono print, so it was never carrying
   anything a reader could rely on.

   A single hairline in the accent instead: it still separates the tile from
   what is above it, in one colour that means nothing. Reports already hid this
   rule (see .report .stat:before below); now the app agrees with the report. */
.stats .stat:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--acc);opacity:.30}
@media print{ .stats .stat:before{display:none} }
.stats .stat .k{color:var(--muted)}
.stats .stat .v{color:var(--ink)}
.stats .stat.alert{background:var(--bad-bg);border-color:color-mix(in oklab,var(--bad) 20%,transparent)}
.stats .stat.alert .v{color:var(--bad)}
.stats .stat.warn{background:var(--warn-bg);border-color:color-mix(in oklab,var(--warn) 20%,transparent)}
.stats .stat.warn .v{color:var(--warn)}

/* ── shell ───────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
/* 23/08/2026 — reported from the live app: Sign out was half cut off at the
   bottom of the rail. The rail is exactly one screen tall and never scrolled,
   so on a laptop the eleven theme swatches, the style switch and the footer did
   not fit, and whatever was last simply went off the edge. It scrolls now, and
   dvh follows a mobile browser's shrinking viewport where vh does not. */
.rail{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;gap:var(--s5);
  padding:var(--s5) var(--s3);border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--acc-12), var(--bg) 42%);
  overflow-y:auto;overscroll-behavior:contain;min-height:0;
}
.rail > *{flex:none}
.railfoot{padding-bottom:var(--s3)}
.mark{display:flex;align-items:center;gap:10px;padding:0 var(--s2);text-decoration:none}
.mark .glyph{width:26px;height:26px;border-radius:8px;background:var(--grad);flex:none;
             box-shadow:var(--e2)}
.mark .wordmark{font-weight:640;letter-spacing:-.03em;font-size:15px}
.railnav{display:flex;flex-direction:column;gap:2px}
.railnav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
           text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500}
.railnav a:hover{background:var(--acc-12);color:var(--ink)}
.railnav a.on{background:var(--surface);color:var(--ink);font-weight:600;
              box-shadow:var(--e2);border:1px solid var(--line)}
.railnav a .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.35;flex:none}
.railnav a.on .dot{opacity:1;box-shadow:0 0 0 3px var(--acc-20)}
.railsec{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
         font-weight:650;padding:0 10px;margin-bottom:6px}
.railfoot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s3);padding:0 4px}
.railwho{font-size:11.5px;color:var(--muted);padding:0 6px;line-height:1.4}

.col{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);
        padding:0 var(--s5);height:56px;
        background:color-mix(in oklab, var(--bg) 78%, transparent);
        backdrop-filter:blur(14px) saturate(1.6);
        border-bottom:1px solid var(--line-soft)}
main{padding:var(--s5) var(--s5) 96px;max-width:1180px;width:100%}
.grow1{flex:1;min-width:0}
.spacer{margin-left:auto}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:var(--s3);
        border-right:none;border-bottom:1px solid var(--line);padding:var(--s3) var(--s4);
        overflow-x:auto}
  .railnav{flex-direction:row}
  .railsec,.railwho{display:none}
  .railfoot{margin:0 0 0 auto;flex-direction:row;align-items:center}
  main{padding:var(--s4) var(--s4) 80px}
  .topbar{padding:0 var(--s4)}
}

/* ── type ────────────────────────────────────────────── */
h1{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;font-weight:640;margin:0;line-height:1.08}
h2.sect{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:660;
        color:var(--muted);margin:0}
.sub{color:var(--muted);font-size:13px}

/* ── surfaces ────────────────────────────────────────── */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
             box-shadow:var(--e2)}
.card{padding:var(--s4) calc(var(--s4) + 4px)}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
      font-size:13.5px;border:1px solid var(--line);border-radius:var(--r-lg);
      overflow:hidden;box-shadow:var(--e2)}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
         color:var(--muted);font-weight:650;padding:11px 16px;background:var(--surface-2);
         border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--acc-12)}
.r{text-align:right}

/* ── controls ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--acc);color:#fff;border:none;
     padding:8px 14px;font-size:13px;font-weight:560;border-radius:var(--r-sm);
     box-shadow:var(--e1);transition:background .13s, transform .13s, box-shadow .13s}
.btn:hover{background:var(--acc-lo);transform:translateY(-1px);box-shadow:var(--e2)}
.btn:active{transform:none}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--muted);transform:none}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.inline-a{background:none;border:none;padding:0;font-size:12.5px;color:var(--acc);font-weight:520}
.inline-a:hover{text-decoration:underline;text-underline-offset:2px}
.inline-a.good{color:var(--ok)} .inline-a.bad{color:var(--bad)}

label.f{display:block;font-size:11.5px;color:var(--muted);font-weight:560}
select,input,textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);padding:9px 11px;margin-top:5px;
  border-radius:var(--r-sm);transition:border-color .12s, box-shadow .12s}
select:focus,input:focus,textarea:focus{border-color:var(--acc);outline:none;
  box-shadow:0 0 0 3px var(--acc-20)}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:560px){.two{grid-template-columns:1fr}}

.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
      padding:6px 11px;font-size:12.5px;border-radius:var(--r-full);font-weight:500}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip .k{font-family:var(--mono);opacity:.55;margin-right:5px;font-size:11px}
.chip.dir.on{background:var(--ink-2);border-color:var(--ink-2)}
/* 32.4 — a service chip shown to a non-owner: visible, on/off legible, not
   interactive. */
.chip.ro{cursor:default;opacity:.85}
.chip.ro:hover{border-color:var(--line)}
.divider{width:1px;height:20px;background:var(--line);margin:0 4px}
.pill{display:inline-block;font-size:10.5px;font-weight:660;letter-spacing:.05em;
      border-radius:var(--r-full);padding:3px 9px;text-transform:uppercase}
.pill.good{background:var(--ok-bg);color:var(--ok)}
.pill.ok{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.none{background:var(--surface-2);color:var(--muted)}
.badge{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:650;
       border-radius:var(--r-full);padding:3px 8px;background:var(--acc-12);color:var(--acc)}

.switch{display:inline-flex;gap:5px;flex-wrap:wrap}
.switch .sw{width:16px;height:16px;border-radius:50%;padding:0;border:2px solid transparent;
            box-shadow:var(--e1)}
.switch .sw.on{border-color:var(--ink);transform:scale(1.12)}
.scope-sel{width:100%;margin:0;font-size:12.5px;padding:7px 10px}

/* ── page furniture ──────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

.hero{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r-xl);padding:var(--s5) calc(var(--s5) + 4px);box-shadow:var(--e2)}
.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.hero:after{content:"";position:absolute;right:-120px;top:-160px;width:380px;height:380px;
            border-radius:50%;background:var(--grad);opacity:.10;filter:blur(30px)}
.hero > *{position:relative;z-index:1}
.dayhead{}
.dayhead .dow{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:680;
              color:var(--acc)}
.dayhead .line{margin-top:8px;font-size:13.5px;color:var(--muted)}
.dayhead .line b{color:var(--ink);font-weight:620}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--e1)}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}
.stat .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.04em;
         margin-top:6px;color:var(--ink)}
.stat .n{font-size:12px;color:var(--muted);margin-top:2px}
.stat.alert{background:var(--bad-bg);border-color:color-mix(in oklab,var(--bad) 22%,transparent)}
.stat.alert .v{color:var(--bad)}
.stat.warn{background:var(--warn-bg);border-color:color-mix(in oklab,var(--warn) 22%,transparent)}
.stat.warn .v{color:var(--warn)}

.group{margin-top:var(--s5)}
ul.items{list-style:none;margin:0;padding:0}
ul.items li{position:relative;display:flex;align-items:center;gap:var(--s3);
            padding:13px 16px 13px 18px;background:var(--surface);border:1px solid var(--line);
            border-radius:var(--r);margin-bottom:7px;box-shadow:var(--e1);
            transition:border-color .12s, box-shadow .12s, transform .12s}
ul.items li:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
                   border-radius:0 3px 3px 0;background:var(--acc-35)}
ul.items li:hover{transform:translateY(-1px);border-color:var(--acc-35);box-shadow:var(--e2)}
ul.items li.over:before{background:var(--bad)}
ul.items li.promise:before{background:var(--warn)}
.tag{flex:none;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:660;
     border-radius:var(--r-xs);padding:3px 7px;background:var(--surface-2);color:var(--muted);
     border:1px solid var(--line)}
.tag.filing{background:var(--acc-12);color:var(--acc);border-color:var(--acc-20)}
.tag.promise{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.grow{flex:1;min-width:0}
.grow p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow p:first-child{font-size:14px;font-weight:520;letter-spacing:-.01em}
.grow .meta{font-size:12px;color:var(--muted);margin-top:1px}
.due{font-family:var(--mono);font-size:12.5px;color:var(--muted);flex:none}
.due.over{color:var(--bad);font-weight:620}

.fold{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
      background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:12px 16px;margin-bottom:7px;font-size:13.5px;box-shadow:var(--e1)}
.fold:hover{background:var(--acc-12);border-color:var(--acc-35)}
.fold .cnt{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted);
           background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:1px 9px}
.fold .chev{font-family:var(--mono);color:var(--muted);width:12px;text-align:center}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s3);
       margin-top:var(--s4)}
.addcard{border:1px dashed var(--line);background:transparent;box-shadow:none;display:flex;
         align-items:center;justify-content:center;color:var(--muted);font-size:13.5px;
         min-height:150px;border-radius:var(--r-lg);width:100%}
.addcard:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-12)}

.tabs{display:flex;gap:2px;margin-top:var(--s4);font-size:13.5px;background:var(--surface-2);
      border:1px solid var(--line);padding:3px;border-radius:var(--r-full);width:fit-content;
      max-width:100%;overflow:auto}
.tabs a{text-decoration:none;padding:6px 14px;color:var(--muted);border-radius:var(--r-full);
        white-space:nowrap;font-weight:520}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--surface);color:var(--ink);font-weight:620;box-shadow:var(--e1)}

/* ── the ledger gutter ───────────────────────────────── */
.timeline{list-style:none;margin:var(--s3) 0 0;padding:0}
.timeline li{display:grid;grid-template-columns:132px 1fr;background:var(--surface);
             border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px;
             box-shadow:var(--e1);overflow:hidden}
.tl-when{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:14px;text-align:right;
         border-right:2px solid var(--line-soft);background:var(--surface-2)}
.tl-when .d{color:var(--ink);font-weight:620;display:block;letter-spacing:-.02em}
.timeline li.stage .tl-when{border-right-color:var(--warn)}
.timeline li.inbound .tl-when{border-right-color:var(--ok)}
.tl-body{padding:13px 16px}
.tl-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
         display:flex;gap:10px;flex-wrap:wrap;font-weight:620}
.tl-head .amber{color:var(--warn)}
.withtag{background:var(--acc-12);color:var(--acc);border-radius:var(--r-full);padding:1px 9px;
         font-weight:650;letter-spacing:.04em}
.tl-sum{margin:6px 0 0}
.tl-out{margin:4px 0 0;font-size:12.5px;color:var(--muted)}

.flag{border:1px solid color-mix(in oklab,var(--warn) 30%,transparent);background:var(--warn-bg);
      border-radius:var(--r);padding:12px 16px;font-size:13px;margin-bottom:var(--s3)}
.ok{border:1px solid color-mix(in oklab,var(--ok) 30%,transparent);background:var(--ok-bg);
    border-radius:var(--r);padding:12px 16px;font-size:13px;color:var(--ok);margin-top:var(--s3)}
.err{color:var(--bad);font-size:13px}
.empty{padding:var(--s6);text-align:center;color:var(--muted);background:var(--surface);
       border:1px dashed var(--line);border-radius:var(--r-lg)}
.banner{background:var(--acc-12);border:1px solid var(--acc-20);border-radius:var(--r);
        padding:11px 16px;font-size:12.5px;color:var(--ink-2);margin-bottom:var(--s4)}
.scope-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
           border-left:3px solid var(--acc);border-radius:var(--r);padding:10px 16px;
           font-size:13px;margin-bottom:var(--s4);box-shadow:var(--e1)}

/* ── modal + palette ─────────────────────────────────── */
.overlay{position:fixed;inset:0;background:oklch(20% 0.02 var(--h) / .42);backdrop-filter:blur(4px);
         z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px}
.modal{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);
       border-radius:var(--r-xl);box-shadow:var(--e4);overflow:hidden;animation:pop .15s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}
  ul.items li,.btn{transition:none}}
.modal .mh{display:flex;justify-content:space-between;align-items:center;gap:12px;
           padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.modal .mh h3{margin:0;font-size:15px;letter-spacing:-.02em}
.modal .mb{padding:20px;display:flex;flex-direction:column;gap:13px;max-height:66vh;overflow:auto}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:13px 20px;
           border-top:1px solid var(--line-soft);background:var(--surface-2)}
.promise-box{border-left:2px solid var(--warn);padding-left:13px;display:grid;
             grid-template-columns:1fr 1fr;gap:12px}
.palist{max-height:52vh;overflow:auto;padding:6px}
.palrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
        border:none;padding:9px 14px;font-size:13.5px;border-radius:var(--r-sm)}
.palrow.sel{background:var(--acc-12)}
.pkind{flex:none;width:72px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
       color:var(--acc);font-weight:660}
.plab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psub{display:block;font-size:11.5px;color:var(--muted)}

/* ── import + review bits ────────────────────────────── */
.drop{border:1.5px dashed var(--line);background:var(--surface);padding:var(--s5);text-align:center;
      color:var(--muted);font-size:13.5px;display:block;border-radius:var(--r-lg)}
.drop:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-12)}
.maprow{display:flex;align-items:center;gap:12px;margin-top:9px}
.maprow span.lbl{width:190px;font-size:13px;color:var(--muted);flex:none}
.maprow select{margin-top:0}
.req{color:var(--bad)}
.rowline{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-xs);
         cursor:pointer;font-size:13px}
.rowline:hover{background:var(--acc-12)}
.rowline .tick{width:16px;height:16px;border-radius:5px;display:inline-flex;align-items:center;
               justify-content:center;font-size:10px;color:#fff;background:var(--acc);
               border:1px solid var(--acc)}
.rowline.off{opacity:.45}
.rowline.off .tick{background:transparent;border-color:var(--muted)}
.rowline.off .rl{text-decoration:line-through}
.rowline .rl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowline .rv{color:var(--muted);font-size:12.5px}
.nextcard{border-left:3px solid var(--ok)}
.proglist{margin-top:12px;border-top:1px solid var(--line-soft)}
.progrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);
         font-size:13.5px}
.progrow .tick{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);
               display:inline-flex;align-items:center;justify-content:center;font-size:10px;
               color:var(--muted);flex:none}
.progrow.done .tick{background:var(--ok);border-color:var(--ok);color:#fff}
.finding{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.finding:last-child{border-bottom:none}
.fnum{width:25px;height:25px;border-radius:50%;background:var(--acc);color:#fff;display:flex;
      align-items:center;justify-content:center;font-size:12px;font-weight:660;flex:none}
.ftitle{font-weight:620;font-size:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.fsize{font-family:var(--mono);font-size:12.5px;color:var(--acc);background:var(--acc-12);
       border-radius:var(--r-full);padding:1px 9px}
.fdetail{font-size:13px;margin-top:3px}
.faction{font-size:12.5px;color:var(--muted);margin-top:3px}
.notprob{font-size:13px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.notprob:last-child{border-bottom:none}
.whyq{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
      color:var(--muted);font-size:9.5px;font-weight:700;line-height:1;padding:0;margin-left:6px;
      vertical-align:middle;font-style:italic}
.whyq:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.edit{background:none;border:1px solid transparent;border-radius:var(--r-xs);padding:3px 7px;
      font-family:var(--mono);font-size:13px;text-align:left;display:inline-flex;align-items:center;gap:6px}
.edit:hover{border-color:var(--line);background:var(--surface-2)}
.edit .pen{opacity:0;font-size:10px;color:var(--muted);font-family:var(--ui)}
.edit:hover .pen{opacity:1}
.edit.over{color:var(--bad);font-weight:620}
.matrixtable td{vertical-align:top;padding-top:11px;padding-bottom:11px}
.advice{margin-top:8px;min-height:64px;font-size:13.5px;border:1px dashed var(--line);
        border-radius:var(--r-sm);padding:10px 12px;outline:none}
.advice:focus{border-color:var(--acc);border-style:solid;box-shadow:0 0 0 3px var(--acc-20)}
.claimbar{max-width:800px;margin:0 auto var(--s3);display:flex;align-items:center;gap:9px;
          flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--r);padding:11px 15px;box-shadow:var(--e1);font-size:13px}
.claimtotal{font-size:13px;color:var(--muted)}
.claimtotal strong{font-family:var(--mono);font-size:15px;color:var(--ink);margin-left:4px}
.doctools{max-width:900px;margin:0 auto var(--s3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── documents: deliberately plain ───────────────────── */
.report{--acc-doc:var(--ink);max-width:820px;margin:0 auto;background:#fff;
        border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:34px 38px}
.report .stat:before,.report .kpi:before{display:none}
.rep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
          border-bottom:2.5px solid var(--acc);padding-bottom:14px}
.rep-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:680;color:var(--acc)}
.report h1{color:var(--acc)}
.rep-by{text-align:right;font-size:11.5px;color:var(--muted);line-height:1.55}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.kpi{background:var(--acc-soft,var(--surface-2));border-radius:var(--r-sm);padding:12px 14px}
.kpi .k{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:640}
.kpi .v{font-family:var(--mono);font-size:19px;font-weight:620;letter-spacing:-.035em;margin-top:3px;
        color:var(--acc)}
.kpi .d{font-size:10.5px;color:var(--muted);margin-top:2px}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)}
.chartbox{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px 6px}
/* 26/08/2026 — this was .ch-head too, and the thread's own .ch-head further
   down was fighting it. Same class name, two unrelated screens. Renamed to what
   it actually is: the header of a chart box. */
.chartbox-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
         margin-bottom:6px;flex-wrap:wrap}
.chartbox-head .sub{font-size:10.5px}
.report .sect{color:var(--acc)}
.chart2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
i.sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 4px 0 8px}
.rep-table{border:none;box-shadow:none;border-radius:0;font-size:12px}
.rep-table thead th{background:transparent;padding:5px 8px 5px 0;font-size:9.5px}
.rep-table td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line-soft)}
.tot td{border-top:2px solid var(--ink);border-bottom:none;font-weight:660}
.commentary{margin-top:16px;border-left:3px solid var(--acc);padding:2px 0 2px 13px}
.rep-foot{margin-top:18px;border-top:2px solid var(--acc);padding-top:10px;font-size:11px;
          color:var(--muted);text-align:center;line-height:1.6}
.rep-svc{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);
         font-weight:660;margin-bottom:5px}
.doc{max-width:800px;margin:0 auto;background:#fff;border:1px solid var(--line);
     border-radius:var(--r-lg);padding:38px;box-shadow:var(--e2)}
.doc h1{font-size:20px}
.doc table{border:none;box-shadow:none;border-radius:0}
.doc thead th{padding:7px 12px 7px 0;background:transparent}
.doc td{padding:9px 12px 9px 0;vertical-align:top}
.appendix{margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.rev{border-left:2px solid var(--line);padding-left:13px;margin-top:13px;font-size:14px}
.letterdoc{padding:36px 40px}
.letterhead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
            border-bottom:2px solid var(--ink);padding-bottom:12px;font-size:13px}
.addressee{margin-top:22px;font-size:13.5px;line-height:1.5}
.emailhead{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;
           background:var(--surface-2)}
.emailhead .lbl{display:inline-block;width:58px;color:var(--muted);font-size:11px;
                text-transform:uppercase;letter-spacing:.08em;font-weight:640}
.emailhead > div + div{margin-top:4px}
.lettertext{white-space:pre-wrap;font-family:var(--ui);font-size:13.5px;line-height:1.62;
            margin:22px 0 0;color:var(--ink)}
.lettertext[contenteditable]{outline:none;border-radius:var(--r-xs);padding:4px 6px;margin-left:-6px}
.lettertext[contenteditable]:focus{background:var(--surface-2)}

@page{size:A4 portrait;margin:11mm}
body.pdf-export .noprint,body.pdf-export .rail,body.pdf-export .topbar{display:none!important}
body.pdf-export .shell{grid-template-columns:1fr}
body.pdf-export main{padding:0;max-width:none}
body.pdf-export .report,body.pdf-export .doc{border:none;box-shadow:none;max-width:none;
  border-radius:0;padding:0}
@media print{
  .noprint,.rail,.topbar{display:none!important}
  body{background:#fff}
  .shell{grid-template-columns:1fr}
  main{padding:0;max-width:none}
  .report,.doc{border:none;padding:0;max-width:none;box-shadow:none;border-radius:0}
  .chartbox{break-inside:avoid;page-break-inside:avoid}
  .report *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* consolidated release: print pagination + advice box */
@media print{
  .doc h2, .doc h3{page-break-after:avoid}
  .kpis, .chartbox, .advice, .finding{page-break-inside:avoid}
  .doc > div:empty{display:none}
}
/* 2026-08-23 — this prompt is for the adviser, not the client, and it printed.
   A review dated 22/08 went out with the words "Write your advice here" under
   the heading "Your advice". Screen only; on paper an empty box shows nothing,
   and the dashed outline goes with it. */
.advice:empty::before{content:"Write your advice here — this box prints exactly as you leave it.";
  color:#9aa3b2;font-style:italic}
@media print{
  .advice:empty::before{content:"" !important}
  .advice:empty{border:none !important;min-height:0 !important}
}
body.pdf-export .advice:empty::before{content:"" !important}
body.pdf-export .advice:empty{border:none !important;min-height:0 !important}

/* ── profit outlook: what an owner should see on paper ──
   The screen carries controls, sources and what-ifs. The printed page carries
   the position, the year against target, and the withdrawal record — nothing
   about where a figure came from or what could be typed over it. */
@media print{
  .doc-head{display:block !important;border-bottom:2px solid var(--ink);
    padding-bottom:10px;margin-bottom:16px}
  .outlook-note{display:none}
  input, select, button{display:none !important}
  table td input{display:none !important}
}
/* 26/09/2026 (34.3 · R9) — the same four rules on the OTHER print path. They
   existed under @media print only, so the body.pdf-export path (used when a PDF
   builder is present) gave the outlook no heading and left its inputs, buttons
   and source notes in. Two print paths, both covered. */
body.pdf-export .doc-head{display:block !important;border-bottom:2px solid var(--ink);
  padding-bottom:10px;margin-bottom:16px}
body.pdf-export .outlook-note{display:none}
body.pdf-export input, body.pdf-export select, body.pdf-export button{display:none !important}
body.pdf-export table td input{display:none !important}
body.pdf-export .doc > div:empty{display:none}   /* 34.3 · R9 — twin of the @media print rule above */

/* A value that must appear on paper where its input is hidden. */
.printonly{display:none}
@media print{ .printonly{display:inline} }

/* Release 11.0 — the brand colour stops being the alarm colour. Red now means
   one thing: late. Everything structural moves to the indigo the app already
   carried, so a red thing on a page always means the same thing. */
:root{ --h: 178; }   /* 28.1 — approved green */
.fcmark{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand);
  background:var(--tint); padding:1px 6px; border-radius:999px; margin-left:7px;
  font-family:var(--ui); font-weight:600; }

/* ── a colour per client ───────────────────────────────────────────────
   Identity, not decoration. The colour is one variable, --client, set on a
   wrapper around the client's own pages and documents. Everything below is
   structure: the header band, section rules, the active tab, card edges.

   Nothing that carries MEANING is themed. Paid stays green, stale stays
   amber, late stays red, on every client's page — a status that changes
   colour with the client is a status you cannot read. Red is absent from the
   palette so a client can never hide their own overdue markers. And every
   coloured element has its name beside it, so the page survives mono printing
   and readers who cannot separate two of the ten. */
.client-banner{
  background: var(--client, var(--acc));
  color:#fff; border-radius:12px; padding:14px 18px; margin:0 0 16px;
}
.client-banner h1{ color:#fff; letter-spacing:-.015em; }

/* 23/08/2026 — replaces the full-bleed banner at the top of a client page. The
   client's colour is a rule down the left edge: it identifies the page without
   filling a fifth of the screen, and without a client themed green putting the
   colour that means "paid" above a page about unpaid invoices. The old
   .client-banner rule stays: report headers still use it, where a bold band of
   the client's colour is the point. */
.client-head-band{
  border-left:4px solid var(--client, var(--acc));
  padding:2px 0 2px 14px; margin:0 0 14px;
}
@media print{
  .client-head-band{ border-left-width:3px; }
}
.client-head{ height:4px; border-radius:3px; margin:0 0 14px; }

/* 05/09/2026 — the client page hero used --hero-grad, the hub palette, so
   opening a client you had deliberately coloured indigo still showed a green
   band the full width of the screen and the colour survived only as a 4px
   edge. The point of the colour is knowing whose page you are on before you
   read the name, which a thin line does not achieve.

   REVERSES PART OF THE 23/08/2026 NOTE ABOVE, at the owner's request on
   05/09/2026, and the left rule stays. What that note rejected was a name in
   white on a full-height headline slab that appeared *instead of* the figures.
   This is the 27.4 hero, which the page already has at that size either way —
   only its hue changes, and it carries the client's figures rather than
   replacing them.

   The other half of that note still stands and is NOT addressed here: a client
   whose chosen colour is green will show green above a page about unpaid
   invoices. The colour is chosen by the owner from the client's own branding,
   so it is his to pick; the app does not stop him. Do not "fix" this by
   restricting the palette. */
.client-themed .rd-hero, .rd-hero.client-head-band{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--client, var(--acc)) 74%, #000) 0%,
    var(--client, var(--acc)) 55%,
    color-mix(in oklab, var(--client, var(--acc)) 82%, #fff) 100%);
}
@supports not (color: color-mix(in oklab, red 50%, blue)){
  .client-themed .rd-hero, .rd-hero.client-head-band{ background:var(--client, var(--acc)); }
}
.client-themed h2.sect{ border-bottom:2px solid var(--client, var(--line)); padding-bottom:4px; }
.client-themed .card{ border-top:3px solid var(--client, transparent); }
.client-themed .tabs .tab.on,
.client-themed .tab[aria-selected="true"]{
  border-bottom-color: var(--client, var(--acc)); color: var(--client, var(--acc));
}
.client-themed .rep-kicker{ color: var(--client, var(--slate)); }
.client-themed .rep-head{ border-bottom:2px solid var(--client, var(--line)); }

/* Status must not move. These win over anything above. */
.client-themed .chip, .client-themed .flag, .client-themed .pill{ border-top:0 !important; }
@media print{
  .client-banner{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ── signed out ────────────────────────────────────────────────────────
   Nothing of the practice until we know who is asking. The sign-in card is
   the page: no rail, no breadcrumb, no client list standing behind it. */
/* 07/09/2026 — the signed-out shell targeted .rail and .topbar, but the VISIBLE
   chrome is .rd-top (the top bar), .rd-cbar (the client pill strip) and
   .rd-csub if present — none of which the old rule named. Result: a logged-out
   visitor saw the whole practice's navigation, all six client NAMES, and the
   Today/Chasing counts, with only a sign-in box floating over them. Every
   piece of chrome that carries practice information is now hidden until a
   session exists. The elements stay in the DOM (render() writes to #nav,
   #rdnav, #rdcbar, #scope by id every time and would throw if they vanished) —
   they are hidden, not removed. */
body.signed-out .rail,
body.signed-out .rd-top,
body.signed-out .rd-cbar,
body.signed-out .topbar{ display:none !important; }
body.signed-out .shell{ display:block !important; grid-template-columns:none !important; }
body.signed-out .col{ width:100% !important; }
body.signed-out #app{ margin:0 !important; padding:0 !important; max-width:none !important; }

/* ── permissions ───────────────────────────────────────────────────────
   Thirty-four checkboxes in a bare flex row wrapped their labels into
   ragged columns and floated the boxes into the middle of the page, which
   is how a clean prototype became unreadable in the app. A grid: box in a
   fixed first column, text in the second, so every row starts on the same
   vertical line however long the description runs. */
.permgroup{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate);
  margin:18px 0 2px; padding-bottom:5px; border-bottom:1px solid var(--line-soft);
}
.permrow{
  display:grid; grid-template-columns:22px 1fr; gap:2px 10px; align-items:start;
  padding:8px 0; border-bottom:1px solid var(--line-soft); cursor:pointer;
}
.permrow:last-of-type{ border-bottom:0 }
.permrow:hover{ background:var(--surface-2) }
.permrow input{ margin:2px 0 0; width:15px; height:15px }
.permtext{ min-width:0 }
.permname{ display:block; font-size:13px; line-height:1.35 }
.permwhy{ display:block; font-size:11.5px; color:var(--slate); line-height:1.4; margin-top:1px }
.permsummary{
  background:var(--acc-12, var(--surface-2)); border:1px solid var(--acc-35, var(--line));
  border-radius:10px; padding:12px 14px; margin-top:12px; font-size:13px; line-height:1.6;
}
.preset{
  font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid var(--acc-35, var(--line)); background:var(--surface); color:var(--acc);
  cursor:pointer;
}
.preset:hover{ background:var(--acc-12, var(--surface-2)) }

/* ═══ Chase rework — 2026-08-23 ═══════════════════════════════════
   The thread is one object: a single panel with an unbroken spine, not a
   card per event. Everything else reuses what was already here. */
.head-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.head-row.tight{margin:26px 0 0}
.head-row .spacer{flex:1}
.inline-f{margin:0}
.inline-f select{width:auto;margin-top:0}
.sub.small{font-size:12.5px}
.sub.tiny,.tiny{font-size:11.5px}
.block{display:block}
.late{color:var(--bad,#B3261E);font-weight:600}
.seg{display:inline-flex;gap:6px}
.seg button{border:1px solid var(--line,#e6e5f0);background:var(--surface,#fff);
  padding:6px 11px;font-size:12.5px;border-radius:999px;cursor:pointer;font:inherit}
.seg button.on{background:var(--acc,#5B54D6);border-color:var(--acc,#5B54D6);color:#fff}
.thread{background:var(--surface,#fff);border:1px solid var(--line,#e6e5f0);
  border-radius:14px;overflow:hidden;margin-top:12px}
.ev{display:grid;grid-template-columns:104px 1fr}
.ev + .ev > *{border-top:1px solid var(--line-soft,#f0eff6)}
.ev-empty{padding:26px;text-align:center;opacity:.7}
.composer{background:var(--surface-2,#f6f6fa);border-top:1px solid var(--line,#e6e5f0);padding:13px 16px}
.thread > .composer:first-child{border-top:none;border-bottom:1px solid var(--line,#e6e5f0)}
.composer .clabel,.rec .clabel{font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:650;opacity:.7}
.composer .acts,.rec .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.rec{margin-top:10px}
.rec .f{display:block;margin-top:10px;font-size:11.5px}
@media(max-width:560px){.ev{grid-template-columns:76px 1fr}}
.seg.wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.rec-follow{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line,#e6e5f0)}
.nowrap{white-space:nowrap}
.link{background:none;border:none;padding:0 0 0 10px;font:inherit;font-size:12.5px;
  color:var(--acc,#5B54D6);cursor:pointer}
.link:hover{text-decoration:underline}
.link.warn{color:#B3261E}
h3.sect{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:660;margin:0}

/* 23/08/2026 — the client page action row. The three documents that leave the
   practice under the owner's name are one group and lead; everything else is
   housekeeping and reads as it. A hairline between them rather than a heading,
   because a heading over four buttons is more furniture than the row deserves. */

/* ═══ Time on a phone — 26/08/2026 ════════════════════════════════
   From the owner's own screenshots. On a desktop this screen reads well and
   nothing below changes it: `display:contents` leaves the cards exactly where
   they were. On a phone he scrolled past two full forms — start a timer, then
   add time already worked — before reaching a single figure. The information
   comes first there and the forms follow. */
.time-stack{display:contents}
@media(max-width:720px){
  .time-stack{display:flex;flex-direction:column}
  .time-stack > *{order:2}          /* the running timer keeps its place at the top */
  .time-stack > .t-today{order:3}
  .time-stack > .t-report{order:4}
  .time-stack > .t-form{order:5}
  .time-stack > .t-settings{order:6}
}

/* The Total row overlapped itself: "8h 30m" wrapped between the hours and the
   minutes, and the wrapped line collided with the 2px rule above the row. A time
   figure is one thing and should not break in half. */
.rep-table td.num,.rep-table td.r,.rep-table .tot td{white-space:nowrap}
.rep-table .tot td{padding-top:9px}
/* The message as it was written, sitting in the chain rather than behind a
   toggle. Quiet background so a long one does not shout over the summary. */

/* ═══ The thread as a chain — 26/08/2026 ══════════════════════════
   No date column, no card per entry, nothing truncated. A day is named
   once and the messages run on beneath it. Inbound and outbound are told
   apart by a rule down the left rather than by a stamp on the side. */
.chain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,14px);
       overflow:hidden;margin-top:12px}
/* A day marks the record; it is not a control. One expander opens the history
   in place, beneath the latest exchange. 26/08/2026. */
/* .ch-day removed 26/08/2026 — the date is in the row now, so the thread is one
   list rather than a stack of dated blocks. */
/* Every entry opens itself. One line closed, the whole thing open. 26/08/2026. */
/* The record is not a control: no pointer, no hover, no button affordance. */
.ch.shut + .ch.shut{border-top:1px solid var(--line-soft,#f0eef4)}
.ch{border-bottom:1px solid var(--line-soft);border-left:3px solid transparent}
.ch.shut{padding:0}                       /* the row IS the button */
.ch.open{padding:0 18px 14px}
.ch:last-child{border-bottom:none}
.ch.in{border-left-color:var(--ok,#0F7350);background:var(--ok-bg,#F4FAF7)}
.ch.out{border-left-color:var(--acc,#5B54D6)}
.ch.money{border-left-color:var(--acc,#5B54D6);background:var(--surface-2)}
.ch.aside{border-left-color:var(--line)}
.ch-filed{margin-top:9px;font-size:11.5px;color:var(--muted);padding-left:10px;
          border-left:2px solid var(--line)}
@media(max-width:560px){.ch{padding:12px 14px 13px}}

/* ═══ Time: folding, stamps, hidden money — 26/08/2026 ════════════
   The screen was five cards of equal weight doing three different jobs.
   The two that are reference rather than work now fold shut, with the
   number that matters left on the lid. */
details.fold > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin:-2px 0}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary:hover .fold-chev{text-decoration:underline}
details.fold[open] > summary{border-bottom:1px solid var(--line);padding-bottom:10px}
.fold-chev{margin-left:auto;color:var(--acc,#5B54D6);font-size:12px;font-weight:620}
/* Who wrote an entry down, and when. Quiet: it is provenance, not content. */
.stamp{display:block;font-size:11px;opacity:.8;margin-top:1px}
.hidden-note{background:var(--warn-bg,#FBF2E2);color:var(--warn,#8A5A0F);border-radius:10px;
  padding:8px 13px;font-size:12px;margin:10px 0 0}
/* Four fields across on a wide screen, two on a narrow one. The timer form was
   four stacked pairs and took most of the first screen. 26/08/2026. */
.fourup{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.fourup{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fourup{grid-template-columns:1fr}}
.card.tight{padding-top:14px;padding-bottom:14px}
.card.tight .f{margin-top:0}
/* What is left of the case card, as one quiet line. 26/08/2026. */
.caselinks{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.caselinks .inline-a{margin-left:auto}
.caselinks .inline-a + .inline-a{margin-left:0}
/* The newest entry is the handle for the thread: one line shut, everything
   under it open. 26/08/2026. */
.ch.lead.open{border-bottom:1px solid var(--line)}

/* The composer row: three that record what happened, quiet; one that decides,
   with the weight; and the two documents present but not equals. 26/08/2026.
   The tint is scoped here so the shared .btn.ghost (neutral grey elsewhere)
   is not changed for every other screen. */
.acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.acts .btn.ghost{background:var(--surface);color:var(--acc,#A0399E);
  border:1px solid var(--acc-line,#E3C7E2);box-shadow:none;font-weight:600}
.acts .btn.ghost:hover{background:var(--acc-12,#F7EEF7);border-color:var(--acc,#A0399E);
  color:var(--acc-dk,#7E2C7C);transform:none}

/* Why revenue moved — the decomposition and the profit bridge. 27/08/2026. */
.wf{margin-top:8px}
.wf-row{display:grid;grid-template-columns:1fr 130px;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-soft,#f0eef4);align-items:baseline}
.wf-row:last-child{border-bottom:none}
.wf-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:640}
.wf-v.up{color:var(--good,#0F7350)} .wf-v.dn{color:var(--bad,#B02A25)}
.wf-tot{border-top:2px solid var(--ink,#1C1A1D);border-bottom:none;font-weight:700;
  padding-top:10px;margin-top:3px}
@media(max-width:640px){.wf-row{grid-template-columns:1fr 108px}}
.lead-find{font-size:15px;line-height:1.55;margin:2px 0 10px;padding:10px 13px;
  background:var(--surface-2,#faf6f9);border-left:3px solid var(--acc,#5B54D6);border-radius:0 8px 8px 0}
/* What to do about it — the decision layer. 27/08/2026. */
.rec{border-left:3px solid var(--acc,#5B54D6);padding:2px 0 2px 15px;margin:14px 0}
.rec-worth{font-variant-numeric:tabular-nums;font-weight:700;font-size:19px;letter-spacing:-.03em}
.rec-act{font-size:14.5px;font-weight:650;margin:1px 0 0}
.rec-who{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--ink-2,#463F44)}
.rec p{margin:5px 0 0}
/* Rows and findings the owner sees but the client's copy does not. 27/08/2026. */
.yours-tag{display:inline-block;font-size:9px;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;background:#232025;color:#fff;padding:2px 7px;border-radius:999px;
  margin-left:6px;vertical-align:2px}
/* 28/08/2026 — the client copy lost its Strengths/Watch/Weaknesses boxes
   entirely. There are TWO print paths — body.pdf-export and @media print — and
   this rule only covered the first, so on the other one both versions stayed
   hidden and the header vanished. Cover both. */
body.pdf-export .printonly{display:contents!important}
@media print{ .printonly{display:contents!important} }
/* Where this leaves you — the one place the three reports are reconciled. */
.stands{border-left:3px solid var(--acc,#5B54D6)}
.stands-p{font-size:15.5px;line-height:1.6;margin:4px 0 0}


/* Previewing the client's copy on screen. 03/09/2026.

   First version copied only the HIDING rules from the export and none of the
   LAYOUT ones, so the sidebar went and its grid column stayed: the page squeezed
   into a narrow strip on the left and did not come back. The export has always
   had four rules; taking one of them was the bug.

   Written as one selector list with the export so the two cannot drift again. If
   a rule is added for the PDF it applies here, which is the point of previewing
   with the same mechanism rather than a copy of it. */
body.client-preview .noprint,
body.client-preview .rail,
body.client-preview .topbar{display:none!important}
body.client-preview .shell{grid-template-columns:1fr}
body.client-preview main{padding:0;max-width:none}
body.client-preview .report,body.client-preview .doc{border:none;box-shadow:none;
  max-width:none;border-radius:0;padding:0}
body.client-preview .printonly{display:contents!important}

/* The toolbar is itself .noprint, so hiding everything noprint would hide the
   button that turns the preview off and leave him stuck. It stays, and it is the
   only thing on the page that does. */
body.client-preview .doctools{display:flex!important;max-width:900px;margin:0 auto 12px}

/* 01/10/2026 (36.8 · H6 + C6) — Print sends the client's copy made by the one
   routine in app.js (clientCopyHtml) into #cc-printroot, and only that holder is
   printed — both print paths, as the letter's #cf-printroot. The rules above stay
   as the fallback for the browser's own Print menu. */
#cc-printroot{ display:none; }
@media print{
  body.cc-printing > *:not(#cc-printroot){ display:none !important; }
  body.cc-printing #cc-printroot{ display:block !important; }
}
body.pdf-export.cc-printing > *:not(#cc-printroot){ display:none !important; }
body.pdf-export.cc-printing #cc-printroot{ display:block !important; }
/* 36.8 (C1) — a printonly SVG part (the outlook's actual-months line, shading and top
   label) must not take display:contents on paper: on an SVG graphic that hides it
   (CSS Display, "unusual elements"). Both print paths and the preview. */
@media print{ svg .printonly{ display:inline !important; } }
body.pdf-export svg .printonly, body.client-preview svg .printonly{ display:inline !important; }
/* the customer type as text, for someone who may not change it (36.8) */
.cf-typetext{ font-weight:600; font-size:12.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   RELEASE 27.4 — front-end redesign (design B, enriched)
   Appended as one block rather than edited into the rules above, so the
   whole redesign can be lifted out by deleting from this line down if any
   of it proves wrong. Nothing above was changed except the accent hue.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 28.1 — matched to the approved hero: #1E4A41 → #2F6F62 → #3E8C7B. */
  --acc-d:  oklch(37.5% 0.051 var(--h));   /* #1E4A41 */
  --acc-m:  oklch(58.6% 0.082 var(--h));   /* #3E8C7B */
  --hero-grad: linear-gradient(135deg,
     oklch(37.5% 0.051 var(--h)) 0%,
     oklch(49.6% 0.069 var(--h)) 55%,
     oklch(58.6% 0.082 var(--h)) 100%);
}

/* ── shell becomes a stack, not a side rail ── */
body.rd .shell{ display:block; }
body.rd .rail{ display:none !important; }
body.rd .col{ display:block; }

.rd-top{ background:color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60; }
.rd-top-in{ max-width:1300px; margin:0 auto; padding:0 28px; display:flex;
  align-items:center; gap:22px; height:58px; }
.rd-brand{ display:flex; align-items:center; gap:10px; font-weight:660; font-size:15px;
  text-decoration:none; color:var(--ink); flex:0 0 auto; }
.rd-glyph{ width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg, var(--acc-m), var(--acc-d));
  color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
.rd-nav{ display:flex; height:100%; align-items:stretch; flex:1; min-width:0; overflow-x:auto; }
.rd-nav a{ display:flex; align-items:center; gap:7px; padding:0 13px; text-decoration:none;
  font-size:13.5px; color:var(--muted); font-weight:540;
  border-bottom:2px solid transparent; white-space:nowrap; }
.rd-nav a:hover{ color:var(--ink); }
.rd-nav a.on{ color:var(--acc); border-bottom-color:var(--acc); font-weight:640; }
.rd-cnt{ background:var(--acc-12); color:var(--acc); border-radius:var(--r-full);
  padding:0 6px; font-size:10.5px; font-weight:700; line-height:16px; min-width:17px;
  text-align:center; }
.rd-cnt.hot{ background:var(--bad-bg); color:var(--bad); }
.rd-right{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.rd-sbtn{ display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:var(--r-sm); padding:6px 11px;
  font-size:12.5px; color:var(--muted); cursor:pointer; font-family:var(--ui); }
.rd-av{ width:30px; height:30px; border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--acc-m), var(--acc-d)); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:660; }

/* ── client strip ── */
.rd-cbar{ background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:58px; z-index:55; }
.rd-cbar-in{ max-width:1300px; margin:0 auto; padding:10px 28px; display:flex;
  align-items:center; gap:9px; overflow-x:auto;
  flex-wrap:wrap; }   /* 32.7 fix 5 — wraps on narrow widths instead of hiding pills off to the side */
.rd-cbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:680; flex:0 0 auto; }
.rd-pill{ display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--surface); border-radius:var(--r-full); padding:5px 14px 5px 6px;
  font-size:13px; cursor:pointer; white-space:nowrap; font-weight:540;
  color:var(--ink-2); font-family:var(--ui); text-decoration:none; }
.rd-pill:hover{ border-color:var(--acc-35); }
/* 05/09/2026 — was --acc, so every selected pill was hub green no matter what
   colour the client had been given. --client is set inline per pill and falls
   back to the accent for a client with no colour chosen. */
.rd-pill.on{ border-color:var(--client, var(--acc)); color:var(--client, var(--acc));
  background:color-mix(in oklab, var(--client, var(--acc)) 12%, #fff); font-weight:640; }
@supports not (color: color-mix(in oklab, red 50%, blue)){
  .rd-pill.on{ background:var(--acc-12); }
}
.rd-dot{ width:22px; height:22px; border-radius:var(--r-full); display:grid;
  place-items:center; font-size:9.5px; font-weight:700; color:#fff; flex:0 0 auto; }
.rd-flag{ width:7px; height:7px; border-radius:50%; background:var(--warn); flex:0 0 auto; }

body.rd main{ max-width:1300px; margin:0 auto; padding:24px 28px 80px; }

/* ── hero ── */
.rd-hero{ background:var(--hero-grad); border-radius:var(--r-xl); padding:26px 30px;
  color:#fff; margin-bottom:20px; box-shadow:var(--e3); position:relative; overflow:hidden; }
.rd-hero::after{ content:""; position:absolute; right:-70px; top:-90px; width:320px;
  height:320px; border-radius:50%; background:rgba(255,255,255,.06); }
.rd-hero::before{ content:""; position:absolute; right:70px; bottom:-140px; width:230px;
  height:230px; border-radius:50%; background:rgba(255,255,255,.05); }
.rd-hero-top{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; position:relative; z-index:1; flex-wrap:wrap; }
.rd-hero h1{ font-size:25px; margin:0 0 5px; font-weight:670; letter-spacing:-.022em; color:#fff; }
.rd-hmeta{ font-size:13px; color:rgba(255,255,255,.78); display:flex; flex-wrap:wrap; }
.rd-hmeta span{ padding-right:11px; margin-right:11px; border-right:1px solid rgba(255,255,255,.25); }
.rd-hmeta span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.rd-hstats{ display:flex; gap:32px; margin-top:22px; position:relative; z-index:1;
  flex-wrap:wrap; align-items:flex-end; }
.rd-hs .hk{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.68); font-weight:660; }
.rd-hs .hv{ font-size:26px; font-weight:680; line-height:1.15; margin-top:5px;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.rd-hs .hn{ font-size:12px; color:rgba(255,255,255,.7); margin-top:1px; }
.rd-hs .hv small{ font-size:14px; font-weight:600; opacity:.75; }

/* ── bench: content + sticky action panel ── */
.rd-bench{ display:grid; grid-template-columns:1fr 262px; gap:20px; align-items:start; }
@media(max-width:1000px){ .rd-bench{ grid-template-columns:1fr; } }
.rd-panel{ position:sticky; top:130px; }
.rd-pg{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:13px; box-shadow:var(--e1); overflow:hidden; }
.rd-pg .ph{ padding:10px 15px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.rd-pg .ph .sect{ margin:0; }
.rd-pbody{ padding:7px; }
.rd-pa{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:0;
  padding:8px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--ink-2);
  cursor:pointer; text-align:left; text-decoration:none; font-family:var(--ui); }
.rd-pa:hover{ background:var(--surface-2); color:var(--acc); }
.rd-pa .k{ margin-left:auto; font-size:10px; color:var(--muted); font-family:var(--mono);
  border:1px solid var(--line); border-radius:3px; padding:0 4px; }
.rd-primary{ display:block; width:100%; background:linear-gradient(135deg, var(--acc-m), var(--acc));
  color:#fff; border:0; border-radius:var(--r-sm); padding:11px; font-size:13.5px;
  font-weight:620; cursor:pointer; text-align:center; text-decoration:none;
  box-shadow:var(--e1); font-family:var(--ui); }
.rd-primary:hover{ filter:brightness(1.06); color:#fff; }
.rd-fold{ display:none; padding:0 7px 7px; }
.rd-fold.open{ display:block; }
.rd-foldbtn{ display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:0; padding:10px 15px; font-size:12.5px; color:var(--muted);
  cursor:pointer; font-weight:560; font-family:var(--ui); }
.rd-foldbtn:hover{ background:var(--surface-2); }

/* ── document cards ── */
.rd-docs{ display:grid; gap:11px; margin-bottom:20px; }
.rd-doc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e1); padding:15px 17px; display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--ink); transition:.15s; }
.rd-doc:hover{ box-shadow:var(--e2); transform:translateY(-2px); border-color:var(--acc-35); }
.rd-dic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  flex:0 0 auto; background:var(--acc-12); color:var(--acc); }
.rd-dmain{ flex:1; min-width:0; }
.rd-dt{ font-size:14.5px; font-weight:640; }
.rd-dd{ font-size:12px; color:var(--muted); margin-top:2px; }
.rd-dstate{ font-size:10.5px; font-weight:660; border-radius:var(--r-full); padding:3px 10px;
  flex:0 0 auto; }
.rd-dstate.ready{ background:var(--ok-bg); color:var(--ok); }
.rd-dstate.wait{ background:var(--warn-bg); color:var(--warn); }
.rd-chev{ color:var(--muted); flex:0 0 auto; font-size:17px; }

/* ── trend card ── */

/* ── import stages ── */
.rd-stager{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:20px; }
@media(max-width:820px){ .rd-stager{ grid-template-columns:repeat(2,1fr); } }
.rd-stg{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; box-shadow:var(--e1); }
.rd-stg.done{ background:linear-gradient(135deg, var(--ok-bg), var(--surface));
  border-color:color-mix(in oklab, var(--ok) 28%, transparent); }
.rd-stg.now{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-12), var(--e1); }
.rd-stg .sn{ font-size:9.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:680; }
.rd-stg .sv{ font-size:13.5px; font-weight:620; margin-top:4px; }
.rd-stg.done .sv{ color:var(--ok); }
.rd-stg.now .sv{ color:var(--acc); }
.rd-kgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
@media(max-width:640px){ .rd-kgrid{ grid-template-columns:1fr; } }
.rd-kbx{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; cursor:pointer; text-align:left; display:flex; align-items:center;
  gap:12px; box-shadow:var(--e1); transition:.14s; font-family:var(--ui); width:100%; }
.rd-kbx:hover{ border-color:var(--acc-35); transform:translateY(-1px); }
.rd-kbx.sel{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-12), var(--e1); }
.rd-ki{ width:32px; height:32px; border-radius:9px; background:var(--surface-2);
  display:grid; place-items:center; flex:0 0 auto; font-size:13px; color:var(--muted);
  border:1px solid var(--line); font-weight:700; }
.rd-kbx.have .rd-ki{ background:var(--ok-bg); color:var(--ok);
  border-color:color-mix(in oklab, var(--ok) 25%, transparent); }
.rd-kt{ font-size:13.5px; font-weight:610; }
.rd-ks{ font-size:11.5px; color:var(--muted); margin-top:1px; }

/* ── dashboard ── */
.rd-att{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:820px){ .rd-att{ grid-template-columns:1fr; } }
.rd-acard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px 17px; box-shadow:var(--e1); display:flex; gap:13px; align-items:flex-start;
  border-left:3px solid var(--line); text-decoration:none; color:var(--ink); transition:.14s; }
.rd-acard:hover{ box-shadow:var(--e2); transform:translateY(-1px); }
.rd-acard.b{ border-left-color:var(--bad); }
.rd-acard.w{ border-left-color:var(--warn); }
.rd-aic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  flex:0 0 auto; font-size:14px; font-weight:700; }
.rd-aic.b{ background:var(--bad-bg); color:var(--bad); }
.rd-aic.w{ background:var(--warn-bg); color:var(--warn); }
.rd-att-t{ font-size:13.5px; font-weight:620; line-height:1.35; }
.rd-att-d{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }
.rd-att-go{ font-size:12.5px; color:var(--acc); font-weight:620; margin-top:7px;
  display:inline-block; }
.rd-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(390px,1fr)); gap:14px; }
.rd-cc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e1); overflow:hidden; transition:.15s; position:relative;
  text-decoration:none; color:var(--ink); display:block; }
.rd-cc:hover{ box-shadow:var(--e2); transform:translateY(-2px); border-color:var(--acc-35); }
.rd-cc.alert::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--bad); }
.rd-cc.warn::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--warn); }
.rd-cc-h{ display:flex; align-items:center; gap:12px; padding:16px 18px 13px; }
.rd-ci{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:#fff; font-size:13px; font-weight:700; flex:0 0 auto; }
.rd-cnm{ font-size:15px; font-weight:650; line-height:1.2; }
.rd-cmt{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.rd-sp{ margin-left:auto; font-size:10.5px; font-weight:660; border-radius:var(--r-full);
  padding:3px 10px; white-space:nowrap; }
.rd-sp-ok{ background:var(--ok-bg); color:var(--ok); }
.rd-sp-b{ background:var(--bad-bg); color:var(--bad); }
.rd-sp-n{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.rd-cc-b{ padding:2px 18px 16px; }
.rd-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.rd-mt .mk{ font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); font-weight:670; }
.rd-mt .mv{ font-size:16px; font-weight:670; line-height:1.2; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.rd-mt .mn{ font-size:11px; color:var(--muted); margin-top:1px; }
.rd-dn{ color:var(--bad); }

/* ── print: the dressing is screen-only ── */
@media print{
  .rd-top, .rd-cbar, .rd-panel{ display:none !important; }
  body.rd main{ padding:0; max-width:none; }
  .rd-hero{ background:none !important; color:var(--ink) !important; box-shadow:none;
    padding:0 0 12px; border-bottom:1px solid var(--line); border-radius:0; }
  .rd-hero::before, .rd-hero::after{ display:none !important; }
  .rd-hero h1{ color:var(--ink) !important; }
  .rd-hmeta, .rd-hs .hk, .rd-hs .hn{ color:var(--muted) !important; }
  .rd-hmeta span{ border-right-color:var(--line) !important; }
  .rd-bench{ display:block !important; }
  .rd-doc, .rd-cc, .rd-stg, .rd-kbx, .rd-acard{
    box-shadow:none !important; transform:none !important; }
}

/* ── 27.4 — account menu in the top bar ──────────────────────────────────
   The rail footer held three things: practice details, who you are, and the
   only sign-out in the app. Hiding the rail took all three away. They live
   here now, behind the avatar. */
.rd-acct{ position:relative; }
button.rd-av{ border:0; cursor:pointer; font-family:var(--ui); padding:0; }
.rd-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e3);
  padding:6px; min-width:216px; display:none; z-index:70; }
.rd-menu.open{ display:block; }
.rd-menu .who{ padding:9px 11px 10px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.rd-menu .who b{ display:block; font-size:13.5px; font-weight:620; }
.rd-menu .who span{ font-size:12px; color:var(--muted); }
.rd-menu button{ display:flex; width:100%; align-items:center; gap:9px; background:none;
  border:0; text-align:left; padding:9px 11px; border-radius:var(--r-sm); font-size:13px;
  color:var(--ink-2); cursor:pointer; font-family:var(--ui); }
.rd-menu button:hover{ background:var(--surface-2); color:var(--acc); }
.rd-menu .themerow{ padding:8px 11px 4px; }
.rd-menu .themerow .sect{ margin:0 0 6px; }
@media print{ .rd-acct{ display:none !important; } }

/* The client name sits directly in the band so the client's own colour is
   behind it (13.0/15.0). The meta row follows underneath. */
.rd-hero > h1{ position:relative; z-index:1; }
.rd-hero .rd-hero-top{ margin-top:5px; }

/* The invoice document. It follows whatever the report export does rather than
   carrying a second set of rules that could drift from it. 03/09/2026. */
.doc-invoice .rep-table td.num,.doc-invoice .rep-table th.num{text-align:right;
  font-variant-numeric:tabular-nums}
.doc-invoice .rep-table tr.tot td{border-top:2px solid var(--ink);font-weight:700;padding-top:10px}
@media print{ .doc-invoice{break-inside:avoid} }

/* The invoice document, laid out the way an accounting package lays one out.
   04/09/2026. */
.doc-invoice{padding:34px 38px}
.inv-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.inv-practice{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.inv-from{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.inv-title{text-align:right;min-width:230px}
.inv-word{font-size:26px;font-weight:750;letter-spacing:-.01em;text-transform:uppercase;
  margin-bottom:8px;padding-right:1px}
/* 05/09/2026 — the meta block read as a stray table floating at the top right,
   which is the "messy" the owner meant. It is a label-and-value list, so it is
   set as one: labels muted and left, values firm and right, a hairline under
   each row to carry the eye across, and room at both edges so nothing sits on a
   boundary. */
.inv-meta{margin-left:auto;font-size:12.5px;border-collapse:collapse;min-width:240px}
.inv-meta td{padding:4px 2px 4px 16px;border:none;text-align:right;
  border-bottom:1px solid var(--line-soft,#f0eff6)}
.inv-meta tr:last-child td{border-bottom:none}
.inv-meta td:first-child{color:var(--muted);padding-left:2px;text-align:left;
  font-weight:500;white-space:nowrap}
.inv-meta td:last-child{font-weight:620;white-space:nowrap}
.inv-lab{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin-bottom:3px;padding-left:1px}
.inv-to{margin:26px 0 20px}
.inv-name{font-size:15px;font-weight:650}
.inv-addr{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.inv-lines{width:100%;border-collapse:collapse;margin-top:6px}
/* 05/09/2026 — THE REAL CAUSE, found by rasterising the PDF and looking at it
   instead of reasoning about it. My first answer was letter-spacing and it was
   wrong; easing the tracking changed nothing because tracking was never the
   problem.

   The global `table` rule gives every table a border, rounded corners, a shadow
   and `overflow:hidden`. The invoice tables inherited all of it, so the box
   clipped any character sitting against its edge: the D of DESCRIPTION, the T of
   AMOUNT, the I of "Invoice number", the P of "Payment due". The faint rounded
   rectangle visible behind the meta block in the exported PDF IS that box.

   An invoice is a document, not a data grid. Both of its tables opt out. */
.doc-invoice table{border:none!important;border-radius:0!important;box-shadow:none!important;
  overflow:visible!important;background:transparent!important;border-collapse:collapse}
.doc-invoice thead th{background:transparent!important}
.doc-invoice td,.doc-invoice th{background:transparent!important}
.doc-invoice,.doc-invoice *{overflow:visible!important}
.inv-lines th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;padding:0 10px 7px 2px;
  border-bottom:1.5px solid var(--ink);white-space:nowrap}
.inv-lines td{padding:9px 10px 9px 2px;border-bottom:1px solid var(--line);font-size:13px;
  vertical-align:top}
.inv-lines th:last-child,.inv-lines td:last-child{padding-right:2px}
.inv-lines .num,.inv-lines th.num{text-align:right;font-variant-numeric:tabular-nums}
.inv-sum{margin:14px 0 0 auto;max-width:290px}
.inv-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.inv-row.inv-due{border-top:2px solid var(--ink);margin-top:5px;padding-top:9px;
  font-weight:750;font-size:16.5px}
.inv-foot{display:flex;gap:36px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.inv-foot > div{flex:1}
@media print{ .doc-invoice{break-inside:avoid;padding:0} }
@media(max-width:640px){
  .inv-top{flex-direction:column} .inv-title{text-align:left;min-width:0}
  .inv-meta{margin-left:0} .inv-meta td{text-align:left;padding-left:0}
  .inv-meta td:first-child{padding-right:14px}
  .inv-foot{flex-direction:column;gap:16px}
}
/* Optional logo. Absent is the normal case and changes nothing else. 05/09/2026. */
.inv-logo{max-height:56px;max-width:200px;display:block;margin-bottom:8px}

/* ── Leanness (29.4–29.5, 06/09/2026) — dashboard section, owner-only, screen-only.
   Tokens only: --ok / --warn / --bad / --line / --muted exist; --green does not. */
.ln-list{ display:flex; flex-direction:column; gap:8px; }
.ln-row{ display:grid; grid-template-columns:64px minmax(180px,1.3fr) .8fr 1fr .9fr 1.6fr; gap:14px; align-items:center;
  width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r,10px);
  padding:10px 16px; font:inherit; color:inherit; cursor:pointer; }
.ln-row:hover{ border-color:var(--acc); }
.ln-row:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.ln-row.ln-none{ cursor:default; grid-template-columns:auto 1fr; }
.ln-row[aria-expanded="true"]{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.ln-name{ font-weight:600; } .ln-name .sub, .ln-cell .sub, .ln-ringcol .sub{ display:block; font-weight:400; }
/* 10/09/2026 (30.18) — ring sits in .ln-ringcol with "last month N" under it;
   the flags are small marks on the name; the last column is one line of words. */
.ln-ringcol{ text-align:center; } .ln-ringcol .sub{ font-size:11.5px; white-space:nowrap; }
.ln-mark{ display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--warn-bg); color:var(--warn); font-size:11px; font-weight:600; vertical-align:middle; cursor:help; }
.ln-words{ font-size:13.5px; }
.ln-sorts{ display:flex; gap:6px; align-items:center; margin:0 0 10px; }
.ln-sort{ font:inherit; font-size:12.5px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer; }
.ln-sort.on{ border-color:var(--acc); color:var(--acc); font-weight:600; }
.ln-sort:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.ln-cell b{ font-size:18px; font-variant-numeric:tabular-nums; }
/* 10/09/2026 (30.23) — own-best sits as a THIRD .sub line under the own-normal
   cell, and the money gap leads the words column. Deliberately not a seventh
   grid column: .ln-row's columns are respecified in three media queries and a
   new one would have to be right in all of them. The peer average is NOT on the
   row: four clients each see the average of the other three, so four different
   numbers appear for one comparison and it reads as noise. It lives in the
   expanded window where its explanation sits beside it. Prefixed per 29.5. */
.ln-best{ opacity:.85; }
/* 30.24 — sized explicitly. This sits inside .ln-cell, where `b` is 18px for
   the headline numbers; the money must stay inline with "own best 14.3p" on
   one line, not become a second headline. Not a <b> for the same reason. */
.ln-gap{ font-size:13px; font-weight:640; font-variant-numeric:tabular-nums; color:var(--ink); }
.ln-gap.ln-at{ color:var(--ok); font-weight:600; }
.ln-gap.ln-na{ color:var(--muted); font-weight:500; }
/* 32.2 — the plain-words block at the top of the expanded window, replacing the
   per-figure "?" marks (Abozar, 10/09: not appropriate, wording unclear). */
.ln-mean{ margin:0 0 16px; padding:12px 15px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.ln-mean > b{ display:block; margin-bottom:6px; }
.ln-mean-list{ margin:0; padding-left:18px; }
.ln-mean-list li{ margin:4px 0; font-size:13.5px; }
.ln-ring{ position:relative; width:64px; height:64px; display:inline-block; padding:0; background:none; border:0; }
.ln-ring svg{ display:block; }
.ln-ring .ln-n{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; }
.ln-ring.ln-ok .ln-n{ color:var(--ok); } .ln-ring.ln-warn .ln-n{ color:var(--warn); } .ln-ring.ln-bad .ln-n{ color:var(--bad); }
.ln-arrow{ display:inline-block; padding:2px 8px; border-radius:4px; font-size:12.5px; white-space:nowrap; }
.ln-arrow.lean{ background:var(--ok-bg); color:var(--ok); } .ln-arrow.heavy{ background:var(--bad-bg); color:var(--bad); }
.ln-arrow.flat{ background:var(--line); color:var(--muted); }
.ln-flag{ color:var(--warn); font-weight:500; }
.ln-win{ background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r,10px) var(--r,10px);
  padding:14px 18px 18px; margin-top:-8px; font-size:13.5px; }
.ln-win > b{ display:block; margin:16px 0 4px; }
.ln-factors{ margin-top:14px; border-top:1px solid var(--line); }
.ln-f{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.ln-v{ font-weight:600; white-space:nowrap; }
.ln-v.ln-ok, .ln-tbl td.ln-ok{ color:var(--ok); } .ln-v.ln-warn{ color:var(--warn); } .ln-v.ln-bad, .ln-tbl td.ln-bad{ color:var(--bad); font-weight:600; }
.ln-two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; }
.ln-blk table{ width:auto; margin-top:6px; } .ln-blk td{ padding:2px 12px 2px 0; border:0; } .ln-blk td:first-child{ color:var(--muted); }
.ln-calc{ margin-top:4px; }
.ln-tbl{ width:100%; margin-top:4px; } .ln-tbl th, .ln-tbl td{ padding:5px 8px; text-align:right; font-variant-numeric:tabular-nums; }
.ln-tbl th:first-child, .ln-tbl td:first-child{ text-align:left; }
.ln-verify{ margin-top:14px; } .ln-verify code{ font-size:12px; }
/* 08/09/2026 (30.3) — the row has SIX cells; this rule set only THREE columns,
   so cells 4–6 wrapped onto a second grid track and the "heavier by 1.5p" arrow
   landed on top of the spend figure (align-items:center + gap gives wrapped
   auto-rows no clear separation). Superseded — old rule was:
     .ln-row{ grid-template-columns:64px 1fr 1fr; }
   Tablet keeps the ring beside a 2-up grid of the five text cells; phone stacks
   them one per line so nothing can overlap. */
@media (max-width:760px){
  .ln-two{ grid-template-columns:1fr; }
  .ln-row{ grid-template-columns:64px 1fr; align-items:start; row-gap:12px; }
  /* the ring stays top-left and spans the stacked text cells beside it */
  .ln-row > .ln-ring, .ln-row > .ln-ringcol{ grid-row:1 / span 2; }   /* 30.18: ring now wrapped in .ln-ringcol */
  .ln-row > .ln-name{ align-self:center; }
  /* the five text cells flow in the second column, two-up */
  .ln-row > .ln-cell, .ln-row > .ln-words{ grid-column:2; }
}
@media (max-width:560px){
  /* one cell per line: no shared row, so the arrow can never sit on a number */
  .ln-row{ grid-template-columns:56px 1fr; column-gap:12px; row-gap:10px; padding:12px 14px; }
  .ln-row > .ln-ring, .ln-row > .ln-ringcol{ grid-row:1 / span 7; }   /* 30.18: seven stacked cells */
  .ln-row > .ln-name,
  .ln-row > .ln-cell, .ln-row > .ln-words{ grid-column:2; }
  .ln-arrow{ align-self:start; }        /* pill hugs its own line, not the number above */
  .ln-row.ln-none{ grid-template-columns:56px 1fr; }
}

/* ── shared calendar (07/09/2026) ─────────────────────────────────────
   All classes prefixed cal-/kind-/chan- per the HANDOVER standing rule, so no
   collision with global box or pill rules. Colours come from the token palette
   — the chase channel reuses the approved accent; the four kinds are separated
   by hue drawn from existing --ok/--warn/--bad/--acc, none brighter than accent.
   Weekends/stack/hour warnings are visual cautions only; nothing here blocks. */


/* one colour per kind, from the token palette */

.cal-detail{ margin-top:22px; }
.cal-warn{ background:var(--warn-bg); color:var(--warn); border-radius:var(--r-sm,10px);
  padding:10px 14px; font-size:13px; margin:8px 0 12px; }
.cal-list{ list-style:none; margin:0; padding:0; }
.cal-list li{ display:flex; gap:10px; align-items:baseline; padding:8px 0;
  border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.cal-list li:last-child{ border-bottom:none; }
.cal-t{ font-variant-numeric:tabular-nums; color:var(--muted); min-width:46px; }
.cal-lbl{ flex:1; }

/* kind pills in the day detail, and the call/email chip in the chasing list */
.pill.kind-case_action,  .pill.chan-call{ background:var(--acc-12); color:var(--acc); }
.pill.kind-compliance{ background:var(--warn-bg); color:var(--warn); }
.pill.kind-lapsed_promise{ background:var(--bad-bg); color:var(--bad); }
.pill.kind-task,         .pill.chan-email{ background:var(--ok-bg); color:var(--ok); }


/* ── inline calendar field (07/09/2026 r2) ────────────────────────────
   The rich calendar as a FORM control on the two scheduling paths. Prefixed
   rd-cal- so it cannot collide with global box/pill rules (standing rule).
   Distinct from the standalone screen's cal- classes on purpose — this one is
   compact and lives inside a form. Palette tokens only. */
.rd-cal-field{ border:1px solid var(--line); border-radius:var(--r-sm,10px);
  margin:0 0 12px; background:var(--surface-2); overflow:hidden; }
.rd-cal-lbl{ font-size:12px; font-weight:600; color:var(--ink-2); padding:10px 14px 0; }
/* collapsed one-line summary (the new default) */
.rd-cal-summary{ display:flex; align-items:center; gap:10px; width:100%; border:none;
  background:none; padding:10px 14px; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.rd-cal-summary:hover{ background:var(--acc-12); }
.rd-cal-ico{ flex:none; color:var(--acc); }
.rd-cal-sum{ display:inline-flex; align-items:center; gap:8px; flex:1; }
.rd-cal-sum-date{ font-weight:600; }
.rd-cal-sum-time{ color:var(--acc); font-variant-numeric:tabular-nums; }
.rd-cal-sum-none{ color:var(--muted); }
.rd-cal-sum-load{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.rd-cal-sum-load.stack{ color:var(--warn); font-weight:700; }
.rd-cal-chev{ flex:none; color:var(--muted); transition:transform .15s; }
.rd-cal-field.open .rd-cal-chev{ transform:rotate(180deg); }
/* body: hidden until open */
.rd-cal-body{ display:none; padding:0 14px 12px; border-top:1px solid var(--line); }
.rd-cal-field.open .rd-cal-body{ display:block; }
.rd-cal-field.open .rd-cal-summary{ border-bottom:none; }
.rd-cal-head{ display:flex; align-items:center; gap:8px; margin:10px 0 8px; }
.rd-cal-mo{ font-weight:650; font-size:13.5px; min-width:130px; text-align:center; }
.rd-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.rd-cal-dow span{ font-size:10px; color:var(--muted); text-align:center; font-weight:600; }
.rd-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.rd-cal-day{ min-height:44px; border:1px solid var(--line); border-radius:var(--r-xs,6px);
  padding:3px 4px; background:var(--surface); cursor:pointer; position:relative;
  text-align:left; font:inherit; color:inherit; display:block; width:100%; }
.rd-cal-day:hover{ border-color:var(--acc); }
.rd-cal-day.pad{ background:transparent; border:none; cursor:default; min-height:0; }
.rd-cal-dn{ font-size:11px; font-weight:600; }
.rd-cal-day.weekend{ background:var(--acc-12); }
.rd-cal-day.weekend .rd-cal-dn{ color:var(--muted); }
/* 08/09/2026 — past days are not selectable in a scheduling field */
.rd-cal-day.past{ background:#f2f1ec; cursor:not-allowed; opacity:.55; }
.rd-cal-day.past .rd-cal-dn{ color:var(--muted); }
/* today is a subtle marker, NOT a green box — it must not read as a selection */
.rd-cal-day.today{ outline:none; }
.rd-cal-day.today .rd-cal-dn::after{ content:" ·today"; font-size:8.5px; color:var(--muted); font-weight:600; }
/* the selected day is a solid fill — unmistakable, and only ever one */
.rd-cal-day.sel{ background:var(--acc); border-color:var(--acc); box-shadow:none; }
.rd-cal-day.sel .rd-cal-dn{ color:#fff; }
.rd-cal-day.sel .rd-cal-dn::after{ color:rgba(255,255,255,.8); }
.rd-cal-day.sel .rd-cal-load{ color:#fff; }
.rd-cal-day.sel .rd-cal-tt{ color:rgba(255,255,255,.9); }
.rd-cal-load{ position:absolute; right:3px; top:2px; font-size:9.5px; color:var(--muted); font-weight:700; }
.rd-cal-load.stack{ color:var(--warn); }
.rd-cal-tt{ display:block; font-size:8.5px; color:var(--acc); line-height:1.2; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rd-cal-warn{ background:var(--warn-bg); color:var(--warn); border-radius:var(--r-xs,6px);
  padding:7px 10px; font-size:12px; margin:8px 0 6px; }
@media (max-width:760px){ .rd-cal-day{ min-height:38px; } .rd-cal-tt{ display:none; } }

/* time sits inline with the picked date in the calendar header (07/09 r3) */
.rd-cal-head .rd-cal-picked{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.rd-cal-time{ font:inherit; font-size:11px; padding:1px 4px; border:1px solid var(--line);
  border-radius:var(--r-xs,6px); background:var(--surface); width:auto; }

/* form calendar: who's-booked panel on the picked day (r? ) */
.rd-cal-who{ margin:8px 0 4px; border-top:1px solid var(--line); padding-top:8px; }
.rd-cal-who-h{ font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.rd-cal-who ul{ list-style:none; margin:0; padding:0; }
.rd-cal-who li{ display:flex; gap:8px; align-items:baseline; padding:4px 0;
  border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.rd-cal-who li:last-child{ border-bottom:none; }
.rd-cal-who-t{ font-variant-numeric:tabular-nums; color:var(--muted); min-width:42px; }

/* standalone calendar: inline amend + add-to-day (r?) */
.cal-editrow{ display:block !important; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm,10px); padding:12px 14px; margin:6px 0; }
.cal-editrow .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cal-addform{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm,10px); padding:14px 16px; margin-top:12px; }
.cal-addform .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   30.3 — responsive: phone / tablet / desktop.  CSS-ONLY, additive.
   ---------------------------------------------------------------------------
   Scope (per BRIEF-responsive-design.md): Today, Chasing + the chase thread /
   Log-contact form + rich calendar, the client page (hero, tabs, stats, doc
   cards), the top bar and the client pill strip. REPORTS AND BOTH PRINT PATHS
   ARE OUT OF SCOPE and untouched — no rule below sits inside body.pdf-export
   or @media print, and every selector targets visible chrome the print paths
   already hide.

   Approach: the desktop layout is the default and is unchanged at ≥821px.
   These blocks only tighten and re-flow BELOW that. The visible chrome is
   .rd-top / .rd-cbar / .rd-hero / .stats / etc.; the hidden rail keeps its own
   pre-redesign @media(max-width:900px) block above, left alone.

   Nav on a phone: a swipe-strip was tried first (CSS-only) and REJECTED on the
   device — only the first item showed and there was no usable cue that more
   was off-screen, so the other screens could not be reached. Replaced with a
   burger dropdown: the strip (.rd-nav) is hidden below 560px, a burger button
   (#rdburger) opens #rdnavmenu, which renderTopNav fills from the SAME items
   array as the strip. Handlers toggleNav/closeNav mirror toggleAcct/closeAcct.
   This is the deliberate, approved exception to "CSS only" — it needed markup
   + a handler because the CSS-only version did not actually work.
   ═══════════════════════════════════════════════════════════════════════════ */

/* burger is hidden by default (desktop shows the strip); shown on a phone. */
.rd-navmore{ position:relative; display:none; }
.rd-burger{ width:40px; height:40px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:var(--r-sm); font-size:19px;
  line-height:1; color:var(--ink-2); align-items:center; justify-content:center;
  cursor:pointer; font-family:var(--ui); }
/* the dropdown reuses .rd-menu (position/box/shadow/.open) from the account
   menu; these are the nav-specific bits. */
.rd-navdrop{ left:auto; right:0; min-width:210px; }
.rd-navdrop a{ display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:11px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--ink-2);
  min-height:44px; box-sizing:border-box; }
.rd-navdrop a:hover{ background:var(--surface-2); color:var(--acc); }
.rd-navdrop a.on{ color:var(--acc); font-weight:640; background:var(--acc-12); }
.rd-navdrop .rd-cnt{ margin-left:auto; }
@media print{ .rd-navmore{ display:none !important; } }

/* ── tablet and below (≤820px) — the layout still fits; it just tightens ── */
@media (max-width:820px){
  .rd-top-in{ padding:0 16px; gap:14px; }
  .rd-cbar-in{ padding:9px 16px; }
  body.rd main{ padding:18px 16px 72px; }
  .rd-nav a{ padding:0 10px; font-size:13px; }
  /* Search / Log-contact keep their icon + shortcut, drop the word to save room. */
  .rd-sbtn{ padding:6px 9px; }
  .rd-hero{ padding:22px 22px; }
  .rd-hstats{ gap:22px; }
}

/* ── phone (≤560px) ── */
@media (max-width:560px){
  /* top bar */
  .rd-top-in{ height:52px; padding:0 12px; gap:8px; }
  /* the inline nav strip is hidden; the burger dropdown replaces it. */
  .rd-nav{ display:none; }
  .rd-navmore{ display:block; }
  /* Search/Log shrink to a 44px square touch target; the word wraps out via
     zero-width — keep the icon glyph. The label text is hidden, kbd hidden. */
  .rd-sbtn{ padding:0; width:44px; height:44px; justify-content:center;
    font-size:0; }                          /* hides the word; icon added below */
  .rd-sbtn kbd{ display:none; }
  .rd-sbtn::before{ font-size:16px; }
  .rd-sbtn-search::before{ content:"\1F50D"; }              /* search glyph */
  .rd-sbtn-log::before{ content:"+"; font-size:22px; font-weight:600; }
  .rd-av{ width:40px; height:40px; }

  /* client strip */
  .rd-cbar{ top:52px; }
  .rd-cbar-in{ padding:8px 12px; gap:7px; }
  .rd-cbl{ display:none; }                   /* the pills identify themselves */
  .rd-pill{ padding:6px 14px 6px 6px; }      /* a touch taller for a thumb */

  /* content column */
  body.rd main{ padding:14px 12px 80px; }

  /* Today: day-head figures drop under the date rather than fighting for the
     right edge on a narrow screen. Targets the inline flex row emitted by
     viewToday via its own wrapper class added at build time? NO — no markup
     change: the row is a flex with flex-wrap already, so the right block wraps
     on its own once it can't fit. We only widen it so it wraps cleanly. */
  .hero.dayhead h1{ font-size:22px; }

  /* one column for the stat grid — auto-fit already collapses it, but pin it so
     a lone tile never sits half-width. */
  .stats{ grid-template-columns:1fr; }

  /* doc cards stack (they're auto-fit minmax(240) so they already do; pinned) */
  .rd-docs{ grid-template-columns:1fr; }

  /* Today rows: keep tag+label+due on the first line; the control (select or
     button) drops to a full-width second line with a 44px target. The li is
     already display:flex; adding wrap + making the action 100% does it. */
  ul.items li{ flex-wrap:wrap; }
  ul.items li > select,
  ul.items li > .inline-a,
  ul.items li > span[style*="display:flex"]{ flex:1 0 100%; margin-top:8px; }
  ul.items li > select{ width:100%; min-height:44px; }

  /* hero band */
  .rd-hero{ padding:20px 18px; border-radius:var(--r-lg); }
  .rd-hero h1{ font-size:21px; }
  .rd-hstats{ gap:16px 26px; margin-top:16px; }
  .rd-hs .hv{ font-size:22px; }

  /* Log-contact modal: full-bleed sheet on a phone, scrolls internally. The
     modal is .overlay (fixed inset:0 flexbox) > .modal (max-width:560). */
  .overlay{ padding:0; align-items:stretch; }
  .modal{ max-width:none; max-height:100%; border-radius:0; border:0; width:100%; }
  .mb{ overflow-y:auto; }
  .mb .two{ grid-template-columns:1fr; }     /* the .two rule already does this at 560; kept explicit for the modal */
  /* channel / direction chips: thumb-sized */
  .chips .chip{ padding:10px 14px; }
  .mb select, .mb input, .mb textarea{ min-height:44px; }

  /* rich calendar field (rd-cal) — the day cells must take a THUMB on a phone.
     04/09-era rule at 760px shrank them to 38px, which is right for a tablet
     but too small to tap; this GROWS them below 560. The 760px rule is left in
     place above and still governs 561–760px.
     Superseded for ≤560 only — old effective value was min-height:38px. */
  .rd-cal-day{ min-height:52px; }
  .rd-cal-grid{ gap:5px; }
  .rd-cal-head .rd-cal-mo{ min-width:0; flex:1; text-align:center; }
  .rd-cal-head .btn.small,
  .rd-cal-head .btn{ min-width:44px; min-height:38px; }
  /* the who's-booked panel rows stay readable */
  .rd-cal-who li{ flex-wrap:wrap; }

  /* chase thread / chasing cards: the header row wraps, money keeps its line,
     action buttons go 2-up at 44px. Chasing uses .card with an inner flex row
     (chaseCard) and .btn.ghost.sm actions. */
  .card .btn.ghost.sm{ min-height:44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   30.4 — report SCREEN overflow only.  Screen-only, print untouched.
   ---------------------------------------------------------------------------
   The monthly report (.report, max-width 820) and the business-performance
   review (max-width 900) are laid out for a document. On a phone the container
   is wider than the viewport and the .kpis 4-col grid and wide .rep-table rows
   run off the right edge (the STRENGTHS/WATCH/WEAKNESS cards, the CASH tile,
   the LAST THREE MONTHS and quarter tables all clip).

   The owner's instruction (08/09): the PDF is fine, only the on-screen view is
   messy — so fix the screen and leave print exactly as it is. Every rule here
   is `@media screen and (max-width: …)`, so it cannot apply to @media print,
   and none of it touches body.pdf-export or any selector the print paths set.
   Reports remain out of scope for PRINT; this is a screen-fit fix only.
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:820px){
  /* the document stops being wider than the phone; it was max-width 820/900
     with auto margins, so on a narrow screen it overflowed to the right. */
  .report{ max-width:100%; }
  /* four KPI tiles never fit; go two-up, then one-up below. */
  .kpis{ grid-template-columns:repeat(2,1fr); }
  /* wide report tables scroll inside their own box instead of clipping — a
     visible track shows there's more, nothing is silently cut. This wraps the
     table only on screen; the table markup and print layout are unchanged. */
  .report .rep-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .report .rep-table thead, .report .rep-table tbody{ display:table; width:100%; min-width:440px; }
}
@media screen and (max-width:560px){
  .report{ padding:20px 16px; }                 /* the doc had generous doc padding */
  .kpis{ grid-template-columns:1fr; }           /* one tile per line, nothing clipped */
  .report .rep-table thead, .report .rep-table tbody{ min-width:520px; }
  /* the report header (practice block on the right) stacks under the title */
  .rep-head{ flex-direction:column; gap:10px; }
  .rep-by{ text-align:left; }
}

/* 30.8 — per-invoice charge ticks on the letter screen (prefixed lrow-) */
.lrow-panel{max-width:800px;margin:0 auto var(--s3)}
.lrow-panel .rep-table{margin-top:4px}
.lrow-tick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);white-space:nowrap}
.lrow-tick.lrow-on{color:var(--ink)}
.lrow-tick input{width:16px;height:16px;margin:0;accent-color:var(--acc)}
/* 30.9 — all/none on the charge columns */
.lrow-all{font-weight:400;text-transform:none;letter-spacing:0;margin-left:6px;font-size:11.5px}
.lrow-all .inline-a{font-size:11.5px}

/* 09/09/2026 (#6) — chase-by-batch: invoice picker + recipient rows in the
   chase email form. Prefixed chn- per the class rule. */
.chn-picker{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;margin-top:5px;
  background:var(--surface-2)}
.chn-pick-tools{display:flex;gap:12px;padding:4px 8px 6px}
.chn-inv-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-xs);
  cursor:pointer}
.chn-inv-row:hover{background:var(--acc-12)}
.chn-inv-row.chn-on{background:var(--acc-12)}
.chn-inv-row input{width:16px;height:16px;accent-color:var(--acc);flex:none}
.chn-inv-ref{font-variant-numeric:tabular-nums;font-weight:560}
.chn-inv-due{flex:1}
.chn-inv-out{font-variant-numeric:tabular-nums}
.chn-pick-sum{padding:6px 8px 2px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line-soft);margin-top:4px}
.chn-recip{display:flex;align-items:center;gap:8px;margin-top:5px}
.chn-recip-tag{font-size:11px;color:var(--muted);width:24px;flex:none}
.chn-recip input{flex:1}
.chn-recip-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:17px;
  line-height:1;padding:0 4px;flex:none}
.chn-recip-rm:hover{color:var(--bad)}

/* 09/09/2026 — merged invoice+charges panel: include tick + dimmed non-charge cells */
.lrow-inc{width:64px;text-align:center}
.lrow-inc .lrow-tick{justify-content:center}
tr.lrow-excluded td:not(.lrow-inc){opacity:.4}
.lrow-off{color:var(--muted);opacity:.6}

/* 09/09/2026 — LBA Protocol annexes. Screen + BOTH print paths (@media print
   and body.pdf-export), per the two-print-paths rule. */
.annex-set{margin-top:22px}
.annexdoc{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.annexdoc h2{font-size:16px;margin:0 0 2px}
.annexdoc .annex-sub{color:var(--muted);font-size:12px;margin:0 0 12px}
.annexdoc p{margin:8px 0;font-size:13px;line-height:1.6}
.annex-fin{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.annex-fin td{border:1px solid var(--line);padding:7px 9px}
.annex-fin td:first-child{width:62%;background:var(--surface-2)}
.annex-break{height:0}
/* Page breaks between the letter and each annex — appended layout puts them on
   new pages; separate layout does the same (each annex its own page). Cover
   both print engines. */
@media print{
  .annex-break{break-before:page;page-break-before:always;height:0}
  .annexdoc{break-inside:avoid;page-break-inside:avoid;border-top:none;padding-top:0}
}
body.pdf-export .annex-break{break-before:page;page-break-before:always;height:0}
body.pdf-export .annexdoc{break-inside:avoid;page-break-inside:avoid;border-top:none;padding-top:0}

/* 10/09/2026 — historical data panel on the client Financials tab */
.hist-card{margin-top:16px}
.hist-head{display:flex;align-items:center;gap:12px}
.hist-ic{width:30px;height:30px;border-radius:7px;background:var(--acc-12);display:flex;
  align-items:center;justify-content:center;flex:none;font-size:15px}
.hist-unlocked{border-color:#EAD9B0}
.hist-feeds{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-2)}
.hist-feeds li{margin:3px 0}
/* 11/09/2026 — inline historical upload on the Financials tab */
.hist-upload{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
/* release 31 — single one-off month flag on the Financials tab */
.spike-mark{font-size:11px;color:var(--warn);cursor:help;white-space:nowrap;margin-left:4px}
.spike-row{background:#FBF3E4}

/* Send-as-client confirm dialog (email send from the hub) */
.send-rows{font-size:13px;margin:2px 0}
.send-row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:3px 0}
.send-row span{color:var(--muted)} .send-row b{color:var(--ink);font-weight:600}
.send-block{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);
  border-radius:var(--r);padding:10px 12px;margin-bottom:10px;font-size:12.5px}

/* ── main Calendar screen — redesign (13/09/2026) ─────────────────────
   Behaviour unchanged; this is a visual pass. Softer rounded tiles, a clearer
   header, and colour chips per kind (chase/deadline/promise/task) that are
   distinct at a glance — plus call vs email tinting within chases, since chases
   dominate a busy month. mc- prefix; the detail panel keeps its cal- classes. */
.mc-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r,14px);
  padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.mc-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.mc-title{ font-size:20px; margin:0 0 2px; }
.mc-nav{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.mc-navbtn{ border:1px solid var(--line); background:var(--surface); border-radius:9px;
  width:32px; height:32px; cursor:pointer; font-size:16px; line-height:1; color:var(--ink-2); }
.mc-navbtn:hover{ border-color:var(--acc); color:var(--acc); }
.mc-mo{ font-weight:650; font-size:15px; min-width:150px; text-align:center; }
.mc-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:14px; }
.mc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.mc-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.mc-dot.case_action{ background:#3a6ea5; }
.mc-dot.compliance{ background:#7a5aa8; }
.mc-dot.lapsed_promise{ background:var(--bad); }
.mc-dot.task{ background:var(--ok); }
/* 33.8 — minmax(0,1fr): columns are always equal. With plain 1fr a long chase
   name widened its column, the day cells stopped lining up with the headings
   (1 Oct under FRI), Sunday shrank to 36px and the grid ran off the page. */
.mc-dow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.mc-dow span{ font-size:10.5px; color:var(--muted); text-align:center; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.mc-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.mc-grid > .mc-day{ min-width:0; }
.mc-grid .mc-ev{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mc-day{ min-height:88px; border-radius:11px; padding:7px 8px; background:var(--surface-2);
  position:relative; cursor:pointer; border:1px solid transparent; text-align:left; font:inherit;
  color:inherit; transition:border-color .1s, background .1s; display:block; width:100%; }
.mc-day:hover{ border-color:var(--acc-35, #bcd5ce); background:var(--surface); }
.mc-day.pad{ background:transparent; cursor:default; }
.mc-dn{ font-size:13px; font-weight:600; }
.mc-day.weekend{ background:#f1f0ea; }
.mc-day.weekend .mc-dn{ color:var(--muted); }
.mc-day.today{ background:var(--surface); border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.mc-day.today .mc-dn{ color:var(--acc); }
.mc-day.sel{ border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-12) inset; }
.mc-count{ position:absolute; right:7px; top:6px; font-size:10.5px; color:var(--muted); font-weight:700; }
.mc-count.stack{ color:var(--warn); }
.mc-evs{ margin-top:5px; display:flex; flex-direction:column; gap:3px; }
.mc-ev{ font-size:10.5px; line-height:1.3; padding:2px 6px; border-radius:6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; font-weight:500;
  display:block; min-width:0; max-width:100%; }   /* 32.7 fix 5 — full name, ellipsis at the edge (never a mid-word cut) */
.mc-ev b{ font-weight:700; font-variant-numeric:tabular-nums; }
/* kind colours — distinct, richer than the old pale tokens */
.mc-ev.case_action{ background:#e8eef6; color:#2a4d78; }
.mc-ev.case_action.chan-call{ background:#e3ecf7; color:#1f4a7a; }
.mc-ev.case_action.chan-email{ background:#eaf1ec; color:#2f6f4f; }
.mc-ev.compliance{ background:#efe9f6; color:#6b4a99; }
.mc-ev.lapsed_promise{ background:var(--bad-bg); color:var(--bad); }
.mc-ev.task{ background:var(--ok-bg); color:var(--ok); }
.mc-more{ font-size:10px; color:var(--muted); font-weight:600; padding-left:3px; }
@media (max-width:820px){ .mc-day{ min-height:70px; } .mc-ev{ font-size:9.5px; } .mc-wrap{ padding:14px; } }
/* 33.4 — drag a chase or a task to another day. The day cell is a div now
   (Firefox will not drag from inside a <button>), so it gets the button's
   keyboard focus ring and user-select here. */
.mc-day{ user-select:none; -webkit-user-select:none; }
.mc-day:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.mc-ev[data-caldrag], .cal-list li[data-caldrag]{ cursor:grab; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* 33.7 — the pointer drag: a copy of the chip follows the pointer */
.cal-ghost{ position:fixed; left:0; top:0; z-index:80; pointer-events:none; margin:0;
  box-shadow:0 10px 24px rgba(0,0,0,.22); opacity:.95; cursor:grabbing; will-change:transform; }
.cal-ghost.no{ opacity:.85; }
html.cal-dragging, html.cal-dragging *{ cursor:grabbing !important; -webkit-user-select:none !important; user-select:none !important; }
.mc-ev.just-moved{ box-shadow:0 0 0 2px var(--acc); font-weight:650; }
@media (prefers-reduced-motion: no-preference){
  .mc-ev.just-moved{ animation:cal-landed 1.2s ease-out 1; }
  @keyframes cal-landed{ 0%{ box-shadow:0 0 0 6px var(--acc-35, rgba(0,0,0,.2)); } 100%{ box-shadow:0 0 0 2px var(--acc); } } }
.mc-ev.nodrag, .cal-list li.nodrag{ cursor:no-drop; }
.mc-ev.dragging, .cal-list li.dragging{ opacity:.35; }
.mc-day.drop-ok{ border-color:var(--acc); background:var(--acc-12);
  box-shadow:0 0 0 2px var(--acc) inset; }
.mc-count.preview{ color:var(--acc); }
.mc-wknote{ display:block; font-size:10px; color:var(--muted); font-style:italic; padding-left:3px; }
.cal-undo{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  background:var(--ink); color:var(--surface); font-size:13px; padding:9px 14px;
  border-radius:var(--r-sm, 10px); box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:opacity .35s; max-width:calc(100vw - 32px); }
.cal-undo.fade{ opacity:0; }
.cal-undo-btn{ background:none; border:0; padding:0 0 0 4px; font:inherit; font-weight:700;
  color:inherit; text-decoration:underline; cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .cal-undo{ transition:none; } }
@media print{ .cal-undo{ display:none !important; } }
body.pdf-export .cal-undo{ display:none !important; }

/* client initials tag on each calendar event (13/09/2026) — kind stays the
   chip colour; the client is shown as a small coloured initials badge, matching
   the top pill strip's rd-ci. */
.mc-ci{ display:inline-flex; align-items:center; justify-content:center;
  min-width:15px; height:14px; padding:0 3px; margin-right:4px; border-radius:4px;
  background:var(--muted); color:#fff; font-size:8px; font-weight:700; letter-spacing:.02em;
  vertical-align:middle; flex:none; }
.mc-clientkey{ display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted);
  margin:-6px 0 14px; align-items:center; }
.mc-clientkey .mc-ci{ margin-right:5px; }
.mc-clientkey b{ font-weight:600; color:var(--ink-2); margin-right:2px; }

/* ── Today's chases (BRIEF-1, 31.11) ─────────────────────────────────────────
   All classes prefixed chase-/cd- per the standing rule: unprefixed state words
   (ok/warn/bad) collided with global box rules once and must not again. */
.chase-list .chase-row{ display:flex; gap:12px; align-items:flex-start;
  padding:12px 16px 12px 18px; }
.chase-row .grow{ flex:1; min-width:0; }
.chase-head{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  margin:0 0 3px; font-weight:620; }
.chase-head b{ font-weight:720; }
.chase-why{ margin:0 0 4px; font-size:13px; }
.chase-tags{ margin:0 0 4px; font-size:12px; color:var(--muted); }
.chase-next{ margin:0; font-size:12.5px; }
.chase-flag{ margin:6px 0 0; font-size:12.5px; color:var(--warn);
  border-left:3px solid var(--warn); padding-left:8px; }
.chase-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end;
  white-space:nowrap; }
.chase-week{ display:flex; gap:8px; margin:12px 0 0; }
.chase-day{ flex:1; text-align:center; border:1px solid var(--line);
  border-radius:8px; padding:8px 4px; }
.cd-dow{ font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; }
.cd-cnt{ font-size:18px; font-weight:700; }
.cd-amt{ font-size:11.5px; color:var(--muted); }

/* ═══ 31.13 — problem log (#/problems), owner-only ════════════════════════
   All classes prefixed pb- (the standing rule after ok/warn/bad collided with
   global box rules). Colours come from the same tokens the rest of the app
   uses, so a theme change carries here too. */
.pb-summary{ display:flex; gap:22px; flex-wrap:wrap; color:var(--ink-2);
  margin:12px 0 4px; font-size:13px; }
.pb-summary b{ color:var(--ink); font-weight:600; }
.pb-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; }
.pb-chip{ border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:99px; padding:5px 13px; font:inherit; font-size:12.5px; cursor:pointer; }
.pb-chip.pb-on{ background:var(--acc); border-color:var(--acc); color:#fff; }
.pb-chip input{ margin-right:5px; vertical-align:middle; }
.pb-copied{ font-size:12.5px; color:var(--ok); align-self:center; }
/* 26/09/2026 (34.1 §5, §1b) — Since build select; server shared-id repair. */
.pb-bar select.pb-since{ width:auto; min-width:0; flex:0 0 auto; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); border-radius:99px; padding:4px 10px; font:inherit;
  font-size:12.5px; margin:0 0 0 auto; height:auto; }
.pb-newcur b{ color:var(--acc-lo); }
.pb-repair{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 4px;
  padding:10px 14px; border:1px solid var(--line); border-left:4px solid var(--warn);
  border-radius:var(--r-sm); background:var(--surface); }
.pb-repair .sub{ font-size:12.5px; }
.pb-repair-msg{ font-size:13px; color:var(--ink-2); margin:8px 0 0; flex-basis:100%; }

.pb-row{ display:grid; grid-template-columns:auto 1fr auto; gap:2px 14px;
  padding:11px 14px; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--line); border-radius:var(--r-sm); margin-bottom:7px; }
.pb-k-crash{ border-left-color:var(--bad); }
.pb-k-save{ border-left-color:var(--bad); }
.pb-k-slow{ border-left-color:var(--warn); }
.pb-k-flicker{ border-left-color:var(--warn); }
.pb-k-conflict{ border-left-color:var(--muted); }
.pb-k-info{ border-left-color:var(--muted); }   /* 31.31 A5 — informational, grey */
.pb-fixed{ opacity:.5; }
.pb-sel{ margin-top:4px; }
.pb-main{ min-width:0; }
.pb-head{ display:flex; gap:9px; flex-wrap:wrap; align-items:baseline; }
.pb-kind{ font-size:11.5px; border-radius:4px; padding:1px 7px; background:var(--acc-12);
  color:var(--acc-lo); white-space:nowrap; }
.pb-k-crash .pb-kind,.pb-k-save .pb-kind{ background:var(--bad-bg); color:var(--bad); }
.pb-k-slow .pb-kind,.pb-k-flicker .pb-kind{ background:var(--warn-bg); color:var(--warn); }
.pb-k-conflict .pb-kind{ background:var(--surface-2); color:var(--ink-2); }
.pb-k-info .pb-kind{ background:var(--surface-2); color:var(--ink-2); }   /* 31.31 A5 — grey */
.pb-msg{ font-weight:600; }
.pb-count{ display:inline-block; background:var(--surface-2); border-radius:99px;
  padding:0 8px; font-size:11.5px; }
.pb-where{ color:var(--ink-2); font-size:12.5px; margin-top:2px; }
.pb-tech{ font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace; color:var(--muted);
  white-space:pre-wrap; word-break:break-word; margin-top:4px; }
.pb-acts{ display:flex; gap:7px; margin-top:6px; }
.pb-when{ text-align:right; font-size:12px; color:var(--muted); white-space:nowrap; }
.pb-st{ margin-top:5px; border-radius:4px; padding:1px 7px; font-size:11px;
  display:inline-block; background:var(--surface-2); }
.pb-st-reported{ background:var(--acc-12); color:var(--acc-lo); }
.pb-st-fixed{ background:var(--ok-bg); color:var(--ok); }
/* ── F2 (15/09/2026) reopened / quiet ──────────────────────────────────────
   A reopened bug is the most important row on the screen (§4): red tag, red
   left accent, and a red count in the summary strip. Quiet is a muted state. */
.pb-st-quiet{ background:var(--surface-2); color:var(--muted); }
.pb-st-reopened{ background:var(--bad-bg); color:var(--bad); }
.pb-reopened{ border-left-color:var(--bad); }
.pb-reopen-tag{ font-size:11px; font-weight:700; letter-spacing:.03em;
  border-radius:4px; padding:1px 7px; background:var(--bad-bg); color:var(--bad); }
.pb-reopened-count b{ color:var(--bad); }
.pb-empty{ padding:32px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--r-sm); }
.pb-clip{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ── BRIEF-3 (13/09/2026) payer habits ─────────────────────────────────────
   The "versus habit" tag on chase rows and the case, and the #/habits screen.
   Prefixed hb- so nothing here collides with a global rule (the ln- lesson). */
.hb-tag{ display:inline-block; font-size:11px; font-weight:640; letter-spacing:.03em;
  border-radius:4px; padding:1px 6px; margin-left:4px; vertical-align:baseline; }
.hb-warn{ background:var(--warn-bg); color:var(--warn); }
.hb-neutral{ background:var(--surface-2); color:var(--muted); }
.hb-caseline{ color:var(--muted); }
.hb-table td.r, .hb-table th.r{ font-variant-numeric:tabular-nums; }
.hb-limit b{ color:var(--warn); }

/* ── 31.16 (13/09/2026) the habit as a stat card on a customer's own page ───
   The Xero shape: "Their habit" label + info dot on top, the number large
   beneath, the lateness below (amber after due, green before). Replaces the
   31.15 inline line. Prefixed hb-d so it never catches a global rule. noprint,
   owner-only (see debtorHabitLine). */
.hb-dcard{ max-width:340px; margin:14px 0 0; padding:16px 18px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); }
.hb-dcard-client{ border-style:dashed; }
.hb-dtop{ display:flex; align-items:center; gap:7px; }
.hb-dk{ font-size:13px; font-weight:640; color:var(--ink-2); }
.hb-dinfo{ display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--muted); color:#fff;
  font-size:10px; font-weight:700; font-style:italic; cursor:help; flex:none;
  position:relative; }
.hb-dinfo:hover .hb-dtip, .hb-dinfo:focus .hb-dtip{ display:block; }
.hb-dtip{ display:none; position:absolute; top:22px; left:0; width:260px; z-index:5;
  background:var(--ink); color:#fff; font-size:12px; font-weight:400; line-height:1.45;
  letter-spacing:0; text-transform:none; padding:9px 11px; border-radius:7px; }
.hb-dnum{ font-size:26px; font-weight:700; line-height:1.15; margin:4px 0 0; color:var(--ink); }
.hb-dcard-client .hb-dnum{ font-size:20px; font-weight:600; color:var(--ink-2); }
.hb-dsub{ font-size:13.5px; font-weight:600; margin:2px 0 0; color:var(--muted); }
.hb-dcard-client .hb-dsub{ font-weight:500; }
.hb-dsub.hb-dl-late{ color:var(--warn); }
.hb-dsub.hb-dl-early{ color:var(--ok); }

/* ═══ Build 4 (32.1) — My contribution + Client slipping ═══════════════════
   Owner-only screens. Prefixed ct- throughout so the tone classes never inherit
   the global .ok/.warn/.bad box rules (the leanness lesson, HANDOVER). Nothing
   here has a print path — the page is never exported. */
.ct-wrap{max-width:1100px;margin:0 auto;padding:16px}
.ct-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ct-pill{border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:5px 12px;font-size:13px;text-decoration:none;color:var(--ink-2)}
.ct-pill.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ct-head h1{font-size:19px;font-weight:600;margin:0 0 2px}
.ct-sub{color:var(--muted);margin:0 0 12px;font-size:13px}
.ct-sec{font-size:15px;margin:0 0 8px;font-weight:600}
.ct-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin-bottom:12px}
.ct-card h2{font-size:15px;margin:0 0 6px;font-weight:600}
.ct-card h3{font-size:15px;margin:0 0 4px;font-weight:600}
.ct-card p{margin:4px 0;color:var(--ink-2)}
.ct-q{color:var(--muted);font-size:13px}
.ct-so{margin:3px 0}
.ct-sub{color:var(--muted);font-size:12px}
.ct-tip{color:var(--muted);font-size:12px}
.ct-n{text-align:right;font-variant-numeric:tabular-nums}
.ct-fee{margin-top:8px}
.ct-lbls{color:var(--muted);font-size:11px;margin-top:2px}
.ct-tbl{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0}
.ct-tbl th,.ct-tbl td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ct-tbl th{color:var(--muted);font-weight:500}
.ct-tag{display:inline-block;font-size:12px;border-radius:4px;padding:1px 8px;
  border:1px solid var(--line);color:var(--ink-2)}
.ct-tag.ct-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.ct-tag.ct-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.ct-tag.ct-bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.ct-spark{display:inline-flex;gap:2px;align-items:flex-end;height:28px;vertical-align:middle}
.ct-spark i{display:block;width:9px;background:var(--acc);opacity:.75}
/* Section 5 — the red "without" block, the prototype's styling. */
.ct-wo{background:var(--bad-bg);border:1px solid var(--bad);border-radius:8px;padding:14px 16px;margin-bottom:12px}
.ct-wo h2{color:var(--bad)}
.ct-wo-list{list-style:none;margin:8px 0 0;padding:0}
.ct-wo-row{padding:8px 0;border-top:1px solid color-mix(in oklch,var(--bad) 25%,transparent)}
.ct-wo-row:first-child{border-top:none}
.ct-wo-label{display:block;color:var(--bad);font-size:12px;font-weight:600}
.ct-wo-body{display:block;margin-top:2px}

/* ══ Memory of judgements (32.3) — the "Your call" control under a finding, the
   "quietened" tag, and the marker. Prefixed jm- per the mandatory prefixing rule
   (HANDOVER: new component state classes conflicted with global box rules once).
   All owner-only in practice — the elements carry noprint so they never export. */
.jm-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
  padding-top:9px;border-top:1px dashed var(--line)}
.jm-lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
.jm-v{border:1px solid var(--line);background:var(--card,#fff);border-radius:999px;
  padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.jm-v:hover{border-color:var(--acc)}
.jm-v.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.jm-tag{display:inline-block;font-size:11.5px;border-radius:5px;padding:1px 8px;
  background:var(--warn-bg);color:var(--warn);font-weight:600;vertical-align:middle}
.jm-quiet{opacity:.72}


/* ══ 32.7 — Build 5: the chase flow (customer screen). Prefix cf-. ══ */
.cf-links{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin:2px 0 14px; }
.cf-wrap{ display:grid; grid-template-columns:minmax(300px, 400px) minmax(0, 1fr); gap:18px; align-items:start; }
@media (max-width:960px){ .cf-wrap{ grid-template-columns:1fr; } }
.cf-left, .cf-right{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.cf-card{ margin:0; }
.cf-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:680; margin-bottom:6px; }
.cf-owe{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cf-owe-big{ font-size:28px; font-weight:680; color:var(--signal, #a02b2b); font-variant-numeric:tabular-nums; }
.cf-owe-sm{ font-size:13px; margin-top:4px; }
.cf-kv{ display:flex; gap:10px; font-size:13px; padding:3px 0; }
.cf-k{ flex:0 0 96px; color:var(--muted); font-size:12px; }
.cf-v{ flex:1; min-width:0; }
.cf-why{ font-size:12.5px; margin:8px 0 0; padding:8px 10px; border-radius:8px;
  background:var(--acc-12, #eef3f1); }
.cf-note{ margin:8px 0 0; }
.cf-tools{ display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 8px; }
.cf-selbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; margin:0 0 8px;
  border-radius:8px; background:var(--acc-12, #eef3f1); font-size:13px; }
.cf-paid{ display:inline-flex; gap:6px; align-items:center; }
.cf-paid input{ width:auto; margin:0; padding:4px 6px; }
/* 32.7 (owner's screenshots) — the table fits its column: tick, invoice, due
   + days on one line, amount, one small link. Nothing wraps into four lines and
   nothing spills under the right-hand column. */
.cf-inv{ width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
.cf-inv th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:680; text-align:left; padding:6px 6px; border-bottom:1px solid var(--line); }
.cf-inv td{ padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cf-inv .r{ text-align:right; }
.cf-inv .cf-cb{ width:22px; padding-left:2px; padding-right:0; }
.cf-inv .cf-cb input{ margin:0; width:15px; height:15px; cursor:pointer; }
.cf-inv .cf-due, .cf-inv .cf-amt{ white-space:nowrap; }
.cf-inv .cf-due .late, .cf-inv .cf-due .sub{ font-size:11.5px; margin-left:3px; }
.cf-inv .link{ font-size:12px; padding:0; }
.cf-inv .cf-row{ cursor:pointer; user-select:none; }
/* The global "tbody tr:hover" wash is the same colour as selection would have
   been, so a click looked like nothing happened. Hover is quieter here and a
   chosen row is unmistakable. */
.cf-inv tbody tr.cf-row:hover{ background:transparent; }
.cf-inv .cf-row:hover td{ background:var(--surface-2, #f6f8f7); }
.cf-inv .cf-row.cf-on td{ background:color-mix(in oklab, var(--acc) 16%, #fff); font-weight:600; }
.cf-inv .cf-row.cf-on td:first-child{ box-shadow:inset 3px 0 0 var(--acc); }
@supports not (color: color-mix(in oklab, red 50%, blue)){ .cf-inv .cf-row.cf-on td{ background:#dcebe6; } }
.cf-card{ min-width:0; }   /* 32.9 — no scroll box, so the selection bar can stick */
.cf-one{ display:inline-flex; gap:8px; }
.cf-compose > .inline-a{ align-self:flex-start; }
.cf-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.cf-chip{ border:1px solid var(--line); background:var(--surface, #fff); border-radius:999px; padding:5px 11px;
  font-size:12.5px; cursor:pointer; color:var(--ink-2, inherit); font-family:inherit; }
.cf-chip.on{ border-color:var(--acc); color:var(--acc); font-weight:640; }
.cf-chip.ghost{ border-style:dashed; }
.cf-chip.sm{ padding:3px 9px; font-size:11.5px; }
.cf-compose{ border-top:1px solid var(--line); margin-top:8px; padding-top:10px; display:flex; flex-direction:column; gap:6px; }
.cf-hdr{ display:flex; gap:8px; align-items:center; font-size:13px; }
.cf-hdr input{ flex:1; margin:0; padding:5px 8px; }
/* 35.5 (issue 3) — Cc lines on the compose screen: remove (×) and "+ another Cc" */
.cf-ccrm{ flex:none; font-size:16px; line-height:1; padding:0 4px; }
.cf-ccadd{ margin-top:-2px; }
.cf-body{ width:100%; font:inherit; font-size:13px; line-height:1.55; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; }
.cf-warnchip{ margin:0; font-size:12px; padding:5px 9px; border-radius:6px; background:var(--warn-bg, #fbf1e4); color:var(--warn, #a1580f); }
/* 01/10/2026 (37.0) — the letter's date differs from the follow-up: a red line above Send. Screen only. */
.cf-datewarn{ margin:8px 0 0; font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:6px; border:1px solid var(--signal, #a02b2b); color:var(--signal, #a02b2b); background:var(--bad-bg, #fbeaea); }
.cf-warn{ color:var(--warn, #a1580f); }
.cf-opts{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:6px 0; }
.cf-then{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; }
.cf-then input{ margin:0; padding:5px 8px; width:auto; }
.cf-then #cf-then-desc{ flex:1; min-width:160px; }
.cf-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.cf-thread{ display:flex; flex-direction:column; gap:8px; }
.cf-ev{ border:1px solid var(--line); border-left:3px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--surface, #fff); }
.cf-ev.cf-in{ border-left-color:var(--acc); }
.cf-ev.cf-out{ border-left-color:#2d4f8a; }
.cf-ev.cf-aside{ background:transparent; }
.cf-ev.cf-marker{ border:none; background:none; padding:2px 0 2px 14px; }
.cf-evh{ font-size:12.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.cf-evl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:680; }
.cf-evs{ font-weight:600; font-size:13px; margin-top:4px; }
.cf-evm{ white-space:pre-wrap; font:inherit; font-size:13px; line-height:1.5; margin:4px 0 0; }
.cf-tag{ font-size:11px; padding:1px 8px; border-radius:999px; background:var(--acc-12, #eef3f1); color:var(--acc); font-weight:640; }
.cf-tagrow{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.cf-pays{ margin-top:4px; }
.cf-divider{ font-size:12px; color:var(--muted); border-top:1px dashed var(--line); padding-top:6px; }
.cf-paste textarea{ width:100%; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
/* Both print paths: nothing on this screen is a client document. */
@media print{ .cf-next, .cf-paste, .cf-tagrow, .cf-details, .cf-links{ display:none !important; } }
body.pdf-export .cf-next, body.pdf-export .cf-paste, body.pdf-export .cf-tagrow,
body.pdf-export .cf-details, body.pdf-export .cf-links{ display:none !important; }

/* 32.9 — the thread's one expander, and the selection bar under the rows. */
.cf-more{ align-self:flex-start; border:1px dashed var(--line); background:transparent; border-radius:999px;
  padding:6px 14px; font-size:12.5px; cursor:pointer; color:var(--acc); font-family:inherit; font-weight:600; }
.cf-selbar{ margin:8px 0 0; position:sticky; bottom:10px; z-index:5;
  box-shadow:0 4px 18px rgba(0,0,0,.10); background:color-mix(in oklab, var(--acc) 10%, #fff); }

/* 33.0 — the box after a send: what went, to whom, where the follow-up moved. */
.cf-done{ border-color:var(--acc); box-shadow:inset 3px 0 0 var(--acc); }
.cf-done-h{ font-size:14.5px; font-weight:650; color:var(--acc); margin:4px 0 8px; }
.cf-done-l{ font-size:13px; margin:3px 0; display:flex; gap:8px; }

/* 33.1 — nudges, timer target, sticky notes. All prefixed (nd-, tm-, sn-) so no
   global rule catches them; every element carries noprint, and both print
   paths drop them outright as well. */
body.pdf-export .nd-bubble, body.pdf-export .sn-pocket, body.pdf-export .sn-cap{ display:none!important }
@media print{ .nd-bubble, .sn-pocket, .sn-cap{ display:none!important } }

.nd-bubble{ position:fixed; right:18px; z-index:61; max-width:340px; display:flex; flex-wrap:wrap;
  align-items:flex-start; gap:6px; padding:10px 12px; border-radius:14px; background:var(--surface);
  border:1px solid var(--acc-35, var(--line)); box-shadow:0 6px 22px -8px rgba(20,20,40,.28); font-size:12.5px; }
.nd-open{ flex:1; display:flex; gap:9px; align-items:flex-start; text-align:left; background:none; border:0;
  padding:0; cursor:pointer; color:inherit; font:inherit; }
.nd-dot{ width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--signal); flex:none; }
.nd-txt{ display:flex; flex-direction:column; gap:2px; }
.nd-txt b{ font-weight:650; }
.nd-x{ font-size:16px; line-height:1; }
.nd-offer{ flex-basis:100%; border-top:1px solid var(--line); padding-top:7px; margin-top:2px; color:var(--muted); }
.nd-offer .inline-a{ margin-left:8px; }

.tm-over{ color:var(--amber); font-weight:600; }
.tm-tsel{ width:auto; display:inline-block; margin:0 0 0 6px; padding:3px 7px; font-size:12px; }
.tm-vs{ font-size:11px; }

.rd-sbtn-note{ white-space:nowrap; }
/* on a phone the top bar has no room for a fourth button (it pushed the avatar
   off screen); the pocket's + note is the way in there */
@media (max-width:560px){ .rd-sbtn-note{ display:none; } }

.sn-pocket{ position:fixed; right:0; top:38%; z-index:58; display:flex; align-items:flex-start; }
.sn-tab{ writing-mode:vertical-rl; transform:rotate(180deg); padding:12px 7px; border:1px solid var(--line);
  border-left:0; border-radius:0 10px 10px 0; background:var(--surface); color:var(--ink); font-size:12px;
  cursor:pointer; box-shadow:0 4px 16px -8px rgba(20,20,40,.3); }
.sn-tab b{ margin-top:6px; font-weight:700; }
.sn-tab-late{ border-color:var(--signal); box-shadow:inset 0 -3px 0 var(--signal); }
.sn-col{ width:310px; max-height:62vh; overflow:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:12px 0 0 12px; padding:10px; box-shadow:0 10px 30px -12px rgba(20,20,40,.35);
  display:flex; flex-direction:column; gap:7px; }
.sn-head{ display:flex; align-items:center; gap:10px; font-size:13px; padding:0 2px 4px; }
.sn-head .spacer, .sn-cap-row .spacer{ flex:1; }
.sn-list{ display:flex; flex-direction:column; gap:7px; }
.sn-note{ display:flex; gap:9px; align-items:flex-start; padding:9px 10px; border-radius:9px;
  border-left:4px solid transparent; font-size:13px; }
.sn-yellow{ background:rgba(250,204,21,.17); border-left-color:rgba(202,160,0,.75); }
.sn-blue  { background:rgba(59,130,246,.13); border-left-color:rgba(37,99,235,.7); }
.sn-green { background:rgba(34,197,94,.13); border-left-color:rgba(22,150,70,.7); }
.sn-pink  { background:rgba(236,72,153,.12); border-left-color:rgba(200,50,120,.7); }
.sn-over{ box-shadow:inset 0 0 0 1.5px var(--signal); }
.sn-done{ opacity:.45; }
.sn-done .sn-text{ text-decoration:line-through; }
.sn-tick input{ margin:2px 0 0; width:15px; height:15px; }
.sn-body{ flex:1; min-width:0; }
.sn-text{ overflow-wrap:anywhere; }
.sn-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:3px; font-size:11.5px; color:var(--muted); }
.sn-pill{ padding:0 7px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.sn-late{ color:var(--signal); font-weight:600; }
.sn-acts{ display:flex; gap:12px; margin-top:5px; font-size:12px; }

.sn-cap{ position:fixed; inset:0; z-index:70; display:flex; align-items:flex-start; justify-content:center;
  padding-top:14vh; background:rgba(20,20,30,.18); }
.sn-cap-box{ width:min(560px, 92vw); padding:14px; border-radius:12px; background-color:var(--surface);
  box-shadow:0 16px 44px -14px rgba(20,20,40,.45); display:flex; flex-direction:column; gap:10px; }
.sn-cap-box.sn-yellow, .sn-cap-box.sn-blue, .sn-cap-box.sn-green, .sn-cap-box.sn-pink{
  background-image:linear-gradient(var(--sn-tint), var(--sn-tint)); }
.sn-cap-box.sn-yellow{ --sn-tint:rgba(250,204,21,.17); } .sn-cap-box.sn-blue{ --sn-tint:rgba(59,130,246,.13); }
.sn-cap-box.sn-green{ --sn-tint:rgba(34,197,94,.13); } .sn-cap-box.sn-pink{ --sn-tint:rgba(236,72,153,.12); }
.sn-cap-box input#sn-cap-in{ font-size:16px; padding:9px 10px; width:100%; }
.sn-cap-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; }
.sn-chip{ padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:12px; cursor:pointer; }
.sn-chip.on{ border-color:var(--acc); color:var(--acc); font-weight:600; }
.sn-pillsel{ width:auto; margin:0; padding:3px 8px; border-radius:999px; font-size:12px; }
.sn-sw{ width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.sn-sw.on{ border-color:var(--ink); }
.sn-share{ display:flex; align-items:center; gap:5px; margin-left:8px; }
.sn-share input{ margin:0; }
.sn-cap-row .sn-pillsel{ max-width:230px; flex:0 1 auto; }
.sn-cap-row .sn-share{ white-space:nowrap; font-size:12.5px; }
.sn-cap-row .sn-share input{ width:auto; height:auto; }
.sn-sw.sn-yellow{ background:#f3c623; } .sn-sw.sn-blue{ background:#5b8def; }
.sn-sw.sn-green{ background:#3fb56b; } .sn-sw.sn-pink{ background:#e467a6; }

/* 33.2 — the next-action box offers the moves first; the email opens on demand. */
.cf-choose{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cf-sug{ margin:8px 0 0; }
.cf-lblrow{ display:flex; justify-content:space-between; align-items:center; }
.cf-lblrow .inline-a{ text-transform:none; letter-spacing:0; font-size:12.5px; }

/* 33.3 — choices at the top of the left column; buttons may wrap to two rows. */
.cf-actions .cf-choose .btn{ flex:1 1 auto; }

/* 33.6 — letters open in the customer screen's right-hand panel. */
.cf-letterpanel{ display:flex; flex-direction:column; gap:10px; }
.cf-letterpanel .cf-flag{ margin:0; font-size:12.5px; max-width:none; }
.cf-letterpanel .claimbar{ margin:6px 0; max-width:none; flex-wrap:wrap; }
.cf-letterpanel .letterdoc{ max-width:none; margin:4px 0; }
.cf-letterpanel .card{ margin-top:6px !important; }
.cf-letteropts{ display:flex; flex-direction:column; gap:8px; }
#cf-printroot{ display:none; }
/* Print the letter only — both print paths. */
@media print{
  body.cf-printing > *:not(#cf-printroot){ display:none !important; }
  body.cf-printing #cf-printroot{ display:block !important; }
  #cf-printroot .noprint{ display:none !important; }
  #cf-printroot .letterdoc{ border:none !important; box-shadow:none !important; max-width:none; margin:0; }
}
body.pdf-export.cf-printing > *:not(#cf-printroot){ display:none !important; }
body.pdf-export.cf-printing #cf-printroot{ display:block !important; }

/* ── 33.8 — the drop, made clear ─────────────────────────────────────── */
.cal-ghost{ overflow:visible !important; }
/* the label floats just under the copy, never clipped by the chip's width */
.cal-tip{ position:absolute; left:0; top:100%; margin-top:5px; font-size:11.5px; font-weight:700; color:var(--acc);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 8px; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.12); }
.cal-ghost.no .cal-tip{ color:#a33; }
.mc-landed{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--acc); margin:0 0 3px 2px; }
@media (prefers-reduced-motion: no-preference){
  .mc-day.landed{ animation:cal-day-landed 1.6s ease-out 1; }
  @keyframes cal-day-landed{ 0%{ background:var(--acc-35, var(--acc-12)); } 100%{ background:var(--surface-2); } } }

/* ── 33.8 (Build 9) — week planner and chasing board ─────────────────── */
:root{ --st-due:#3E9A7E; --st-due-t:#E5F3ED; --st-out:#8C96A8; --st-out-t:#EEF1F5; --st-fol:#4F7CC2; --st-fol-t:#E7EEF9;
  --st-rem:#6C5CB8; --st-rem-t:#ECE9F8; --st-fin:#C9831B; --st-fin-t:#FBEFDA; --st-lba:#B23A48; --st-lba-t:#F8E3E6; }
.st-due{ --sc:var(--st-due); --tint:var(--st-due-t); } .st-out{ --sc:var(--st-out); --tint:var(--st-out-t); }
.st-fol{ --sc:var(--st-fol); --tint:var(--st-fol-t); } .st-rem{ --sc:var(--st-rem); --tint:var(--st-rem-t); }
.st-fin{ --sc:var(--st-fin); --tint:var(--st-fin-t); } .st-lba{ --sc:var(--st-lba); --tint:var(--st-lba-t); }
.vw-switch{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface, #fff); }
.vw-switch button{ border:0; background:transparent; padding:6px 12px; font:inherit; font-size:13px; color:var(--muted); cursor:pointer; }
.vw-switch button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
body > * .vw-switch:first-child, #app > .vw-switch{ margin-bottom:12px; }
.pl-head, .bd-head{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:6px 0 12px; }
.pl-head h1, .bd-head h1, .bd-head h2{ margin:0; }
.pl-head .sub, .bd-head .sub{ margin:3px 0 0; }
.pl-nav, .bd-ctl{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bd-ctl input{ border:1px solid var(--line); border-radius:9px; padding:7px 10px; font:inherit; min-width:200px; }
.bd-key{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:0 0 10px; }
.bd-key i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; background:var(--sc); }
.pl-wk{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
.pl-col{ background:var(--surface, #fff); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:260px; display:flex; flex-direction:column; min-width:0; }
.pl-col.today{ border-color:var(--acc); box-shadow:inset 0 3px 0 var(--acc); }
.pl-col.past{ opacity:.6; }
.pl-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.pl-h b{ display:block; font-size:14px; } .pl-h span{ font-size:12px; color:var(--muted); }
.pl-tot{ font-size:12px; color:var(--muted); white-space:nowrap; } .pl-tot b{ display:inline; color:var(--ink); }
.pl-dl{ font-size:12px; font-weight:600; border:1px dashed var(--line); border-radius:7px; padding:4px 7px; margin-bottom:6px; color:var(--muted); }
.pl-card, .bd-card{ display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; min-width:0; }
.pl-card{ border:0; border-left:3px solid var(--sc); background:var(--surface-2); border-radius:8px; padding:6px 8px; margin-bottom:6px; }
.pl-card:hover, .bd-card:hover{ box-shadow:0 0 0 2px var(--acc); }
.pl-w, .bd-w{ display:block; font-weight:650; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-o, .bd-s{ display:flex; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--muted); margin-top:1px; }
.pl-o > span, .bd-s > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pl-o b, .bd-s b{ color:var(--ink); white-space:nowrap; }
.pl-act, .bd-act{ color:var(--acc); font-weight:700; }
.pl-more, .bd-more{ border:0; background:none; color:var(--acc); font:inherit; font-weight:600; font-size:12.5px; padding:4px 2px; cursor:pointer; text-align:left; }
.pl-empty, .bd-none{ color:var(--muted); font-size:12.5px; padding:6px 2px; }
/* 37.1 — a past day beside Today: its late chases are counted once, in Today */
.pl-late{ color:var(--muted); font-size:12px; font-style:italic; padding:4px 2px; }
.pl-foot{ margin-top:auto; padding-top:6px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.bd-sep{ border-top:1px solid var(--line); margin:26px 0 18px; }
.bd-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.bd-chips button{ border:1px solid var(--line); background:var(--surface, #fff); border-radius:999px; padding:5px 12px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; }
.bd-chips button b{ font-size:11px; color:var(--muted); margin-right:3px; }
.bd-chips button span{ color:var(--muted); margin-left:4px; font-size:12px; }
.bd-chips button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.bd-chips button[aria-pressed="true"] b, .bd-chips button[aria-pressed="true"] span{ color:#dfe3ea; }
.bd-scroll{ overflow-x:auto; padding-bottom:4px; }
.bd-board{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; align-items:stretch; min-width:980px; }
.bd-lane{ background:var(--tint); border-radius:12px; padding:10px; display:flex; flex-direction:column; min-width:0; }
.bd-lane h3{ margin:0; font-size:13px; display:flex; justify-content:space-between; gap:6px; white-space:nowrap; }
.bd-lane h3 span:first-child{ overflow:hidden; text-overflow:ellipsis; }
.bd-tot{ margin:2px 0 8px; font-size:12px; font-weight:650; color:var(--muted); white-space:nowrap; }
/* every collapsed column is five cards tall, so the bottoms line up */
.bd-cards{ display:flex; flex-direction:column; gap:6px; min-height:calc(5 * 72px + 4 * 6px); }
.bd-lane.open .bd-cards{ min-height:0; }
.bd-card{ height:72px; overflow:hidden; background:var(--surface, #fff); border:0; border-radius:9px; padding:7px 9px; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.bd-x{ display:flex; gap:8px; align-items:center; margin-top:5px; font-size:11px; white-space:nowrap; overflow:hidden; }
.bd-late{ color:#8A5A12; font-weight:650; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.bd-nd{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; min-width:0; }
.bd-act{ margin-left:auto; flex:none; font-size:12px; }
.bd-foot{ margin-top:auto; min-height:28px; display:flex; align-items:flex-end; }
.bd-list{ max-width:860px; }
.bd-row{ border-left:4px solid var(--sc); border-radius:10px; margin-bottom:8px; background:var(--surface, #fff); }
.bd-row .bd-card{ height:auto; box-shadow:none; border-radius:0 10px 10px 0; }
/* 28/09/2026 (35.5 · issue 5) — Largest first: the board's own cards, in the board's six columns,
   read left to right, largest first; the stage colour is each card's left edge. (.bd-list/.bd-row: no longer used.) */
.bd-grid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; min-width:980px; }
.bd-gcell{ min-width:0; }
.bd-gcell .bd-card{ border:1px solid var(--line); border-left:4px solid var(--sc); }
.bd-gfoot{ margin-top:8px; }
@media (max-width:980px){
  .pl-wk{ grid-template-columns:repeat(5, minmax(180px,1fr)); overflow-x:auto; padding-bottom:6px; }
  .bd-ctl input{ min-width:0; width:100%; }
}
@media print{ .vw-switch, .bd-chips, .pl-nav, .pl-foot{ display:none !important; } }
body.pdf-export .vw-switch, body.pdf-export .bd-chips{ display:none !important; }

/* ── 33.9 (Build 8) — the grouped top bar ───────────────────────────────── */
.rd-nav{ overflow:visible; }               /* the dropdowns must not be clipped; the bar now fits */
.rd-nav .rd-dd, .rd-newdd{ position:relative; display:flex; align-items:stretch; }
.rd-ddb{ display:flex; align-items:center; gap:4px; padding:0 13px; background:none; border:0;
  border-bottom:2px solid transparent; font:inherit; font-size:13.5px; color:var(--muted); font-weight:540;
  white-space:nowrap; cursor:pointer; font-family:var(--ui); }
.rd-ddb:hover{ color:var(--ink); }
.rd-ddb.on{ color:var(--acc); border-bottom-color:var(--acc); font-weight:640; }
.rd-vsep{ width:1px; align-self:center; height:20px; background:var(--line); margin:0 6px; flex:none; }
.rd-ddm{ left:0; right:auto; min-width:210px; }
.rd-ddm-r{ left:auto; right:0; }
.rd-nav .rd-ddm a, .rd-newdd .rd-ddm a, .rd-navdrop a{ display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:9px 11px; border-radius:var(--r-sm); font-size:13.5px; color:var(--ink-2); border-bottom:0; height:auto; white-space:nowrap; }
.rd-nav .rd-ddm a:hover, .rd-newdd .rd-ddm a:hover{ background:var(--surface-2); color:var(--acc); }
.rd-nav .rd-ddm a.on{ color:var(--acc); font-weight:640; background:var(--acc-12); }
.rd-ddm .rd-cnt{ margin-left:auto; }
.rd-ddm kbd, .rd-navdrop kbd{ margin-left:auto; font-size:10px; color:var(--muted); font-family:var(--mono); }
.rd-mh{ display:block; padding:7px 11px 3px; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.rd-sep{ display:block; height:1px; background:var(--line); margin:5px 6px; }
.rd-sbtn-log, .rd-sbtn-note{ display:none !important; }   /* gathered under + New (the L and N keys still work) */
.rd-newb{ color:var(--acc); font-weight:600; }
@media print{ .rd-newdd{ display:none !important; } }
/* smaller laptops and down: Calendar and Chasing stay; everything else is in the menu */
@media (max-width:1100px){
  .rd-nav .rd-t2, .rd-nav .rd-dd, .rd-nav .rd-vsep, .rd-newdd{ display:none !important; }
  .rd-navmore{ display:block; }
}
@media (max-width:560px){
  .rd-nav{ display:flex; }                 /* 33.9 — Calendar and Chasing on show on a phone too */
  .rd-nav a{ padding:0 6px; font-size:13px; gap:4px; }
  .rd-right{ gap:6px; }
  .rd-brand{ font-size:0; gap:0; }         /* the glyph stays; the words make room */
}

/* ── 33.9 — dragging in the planner ─────────────────────────────────────── */
.pl-card[data-caldrag]{ cursor:grab; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pl-col.drop-ok{ border-color:var(--acc); background:var(--acc-12); box-shadow:inset 0 0 0 2px var(--acc); }
.pl-card.dragging{ opacity:.35; }
.pl-card.just-moved{ box-shadow:0 0 0 2px var(--acc); }
.pl-card.just-moved .pl-w{ color:var(--acc); }
.pl-col .mc-landed{ margin:0 0 6px 2px; }
@media (prefers-reduced-motion: no-preference){
  .pl-col.landed{ animation:cal-day-landed 1.6s ease-out 1; } }

/* ── 34.0 (Build 10) — Contact, then straight back ──────────────────────── */
.ct-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--acc-12); border:1px solid var(--acc-35, var(--line));
  border-radius:var(--r-sm, 10px); padding:9px 12px; margin:0 0 14px; font-size:13.5px; }
.ct-bar > span{ flex:1; min-width:220px; }
.bd-done{ color:#0F7350; font-weight:700; }
.pl-card.done{ background:#EAF6F1; }
.pl-card.done .pl-w::before{ content:"\2713  "; color:#0F7350; }
@media print{ .ct-bar{ display:none !important; } }

/* ── 34.9 — inbound email: the Inbox screen, the badge, the pulled entry ─── */
.ib-tabs{ margin:10px 0 14px; }
.ib-status{ margin:4px 0; }
.ib-err{ color:var(--bad, #B3261E); font-weight:600; margin:2px 0; }
.ib-note{ margin:6px 0; }
.ib-item{ margin:0 0 10px; padding:12px 14px; }
.ib-h{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.ib-subj{ margin-top:3px; font-weight:560; }
.ib-snip{ margin:6px 0 4px; }
.ib-why{ margin:4px 0 8px; }
.ib-assign{ border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.ib-assign .f{ max-width:420px; }
.ib-watch{ margin:0 0 12px; }
.ib-report td{ vertical-align:top; }
.ib-set{ margin:0 0 12px; }
.ib-pulled{ border-left-color:var(--acc); }
.ib-how, .ib-guess{ margin-top:4px; }
.ib-move{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
@media print{ .ib-badge, .ib-move, .ib-guess{ display:none !important; } }
body.pdf-export .ib-badge, body.pdf-export .ib-move, body.pdf-export .ib-guess{ display:none !important; }
/* 37.3 — move an email to the right client or customer (the prototype's look: prototypes/PROTOTYPE-inbox-move-emails-01-10-2026.html) */
.ib-moved{ font-size:12px; background:var(--warn-bg); color:var(--warn); border-radius:8px; padding:4px 9px; display:inline-block; margin-top:5px; }
.ib-moved .inline-a{ font-size:12px; }
.ib-mvacts{ margin-top:6px; }
.ib-mv .f{ max-width:520px; }
.ib-res{ border:1px solid var(--line); border-radius:var(--r-sm, 10px); margin-top:6px; max-height:260px; overflow:auto; max-width:520px; }
.ib-res .empty{ padding:10px; }
.ib-r{ display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; background:var(--surface, #fff); color:var(--ink);
  border:0; border-bottom:1px solid var(--line-soft); padding:8px 11px; font:inherit; font-size:13px; cursor:pointer; }
.ib-r:last-child{ border-bottom:0; }
.ib-r:hover{ background:var(--acc-12); }
.ib-r.on{ background:var(--acc-20); font-weight:600; }
.ib-r.here{ color:var(--muted); cursor:default; }
.ib-rc{ color:var(--muted); font-size:12px; white-space:nowrap; }
@media(max-width:560px){ .ib-rc{ white-space:normal; text-align:right; } }
.ib-tick{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm, 10px); padding:9px 11px; max-width:520px; cursor:pointer; }
.ib-tick input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--acc); }
.ib-what{ font-size:12.5px; color:var(--ink-2); margin:10px 0 0; padding-left:18px; }
.ib-what li{ margin:2px 0; }
.ib-suggest{ border:1px solid var(--acc-35); background:var(--acc-12); border-radius:var(--r-sm, 10px); padding:9px 11px; margin:8px 0 2px; font-size:13px; }
.ib-suggest strong{ color:var(--acc-lo, var(--acc)); }
.ib-log{ list-style:none; margin:0; padding:0; }
.ib-log li{ padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-2); }
.ib-log li:last-child{ border-bottom:0; }
.ib-log-t{ display:block; }
.ib-undone{ text-decoration:line-through; color:var(--muted); }
.ib-toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:#1B1D1C; color:#fff; border-radius:12px; padding:10px 14px;
  font-size:13px; display:flex; gap:14px; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:calc(100% - 32px); z-index:60; }
.ib-toast button{ background:none; border:0; color:#9FE0CF; font:inherit; font-weight:600; padding:0; cursor:pointer; }
@media print{ .ib-mv, .ib-mvacts, .ib-toast{ display:none !important; } }
body.pdf-export .ib-mv, body.pdf-export .ib-mvacts, body.pdf-export .ib-toast{ display:none !important; }
/* ── 35.0 (Build 8) — expected money in (em-) · which letter works (lw-) ────
   Owner-only screens in the #/habits look. Prefixed so nothing here catches a
   global rule. No rule sits under body.pdf-export or @media print: neither
   screen is part of any report, and the compose line is noprint. */
.em-sec, .lw-sec{ margin:14px 0 6px; }
.em-h{ margin:0 0 2px; }
.em-line{ margin:0 0 8px; max-width:820px; }
.em-stats{ display:flex; gap:12px; flex-wrap:wrap; }
.em-stat{ flex:1 1 220px; max-width:300px; padding:12px 14px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); }
.em-k{ font-size:12.5px; font-weight:640; color:var(--ink-2); }
.em-num{ font-size:24px; font-weight:700; line-height:1.2; margin:4px 0 2px; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.em-say{ font-size:12.5px; color:var(--muted); margin:0; }
.em-past .em-num{ color:var(--warn); }
.em-basis{ margin:8px 0 0; max-width:820px; }
.em-nocc{ margin:2px 0; }
.em-nocc-box{ margin-top:14px; }
.em-table td.r, .em-table th.r, .lw-table td.r{ font-variant-numeric:tabular-nums; }
.em-row{ cursor:pointer; }
.em-row:hover td{ background:var(--surface-2); }
.em-limit{ background:var(--warn-bg); border-radius:6px; padding:12px 14px; margin:16px 0;
  max-width:820px; font-size:13px; }
.lw-cards{ display:flex; gap:12px; flex-wrap:wrap; }
.lw-card{ flex:0 1 210px; padding:12px 14px; border-radius:10px; background:var(--surface);
  border:1px solid var(--line); }
.lw-k{ font-size:13px; font-weight:640; color:var(--ink-2); }
.lw-n{ margin:2px 0 6px; }
.lw-big{ font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.lw-say{ margin:0; font-size:12.5px; color:var(--muted); }
.lw-few{ margin:0; font-size:12.5px; color:var(--muted); font-style:italic; }
.lw-never{ margin:0; font-size:12.5px; color:var(--warn); font-weight:600; }
.lw-r-paid{ color:var(--ok); }
.lw-r-none{ color:var(--warn); }
.lw-r-recent{ color:var(--muted); }
.lw-line{ margin:4px 0 6px; color:var(--muted); }

/* 27/09/2026 (35.1 · A1) — sticky notes on the calendar, in the note's own
   colour (the pocket's tints). Prefixed stc- (the class-prefix rule). */
.mc-dot.sticky{ background:#caa000; }
.mc-ev.sticky, .pill.kind-sticky{ color:var(--ink); border-left:3px solid rgba(202,160,0,.75); }
.mc-ev.sticky.stc-yellow, .pill.kind-sticky.stc-yellow{ background:rgba(250,204,21,.22); border-left-color:rgba(202,160,0,.75); }
.mc-ev.sticky.stc-blue,   .pill.kind-sticky.stc-blue  { background:rgba(59,130,246,.16); border-left-color:rgba(37,99,235,.7); }
.mc-ev.sticky.stc-green,  .pill.kind-sticky.stc-green { background:rgba(34,197,94,.16);  border-left-color:rgba(22,150,70,.7); }
.mc-ev.sticky.stc-pink,   .pill.kind-sticky.stc-pink  { background:rgba(236,72,153,.15); border-left-color:rgba(200,50,120,.7); }
.mc-ev.sticky{ cursor:pointer; }
.sn-note.sn-focus{ box-shadow:0 0 0 2px var(--acc); }

/* ── 35.2 (Build 9) — promise reliability, learned amends, where the hours go ── */
.pv-read{ display:inline-block; font-size:11px; font-weight:640; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--muted); }
.pv-read.pv-noland{ background:var(--warn-bg); color:var(--warn); }
.pv-read.pv-keeps{ color:var(--ok); }
.pv-table td.r, .pv-table th.r, .hw-table td.r, .hw-table th.r{ font-variant-numeric:tabular-nums; }
.lx-phrase{ font-style:italic; }
.am-chips{ align-items:center; }
.am-chip{ border-style:dashed; }
.hw-limit-line{ margin:6px 0; }
.hw-cards{ display:flex; flex-wrap:wrap; gap:12px; margin:10px 0; }
.hw-card{ max-width:360px; padding:14px 16px; margin:0; }
.hw-q{ font-weight:560; margin:6px 0 10px; }
@media print{ .b9-links, .am-chips, .lx-del, .hw-add, .hw-sel{ display:none !important; } }
body.pdf-export .b9-links, body.pdf-export .am-chips, body.pdf-export .lx-del, body.pdf-export .hw-add, body.pdf-export .hw-sel{ display:none !important; }

/* ══ 36.0 — home page and navigation (batch C) ════════════════════════════
   Prefixes: hm- (home), shn- (short names; sn- is the sticky notes'), cta- (My
   contribution, all clients), rd-sub (the menu's sub-list), pl-nd, pl-ndg, pl-ndh and
   pl-hid (the planner). No unprefixed state words. Everything here is on the owner's own
   screens; none of it is on a client copy (hm-/shn-/cta- blocks carry noprint
   or sit on owner-only screens). */
.rd-brand{ height:100%; border-bottom:2px solid transparent; }
.rd-brand.on{ border-bottom-color:var(--acc); }
.rd-brand .rd-cnt{ margin-left:2px; font-size:10.5px; }
.rd-sub{ display:block; margin:0 0 4px 14px; border-left:2px solid var(--line); padding-left:4px; }
.rd-nav .rd-ddm a.rd-subi, .rd-navdrop a.rd-subi{ padding:5px 9px; font-size:12.5px; gap:8px; }
.rd-subi .shn-lbl{ min-width:34px; font-weight:700; font-size:11.5px; letter-spacing:.04em; }
.rd-subn{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
/* short names */
.shn-lbl{ font-weight:680; letter-spacing:.03em; }
.shn-unset{ font-style:italic; font-weight:500; color:var(--muted); }
.rd-pill .shn-unset{ color:var(--muted); }
.shn-card{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:800px){ .shn-card{ grid-template-columns:1fr; } }
.shn-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.shn-in{ font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; width:110px; text-align:center; }
.shn-err{ color:var(--bad); font-size:12.5px; margin-top:6px; }
.shn-ok{ color:var(--ok); font-size:12.5px; margin-top:6px; }
.shn-where{ margin:4px 0 0; padding-left:18px; font-size:13px; }
.shn-where li{ margin:2px 0; }
/* the home page */
.hm-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.hm-head h1{ margin:0; }
.hm-line{ font-size:13.5px; }
.hm-line b{ color:var(--ink); }
.hm-eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; }
.hm-desk{ display:grid; grid-template-columns:1.25fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:900px){ .hm-desk{ grid-template-columns:1fr; } }
.hm-timer{ border-top:4px solid var(--acc); }
.hm-what{ font-size:16px; font-weight:650; }
.hm-clock{ font-family:var(--mono); font-size:48px; font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:6px 0 4px; }
.hm-clock.hm-paused{ color:var(--muted); }
.hm-chip{ display:inline-block; font-size:11.5px; font-weight:650; border-radius:999px; padding:1px 9px; }
.hm-chip.hm-run{ background:var(--ok-bg); color:var(--ok); }
.hm-chip.hm-pause{ background:var(--warn-bg); color:var(--warn); }
.hm-tbtns, .hm-tstart{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.hm-tstart select{ width:auto; margin:0; }
.hm-stop{ background:var(--signal); border-color:var(--signal); }
.hm-tot{ display:flex; align-items:baseline; gap:10px; margin:6px 0; }
.hm-tot b{ font-size:26px; }
.hm-hrow{ display:grid; grid-template-columns:130px 1fr 62px; align-items:center; gap:10px; font-size:13px; margin:7px 0; }
.hm-bar{ height:10px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.hm-bar > i{ display:block; height:100%; border-radius:999px; background:var(--acc); }
.hm-r{ text-align:right; }
.hm-money{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 20px; margin:0 0 18px; background:linear-gradient(90deg, var(--acc-12), var(--surface) 70%); }
.hm-v{ font-family:var(--mono); font-size:20px; font-weight:650; letter-spacing:-.02em; }
.hm-v.hm-bad{ color:var(--bad); }
.hm-needs{ display:flex; align-items:baseline; gap:12px; margin:6px 0 10px; }
.hm-needs h2{ font-size:18px; margin:0; }
.hm-grp{ margin:0 0 18px; }
.hm-gh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.hm-gh .hm-eyebrow{ color:var(--ink-2); }
.hm-gh .sub{ font-size:12.5px; }
.hm-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .hm-cols{ grid-template-columns:1fr; } }
.hm-item{ display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-left:4px solid var(--sc, var(--acc-35));
  border-radius:var(--r); padding:10px 14px; margin-bottom:8px; background:var(--surface); }
.hm-main{ flex:1; min-width:0; }
.hm-t{ font-weight:640; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.hm-m{ font-size:12.5px; color:var(--muted); }
.hm-acts{ display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.hm-sel{ width:auto; margin:0; padding:4px 8px; font-size:12px; }
.hm-item.hm-over{ border-left-color:var(--bad); }
.hm-item.hm-note{ border-left-color:#CAA000; background:rgba(250,204,21,.10); }
.hm-item.hm-note.stc-blue{ border-left-color:#2563EB; background:rgba(59,130,246,.08); }
.hm-item.hm-note.stc-green{ border-left-color:#169646; background:rgba(34,197,94,.08); }
.hm-item.hm-note.stc-pink{ border-left-color:#C83278; background:rgba(236,72,153,.08); }
.chase-list .chase-row.hm-nd{ border-style:dashed; background:var(--surface-2); }
.hm-quick{ display:flex; gap:6px; flex-wrap:wrap; }
@media print{ .hm-desk, .hm-money, .hm-acts, .hm-quick{ display:none !important; } }
body.pdf-export .hm-desk, body.pdf-export .hm-money, body.pdf-export .hm-acts{ display:none !important; }
/* the planner: the no-date chases at the foot of Today, See more / See less */
.pl-ndg{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); }
.pl-ndh{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--muted); margin:0 0 6px 2px; }
.pl-card.nd{ border:1px dashed var(--line); border-left:3px dashed var(--sc); background:var(--surface, #fff); }
.pl-nd{ font-style:italic; }
.pl-hid{ font-size:12px; color:var(--muted); padding:2px 2px 4px; }
/* My contribution, all clients */
.cta-head{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cta-head h1{ margin:0; }
.cta-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; }
.cta-card{ border:1px solid var(--line); border-top:4px solid var(--client, var(--acc)); border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--e2); display:flex; flex-direction:column; gap:8px; background:var(--surface); }
.cta-hd{ display:flex; align-items:center; gap:10px; }
.cta-hd b{ font-size:17px; }
.cta-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.cta-card dl{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:4px 0 0; font-size:13px; }
.cta-card dt{ color:var(--muted); }
.cta-card dd{ margin:0; text-align:right; font-family:var(--mono); }
.cta-bad{ color:var(--bad); font-weight:700; }
.cta-ft{ margin-top:auto; padding-top:8px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cta-tbl{ border-collapse:collapse; width:100%; font-size:13px; }
.cta-tbl th, .cta-tbl td{ padding:9px 12px; border-bottom:1px solid var(--line-soft); text-align:right; white-space:nowrap; }
.cta-tbl th:first-child, .cta-tbl td:first-child{ text-align:left; color:var(--muted); font-weight:500; }
.cta-tbl thead th{ border-bottom:2px solid var(--line); }
.cta-tbl thead a{ text-decoration:none; color:var(--client, var(--acc)); }
.cta-tbl td{ font-family:var(--mono); }
.cta-sum{ margin-top:0; }
/* 03/10/2026 (38.2 · owner 21:57; 37.9 verifier finding 2) — on paper each client card showed the full
   name (clientLabel's printonly part) AND, beside it, the cut-down name (.sub, shortName(…, 30)); the
   coloured initials and the footer's "Open <name> →" link added two more. Paper now carries the full
   name once, in the card's heading. Screen unchanged (no app.js change: same HTML). Both print paths
   and the client preview, as every other print rule. Was: no rule — all four printed. */
@media print{ .cta-hd > .sub, .cta-hd > .rd-dot, .cta-ft > .inline-a{ display:none !important; } }
body.pdf-export .cta-hd > .sub, body.pdf-export .cta-hd > .rd-dot, body.pdf-export .cta-ft > .inline-a,
body.client-preview .cta-hd > .sub, body.client-preview .cta-hd > .rd-dot, body.client-preview .cta-ft > .inline-a{ display:none !important; }

/* ══ 36.1 — every pound owed is counted (BRIEF-36.1) ══════════════════════════════
   A column's not-yet-due part sits on its own line under the overdue total; the card's
   "+£n not yet due" note shares its line with Contacted today / late vs usual. */
.bd-tnd{ display:block; font-weight:500; }
.lz-flag{ margin:8px 0 10px; }
.cl-tot td{ border-top:2px solid var(--line); vertical-align:top; }

/* 36.2 — the statement's own "In letter" list (cfStmtPanelHtml): scrolls sideways on a phone rather than spilling */
.cf-stmtpanel{max-width:100%;overflow-x:auto}

/* ══ 36.4 — pulled emails read like the email; the thread shows what was sent ══════════
   Long words and addresses wrap: nothing runs off the card on a phone or a desktop. */
.cf-evm, .mail-text, .ib-snip, .tl-sum{ overflow-wrap:anywhere; word-break:break-word; }
.cf-ev, .tl-body{ min-width:0; max-width:100%; }
.mail-text{ white-space:pre-wrap; font:inherit; font-size:13px; line-height:1.5; margin:4px 0 0; }
.mail-sig{ color:var(--muted); font-size:12px; }
.mail-raw{ font-size:12px; background:var(--surface-2, transparent); padding:6px 8px; border-radius:6px; }
.mail-link{ color:var(--acc); text-decoration:underline; }
.mail-acts{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; }
.sent-subj{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.sent-edited{ display:inline-block; margin-left:6px; padding:0 6px; border:1px solid var(--line); border-radius:4px;
  font-size:11px; font-weight:400; color:var(--muted); vertical-align:1px; }
.sent-att{ margin-top:4px; }

/* 30/09/2026 (stage 1 — browser save safety) — the save pill in the top bar, always visible, and "see why" */
.savepill{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:5px 11px; font-size:12px; line-height:1.2; cursor:pointer; white-space:nowrap; color:inherit; font-family:var(--ui); }
.savepill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ledger); flex:none; }
.savepill.sp-busy::before{ background:var(--line); }
.savepill.sp-warn{ border-color:var(--amber); }
.savepill.sp-warn::before{ background:var(--amber); }
.savepill.sp-bad{ border-color:var(--signal); color:var(--signal); font-weight:600; }
.savepill.sp-bad::before{ background:var(--signal); }
.sv-row{ padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.sv-row:first-child{ border-top:0; }
.sv-act{ margin-top:4px; font-size:12.5px; }
@media (max-width:720px){ .savepill{ padding:4px 8px; font-size:11.5px; } }
@media print{ .savepill{ display:none !important; } }
body.pdf-export .savepill{ display:none !important; }

/* ══ 37.2 — cases for customers who owe nothing (01/10/2026) ══════════════════════════
   "Nothing owed — close this case?": a quiet dashed card, never a chase card; the month chip in grey. */
.no-strip{ border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin:10px 0 12px; }
.no-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:13px; }
.no-cards{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.no-card{ display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; border:1px dashed var(--line);
  border-radius:8px; padding:6px 8px; background:var(--surface); font-size:12.5px; }
.no-cards .no-card{ flex:1 1 200px; max-width:280px; }
.no-w{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.no-m{ color:var(--muted); font-size:11.5px; }
.no-q{ color:var(--muted); font-style:italic; }
.no-card .no-close{ align-self:flex-start; margin-top:4px; }
.pl-nog{ margin-top:8px; }
.pl-nog .no-card{ margin-bottom:6px; }
.mc-ev.case_nothing, .mc-dot.case_nothing{ background:var(--surface-2, #f1f1f1); color:var(--muted); border:1px dashed var(--line); }
.mc-no{ font-style:italic; font-weight:400; }
.pill.kind-case_nothing{ background:var(--surface-2, #f1f1f1); color:var(--muted); }
.cal-nothing .no-q{ display:block; font-size:12px; }
.no-offer .btn{ margin-left:6px; }
@media print{ .no-strip, .no-offer, .pl-nog, .hm-nothing{ display:none !important; } }
body.pdf-export .no-strip, body.pdf-export .no-offer, body.pdf-export .pl-nog, body.pdf-export .hm-nothing{ display:none !important; }
/* 30/09/2026 (QuickBooks whole connection) — Intuit's "Connect to QuickBooks" button: text only, no logo
   inside the button (Intuit's button update, 01/04/2021); QuickBooks green with white text, darker on
   hover and focus. Owner-side only: the connection section carries noprint on both print paths. */
.qb-c2qb{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 18px;border:0;border-radius:4px;
  background:#2CA01C;color:#fff;font-family:"Avenir Next","Avenir",Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;
  line-height:1;cursor:pointer;white-space:nowrap}
.qb-c2qb:hover,.qb-c2qb:focus-visible{background:#108000}
.qb-c2qb:focus-visible{outline:2px solid #0D333F;outline-offset:2px}
.qb-c2qb[disabled]{opacity:.5;cursor:not-allowed}

/* 02/10/2026 (37.5) — QuickBooks paid dates, read-only, on "Who owes them" and the chase case. Owner-side only:
   every element carries noprint; hidden here on BOTH print paths and in the client preview as well. */
.qbpd{font-size:11.5px;color:var(--ledger);margin-top:2px}
.qbpd-note{font-size:12px;margin:6px 0 0}
.qbpd-note .whyq{margin-left:4px}
body.pdf-export .qbpd,body.pdf-export .qbpd-note,body.client-preview .qbpd,body.client-preview .qbpd-note{display:none!important}
@media print{ .qbpd,.qbpd-note{display:none!important} }

/* 01/10/2026 (36.9) — "Connect to Xero": Xero blue, white text, the words only (no hand-drawn Xero logo).
   Replace with Xero's own button artwork before certification (release note, "What is wrong" 1). */
.xr-connect{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 18px;border:0;border-radius:4px;
  background:#13B5EA;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;
  line-height:1;cursor:pointer;white-space:nowrap}
.xr-connect:hover,.xr-connect:focus-visible{background:#0E9BC9}
.xr-connect:focus-visible{outline:2px solid #0D333F;outline-offset:2px}
.xr-connect[disabled]{opacity:.5;cursor:not-allowed}

/* 05/10/2026 (38.7) — QuickBooks phase 2: paid dates and the run of work on the chase case, average days late and
   Payments received on "Who owes them", Sales by customer on Financials. Owner-side only: every element carries
   noprint; hidden here on BOTH print paths and in the client preview as well. */
.qb7-after{font-size:11.5px;color:var(--ink-2);margin-top:1px}
.qb7-after.qb7-before{color:var(--muted)}
.qb7-avg{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.qb7-note{font-size:12px;margin:6px 0 0}
.qb7-fold{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.qb7-fold-h{display:flex;align-items:baseline;gap:8px;width:100%;padding:10px 14px;background:var(--surface-2);border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.qb7-tw{display:inline-block;width:12px;color:var(--muted)}
.qb7-fold .qb7-pays{margin:0;border:0;border-radius:0}
.qb7-fold .qb7-note,.qb7-fold .qb7-empty{padding:8px 14px;margin:0}
.qb7-pager{display:flex;gap:10px;align-items:center;padding:8px 14px}
.qb7-switch{display:flex;gap:8px;margin-top:14px}
.qb7-on{border-color:var(--acc)!important;color:var(--acc)!important;font-weight:600}
.qb7-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 8px}
.qb7-sp{flex:1}
.qb7-find{width:220px;margin:0;font-size:13px;padding:6px 10px}
.qb7-legend{margin:0 0 10px}
.qb7-grid-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:14px}
.qb7-sg{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%;margin:0;border:0}
.qb7-sg th,.qb7-sg td{padding:6px 7px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.qb7-sg thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:right;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.qb7-sg thead th:first-child{text-align:left;left:0;z-index:2}
.qb7-sg td.nm{position:sticky;left:0;background:var(--bg,#fff);min-width:190px;max-width:240px;white-space:normal;border-right:1px solid var(--line-soft)}
.qb7-sg td.qb7-ind{padding-left:24px}
.qb7-sg td.c{text-align:right;font-variant-numeric:tabular-nums;cursor:pointer}
.qb7-sg td.c:hover{background:var(--acc-20)}
.qb7-sg td.c.z{color:var(--muted);opacity:.6}
.qb7-sg td.c.neg{color:var(--bad)}
.qb7-sg td.c.sel{background:var(--acc);color:#fff}
.qb7-sg .qb7-nh{color:var(--muted);opacity:.5}
.qb7-sg td.tt,.qb7-sg th.tt{font-weight:650;border-left:1px solid var(--line);background:var(--surface-2)}
.qb7-sg tr.qb7-tot td{border-top:2px solid var(--ink);font-weight:650;background:var(--surface-2)}
.qb7-sg tr.qb7-lostrow td.nm{box-shadow:inset 3px 0 0 var(--bad)}
.qb7-sg tr.qb7-newrow td.nm{box-shadow:inset 3px 0 0 var(--ok)}
.qb7-chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.qb7-legend .qb7-chip{margin-left:0}
.qb7-new{background:var(--ok-bg);color:var(--ok)}
.qb7-lost{background:var(--bad-bg);color:var(--bad)}
.qb7-rhythm{background:var(--warn-bg);color:var(--warn)}
.qb7-recon{font-size:12.5px;margin-top:10px;color:var(--ink-2)}
.qb7-drill{margin-top:14px}
.qb7-drill-h{display:flex;align-items:center;gap:10px}
.qb7-empty{margin-top:14px}
/* 06/10/2026 (38.7 round 2) — the drill's side-by-side line (sales by customer · the invoices' net · the difference), credit
   notes, and a payment's second invoice line. Inside .qb7-drill / .qb7-fold, so hidden on paper and in the preview with them. */
.qb7-side{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;margin:6px 0 10px}
.qb7-off{color:var(--bad)}
.qb7-cn td{color:var(--ink-2)}
.qb7-more-line td{border-top:0}
body.pdf-export .qb7-after,body.pdf-export .qb7-avg,body.pdf-export .qb7-note,body.pdf-export .qb7-fold,body.pdf-export .qb7-behave,
body.pdf-export .qb7-switch,body.pdf-export .qb7-sales,body.pdf-export .qb7-empty,body.pdf-export .qb7-drill,
body.client-preview .qb7-after,body.client-preview .qb7-avg,body.client-preview .qb7-note,body.client-preview .qb7-fold,body.client-preview .qb7-behave,
body.client-preview .qb7-switch,body.client-preview .qb7-sales,body.client-preview .qb7-empty,body.client-preview .qb7-drill{display:none!important}
@media print{ .qb7-after,.qb7-avg,.qb7-note,.qb7-fold,.qb7-behave,.qb7-switch,.qb7-sales,.qb7-empty,.qb7-drill{display:none!important} }
.qb7-paidrow td{background:var(--surface-2);color:var(--ink-2)}
body.pdf-export .qb7-paidrow,body.pdf-export .qb7-paidtab,body.client-preview .qb7-paidrow,body.client-preview .qb7-paidtab{display:none!important}
@media print{ .qb7-paidrow,.qb7-paidtab{display:none!important} }
/* 12/10/2026 (40.3, item 1) — the paid line under its invoice's row, across the whole table (desktop) or card (phone):
   one line for the row, one note line under it. The paid words and the run of work run on in one line. */
.qb7-noterow td{padding:0 6px 7px 28px;border-bottom:1px solid var(--line)}
.qb7-noterow.qb7-paidrow td{background:var(--surface-2);color:var(--ink-2)}
.cf-hasnote td{border-bottom:0}
.qb7-nl{font-size:11.5px;line-height:1.45}
.qb7-nl > .qbpd,.qb7-nl > .qb7-after{display:inline;margin:0}
.qb7-nl > .qb7-after:before{content:" · ";color:var(--muted)}
.qb7-nl > .qbpd ~ .qbpd:before{content:"";display:block}
.grid .qb7-noterow td{padding-left:6px}
body.pdf-export .qb7-noterow,body.client-preview .qb7-noterow{display:none!important}
@media print{ .qb7-noterow{display:none!important} }

/* 07/10/2026 (39.3 — design stage 4, browser half) — the refused change on the record, the out-of-date banner, the
   server-unreachable page and the owner's Deleted list, as the prototype (prototype/stage4-saves.html, 1c7a1d2). The
   pill wraps on a phone (the long "Signed out — sign in to save 3 waiting changes" pushed the page sideways). */
.v2-msg{ border-radius:var(--r-sm); padding:11px 13px; margin:0 0 12px; font-size:13.5px; }
.v2-msg.bad{ background:var(--bad-bg); border:1px solid color-mix(in oklab,var(--bad) 30%,transparent); color:var(--bad); }
.v2-msg.warn{ background:var(--warn-bg); border:1px solid color-mix(in oklab,var(--warn) 30%,transparent); }
.v2-msg.info{ background:var(--acc-12); border:1px solid var(--acc-20); color:var(--acc-lo); }
.v2-msg b{ font-weight:650; }
.v2-msg .sub{ overflow-wrap:anywhere; }
.v2-row{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.v2-banner{ background:var(--warn-bg); border:1px solid color-mix(in oklab,var(--warn) 30%,transparent); border-radius:var(--r);
  padding:10px 14px; margin:0 0 12px; font-size:13.5px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.v2-fld-bad{ border-color:var(--bad) !important; box-shadow:0 0 0 3px var(--bad-bg) !important; }
.v2-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.v2-filters select{ width:auto; max-width:100%; margin:0; }
.v2-tablewrap{ max-width:100%; overflow-x:auto; }
.v2-del td, .v2-del th{ vertical-align:top; }
.v2-down{ min-height:70vh; display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 24px; }
.v2-down-in{ max-width:520px; width:100%; }
.v2-down-in h1{ font-size:22px; margin:12px 0 8px; }
.v2-down-in p{ font-size:14px; margin:0 0 10px; }
.v2-down-mark{ width:36px; height:36px; border-radius:9px; background:var(--acc); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; }
.v2-down-count{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
@media (max-width:720px){
  .savepill{ white-space:normal; text-align:left; max-width:58vw; }
  .rd-right{ min-width:0; flex-shrink:1; }
}
@media print{ .v2-msg, .v2-banner{ display:none !important; } }
body.pdf-export .v2-msg, body.pdf-export .v2-banner{ display:none !important; }

/* ═══ 40.0 (11/10/2026) — new layout, part 1: six areas, their tabs, the phone bar ═════════════════════════════════
   BRIEF-40.0-layout-1-navigation; the look of prototype/hub-layout.html in the hub's own tokens. The areas sit in
   #rdnav (the old strip's place); the tabs in #rdsub under the top bar; below 760 px the areas move to #rdbottom, a
   bottom bar that respects the phone's safe area, and the area tabs scroll sideways inside their own bar. The old
   burger (#rdburger) is not shown: the bottom bar is the phone's way round. Both new bars are noprint and hidden
   signed-out, in the client preview and on both print paths. */
.rd-nav{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }   /* no dropdowns in the bar any more (33.9 had made it visible) */
.rd-nav a.rd-area{ border-bottom:2px solid transparent; }
.rd-nav a.rd-area.on{ color:var(--acc); border-bottom-color:var(--acc); }
.rd-subbar{ background:var(--surface); border-bottom:1px solid var(--line); display:flex; gap:4px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  padding:0 max(28px, calc((100% - 1300px) / 2 + 28px)); }
.rd-tab{ display:flex; align-items:center; gap:6px; padding:10px 12px; white-space:nowrap; text-decoration:none;
  color:var(--muted); font-size:13.5px; font-weight:540; border-bottom:2px solid transparent; flex:0 0 auto; }
.rd-tab:hover{ color:var(--ink); }
.rd-tab.on{ color:var(--ink); border-bottom-color:var(--acc); font-weight:620; }
.rd-tab:focus-visible, .rd-area:focus-visible, .rd-barea:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
.rd-bottom{ display:none; }
.rd-navmore{ display:none !important; }
.rd-newdd{ display:flex !important; }        /* + New on every width (33.9 hid it under 1100 px behind the burger) */
@media print{ .rd-newdd{ display:none !important; } }
body.pdf-export .rd-newdd{ display:none !important; }
/* the client cards: a phone is narrower than one 390 px card (was the page's sideways scroll on Clients at 390 px) */
.rd-grid{ grid-template-columns:repeat(auto-fill, minmax(min(390px, 100%), 1fr)); }
.cl-tiles{ grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)) !important; }
.cl-tiles{ margin-bottom:18px; }
/* six areas fit on one line down to the phone bar: under 1100 px the name keeps its glyph and Find keeps its icon */
@media (max-width:1100px){
  .rd-nav a.rd-area{ padding:0 9px; }
  .rd-top-in{ gap:12px; }
  .rd-brand{ font-size:0; gap:0; }
  .rd-sbtn-search{ font-size:0; gap:0; padding:6px 10px; }
  .rd-sbtn-search::before{ content:"\1F50D"; font-size:15px; }
  .rd-sbtn-search kbd{ display:none; }
}
.rd-as{ display:none; }
@media (max-width:900px){
  .rd-al{ display:none; } .rd-as{ display:inline; }      /* "Time & billing" reads "Time", as on the phone bar */
  .rd-nav a.rd-area{ padding:0 6px; font-size:13px; gap:4px; }
  .rd-top-in{ gap:8px; padding:0 14px; }
  .rd-right{ gap:6px; }
}
.ins-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.ins-card{ padding:16px; min-width:0; }
.ins-t{ font-weight:640; margin-bottom:2px; }
.cl-tiles .n a{ color:var(--acc); }
body.signed-out .rd-subbar, body.signed-out .rd-bottom{ display:none !important; }
body.client-preview .rd-subbar, body.client-preview .rd-bottom,
body.pdf-export .rd-subbar, body.pdf-export .rd-bottom{ display:none !important; }
@media print{ .rd-subbar, .rd-bottom{ display:none !important; } }
@media (max-width:760px){
  .rd-nav{ display:none; }
  .rd-subbar{ padding:0 12px; }
  .rd-tab{ padding:10px 10px; font-size:13px; }
  .rd-bottom{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; justify-content:space-around;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .rd-barea{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; flex:1 1 0;
    padding:4px 2px; font-size:10.5px; color:var(--muted); text-decoration:none; text-align:center; line-height:1.2;
    min-height:44px; justify-content:center; }
  .rd-barea.on{ color:var(--acc); font-weight:640; }
  .rd-bic{ width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center;
    font-size:11px; font-weight:700; }
  .rd-barea .rd-cnt{ position:absolute; top:0; right:calc(50% - 22px); }
  body.rd main{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cl-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:560px){
  .rd-newb::before{ content:"+"; font-size:22px; font-weight:600; }   /* the word makes room, as Search does */
}
/* nothing scrolls the page sideways on a phone: a table wider than the screen scrolls inside its own box (a table
   narrower than the screen is drawn as before, at its own width). Screen only — print and the PDF path untouched. */
@media screen and (max-width:760px){
  body.rd #app table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rd-bench > *{ min-width:0; }   /* the client page's column took the width of its widest table */
  body.rd #app select, body.rd #app label.f{ max-width:100%; min-width:0; }   /* a long option no longer widens the page */
}

/* 12/10/2026 (40.3, item 2) — Settings › Checks: the morning check's H11 list fills the width (was ul.items, a flex row
   per line, which left an empty area on the left); Today's one-line action for a finding the owner can act on. */
.mc-page .hm-mc{margin:0}
.mc-list{min-width:0}
.mc-list .hm-item{align-items:flex-start}
.mc-h11{list-style:none;margin:6px 0 0;padding:0;width:100%}
.mc-h11 > li{display:block;padding:6px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.mc-h11 ul{list-style:none;margin:4px 0 0;padding:0 0 0 14px}
.mc-h11 ul li{display:block;padding:2px 0;font-size:12.5px}
.hm-act{border-left:4px solid var(--signal)}
.ls-list li{overflow-wrap:anywhere}

/* ═══ 40.2 (12/10/2026) — new layout, part 2: the client page ═════════════════════════════════════════════════════
   BRIEF-40.2-client-page; the look of prototype/client-page.html in the hub's own tokens. One header (name, a line of
   facts, the buttons, four figures), the client's colour on its left edge; tabs that scroll sideways on a phone;
   two columns that stack under 760 px; the phone's action bar (Call / Email / Log contact) above the area bar, in the
   safe area. The header and the action bar are noprint where they are buttons; nothing here reaches a client copy. */
/* the client's own colour still says whose page it is before the name is read (owner 05/09/2026): the left edge and a
   wash of it behind the header, never a slab (a browser without color-mix keeps the plain surface: the second
   background is dropped) */
.cp-head{ background:var(--surface); background:color-mix(in oklab, var(--client, var(--acc)) 9%, var(--surface));
  border:1px solid var(--line); border-left:6px solid var(--client, var(--acc));
  border-radius:var(--r-lg); padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px;
  align-items:start; margin:0; }
.cp-head h1{ font-size:24px; margin:0; line-height:1.2; font-weight:650; letter-spacing:-.015em; overflow-wrap:anywhere;
  grid-column:1; grid-row:1; }
.cp-facts{ display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--muted); font-size:13px; margin-top:-8px; grid-column:1; grid-row:2; }
.cp-facts b{ color:var(--ink-2); font-weight:540; }
.cp-act{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; grid-column:2; grid-row:1 / span 2; }
.cp-figs{ grid-column:1/-1; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); border-top:1px solid var(--line);
  padding-top:12px; }
.cp-fig{ background:none; border:0; border-left:1px solid var(--line); text-align:left; padding:2px 14px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; min-width:0; color:inherit; font:inherit; }
.cp-fig:first-child{ border-left:0; padding-left:0; }
.cp-fig:disabled{ cursor:default; opacity:1; }
.cp-fig:not(:disabled):hover .v{ color:var(--acc); }
.cp-fig:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.cp-fig .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.cp-fig .v{ font-size:20px; font-weight:650; }
.cp-fig .s{ font-size:12.5px; color:var(--muted); }
.cp-fig.alert .v, .cp-fig.alert .s{ color:var(--signal); }
.cp-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin:16px 0 0; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.cp-tabs a{ border-bottom:2px solid transparent; padding:9px 12px; color:var(--muted); font-weight:540; white-space:nowrap;
  text-decoration:none; flex:0 0 auto; font-size:13.5px; }
.cp-tabs a:hover{ color:var(--ink); }
.cp-tabs a.on{ color:var(--ink); border-bottom-color:var(--acc); font-weight:620; }
.cp-tabs a:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
.cp-cnt{ font-size:11.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:0 6px;
  margin-left:5px; color:var(--muted); }
.cp-body{ margin-top:14px; min-width:0; }
.cp-cols{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; align-items:start; }
.cp-stack{ display:grid; gap:14px; min-width:0; }
.cp-card{ min-width:0; }
.cp-body > .cp-card + .cp-card, .cp-body > .cp-card + .cp-cols, .cp-body > .cp-docs + .cp-card{ margin-top:14px; }
.cp-h{ font-size:15px; margin:0 0 8px; font-weight:620; display:flex; justify-content:space-between; gap:8px;
  align-items:baseline; flex-wrap:wrap; }
.cp-h .sub, .cp-h .btn{ font-weight:400; }
.cp-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); }
.cp-row:first-of-type, .cp-h + .cp-row{ border-top:0; }
.cp-row > div{ min-width:0; }
.cp-row .t{ font-weight:540; overflow-wrap:anywhere; }
.cp-row .m{ color:var(--muted); font-size:12.5px; }
.cp-row .r{ flex:0 0 auto; }
.cp-more{ margin:8px 0 0; font-size:13px; }
.cp-line{ margin:0; font-size:13.5px; }
.cp-bar{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.cp-bar .cp-h{ margin:0; }
.cp-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.cp-came{ margin-top:8px; font-size:13px; }
.cp-sel{ width:auto; margin:0; padding:0 2px; font-size:12.5px; border:0; background:none; }
.cp-docs{ margin-bottom:0; }
.cp-kv{ display:grid; grid-template-columns:minmax(110px, max-content) minmax(0, 1fr); gap:6px 16px; font-size:13.5px; margin:0; }
.cp-kv dt{ color:var(--muted); } .cp-kv dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.cp-colour{ margin-top:12px; }
.cp-advice .rd-pg{ border:0; padding:0; margin:0; }
.cp-actbar{ display:none; }
@media print{ .cp-tabs, .cp-act, .cp-actbar{ display:none !important; } .cp-cols{ display:block; } }
body.pdf-export .cp-tabs, body.pdf-export .cp-act, body.pdf-export .cp-actbar{ display:none !important; }
@media (max-width:760px){
  .cp-head{ grid-template-columns:1fr; padding:14px; }
  .cp-head h1, .cp-facts, .cp-act{ grid-column:1; grid-row:auto; }
  .cp-act{ justify-content:flex-start; }
  .cp-figs{ grid-template-columns:1fr 1fr; row-gap:10px; }
  .cp-fig:nth-child(odd){ border-left:0; padding-left:0; }
  .cp-cols{ grid-template-columns:1fr; }
  .cp-tabs a{ padding:9px 10px; font-size:13px; }
  /* tables become cards: each row a box, each cell a line (the customer list and the deadlines; screen only) */
  .cp-body[data-ctab="customers"] table, .cp-body[data-ctab="deadlines"] table{ display:block; overflow:visible; }
  .cp-body[data-ctab="customers"] thead, .cp-body[data-ctab="deadlines"] thead{ display:none; }
  .cp-body[data-ctab="customers"] tbody, .cp-body[data-ctab="deadlines"] tbody,
  .cp-body[data-ctab="customers"] tfoot, .cp-body[data-ctab="deadlines"] tfoot{ display:block; }
  .cp-body[data-ctab="customers"] tr, .cp-body[data-ctab="deadlines"] tr{ display:block; background:var(--surface);
    border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin-bottom:8px; }
  .cp-body[data-ctab="customers"] td, .cp-body[data-ctab="deadlines"] td{ display:block; border:0; padding:2px 0; text-align:left; }
  .cp-body[data-ctab="customers"] td:empty, .cp-body[data-ctab="deadlines"] td:empty{ display:none; }
  .cp-body[data-ctab="deadlines"] td:nth-child(n+2)::before{ color:var(--muted); font-size:11.5px; margin-right:6px; }
  .cp-body[data-ctab="deadlines"] td:nth-child(2)::before{ content:"Statutory due"; }
  .cp-body[data-ctab="deadlines"] td:nth-child(3)::before{ content:"Reminds me"; }
  .cp-body[data-ctab="deadlines"] td:nth-child(4)::before{ content:"Internal target"; }
  .cp-body[data-ctab="deadlines"] td:nth-child(6)::before{ content:"Source"; }
  .cp-body[data-ctab="deadlines"] td:nth-child(7)::before{ content:"Filed"; }
  .cp-actbar{ display:flex; position:fixed; left:0; right:0; z-index:69; gap:6px; background:var(--surface);
    border-top:1px solid var(--line); padding:8px 12px; bottom:calc(57px + env(safe-area-inset-bottom, 0px)); }
  .cp-actbar .btn{ flex:1 1 0; justify-content:center; text-decoration:none; }
  body.rd main:has(.cp-actbar){ padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)); }
}
body.client-preview .cp-actbar, body.signed-out .cp-actbar{ display:none !important; }
.cp-row a.btn, .cp-row .r a.btn{ text-decoration:none; }

/* 11/10/2026 (40.1 — the import door; prototype/import-door.html) — "What we read", the questions, the history, the clean-up.
   Own classes (dr-…): the app's .banner and .ok keep their meaning elsewhere. */
.dr-card{max-width:820px;margin-top:14px}
.dr-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:6px 0 12px}
.dr-cnt{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px}
.dr-cnt b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.dr-cnt span{font-size:12px;color:var(--muted)}
.dr-tbl{overflow-x:auto}
.dr-tbl table{width:100%}
.dr-dash{color:var(--muted);font-style:italic}
.dr-banner{border-radius:12px;padding:14px 16px;margin:14px 0;max-width:820px;font-size:13.5px}
.dr-banner h2{font-size:15px;margin:0 0 6px}
.dr-banner p{margin:0 0 4px}
.dr-ok{background:var(--ok-bg)} .dr-ok h2{color:var(--ok)}
.dr-warn{background:var(--warn-bg)} .dr-warn h2{color:var(--warn)}
.dr-bad{background:var(--bad-bg)} .dr-bad h2{color:var(--bad)}
.pill.dr-mut{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.dr-danger{border-color:var(--bad);color:var(--bad)}
.dr-card .btns,.dr-banner .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media print{.dr-card,.dr-banner{display:none}}
body.pdf-export .dr-card,body.pdf-export .dr-banner{display:none}

/* ── 12/10/2026 (40.4) — the customer thread as an email chain (prototype/customer-conversation.html, owner 12/10
   14:19). Two tabs inside the thread: Conversation (theirs on the left, tinted; ours on the right; calls and letters
   one short line between) and Payments & changes. Print: the conversation sheet in #cv-printroot is the only thing
   printed — both print paths. Phone: emails full width, tabs and buttons wrap, nothing scrolls sideways. ── */
.cv-tabs{ display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center; border-bottom:1px solid var(--line); }
.cv-tabs [role="tab"]{ background:none; border:0; border-bottom:2px solid transparent; padding:8px 10px; cursor:pointer;
  color:var(--muted); font:inherit; font-size:13.5px; font-weight:560; }
.cv-tabs [role="tab"].on{ color:var(--ink); border-bottom-color:var(--acc); }
.cv-tabs [role="tab"]:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.cv-tabs .spacer{ flex:1; }
.cv-tabs .cf-more{ margin:4px 0; }
.cv-cnt{ font-size:11.5px; border:1px solid var(--line); border-radius:999px; padding:0 6px; margin-left:5px; color:var(--muted); font-weight:500; }
.cv-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.cv-bar .spacer{ flex:1; }
.cv-bar select{ max-width:100%; min-width:0; }
.cv-tick{ display:inline-flex; gap:6px; align-items:center; }
.cv-chain{ display:grid; gap:12px; min-width:0; }
.cv-mail{ background:var(--surface); border:1px solid var(--line); border-radius:12px; min-width:0; max-width:86%; }
.cv-mail.cv-in{ background:#EEF3FB; border-color:#C9D7EE; justify-self:start; }
.cv-mail.cv-out{ justify-self:end; }
.cv-mh{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 10px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; }
.cv-mail.cv-in .cv-mh{ border-bottom-color:#C9D7EE; }
.cv-mh .cv-top{ grid-column:1 / 3; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; min-width:0; }
.cv-mh .cv-dir{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--muted); }
.cv-mh .cv-d{ grid-row:1; grid-column:3; color:var(--muted); white-space:nowrap; }
.cv-mh .cv-k{ color:var(--muted); }
.cv-mh .cv-v{ grid-column:2 / 4; min-width:0; overflow-wrap:anywhere; }
.cv-mail .mail-text{ margin:0; padding:10px 14px; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:13.5px; line-height:1.5; }
.cv-event .mail-text{ margin:6px 0 2px; text-align:left; color:var(--ink); }
.cv-att{ padding:0 14px 10px; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.cv-mail .mail-acts, .cv-mail .cf-tagrow, .cv-mail .ib-how, .cv-mail .ib-guess, .cv-mail > .sub{ padding:0 14px 8px; }
.cv-event{ justify-self:center; max-width:100%; font-size:12.5px; color:var(--muted); background:var(--surface-2); border:1px dashed var(--line);
  border-radius:14px; padding:4px 12px; overflow-wrap:anywhere; }
.cv-evl{ font-weight:600; color:var(--ink-2); }
.cv-closed{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.cv-closed::before, .cv-closed::after{ content:""; flex:1; border-top:1px dashed var(--line); }
.cv-moved{ background:var(--warn-bg); color:var(--ink-2); border-radius:10px; padding:8px 12px; font-size:13px; margin:14px 0 0; }
.cv-lead{ margin:10px 0 6px; }
.cv-pay{ display:flex; flex-direction:column; gap:8px; }
@media (max-width:640px){
  .cv-mail{ max-width:100%; justify-self:stretch; }
  .cv-mail.cv-in, .cv-mail.cv-out{ justify-self:stretch; }
  .cv-mh{ grid-template-columns:auto minmax(0,1fr); }
  .cv-mh .cv-d{ grid-row:auto; grid-column:1 / 3; }
  .cv-mh .cv-v{ grid-column:2; }
}
/* the printed sheet */
#cv-printroot{ display:none; }
.cv-sheet{ background:#fff; color:#1B1D1C; font-family:var(--serif, Georgia, serif); font-size:12.5pt; line-height:1.5; }
.cv-sheet h2{ font-size:17pt; margin:0 0 2px; }
.cv-meta{ font-family:var(--ui); font-size:9.5pt; color:#555; margin-bottom:14px; }
.cv-em{ border-top:1px solid #ccc; padding:10px 0; break-inside:auto; }
.cv-eh{ font-family:var(--ui); font-size:9.5pt; color:#444; display:grid; grid-template-columns:60px minmax(0,1fr); gap:1px 8px; margin-bottom:6px; break-after:avoid; }
.cv-eh b{ font-weight:600; color:#000; }
.cv-eb{ white-space:pre-wrap; overflow-wrap:anywhere; }
@media print{
  body.cv-printing > *:not(#cv-printroot){ display:none !important; }
  body.cv-printing #cv-printroot{ display:block !important; }
  body.cv-printing{ background:#fff; }
}
body.pdf-export.cv-printing > *:not(#cv-printroot){ display:none !important; }
body.pdf-export.cv-printing #cv-printroot{ display:block !important; }

/* 14/10/2026 (40.5 round 3, verifier round-2 fault 2) — the Month-end bring-in month tables (QuickBooks and Xero) at phone width:
   the tick box and the month name stay on one line (40.5 round 2), so the other columns give way — narrower cell padding and the
   button's words may wrap — and no button runs past the card at 390 px. */
@media (max-width:560px){
  .bring-months th, .bring-months td{ padding:8px 6px; }
  .bring-months td.r .btn{ white-space:normal; text-align:center; line-height:1.25; }
}

/* 14/10/2026 (40.6) — customer email addresses from QuickBooks and Xero: where an address came from (customer page), and
   Today's line of customers who cannot be chased for want of an address. Both print paths hide the Today line (.noprint,
   .hm-money already); the chips sit on owner screens only (the contacts card is .noprint). */
.em-line{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; margin-top:3px; }
.em-src{ font-size:11.5px; color:var(--ok); background:var(--ok-bg); padding:1px 8px; border-radius:999px; white-space:nowrap; }
.em-typed{ font-size:11.5px; color:var(--muted); border:1px solid var(--line); padding:0 8px; border-radius:999px; white-space:nowrap; }
.hm-noemail{ background:var(--warn-bg); border-color:color-mix(in oklab, var(--warn) 25%, transparent); }
.hm-noemail-l{ display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; }
.hm-noemail-l strong{ color:var(--warn); }
.hm-noemail-t{ margin-top:10px; min-width:520px; }
@media print{ .hm-noemail{ display:none !important; } }
body.pdf-export .hm-noemail{ display:none !important; }