:root{
  /* Sampled from computed styles on amersify.com, 2026-08-27.
     White-dominant and deliberately light. No dark theme: the brand is airy,
     and Stefano asked for the site's colours, not darkness. */
  --ground:#FAF8F9;          /* page: white with the faintest plum cast */
  --raised:#FFFFFF;          /* cards sit as clean white on that */
  --surface:#FFFFFF;
  --surface-2:#F4F1F3;       /* chips, wells */
  --hairline:#E6E1E4; --hairline-strong:#D5CBD2;
  --ink:#121212; --ink-muted:rgba(18,18,18,.62); --ink-faint:rgba(18,18,18,.42);
  --plum:#75035A; --aubergine:#45113F; --plum-muted:#6A4066;
  --plum-wash:#FBF2F8; --plum-edge:rgba(117,3,90,.16);
  --crit:#A8201A; --crit-wash:#FDF3F2; --crit-edge:rgba(168,32,26,.24);
  --warn:#8A5000; --warn-wash:#FDF7EF; --warn-edge:rgba(138,80,0,.22);
  --good:#0B6357; --good-wash:#EFF7F5;
  --stale:rgba(18,18,18,.34); --stale-wash:#F7F5F6;
  /* the only blue in the system: the upsell banner asks for one, and none of
     the brand colours can carry "recent" against "none" without reading as
     good/bad, which an upsell state is not */
  --info:#12507F; --info-wash:#EFF5FA; --info-edge:rgba(18,80,127,.22);
  --info-soft:#5E86A6; --info-soft-wash:#F5F9FC;
  --void-line:rgba(18,18,18,.12);
  --accent:linear-gradient(116deg,#FF49C2 27%,#FF8D29 114%);
  --shadow:0 1px 2px rgba(69,17,63,.04),0 6px 18px rgba(69,17,63,.05);
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--ink); font-family:Montserrat,-apple-system,"Segoe UI",sans-serif; font-size:14.5px; line-height:1.5;}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;}
.num{font-variant-numeric:tabular-nums;}
h1,h2,h3,h4{margin:0; text-wrap:balance;}
p{margin:0;}
.app{max-width:1160px; margin:0 auto; padding:26px 24px 90px;}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:18px;}
.logoplate{display:inline-flex; align-items:center; border-radius:7px;}
.logo{height:30px; width:auto; display:block;}
.asof{font-size:11.5px; color:var(--ink-faint);}

/* tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--hairline); margin-bottom:26px; overflow-x:auto;}
.tab{appearance:none; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  padding:11px 15px; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink-muted); white-space:nowrap; display:flex; align-items:center; gap:7px;}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--plum); border-bottom-color:var(--plum); font-weight:600;}
.tab:focus-visible{outline:2px solid var(--plum); outline-offset:-2px; border-radius:3px;}
.tab .pip{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--crit); color:#fff; font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center;}
.panel[hidden]{display:none;}

/* section heads */
.shead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:34px 0 14px;}
.shead:first-child{margin-top:0;}
.shead h2{font-size:16px; font-weight:600; letter-spacing:-.01em;}
.shead .hint{font-size:12px; color:var(--ink-faint);}
.eyebrow{font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);}

/* headline */
.headline{display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border-radius:11px; background:var(--surface); border:1px solid var(--hairline); margin-bottom:24px;}
.headline .big{font-size:34px; font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--crit);}
.headline p{font-size:13.5px; color:var(--ink-muted);}
.headline strong{color:var(--ink); font-weight:600;}

/* triage */
.queue{display:flex; flex-direction:column; gap:9px;}
.item{display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:start;
  padding:15px 17px; border-radius:10px; background:var(--raised); border:1px solid var(--hairline); box-shadow:var(--shadow);}
.item.sev-crit{border-left:3px solid var(--crit);}
.item.sev-warn{border-left:3px solid var(--warn);}
.item.sev-watch{border-left:3px solid var(--plum-muted);}
.item.sev-stale{border-left:3px dashed var(--hairline-strong); background:var(--stale-wash);}
.sev{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:4px 7px; border-radius:3px; white-space:nowrap; margin-top:1px;}
.sev-c{background:var(--crit-wash); color:var(--crit); border:1px solid var(--crit-edge);}
.sev-w{background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-edge);}
.sev-t{background:var(--plum-wash); color:var(--plum); border:1px solid var(--plum-edge);}
.sev-s{background:transparent; color:var(--stale); border:1px dashed var(--hairline-strong);}
.item h3{font-size:14px; font-weight:600; letter-spacing:-.005em;}
.item .who{font-size:11.5px; color:var(--ink-faint); margin-bottom:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.item .why{font-size:12.5px; color:var(--ink-muted); margin-top:5px; max-width:74ch;}
.item .why b{color:var(--ink); font-weight:500;}
.acts{display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.btn{appearance:none; font-family:inherit; font-size:11.5px; font-weight:500; padding:6px 12px; border-radius:99px; cursor:pointer; white-space:nowrap; border:1px solid var(--hairline-strong); background:transparent; color:var(--ink-muted);}
.btn:hover{border-color:var(--plum); color:var(--plum);}
.btn-p{background:var(--plum); border-color:var(--plum); color:#fff;}
.btn-p:hover{opacity:.88; color:#fff;}
.btn:focus-visible{outline:2px solid var(--plum); outline-offset:2px;}
.tag{font-family:"IBM Plex Mono",monospace; font-size:10px; padding:2px 6px; border-radius:3px; background:var(--surface-2); color:var(--ink-muted);}

/* cluster callout */
.cluster{padding:17px 19px; border-radius:11px; border:1px solid var(--crit-edge); background:var(--crit-wash); margin-bottom:9px;}
.cluster h3{font-size:14.5px; font-weight:600; color:var(--crit); margin-bottom:6px;}
.cluster p{font-size:12.5px; color:var(--ink-muted); max-width:80ch;}
.cluster ul{margin:9px 0 0; padding-left:17px; font-size:12.5px; color:var(--ink-muted);}
.cluster li{margin:3px 0;}

/* client header */
.chead{display:flex; align-items:flex-start; justify-content:space-between; gap:22px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--hairline); margin-bottom:8px;}
.chead h2{font-size:25px; font-weight:600; letter-spacing:-.022em;}
.chead .sub{font-size:12.5px; color:var(--ink-muted); margin-top:3px;}
.facts{display:flex; gap:26px; flex-wrap:wrap;}
.fact{display:flex; flex-direction:column; gap:2px;}
.fact .v{font-size:19px; font-weight:600; letter-spacing:-.02em;}
.fact .v.ok{color:var(--good);} .fact .v.bad{color:var(--crit);} .fact .v.warn{color:var(--warn);}
.fact .n{font-size:11px; color:var(--ink-faint);}

/* charts */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:16px;}
.card{background:var(--raised); border:1px solid var(--hairline); border-radius:11px; padding:17px 18px; box-shadow:var(--shadow);}
.card .ctop{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:3px;}
.card h4{font-size:13px; font-weight:600;}
.card .now{font-size:20px; font-weight:600; letter-spacing:-.02em;}
.card .now.bad{color:var(--crit);} .card .now.warn{color:var(--warn);} .card .now.ok{color:var(--good);}
.card .cnote{font-size:11.5px; color:var(--ink-muted); margin-top:9px; line-height:1.45;}
.spark{width:100%; height:74px; display:block; margin-top:10px; overflow:visible;}
.spark .grid{stroke:var(--hairline); stroke-width:.6;}
.spark .thr{stroke:var(--crit); stroke-width:1; stroke-dasharray:3 3; opacity:.6;}
.spark .fill{fill:var(--plum); opacity:.10;}
.spark .line{fill:none; stroke:var(--plum); stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round;}
.spark .dash{stroke:var(--stale); stroke-width:1.9; stroke-dasharray:3 2.5;}
.spark .dot{fill:var(--plum); opacity:.55;}
.spark .end{stroke:var(--raised); stroke-width:2;}
.end-crit{fill:var(--crit);} .end-warn{fill:var(--warn);} .end-ok{fill:var(--good);} .end-stale{fill:var(--stale);}
.xlab{display:flex; justify-content:space-between; margin-top:5px; font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--ink-faint);}

/* story */
.story{border-left:3px solid var(--plum); padding:2px 0 2px 16px; margin:22px 0 0;}
.story h4{font-size:13px; font-weight:600; margin-bottom:6px;}
.story p{font-size:13px; color:var(--ink-muted); max-width:80ch;}
.story p + p{margin-top:8px;}
.story b{color:var(--ink); font-weight:500;}

/* lists */
.rows{border:1px solid var(--hairline); border-radius:10px; overflow:hidden;}
.row{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 16px; background:var(--raised); border-top:1px solid var(--hairline);}
.row:first-child{border-top:none;}
.row .t{font-size:13px;}
.row .m{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.age{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint); white-space:nowrap;}
.age.old{color:var(--warn);}
.dotm{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.d-crit{background:var(--crit);} .d-warn{background:var(--warn);} .d-ok{background:var(--good);} .d-stale{background:var(--hairline-strong);}

/* timeline */
.tl{display:flex; flex-direction:column;}
.tev{display:grid; grid-template-columns:80px 1fr; gap:16px; padding:13px 0; border-top:1px solid var(--hairline);}
.tev:first-child{border-top:none;}
.tev .when{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint); padding-top:2px;}
.tev h4{font-size:13.5px; font-weight:600;}
.tev .rat{font-size:12.5px; color:var(--ink-muted); margin-top:4px; max-width:78ch;}
.shift{display:inline-block; margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:3px; background:var(--plum-wash); color:var(--plum); border:1px solid var(--plum-edge); vertical-align:1px;}

/* stale banner */
.stalebar{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:16px 18px; border-radius:10px;
  border:1px dashed var(--hairline-strong); background:var(--stale-wash); margin-bottom:22px;}
.stalebar p{font-size:13px; color:var(--ink-muted); max-width:82ch;}
.stalebar strong{color:var(--ink); font-weight:600;}

/* empty */
.empty{padding:26px 20px; border-radius:10px; border:1px dashed var(--hairline-strong);
  background-image:repeating-linear-gradient(135deg,var(--void-line) 0 2px,transparent 2px 8px); text-align:center;}
.empty h4{font-size:13.5px; font-weight:600; margin-bottom:5px;}
.empty p{font-size:12.5px; color:var(--ink-muted); max-width:56ch; margin:0 auto;}

/* log */
.loggrid{display:grid; grid-template-columns:230px 1fr; gap:22px;}
@media (max-width:760px){ .loggrid{grid-template-columns:1fr;} }
.tasks{display:flex; flex-direction:column; gap:3px;}
.tgroup{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 5px;}
.tgroup:first-child{margin-top:0;}
.task{appearance:none; text-align:left; font-family:inherit; font-size:13px; padding:8px 11px; border-radius:7px; border:1px solid transparent; background:none; color:var(--ink-muted); cursor:pointer;}
.task:hover{background:var(--surface-2); color:var(--ink);}
.task.on{background:var(--plum-wash); border-color:var(--plum-edge); color:var(--plum); font-weight:600;}
.task:focus-visible{outline:2px solid var(--plum); outline-offset:1px;}
.form{background:var(--raised); border:1px solid var(--hairline); border-radius:11px; padding:22px; box-shadow:var(--shadow);}
.form h3{font-size:15px; font-weight:600; margin-bottom:3px;}
.form .fsub{font-size:12.5px; color:var(--ink-muted); margin-bottom:18px;}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.f{display:flex; flex-direction:column; gap:5px;}
.f label{font-size:11.5px; font-weight:500; color:var(--ink-muted);}
.f .ctl{padding:9px 11px; border:1px solid var(--hairline-strong); border-radius:7px; background:var(--ground); font-family:inherit; font-size:13px; color:var(--ink);}
.f .ctl:focus{outline:2px solid var(--plum); outline-offset:-1px; border-color:var(--plum);}
.f .pctwrap{position:relative; display:flex; align-items:center;}
.f .pctwrap .ctl{width:100%; padding-right:34px;}
.f .pctsuf{position:absolute; right:12px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-faint); pointer-events:none;}
.f .help{font-size:10.5px; color:var(--ink-faint);}
.f.full{grid-column:1/-1;}
.formfoot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid var(--hairline); flex-wrap:wrap;}
.guards{font-size:11.5px; color:var(--ink-faint); max-width:52ch;}
.guards b{color:var(--ink-muted); font-weight:500;}


/* sweep table */
.sweep{width:100%; border-collapse:collapse; font-size:13px;}
.sweep th{text-align:left; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:0 12px 9px; border-bottom:1px solid var(--hairline);}
.sweep td{padding:14px 12px; border-bottom:1px solid var(--hairline); vertical-align:top;}
.sweep tr:last-child td{border-bottom:none;}
.sweep .cname{font-weight:600; font-size:14px;}
.sweep .cmeta{font-size:11px; color:var(--ink-faint); margin-top:2px;}
.sweep .verdict{font-size:12.5px; color:var(--ink-muted); max-width:44ch;}
.sweep .verdict b{color:var(--ink); font-weight:500;}
.swrap{overflow-x:auto; border:1px solid var(--hairline); border-radius:11px; padding:16px 6px 6px; background:var(--raised);}
.flag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:3px; white-space:nowrap;}
.flag-call{background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-edge);}
.flag-ok{background:var(--good-wash); color:var(--good);}
.flag-stale{color:var(--stale); border:1px dashed var(--hairline-strong);}

/* call prep brief */
.brief{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px;}
.bcard{background:var(--raised); border:1px solid var(--hairline); border-radius:11px; padding:18px 19px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px;}
.bcard.lead{border-color:var(--plum-edge); background:var(--plum-wash);}
.bcard.guard{border-color:var(--crit-edge);}
.bhead{display:flex; align-items:center; gap:9px;}
.bhead h3{font-size:13.5px; font-weight:600;}
.bnum{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-faint); margin-left:auto;}
.bitem{font-size:12.5px; color:var(--ink-muted); padding:9px 0; border-top:1px solid var(--hairline);}
.bitem:first-of-type{border-top:none; padding-top:0;}
.bitem b{color:var(--ink); font-weight:500;}
.bitem .sub{font-size:11px; color:var(--ink-faint); margin-top:3px; display:flex; gap:9px; flex-wrap:wrap; align-items:center;}
.owner{font-family:"IBM Plex Mono",monospace; font-size:10px; padding:2px 6px; border-radius:3px; background:var(--surface-2); color:var(--ink-muted);}
.owner.ext{border:1px solid var(--hairline-strong); background:transparent;}
.say{font-size:12.5px; color:var(--ink); background:var(--surface-2); border-radius:7px; padding:10px 12px; line-height:1.5;}
.say .lead-in{color:var(--ink-faint); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; display:block; margin-bottom:4px;}

footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--hairline); font-size:11.5px; color:var(--ink-faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}
@media (max-width:640px){
  .app{padding:20px 15px 70px;}
  .item{grid-template-columns:auto 1fr;} .acts{grid-column:2; flex-direction:row; flex-wrap:wrap;}
  .row{grid-template-columns:auto 1fr;}
  .tev{grid-template-columns:1fr; gap:4px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }

/* ---------- editable grid ---------- */
.tbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.tnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.tchip{display:inline-block;padding:5px 11px;border-radius:99px;border:1px solid var(--hairline);
  background:var(--raised);color:var(--ink-muted);font-size:12px;text-decoration:none;white-space:nowrap;}
.tchip:hover{border-color:var(--plum);color:var(--plum);}
.tchip.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600;}
.tchip:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}

.gridwrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:11px;background:var(--raised);}
table.grid{border-collapse:collapse;width:100%;font-size:12.5px;}
table.grid th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;
  padding:10px 11px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
table.grid th.numcol,table.grid td.numcol{text-align:right;font-variant-numeric:tabular-nums;}
table.grid th.wide{min-width:230px;}
table.grid td{padding:9px 11px;border-bottom:1px solid var(--hairline);vertical-align:top;
  max-width:340px;position:relative;}
table.grid tr:last-child td{border-bottom:none;}
table.grid tbody tr:hover td{background:var(--plum-wash);}
.cell{cursor:text;border-radius:4px;}
.cell:hover{box-shadow:inset 0 0 0 1px var(--plum-edge);}
.cell:focus-visible{outline:2px solid var(--plum);outline-offset:-2px;}
.cell .blank{color:var(--ink-faint);}
.cell.saving{opacity:.5;}
.cell.saved{box-shadow:inset 0 0 0 2px var(--good);}
.cell.failed{box-shadow:inset 0 0 0 2px var(--crit);background:var(--crit-wash)!important;}
.cellinput{width:100%;min-width:90px;font-family:inherit;font-size:12.5px;padding:5px 7px;
  border:1px solid var(--plum);border-radius:5px;background:var(--ground);color:var(--ink);}
.cellinput:focus{outline:none;box-shadow:0 0 0 3px var(--plum-wash);}
td.cell .pctsuf{position:absolute;right:16px;top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--ink-faint);pointer-events:none;}
.req{color:var(--crit);margin-left:2px;}
.rowacts{white-space:nowrap;width:1%;}
.icon{appearance:none;border:1px solid transparent;background:none;color:var(--ink-faint);
  font-size:16px;line-height:1;cursor:pointer;border-radius:5px;padding:2px 7px;}
.icon:hover{color:var(--crit);border-color:var(--crit-edge);background:var(--crit-wash);}
.icon:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}
tr.erased{opacity:.35;text-decoration:line-through;}
tr.newrow td{background:var(--plum-wash);}
.btn.sm{padding:4px 10px;font-size:11px;}
.gridhint{font-size:11.5px;color:var(--ink-faint);margin-top:10px;}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:9px;
  background:var(--ink);color:#fff;font-size:13px;box-shadow:0 8px 28px rgba(18,18,18,.24);}
.toast.bad{background:var(--crit);}
.toast .btn{border-color:rgba(255,255,255,.5);color:#fff;}
.toast .btn:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#fff;}

/* [hidden] loses to display:flex, so say it explicitly */
.toast[hidden]{display:none;}
tr.newrow[hidden]{display:none;}

/* Long free text must not turn every row into a paragraph. Clamp it; the full
   value is still there the moment you click into the cell to edit. */
table.grid td.wide{max-width:300px;}
table.grid td.wide:not(:focus-within){
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
table.grid td.wide:focus-within{max-width:420px;}
table.grid tbody td{max-height:96px;}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:500;line-height:1.5;white-space:nowrap;border:1px solid transparent;
  font-family:inherit;}
.pill-crit{background:var(--crit-wash);color:var(--crit);border-color:var(--crit-edge);}
.pill-warn{background:var(--warn-wash);color:var(--warn);border-color:var(--warn-edge);}
.pill-good{background:var(--good-wash);color:var(--good);border-color:rgba(11,99,87,.22);}
.pill-info{background:var(--surface-2);color:var(--ink-muted);border-color:var(--hairline);}
.pill-mute{background:transparent;color:var(--ink-faint);border-color:var(--hairline);}
.pill-empty{background:transparent;color:var(--ink-faint);border:1px dashed var(--hairline-strong);}
button.pill{cursor:pointer;}
button.pill:hover{filter:brightness(.96);box-shadow:0 0 0 3px var(--plum-wash);}
button.pill:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.pillsel{font-family:inherit;font-size:11px;padding:3px 7px;border-radius:99px;
  border:1px solid var(--plum);background:var(--ground);color:var(--ink);}
.pillsel:focus{outline:none;box-shadow:0 0 0 3px var(--plum-wash);}

/* ---------- comment composer ---------- */
.composer{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.composer textarea{width:100%;min-height:66px;font-family:inherit;font-size:13.5px;line-height:1.5;
  padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);resize:vertical;}
.composer textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.composer .crow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.composer select,.composer input[type=date]{font-family:inherit;font-size:12px;padding:6px 9px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.composer .spacer{margin-left:auto;}
.composer .chint{font-size:11px;color:var(--ink-faint);}
.pillbox{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.row .t{overflow-wrap:anywhere;}

/* ---------- summary tables ---------- */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:30px;}
.summary-wide{grid-template-columns:1fr;}
.sumcard{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  padding:15px 17px 13px;box-shadow:var(--shadow);min-width:0;}
.sumhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--hairline);}
.sumhead h3{font-size:12.5px;font-weight:600;letter-spacing:.01em;}
.summeta{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.sumscroll{overflow-x:auto;}
table.sumtable{width:100%;border-collapse:collapse;font-size:12px;}
table.sumtable thead th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;text-align:right;padding:7px 6px 5px;white-space:nowrap;}
table.sumtable thead th:first-child{text-align:left;}
table.sumtable tbody th{text-align:left;font-weight:500;color:var(--ink-muted);
  padding:7px 6px;white-space:nowrap;font-size:12px;}
table.sumtable tbody td{text-align:right;padding:7px 6px;font-variant-numeric:tabular-nums;
  border-top:1px solid var(--hairline);white-space:nowrap;}
table.sumtable tbody th{border-top:1px solid var(--hairline);}
table.sumtable tbody tr:first-child th,table.sumtable tbody tr:first-child td{border-top:none;}
table.sumtable td.act{font-weight:600;color:var(--ink);}
table.sumtable-kv tbody th{width:44%;}
table.sumtable-kv tbody td{text-align:left;white-space:normal;}
table.sumtable .clip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
tr.subrow th,tr.subrow td{border-top:none!important;padding-top:0!important;}
.gap{display:inline-block;font-size:10.5px;font-weight:500;padding:1px 6px;border-radius:99px;margin-left:5px;}
.gap-good{background:var(--good-wash);color:var(--good);}
.gap-bad{background:var(--crit-wash);color:var(--crit);}
.gap-warn{background:var(--warn-wash);color:var(--warn);}
.gap-mute{background:var(--surface-2);color:var(--ink-faint);}
.trend{margin-left:4px;font-size:11px;}
.trend.up{color:var(--good);}
.trend.down{color:var(--crit);}
.trend.flat{color:var(--ink-faint);}
.sumnote{font-size:10.5px;color:var(--ink-faint);margin-top:9px;line-height:1.45;}
.sumempty{font-size:12px;color:var(--ink-muted);padding:14px 2px;line-height:1.5;}
@media (max-width:640px){ table.sumtable .clip{max-width:130px;} }

/* ---------- the 3x3 ---------- */
.focus{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:6px 0 0;
  border:1px solid var(--hairline);border-radius:11px;overflow:hidden;background:var(--raised);}
.lane{padding:14px 16px 12px;border-left:1px solid var(--hairline);min-width:0;}
.lane:first-child{border-left:none;}
.lanehead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.lanehead h3{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--plum);}
.lanemeta{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}
ol.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.slot{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;
  padding:9px 8px;border-radius:7px;min-height:52px;}
.slot:hover{background:var(--plum-wash);}
.slot .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint);padding-top:2px;}
.slot .body{min-width:0;display:flex;flex-direction:column;gap:1px;}
.slotpick{appearance:none;background:none;border:none;padding:0;text-align:left;font-family:inherit;
  font-size:13px;line-height:1.35;color:var(--ink);cursor:pointer;font-weight:500;}
.slotpick:hover{color:var(--plum);text-decoration:underline;text-underline-offset:2px;}
.slotpick.muted{color:var(--ink-faint);font-weight:400;font-style:italic;}
.slotpick:focus-visible{outline:2px solid var(--plum);outline-offset:2px;border-radius:3px;}
.slot .det{font-size:10.5px;color:var(--ink-faint);}
.slotacts{display:flex;align-items:center;gap:5px;}
.ipin{appearance:none;background:none;border:none;cursor:pointer;font-size:11px;
  color:var(--hairline-strong);padding:2px 3px;line-height:1;border-radius:4px;}
.ipin:hover{color:var(--plum);}
.ipin.on{color:var(--plum);}
.ipin:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}

.slot.is-resolved .slotpick{text-decoration:line-through;color:var(--ink-faint);}

/* ---------- trend strip ---------- */
.strip{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:11px 16px;margin-bottom:26px;
  border:1px solid var(--hairline);border-top:none;border-radius:0 0 11px 11px;background:var(--surface);}
.strip-empty{font-size:12px;color:var(--ink-faint);border-radius:0 0 11px 11px;}
.stripcell{display:flex;align-items:center;gap:8px;}
.stripcell .sl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.stripcell .sv{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}
.stripcell .sd{font-size:13px;font-weight:600;}
.stripcell .sn{font-size:10px;color:var(--ink-faint);}
.t-good{color:var(--good);} .t-crit{color:var(--crit);} .t-info{color:var(--ink-faint);}
svg.micro{width:92px;height:22px;overflow:visible;}
svg.micro polyline{fill:none;stroke:var(--plum);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.mend-good{fill:var(--good);} .mend-crit{fill:var(--crit);} .mend-info{fill:var(--ink-faint);}
.nospark{font-size:10.5px;color:var(--ink-faint);}
.stripmore{margin-left:auto;font-size:11.5px;color:var(--plum);text-decoration:none;}
.stripmore:hover{text-decoration:underline;}

/* ---------- slot picker ---------- */
.pickwrap{position:fixed;inset:0;background:rgba(18,18,18,.28);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;}
.pickwrap[hidden]{display:none;}
.pickbox{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  width:min(620px,100%);max-height:78vh;display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(69,17,63,.22);overflow:hidden;}
.pickhead{padding:15px 18px 12px;border-bottom:1px solid var(--hairline);}
.pickhead h3{font-size:14px;font-weight:600;}
.pickhead p{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.picklist{overflow-y:auto;padding:6px;}
.pickitem{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;
  text-align:left;appearance:none;background:none;border:none;font-family:inherit;
  padding:10px 12px;border-radius:8px;cursor:pointer;}
.pickitem:hover,.pickitem:focus-visible{background:var(--plum-wash);outline:none;}
.pickitem .pl{font-size:13px;color:var(--ink);}
.pickitem .pd{font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.pickitem .ps{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-faint);}
.pickfoot{padding:12px 16px;border-top:1px solid var(--hairline);display:flex;gap:10px;align-items:center;}
.pickfoot input{flex:1;font-family:inherit;font-size:13px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.pickfoot input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}

@media (max-width:820px){ .focus{grid-template-columns:1fr;} .lane{border-left:none;border-top:1px solid var(--hairline);} .lane:first-child{border-top:none;} }

/* ---------- the drawer ---------- */
details.drawer{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  margin-top:26px;overflow:hidden;}
details.drawer > summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap;}
details.drawer > summary::-webkit-details-marker{display:none;}
details.drawer > summary::before{content:'▸';color:var(--plum);font-size:11px;margin-right:2px;}
details.drawer[open] > summary::before{content:'▾';}
details.drawer > summary:hover{background:var(--plum-wash);}
details.drawer > summary:focus-visible{outline:2px solid var(--plum);outline-offset:-2px;}
.dtitle{font-size:13px;font-weight:600;}
.dmeta{font-size:11px;color:var(--ink-faint);}
.drawerbody{padding:2px 18px 22px;border-top:1px solid var(--hairline);}
.drawerbody .shead:first-child{margin-top:20px;}

/* ---------- top bar: picker + log launcher ---------- */
.topright{display:flex;align-items:center;gap:14px;}
.loglaunch{white-space:nowrap;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tabsel{display:inline-flex;align-items:center;padding:0 4px;}
.tabsel select{font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink-muted);
  background:transparent;border:none;border-bottom:2px solid transparent;padding:10px 6px;cursor:pointer;}
.tabsel select:hover{color:var(--ink);}
.tabsel.on select{color:var(--plum);border-bottom-color:var(--plum);font-weight:600;}
.tabsel select:focus-visible{outline:2px solid var(--plum);outline-offset:-2px;border-radius:3px;}

/* ---------- side log panel ---------- */
.logpanel{position:fixed;inset:0;background:rgba(18,18,18,.26);z-index:70;display:flex;justify-content:flex-end;}
.logpanel[hidden]{display:none;}
.logpanel-inner{background:var(--raised);width:min(400px,100%);height:100%;overflow-y:auto;
  border-left:1px solid var(--hairline);box-shadow:-14px 0 40px rgba(69,17,63,.16);
  display:flex;flex-direction:column;}
.lp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--hairline);}
.lp-head h2{font-size:15px;font-weight:600;}
.lp-form{padding:18px 20px 24px;display:flex;flex-direction:column;gap:5px;}
.lp-form label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:11px;}
.lp-form select,.lp-form input,.lp-form textarea{font-family:inherit;font-size:13px;
  padding:9px 11px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);width:100%;}
.lp-form textarea{resize:vertical;line-height:1.5;}
.lp-form select:focus,.lp-form input:focus,.lp-form textarea:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.lp-foot{display:flex;align-items:center;gap:12px;margin-top:20px;}
.lp-hint{font-size:11px;color:var(--ink-faint);}
body.panel-open{overflow:hidden;}
@media (max-width:520px){ .topright .asof{display:none;} }

/* ---------- grid: keyboard focus, client column, new rows ---------- */
table.grid td.cell.cur{box-shadow:inset 0 0 0 2px var(--plum);background:var(--plum-wash);}
table.grid td.clientcol{font-weight:600;white-space:nowrap;color:var(--plum);}
table.grid tr.newrow td{background:var(--plum-wash);}
table.grid tr.newrow td.cell{box-shadow:inset 0 0 0 1px var(--plum-edge);}
.tbtns{display:flex;gap:8px;align-items:center;}
.gridhint b{color:var(--ink-muted);font-weight:500;font-family:"IBM Plex Mono",monospace;font-size:10.5px;}
.gridwrap{position:relative;max-height:72vh;overflow:auto;}
table.grid thead th{position:sticky;top:0;z-index:3;}

/* ---------- client chip row (replaces the picker) ---------- */
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:14px 2px 4px;margin-bottom:20px;
  scrollbar-width:thin;}
.chiprow::-webkit-scrollbar{height:6px;}
.chiprow::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:3px;}
.cchip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;
  padding:7px 13px;border-radius:99px;border:1px solid var(--hairline);background:var(--raised);
  color:var(--ink-muted);font-size:12.5px;font-weight:500;}
.cchip:hover{border-color:var(--plum);color:var(--plum);}
.cchip.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600;}
.cchip:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.cchip .cn{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:9px;background:var(--crit);color:#fff;font-size:10px;font-weight:600;}
.cchip.on .cn{background:#fff;color:var(--plum);}

/* ---------- chipsets in the log panel ---------- */
.chipset{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px;}
.chipset-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.chip-btn{appearance:none;font-family:inherit;font-size:12px;padding:7px 12px;border-radius:99px;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink-muted);cursor:pointer;
  white-space:nowrap;}
.chip-btn:hover{border-color:var(--plum);color:var(--plum);}
.chip-btn.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600;}
.chip-btn:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.chip-btn.big{border-radius:9px;padding:12px 10px;font-size:12.5px;white-space:normal;line-height:1.35;}
.lp-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:14px;display:block;}
.lp-form > .lp-label:first-child{margin-top:0;}

/* ---------- everything-logged stream ---------- */
.logsearch{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.logsearch input[type=search]{flex:1;min-width:240px;font-family:inherit;font-size:13px;
  padding:9px 12px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);}
.logsearch input[type=search]:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.logcount{font-size:11.5px;color:var(--ink-faint);}
.tnavlabel{font-size:11px;color:var(--ink-faint);align-self:center;margin-right:4px;}
.tchip .chipn{display:inline-block;margin-left:6px;font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;color:var(--ink-faint);}
.tchip.on .chipn{color:rgba(255,255,255,.75);}
table.logtable td{vertical-align:top;border-bottom:1px solid var(--hairline);padding:10px 11px;}
table.logtable tbody tr:hover td{background:var(--plum-wash);}
.lg-date{white-space:nowrap;font-size:11px;color:var(--ink-faint);width:1%;}
.lg-client{white-space:nowrap;font-weight:600;color:var(--plum);font-size:12px;width:1%;}
.lg-kind{width:1%;}
.kindtag{display:inline-block;white-space:nowrap;font-size:10px;letter-spacing:.04em;
  padding:2px 7px;border-radius:4px;background:var(--surface-2);color:var(--ink-muted);}
.lg-head{max-width:640px;}
.lg-head .lh{display:block;font-size:12.5px;color:var(--ink);line-height:1.4;}
.lg-head .ld{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.lg-status{white-space:nowrap;width:1%;}
.lg-open{width:1%;white-space:nowrap;}
.opengrid{font-size:11px;color:var(--plum);text-decoration:none;opacity:.6;}
tr:hover .opengrid{opacity:1;text-decoration:underline;}
.lg-empty{padding:30px 12px!important;text-align:center;color:var(--ink-muted);font-size:13px;}

/* ---------- ClickUp links ---------- */
.cu{display:inline-flex;align-items:center;gap:3px;color:var(--plum);text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;}
.cu:hover{text-decoration:underline;}
.cu .cux{font-size:9px;opacity:.6;}

/* ---------- section nav ---------- */
.secnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;flex-wrap:wrap;
  padding:9px 0;margin-bottom:14px;background:var(--ground);border-bottom:1px solid var(--hairline);}
.secnav a{font-size:11.5px;padding:6px 11px;border-radius:99px;text-decoration:none;
  color:var(--ink-muted);white-space:nowrap;}
.secnav a:hover{background:var(--surface-2);color:var(--ink);}
.secnav a.on{background:var(--plum-wash);color:var(--plum);font-weight:600;}
.secnav a:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}

/* ---------- state of mind ---------- */
.stateStrip{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:22px;
  padding:16px 18px;border:1px solid var(--hairline);border-radius:11px;
  background:var(--raised);box-shadow:var(--shadow);margin-bottom:26px;}
.ss-label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  display:block;margin-bottom:9px;}
.st-set{display:flex;flex-wrap:wrap;gap:5px;}
.st-btn{appearance:none;font-family:inherit;font-size:11.5px;padding:6px 11px;border-radius:99px;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink-muted);cursor:pointer;}
.st-btn:hover{border-color:var(--plum);color:var(--plum);}
.st-btn:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.st-btn.on{color:#fff;font-weight:600;}
.st-btn.st-good.on{background:var(--good);border-color:var(--good);}
.st-btn.st-info.on{background:var(--plum-muted);border-color:var(--plum-muted);}
.st-btn.st-warn.on{background:var(--warn);border-color:var(--warn);}
.st-btn.st-crit.on{background:var(--crit);border-color:var(--crit);}
.st-btn.st-mute.on{background:var(--ink-faint);border-color:var(--ink-faint);}
.ss-now{font-size:13px;color:var(--ink-muted);}
.ss-now b{color:var(--ink);}
.ss-note{display:block;font-size:12px;color:var(--ink-muted);margin-top:4px;font-style:italic;}
.ss-sug{font-size:12px;color:var(--ink-faint);margin-top:7px;}
.ss-input{width:100%;margin-top:10px;font-family:inherit;font-size:12.5px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.ss-input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
@media (max-width:760px){ .stateStrip{grid-template-columns:1fr;} }

/* ---------- layers ---------- */
.layer{margin:0 0 34px;scroll-margin-top:64px;}
.lhead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--hairline);}
.lnum{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--plum);color:#fff;font-size:11px;font-weight:600;}
.lhead h2{font-size:17px;font-weight:600;letter-spacing:-.012em;}
.lwhy{font-size:11.5px;color:var(--ink-faint);}
.lsub{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin:24px 0 10px;}
.muted-note{font-size:12.5px;color:var(--ink-faint);padding:12px 2px;}

/* ---------- kpi table ---------- */
table.kpigrid tbody th{text-align:left;white-space:nowrap;font-weight:600;font-size:12px;
  padding:9px 11px;border-bottom:1px solid var(--hairline);color:var(--ink);}
table.kpigrid td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
table.kpigrid th{text-align:right;}
table.kpigrid thead th:first-child,table.kpigrid tbody th{text-align:left;}
.part{display:inline-block;margin-left:6px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;background:var(--surface-2);color:var(--ink-faint);}

/* ---------- comments ---------- */
.cmt-form{display:flex;gap:9px;align-items:flex-start;margin-bottom:14px;}
.cmt-form textarea{flex:1;font-family:inherit;font-size:13px;line-height:1.5;padding:10px 12px;
  border:1px solid var(--hairline-strong);border-radius:8px;background:var(--ground);
  color:var(--ink);resize:vertical;}
.cmt-form textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.cmt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.cmt{padding:10px 12px;border-radius:8px;border:1px solid transparent;}
.cmt:hover{background:var(--surface-2);}
.cmt.pinned{background:var(--plum-wash);border-color:var(--plum-edge);}
.cmt-meta{display:flex;align-items:center;gap:9px;margin-bottom:3px;}
.cmt-when{font-size:10px;color:var(--ink-faint);}
.cmt-who{font-size:10px;color:var(--ink-faint);}
.cmt-pin,.cmt-del{appearance:none;background:none;border:none;cursor:pointer;font-size:12px;
  color:var(--hairline-strong);padding:0 3px;line-height:1;margin-left:auto;}
.cmt-del{margin-left:0;font-size:15px;}
.cmt-pin:hover,.cmt-del:hover{color:var(--plum);}
.cmt-pin.on{color:var(--plum);}
.cmt-body{font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;}
/* In the Strategy Room the notes sit in a card like the three blocks above
   them, and a reply is indented under the note it answers. */
.cmtwrap{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;padding:16px;}
.cmt-kids{list-style:none;margin:6px 0 0 0;padding:0 0 0 16px;
  border-left:2px solid var(--hairline);display:flex;flex-direction:column;gap:2px;}
.cmt-reply .cmt-body{font-size:12.5px;color:var(--ink-muted);}

/* ---------- documents ---------- */
.docform{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;
  padding:14px 15px;border:1px dashed var(--hairline-strong);border-radius:10px;background:var(--surface-2);}
.df-row{display:flex;gap:8px;flex-wrap:wrap;}
.df-row input,.df-row select{font-family:inherit;font-size:12.5px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.df-row input[name=title]{flex:2;min-width:180px;}
.df-row input[name=url]{flex:1;min-width:240px;}
.df-row input:focus,.df-row select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.doclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.doc{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:8px;}
.doc:hover{background:var(--surface-2);}
.doc-main{flex:1;min-width:0;}
.doc-t{font-size:13px;font-weight:500;color:var(--plum);text-decoration:none;display:inline-flex;gap:4px;align-items:center;}
.doc-t:hover{text-decoration:underline;}
.doc-m{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.doc-s{font-size:12px;color:var(--ink-muted);margin-top:5px;line-height:1.45;}
.doc-s.pending{color:var(--ink-faint);font-style:italic;font-size:11px;}

/* ---------- banners ---------- */
.banner{font-size:12.5px;line-height:1.5;padding:12px 15px;border-radius:9px;margin-bottom:16px;
  color:var(--ink-muted);}
.banner b{color:var(--ink);}
.banner-soon{background:var(--plum-wash);border:1px solid var(--plum-edge);}
.banner-cu{background:var(--surface-2);border:1px solid var(--hairline);}

/* ---------- comms + task lists ---------- */
.cmlist,.tklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.cm,.tk{display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:8px;font-size:12.5px;}
.cm:hover,.tk:hover{background:var(--surface-2);}
.cm-when,.tk-due{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;min-width:74px;}
.cm-ch{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--surface-2);
  color:var(--ink-muted);white-space:nowrap;}
.cm-sub,.tk-t{flex:1;min-width:0;color:var(--ink);}
.cm-who{color:var(--ink-faint);font-size:11px;}
.cm-ago{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;}
.tk-kind{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--surface-2);
  color:var(--ink-muted);white-space:nowrap;}
.tk-d{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.tk-cu{white-space:nowrap;}
.noticket{font-size:10px;color:var(--ink-faint);font-style:italic;}

/* focus block stands alone when the trend strip is suppressed */
.layer .focus{border-radius:11px;}
.df-bulkbox{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.df-bulkbox[hidden]{display:none;}
.df-bulkbox textarea{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.55;
  padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:7px;
  background:var(--ground);color:var(--ink);resize:vertical;}
.df-bulkbox textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.df-hint{font-size:11px;color:var(--ink-faint);align-self:center;}

/* ---------- client header: tracked markers ---------- */
.stateStrip{display:flex;flex-direction:column;gap:0;padding:0;}
/* minmax(0,1fr), not 1fr. A bare 1fr track is minmax(auto,1fr), and its auto
   minimum is the min-content width of what is inside -- here a history row with
   a date input, a pill, a nowrap "typed 9 Sept 26 11:31" and a delete button,
   none of which shrink. The track refused to go below that, the entry spilled
   out of the card to the right, and the whole page grew a horizontal scrollbar.
   min-width:0 on the children is the same fix one level down: a grid and a flex
   item both default to a minimum of their content. */
.mrow,.upwrap{display:grid;grid-template-columns:minmax(210px,290px) minmax(0,1fr);
  gap:22px;padding:14px 18px;border-bottom:1px solid var(--hairline);}
.mrow-l,.mrow-r,.upwrap > *{min-width:0;}
.mrow:first-child{border-radius:11px 11px 0 0;}
.upwrap{border-bottom:none;}
.mrow-l .ss-label{margin-bottom:8px;}
.ss-hint{font-size:11.5px;color:var(--ink-faint);margin-left:6px;}
.stateStrip .ss-sug{padding:0 18px 12px;margin:0;border-bottom:1px solid var(--hairline);}
.stateStrip .ss-input{margin:12px 18px;width:calc(100% - 36px);}
.mhist{margin-top:8px;}
.mhist summary{font-size:11.5px;color:var(--plum);cursor:pointer;list-style:none;}
.mhist summary::-webkit-details-marker{display:none;}
.mhist summary::before{content:'▸ ';}
.mhist[open] summary::before{content:'▾ ';}
.mhlist{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.mh{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font-size:12px;}
.mh:hover{background:var(--surface-2);}
.mh-date{font-family:"IBM Plex Mono",monospace;font-size:11px;padding:3px 6px;
  border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink-muted);}
.mh-date:hover{border-color:var(--hairline-strong);background:var(--ground);}
.mh-date:focus{outline:none;border-color:var(--plum);background:var(--ground);}
.mh-note{flex:1;min-width:0;color:var(--ink-muted);font-size:11.5px;}
.mh-typed{font-size:9.5px;color:var(--ink-faint);white-space:nowrap;}

/* ---------- kpi header strip ---------- */
.kh{border-top:1px solid var(--hairline);padding:12px 18px;background:var(--surface);}
.kh-empty{font-size:12.5px;color:var(--ink-faint);}
.khhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.khnav{appearance:none;border:1px solid var(--hairline-strong);background:var(--ground);
  color:var(--ink-muted);border-radius:5px;cursor:pointer;font-size:10px;padding:3px 8px;}
.khnav:hover:not(:disabled){border-color:var(--plum);color:var(--plum);}
.khnav:disabled{opacity:.35;cursor:default;}
.khmon{font-size:12px;font-weight:600;min-width:96px;}
.khnote{font-size:10.5px;color:var(--ink-faint);margin-left:auto;}
.khbody{position:relative;}
.khmonth{display:flex;gap:30px;flex-wrap:wrap;}
.khmonth[hidden]{display:none;}
.khc{display:flex;flex-direction:column;gap:2px;}
.khl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.khv{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}

/* ---------- upsell opportunities ---------- */
.upform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.upform input{font-family:inherit;font-size:12.5px;padding:8px 11px;border-radius:7px;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink);}
.upform input[name=upsell_offer]{flex:1;min-width:200px;}
.upform input[name=estimated_value]{width:100px;}
.upform input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.uplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.up{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;font-size:12.5px;}
.up:hover{background:var(--surface-2);}
.up-when{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;}
.up-t{flex:1;min-width:0;}
.up-v{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;}
.up-ago{font-size:10px;color:var(--ink-faint);}
@media (max-width:760px){ .mrow,.upwrap{grid-template-columns:1fr;} }

/* ---------- marker notes and history ---------- */
.mnote{margin-top:9px;}
textarea.mh-note{flex:1;min-width:0;font-family:inherit;font-size:11.5px;padding:4px 7px;
  border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink-muted);
  resize:none;overflow:hidden;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  display:block;}
textarea.mh-note:hover{border-color:var(--hairline-strong);background:var(--ground);}
textarea.mh-note:focus{outline:none;border-color:var(--plum);background:var(--ground);color:var(--ink);}
textarea.mnote{resize:none;overflow:hidden;line-height:1.5;font-family:inherit;display:block;width:100%;}
/* a wrapped note makes the row tall -- keep the date and stamp on its first line */
.mh{align-items:flex-start;}
.mh .mh-date,.mh .pill{margin-top:2px;}
.mh .mh-typed,.mh .mh-del{margin-top:5px;}
.mhist summary{padding:2px 0;}

/* ---------- editable KPI header figures ---------- */
.khv.cell{cursor:text;border-radius:5px;padding:1px 4px;margin:-1px -4px;}
.khv.cell:hover{box-shadow:inset 0 0 0 1px var(--plum-edge);}
.khv.cell.cur{box-shadow:inset 0 0 0 2px var(--plum);background:var(--plum-wash);}
.khv.cell.saved{box-shadow:inset 0 0 0 2px var(--good);}
.khv.cell.failed{box-shadow:inset 0 0 0 2px var(--crit);}
.khv .cellinput{font-size:14px;width:110px;}
.khc-act{margin-left:auto;justify-content:center;}
.khtable{margin-top:12px;border-top:1px solid var(--hairline);padding-top:10px;}
.khtable summary{font-size:11.5px;color:var(--plum);cursor:pointer;list-style:none;}
.khtable summary::-webkit-details-marker{display:none;}
.khtable summary::before{content:'▸ ';}
.khtable[open] summary::before{content:'▾ ';}
.khtable .gridwrap{margin-top:10px;max-height:340px;}

/* ---------- erase buttons on rows ---------- */
.row-erase{opacity:0;transition:opacity .12s;}
li:hover .row-erase,.khmonth:hover .row-erase,.row-erase:focus-visible{opacity:1;}
@media (hover:none){ .row-erase{opacity:.5;} }

/* ---------- contract & root folder ---------- */
.clinks{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px;}
.clink{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;
  padding:7px 13px;border-radius:99px;border:1px dashed var(--hairline-strong);
  background:transparent;color:var(--ink-faint);cursor:pointer;text-decoration:none;}
.clink:hover{border-color:var(--plum);color:var(--plum);}
.clink.on{border-style:solid;border-color:var(--plum-edge);background:var(--plum-wash);
  color:var(--plum);font-weight:600;cursor:pointer;}
.clink-wrap{display:inline-flex;align-items:center;gap:4px;}
.clink-edit{appearance:none;background:none;border:none;color:var(--ink-faint);
  font-size:10px;cursor:pointer;text-decoration:underline;}
.clink-edit:hover{color:var(--plum);}
.clink:focus-visible,.clink-edit:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}

/* ---------- flag rows ---------- */
.flagbox{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  box-shadow:var(--shadow);margin-bottom:8px;}
.flagbox .mrow:last-child{border-bottom:none;}
.fl-inputs{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.fl-inputs .ss-input{margin:0;flex:1;min-width:180px;width:auto;}

/* ---------- event cards ---------- */
.evform{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:14px 15px;
  border:1px dashed var(--hairline-strong);border-radius:10px;background:var(--surface-2);}
.evform input,.evform select{font-family:inherit;font-size:12.5px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.evform input[name=name]{flex:2;min-width:200px;}
.evform input[name=link]{flex:1;min-width:200px;}
.evform input[name=detail]{width:100%;}
.evform input:focus,.evform select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.ev{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;
  padding:14px 15px;box-shadow:var(--shadow);}
.ev-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ev-type{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}
.ev-top .row-erase{margin-left:auto;}
.ev h4{font-size:13.5px;font-weight:600;line-height:1.35;}
.ev h4 a{color:var(--plum);text-decoration:none;}
.ev h4 a:hover{text-decoration:underline;}
.ev-when{font-size:10.5px;color:var(--ink-faint);margin-top:3px;}
.ev-d{font-size:12px;color:var(--ink-muted);margin-top:7px;line-height:1.45;}

/* ---------- change log ---------- */
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.cl-i{display:flex;align-items:baseline;gap:12px;padding:8px 10px;border-radius:6px;font-size:12px;}
.cl-i:hover{background:var(--surface-2);}
.cl-when{font-size:10px;color:var(--ink-faint);white-space:nowrap;min-width:104px;}
.cl-what{color:var(--ink-muted);min-width:0;}
.cl-v{flex:1;min-width:0;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-who{font-size:9.5px;color:var(--ink-faint);}

/* ---------- events in the lane card language ---------- */
.evwrap{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  box-shadow:var(--shadow);padding:10px 12px 12px;}
ol.evslots{gap:1px;margin-bottom:10px;}
.ev-slot{grid-template-columns:16px 1fr auto;}
.ev-name{font-size:13px;font-weight:500;color:var(--ink);line-height:1.35;}
.ev-name a{color:var(--plum);text-decoration:none;display:inline-flex;gap:3px;align-items:center;}
.ev-name a:hover{text-decoration:underline;}
.evwrap .evform{margin:0;padding:11px 12px;border-radius:9px;}
.evwrap .df-row input[name=name]{flex:2;min-width:170px;}
.evwrap .df-row input[name=detail]{flex:2;min-width:200px;}
.evwrap .df-row input[name=link]{flex:1;min-width:160px;}

/* sub-headings inside a layer */
.lhint{font-size:11.5px;color:var(--ink-faint);margin:0 0 12px;}
.layer .gridwrap{margin-bottom:6px;}

/* ---------- hours allocated ---------- */


.hoursbox:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}




/* ---------- portfolio counters ---------- */
.pcounters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:11px;
  overflow:hidden;margin-bottom:16px;}
.pc{background:var(--raised);padding:14px 15px;display:flex;flex-direction:column;gap:2px;}
.pc-v{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;}
.pc-l{font-size:11.5px;color:var(--ink);font-weight:500;}
.pc-n{font-size:10.5px;color:var(--ink-faint);}

/* ---------- client mix ---------- */
.mixbox{display:flex;flex-direction:column;gap:9px;padding:13px 15px;margin-bottom:16px;
  border:1px solid var(--hairline);border-radius:11px;background:var(--raised);}
.mixrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.mixlabel{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);min-width:86px;}
.mixchips{display:flex;gap:6px;flex-wrap:wrap;}
.mixchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:11.5px;border:1px solid transparent;}
.mixchip b{font-variant-numeric:tabular-nums;font-weight:700;}

/* ---------- portfolio table ---------- */
table.ptable tbody th{text-align:left;padding:11px;border-bottom:1px solid var(--hairline);
  white-space:nowrap;}
table.ptable td{border-bottom:1px solid var(--hairline);padding:11px 9px;white-space:nowrap;}
table.ptable tbody tr:hover td,table.ptable tbody tr:hover th{background:var(--plum-wash);}
.pname{font-size:13.5px;font-weight:600;color:var(--plum);text-decoration:none;display:block;}
.pname:hover{text-decoration:underline;}
.pmeta{display:block;font-size:10px;color:var(--ink-faint);margin-top:1px;font-weight:400;}
.pchall{white-space:normal;max-width:280px;font-size:11.5px;color:var(--ink-muted);}

/* ---------- notes on focus slots ---------- */
.inote{appearance:none;background:none;border:none;cursor:pointer;font-size:10px;
  color:var(--hairline-strong);padding:2px 4px;line-height:1;border-radius:4px;}
.inote:hover{color:var(--plum);background:var(--plum-wash);}
.inote.has{color:var(--plum);}
.inote:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}
.slot:hover .inote{color:var(--ink-faint);}
.slot:hover .inote.has{color:var(--plum);}
.notebox{width:min(560px,100%);}
.notectx{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.notebody{padding:14px 18px;}
.notebody textarea{width:100%;font-family:inherit;font-size:13.5px;line-height:1.55;
  padding:11px 13px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);resize:vertical;}
.notebody textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.notebox .pickfoot{justify-content:flex-start;}
.notebox .pickfoot .lp-hint{margin-left:auto;}

/* ---------- picker: label and detail were running together ---------- */
.pickitem .pl{display:block;}
.pickitem .pd{display:block;margin-top:2px;}
.pickitem > span:first-child{min-width:0;}

/* ---------- note field inside the picker ---------- */
.picknote{padding:12px 18px 4px;border-top:1px solid var(--hairline);}
.picknote label{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;}
.picknote label span{text-transform:none;letter-spacing:0;font-size:10.5px;opacity:.8;}
.picknote textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.5;
  padding:9px 11px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);resize:vertical;}
.picknote textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}

/* ---------- editable slot label ---------- */
.slotlabel{display:block;font-size:13px;font-weight:500;color:var(--ink);line-height:1.35;
  cursor:text;border-radius:4px;padding:1px 3px;margin:-1px -3px;}
.slotlabel:hover{box-shadow:inset 0 0 0 1px var(--plum-edge);}
.slotlabel:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}
.slotinput{width:100%;font-family:inherit;font-size:13px;font-weight:500;padding:3px 6px;
  border:1px solid var(--plum);border-radius:5px;background:var(--ground);color:var(--ink);}
.slotinput:focus{outline:none;box-shadow:0 0 0 3px var(--plum-wash);}
.iswap{appearance:none;background:none;border:none;cursor:pointer;font-size:11px;
  color:var(--hairline-strong);padding:2px 4px;line-height:1;border-radius:4px;}
.iswap:hover{color:var(--plum);background:var(--plum-wash);}
.iswap:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}
.slot:hover .iswap{color:var(--ink-faint);}
.iswap.muted{color:var(--ink-faint);font-style:italic;font-size:12px;padding:0;}
.iswap.muted:hover{color:var(--plum);background:none;text-decoration:underline;}

/* ---------- focus slots, tidied ---------- */
/* Pinned is shown by the number, not a background wash -- the striping made
   three lanes of mixed pinned/suggested rows look broken. */
.slot .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint);
  padding-top:2px;transition:none;}
.slot.is-pinned .n{color:var(--plum);font-weight:600;}


/* Controls stay out of the way until you want them. A note that exists is
   information, so its dot is always visible. */
.slotacts{display:flex;align-items:center;gap:2px;padding-top:1px;}
.slotacts .iswap,.slotacts .ipin{opacity:0;transition:opacity .12s;}
.slot:hover .slotacts .iswap,.slot:hover .slotacts .ipin,
.slot:focus-within .slotacts .iswap,.slot:focus-within .slotacts .ipin{opacity:1;}

.slotacts .inote{opacity:0;transition:opacity .12s;}
.slot:hover .slotacts .inote,.slot:focus-within .slotacts .inote{opacity:1;}
.slotacts .inote.has{opacity:1;}
@media (hover:none){ .slotacts .iswap,.slotacts .ipin,.slotacts .inote{opacity:.55;} }

.iswap,.inote,.ipin{width:20px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border-radius:5px;font-size:11px;}
.iswap:hover,.inote:hover,.ipin:hover{background:var(--plum-wash);color:var(--plum);}

.slot .body{gap:2px;}
.slotlabel{font-size:12.5px;line-height:1.4;}
.slot .det{font-size:10px;line-height:1.35;}
.slot-empty{min-height:52px;}
.iswap.muted{width:auto;height:auto;justify-content:flex-start;}

/* keep the three lanes visually level */
ol.slots{gap:1px;}
.lane{display:flex;flex-direction:column;}

/* ---------- reporting commentary ---------- */
.rep-form{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.rep-form textarea{width:100%;font-family:inherit;font-size:13.5px;line-height:1.55;
  padding:11px 13px;border:1px solid var(--hairline-strong);border-radius:8px;
  background:var(--ground);color:var(--ink);resize:vertical;}
.rep-form textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.rep-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.rep-foot input[type=date]{font-family:inherit;font-size:12.5px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.replist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.rep{display:grid;grid-template-columns:106px 1fr auto auto;gap:12px;align-items:baseline;
  padding:11px 10px;border-top:1px solid var(--hairline);}
.rep:hover{background:var(--surface-2);}
.rep-date{font-family:"IBM Plex Mono",monospace;font-size:11px;padding:3px 6px;
  border:1px solid transparent;border-radius:5px;background:transparent;color:var(--plum);font-weight:600;}
.rep-date:hover{border-color:var(--hairline-strong);background:var(--ground);}
.rep-date:focus{outline:none;border-color:var(--plum);background:var(--ground);}
.rep-body{font-size:13.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;}
.rep-typed{font-size:9.5px;color:var(--ink-faint);white-space:nowrap;}

/* ---------- add-a-row forms ---------- */
.addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 4px;
  padding:11px 12px;border:1px dashed var(--hairline-strong);border-radius:9px;
  background:var(--surface-2);}
.addrow input,.addrow select{font-family:inherit;font-size:12.5px;padding:8px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.addrow input[type=text]{flex:1;min-width:170px;}
.addrow input:focus,.addrow select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}

/* ---------- everything-open filters ---------- */
#pendClients .tchip,#pendKinds .tchip{appearance:none;font-family:inherit;cursor:pointer;}
#pendTable tbody tr[hidden]{display:none;}

/* ---------- strategy vs delivery gaps ---------- */
.gapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.gapblock{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  box-shadow:var(--shadow);padding:14px 16px;}
.gaphead{display:flex;align-items:baseline;gap:9px;padding-bottom:9px;margin-bottom:6px;
  border-bottom:1px solid var(--hairline);}
.gaphead h3{font-size:12.5px;font-weight:600;letter-spacing:-.005em;}
.gapn{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--crit);background:var(--crit-wash);padding:1px 7px;border-radius:99px;}
.gaplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.gapi{padding:7px 0;border-top:1px solid var(--hairline);font-size:12px;}
.gapi:first-child{border-top:none;}
.gapc{display:inline-block;font-size:10.5px;font-weight:600;color:var(--plum);
  text-decoration:none;margin-right:7px;}
.gapc:hover{text-decoration:underline;}
.gapt{color:var(--ink);}
.gapd{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.gapmore{color:var(--ink-faint);font-style:italic;font-size:11px;}

/* client names were inheriting the uppercase from the header rule */
table.ptable tbody th{text-transform:none;letter-spacing:0;font-size:inherit;color:var(--ink);}
table.grid tbody th{text-transform:none;letter-spacing:0;}

/* eight counters in a seven-wide grid left an orphan; four across sits evenly */
.pcounters{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .pcounters{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pcounters{grid-template-columns:1fr;} }

/* ---------- reporting cadence tables ---------- */
table.rptable td{border-bottom:1px solid var(--hairline);padding:9px 10px;vertical-align:top;}
table.rptable tbody tr:hover td{background:var(--plum-wash);}
.rp-when{white-space:nowrap;font-size:11px;color:var(--ink-muted);width:1%;}
.rp-check{width:1%;text-align:center;}
.tick{color:var(--good);font-size:14px;font-weight:700;}
.untick{color:var(--hairline-strong);}
.rp-text{font-size:12px;color:var(--ink-muted);max-width:420px;white-space:normal;}
.rp-typed{font-size:9.5px;color:var(--ink-faint);white-space:nowrap;}
.rpform input[type=text]{flex:1;min-width:200px;}
.rpform input[type=url]{flex:1;min-width:170px;}

/* the hours box was taller than the link buttons beside it */
.clinks{align-items:stretch;}


.clink,.clink-wrap{align-self:stretch;display:inline-flex;align-items:center;}

/* ---------- pods in the client bar ---------- */


.podbtn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:inherit;
  padding:7px 13px;border-radius:99px;border:1px solid var(--hairline-strong);
  background:var(--surface-2);color:var(--ink-muted);font-size:12px;font-weight:600;cursor:pointer;}
.podbtn:hover{border-color:var(--plum);color:var(--plum);}

.podbtn:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}


.podgroup.open 
.cchip-add{border-style:dashed;color:var(--ink-faint);}
.cchip-add:hover{border-style:solid;}
.podcell{font-size:11px;color:var(--ink-faint);white-space:nowrap;}

/* ---------- add a client ---------- */
.addclient{margin-bottom:16px;border:1px dashed var(--hairline-strong);border-radius:11px;
  background:var(--surface-2);overflow:hidden;}
.addclient summary{cursor:pointer;padding:11px 16px;font-size:12.5px;font-weight:600;
  color:var(--plum);list-style:none;}
.addclient summary::-webkit-details-marker{display:none;}
.addclient[open] summary{border-bottom:1px solid var(--hairline);}
.addclient .addrow{border:none;background:transparent;margin:0;}
.addclient .gridhint{padding:0 16px 12px;margin:0;}

/* ---------- the guide ---------- */
.gdoc{max-width:860px;}
.gtop{padding-bottom:22px;border-bottom:1px solid var(--hairline);margin-bottom:30px;}
.gtop h1{font-size:31px;font-weight:600;letter-spacing:-.028em;margin-bottom:10px;}
.glede{font-size:16px;line-height:1.6;color:var(--ink-muted);max-width:62ch;}
.gmeta{font-size:11px;color:var(--ink-faint);margin-top:10px;}
.gsec{margin-bottom:38px;}
.gsec h2{font-size:17px;font-weight:600;letter-spacing:-.012em;
  padding-bottom:9px;margin-bottom:16px;border-bottom:1px solid var(--hairline);}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px;}
.gcard{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  padding:15px 17px;box-shadow:var(--shadow);}
.gcard h3{font-size:13px;font-weight:600;color:var(--plum);margin-bottom:6px;}
.gcard p{font-size:12.5px;line-height:1.55;color:var(--ink-muted);}
table.gtable tbody th{text-align:left;font-weight:600;font-size:12.5px;white-space:nowrap;
  padding:11px;border-bottom:1px solid var(--hairline);text-transform:none;letter-spacing:0;}
table.gtable td{padding:11px;border-bottom:1px solid var(--hairline);font-size:12.5px;
  line-height:1.55;color:var(--ink-muted);}
.grules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;}
.grules li{font-size:13px;line-height:1.6;color:var(--ink-muted);}
.grules b{color:var(--ink);}
.grules code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;}
.gnote{font-size:13px;line-height:1.65;color:var(--ink-muted);max-width:70ch;margin-bottom:10px;}
.gnext{display:flex;flex-direction:column;gap:16px;}
.gstep{display:grid;grid-template-columns:34px 1fr;gap:16px;background:var(--raised);
  border:1px solid var(--hairline);border-radius:11px;padding:18px 20px;box-shadow:var(--shadow);}
.gsnum{width:26px;height:26px;border-radius:50%;background:var(--plum);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.gstep h3{font-size:14.5px;font-weight:600;margin-bottom:8px;}
.gstep p{font-size:12.5px;line-height:1.6;color:var(--ink-muted);margin-bottom:8px;max-width:66ch;}
.gstep p b{color:var(--ink);}
.gstep code{font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;}
.gcaveat{border-left:2px solid var(--warn-edge);padding-left:11px;background:var(--warn-wash);
  padding:8px 11px;border-radius:0 6px 6px 0;}

.podempty{font-size:11px;color:var(--ink-faint);font-style:italic;padding:7px 4px;}
#gapGrid .gapblock[hidden],#gapGrid .gapi[hidden]{display:none;}
#gapNav .tchip{appearance:none;font-family:inherit;cursor:pointer;}

/* ---------- pod switcher: its own row, aubergine, never scrolls away ---------- */
.podswitch{display:flex;gap:6px;flex-wrap:wrap;padding:14px 0 0;margin-bottom:8px;}
.podbtn{font-family:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;
  padding:7px 15px;border-radius:7px;border:1px solid var(--hairline-strong);
  background:var(--surface-2);color:var(--ink-muted);}
.podbtn:hover{border-color:var(--aubergine);color:var(--aubergine);}
.podbtn.on{background:var(--aubergine);border-color:var(--aubergine);color:#fff;}
.podbtn.pod-empty{border-style:dashed;opacity:.6;}
.podbtn.pod-empty.on{opacity:1;border-style:solid;}
.podbtn:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.podpanel{display:flex;gap:7px;align-items:center;}
.podpanel[hidden]{display:none;}
.podempty{font-size:11.5px;color:var(--ink-faint);font-style:italic;}

/* ---------- standing account facts beside the hours ---------- */
.factbox{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-family:inherit;padding:6px 13px;border-radius:9px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);
  justify-content:center;min-width:78px;}
.factbox:hover{border-color:var(--plum);}
.factbox:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.factbox.unset{border-style:dashed;border-color:var(--hairline-strong);
  background:transparent;color:var(--ink-faint);}
.fb-v{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;}
.factbox.unset .fb-v{font-size:14px;color:var(--ink-faint);}
.fb-l{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}

/* ---------- performance table: ten rows by default ---------- */
/* A row is about 38px and the sticky header about 32px. */
.gridwrap.capped{overflow-y:auto;}
.gridwrap.capped::after{content:'';position:sticky;bottom:0;left:0;display:block;height:26px;
  margin-top:-26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--raised));}
.showall{margin-top:10px;font-size:11.5px;}

/* ---------- agreed KPI targets ---------- */
.ktwrap{margin-bottom:14px;}
.kt-cur{font-size:13px;color:var(--ink-muted);line-height:1.7;margin-bottom:10px;}
.kt-cur b{color:var(--ink);}
.ktform input[type=number]{width:104px;}
.ktform input[name=note]{flex:1;min-width:160px;}
.ktlist{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;}
.kt-row{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:6px;
  font-size:11.5px;flex-wrap:wrap;}
.kt-row:hover{background:var(--surface-2);}
.kt-when{color:var(--plum);font-weight:600;white-space:nowrap;}
.kt-v{color:var(--ink-muted);white-space:nowrap;}
.kt-note{flex:1;min-width:0;color:var(--ink-faint);font-style:italic;}
.kt-typed{font-size:9.5px;color:var(--ink-faint);}

/* ---------- months that missed their KPIs ---------- */
table.kpigrid tr.rowmiss th.monthmiss{color:var(--crit);font-weight:700;
  box-shadow:inset 3px 0 0 var(--crit);}
.missdot{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;
  margin-left:6px;padding:0 4px;border-radius:8px;background:var(--crit);color:#fff;
  font-size:9px;font-weight:700;vertical-align:1px;}
table.kpigrid td.missed{background:var(--crit-wash);color:var(--crit);font-weight:600;}
table.kpigrid tr.rowmiss:hover td{background:var(--crit-wash);}

/* ---------- the standing facts strip ---------- */
.clinks{position:relative;display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-bottom:18px;}
.factbox{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1px;font-family:inherit;padding:7px 14px;border-radius:9px;cursor:pointer;min-width:84px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);}
.factbox:hover{border-color:var(--plum);}
.factbox:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.factbox.unset{border-style:dashed;border-color:var(--hairline-strong);
  background:transparent;color:var(--ink-faint);}
.factbox.hoursbox{border-color:var(--plum-edge);background:var(--plum-wash);color:var(--plum);}
.factbox.hoursbox.unset{background:transparent;border-color:var(--hairline-strong);color:var(--ink-faint);}
.fb-v{font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap;}
.factbox.unset .fb-v{font-size:15px;font-weight:400;}
.fb-l{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.factbox.hoursbox .fb-l{color:inherit;opacity:.75;}
.clink-wrap{display:inline-flex;align-items:stretch;gap:4px;}
.linkbox{min-width:auto;padding:7px 11px;}
.linkbox .fb-v{font-size:11px;font-weight:500;}

/* ---------- the popover ---------- */
.topedit{position:absolute;top:100%;left:0;z-index:40;margin-top:7px;}
.topedit[hidden]{display:none;}
.te-box{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  box-shadow:0 14px 40px rgba(69,17,63,.18);padding:15px 17px;min-width:290px;max-width:440px;}
.te-head{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;}
.te-box input,.te-box select{width:100%;font-family:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--hairline-strong);border-radius:7px;background:var(--ground);color:var(--ink);}
.te-box input:focus,.te-box select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}
.te-hint{font-size:10.5px;color:var(--ink-faint);margin-top:7px;}
.te-foot{display:flex;gap:8px;margin-top:13px;}
.te-multi{display:flex;flex-wrap:wrap;gap:6px;}
.te-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;
  border:1px solid var(--hairline-strong);font-size:12px;cursor:pointer;color:var(--ink-muted);}
.te-chip:hover{border-color:var(--plum);color:var(--plum);}
.te-chip input{width:auto;padding:0;margin:0;accent-color:var(--plum);}
.te-chip:has(input:checked){background:var(--plum);border-color:var(--plum);color:#fff;}

/* ---------- the sticky section bar carries the client name ---------- */
.secnav{align-items:center;gap:4px;padding:10px 0;
  box-shadow:0 1px 0 var(--hairline);}
.secname{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
  font-size:14px;font-weight:700;color:var(--plum);letter-spacing:-.015em;
  padding-right:14px;margin-right:6px;border-right:1px solid var(--hairline);}
.secmeta{font-size:10px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);}
@media (max-width:640px){ .secmeta{display:none;} .secname{padding-right:9px;} }

/* ---------- status trail shown, not archived ---------- */
.mhlist.open{margin-top:10px;}
.mhlist .mh.extra{display:none;}
.mhlist.all .mh.extra{display:flex;}
.mh-more{margin-top:7px;}
.mhlist .mh:first-child{background:var(--plum-wash);}
.mhlist .mh:first-child .pill{font-weight:600;}
.st-set.multi{margin-bottom:8px;}
.st-save{margin-top:2px;}
.st-hint{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:6px;}
.secstate{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-right:6px;
  padding-right:10px;border-right:1px solid var(--hairline);}
.secstate .pill{font-size:10.5px;}
.secnote{font-size:11px;color:var(--ink-muted);font-style:italic;max-width:26ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:900px){.secnote{display:none;}}
.mhlist .mh:first-child .mh-note{border-color:var(--plum);background:var(--surface);}

/* ---------- call summaries (Communications) ---------- */
/* A table, not a list: the dates line up in one column so the gap between
   calls is visible by looking down it. */
.cstable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:12px;}
.cstable thead th{text-align:left;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;padding:0 10px 8px;border-bottom:1px solid var(--hairline);}
.cstable tbody td{padding:10px;border-bottom:1px solid var(--hairline);vertical-align:top;}
.cstable tbody tr:last-child td{border-bottom:none;}
.cstable tbody tr:hover td{background:var(--plum-wash);}
.cs-when{white-space:nowrap;color:var(--ink-muted);width:1%;}
.cs-t a{color:var(--plum);text-decoration:none;font-weight:500;}
.cs-t a:hover{text-decoration:underline;text-underline-offset:2px;}
.cs-n{display:block;font-size:11px;color:var(--ink-faint);margin-top:3px;}
.cs-ago{white-space:nowrap;color:var(--ink-faint);font-size:10.5px;width:1%;text-align:right;}
.cs-x{width:1%;}
.cs-del{opacity:.35;}
.cstable tr:hover .cs-del{opacity:1;}
.cs-empty{color:var(--ink-muted);font-size:12.5px;padding:14px 10px!important;line-height:1.5;}
.csform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:12px;
  border-top:1px dashed var(--hairline-strong);}
.csform input{font-family:inherit;font-size:12.5px;padding:8px 10px;border-radius:7px;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink);}
.csform input[type=date]{width:150px;}
.csform input[name=title]{flex:1 1 200px;min-width:160px;}
.csform input[name=url]{flex:2 1 260px;min-width:200px;}
.csform input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}

/* ---------- what was said on the call ---------- */
.cn-row td{padding:0 10px 12px!important;border-bottom:1px solid var(--hairline);}
.cn-row:hover td{background:transparent!important;}
.cnotes summary{cursor:pointer;font-size:11.5px;color:var(--plum);list-style:none;
  display:inline-flex;align-items:center;gap:6px;padding:4px 0;}
.cnotes summary::-webkit-details-marker{display:none;}
.cnotes summary::before{content:"\25B8";font-size:9px;transition:transform .12s;}
.cnotes[open] summary::before{transform:rotate(90deg);}
.cnotes summary:hover{text-decoration:underline;text-underline-offset:2px;}
.cnbody{margin-top:9px;padding:12px 14px;border-radius:9px;background:var(--surface-2);}
table.cntable{width:100%;border-collapse:collapse;font-size:12px;}
table.cntable th{text-align:left;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;padding:0 8px 7px;border-bottom:1px solid var(--hairline);}
table.cntable td{padding:9px 8px;border-bottom:1px solid var(--hairline);vertical-align:top;}
table.cntable tr:last-child td{border-bottom:none;}
.cn-t{color:var(--ink-muted);width:56%;line-height:1.5;}
.cn-r{color:var(--ink);font-weight:500;line-height:1.5;}
.cnh{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:500;margin:14px 0 7px;}
.cnlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.cn-c{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:6px 8px;
  border-top:1px solid var(--hairline);font-size:12px;}
.cn-c:first-child{border-top:none;}
.cn-when{color:var(--ink-faint);font-size:10px;white-space:nowrap;padding-top:1px;}
.cn-b{color:var(--ink);line-height:1.45;}

/* ---------- markers: the judgement rows and their trail ----------
   These were the worst-looking part of the page. Three causes:
   input.mh-note had no border rule, so it fell back to the browser's default
   black box; the "Why?" input was a full-width empty slab; and the newest
   trail row was filled pink and outlined plum, which shouted louder than the
   answer above it. Quiet by default, definite when you are in it. */

/* the "why" / link inputs under the answer */
.fl-inputs{gap:9px;margin-top:10px;max-width:760px;}
.ss-input{margin-top:0;font-size:12px;padding:7px 10px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--ground);color:var(--ink);}
.ss-input::placeholder{color:var(--ink-faint);}
.ss-input:hover{border-color:var(--hairline-strong);}
.ss-input:focus{background:var(--surface);border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}

/* the trail */
.mhlist{gap:1px;}
.mh{gap:10px;padding:5px 9px;border-radius:7px;border:1px solid transparent;
  min-width:0;flex-wrap:wrap;}
/* The note takes the rest of the line and pushes the stamp to a second one
   rather than pushing the row out of the card. */
.mh .mh-note,.mh textarea.mh-note{flex:1 1 200px;}
.mh:hover{background:var(--surface-2);}
.mh-date{width:104px;flex:none;font-size:10.5px;padding:3px 5px;
  color:var(--ink-faint);}
.mh-date::-webkit-calendar-picker-indicator{opacity:.35;cursor:pointer;}
.mh-date:hover::-webkit-calendar-picker-indicator{opacity:.8;}
.mh .pill{flex:none;}

/* the note: an underline that becomes a field, not a permanent box */
.mh-note,textarea.mh-note{flex:1;min-width:0;font-family:inherit;font-size:11.5px;
  color:var(--ink-muted);background:transparent;padding:4px 7px;border-radius:6px;
  border:1px solid transparent;border-bottom-color:var(--hairline);}
.mh-note::placeholder{color:var(--ink-faint);font-style:italic;}
.mh-note:hover{border-color:var(--hairline);background:var(--ground);}
.mh-note:focus{outline:none;border-color:var(--plum);background:var(--surface);
  color:var(--ink);box-shadow:0 0 0 3px var(--plum-wash);}

.mh-typed{flex:none;}
.mh-del{flex:none;opacity:.3;}
.mh:hover .mh-del{opacity:1;}

/* newest first: mark it with an edge, not a wash */
.mhlist .mh:first-child{background:transparent;border-color:var(--hairline);
  box-shadow:inset 3px 0 0 var(--plum-edge);}
.mhlist .mh:first-child:hover{background:var(--surface-2);}
.mhlist .mh:first-child .mh-note{border-color:transparent;
  border-bottom-color:var(--hairline-strong);background:transparent;}
.mhlist .mh:first-child .mh-note:hover{border-color:var(--hairline);background:var(--ground);}
.mhlist .mh:first-child .mh-note:focus{border-color:var(--plum);background:var(--surface);}

@media (max-width:760px){
  .mh{flex-wrap:wrap;}
  .mh-note{flex:1 1 100%;order:5;}
  .mh-date{width:96px;}
}

/* ---------- state of mind, three layers ----------
   Side by side because they answer different questions about the same
   relationship and are meant to be compared at a glance. Each has its own
   hue so you always know which one you are reading: the numbers, our read,
   their words. The colours identify the layer -- they never mean good or bad,
   which is what the values inside them are for. */
.lvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 6px;}
@media (max-width:1000px){ .lvgrid{grid-template-columns:1fr;} }

.lv{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  padding:15px 16px;box-shadow:var(--shadow);border-top:3px solid var(--hairline-strong);
  min-width:0;}
.lv header{margin-bottom:11px;}
.lv .lv-num{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;display:inline-block;
  margin-bottom:6px;}
.lv h4{font-size:13.5px;font-weight:600;letter-spacing:-.01em;}
.lv .lv-why{font-size:11px;color:var(--ink-faint);margin-top:3px;line-height:1.45;}

/* level 1 -- the numbers. aubergine: measured, impersonal */
.lv1{border-top-color:var(--aubergine);}
.lv1 .lv-num{background:rgba(69,17,63,.08);color:var(--aubergine);}
/* level 2 -- our read. plum, the house colour */
.lv2{border-top-color:var(--plum);}
.lv2 .lv-num{background:var(--plum-wash);color:var(--plum);}
/* level 3 -- their words. teal, distinct from ours */
.lv3{border-top-color:var(--good);}
.lv3 .lv-num{background:var(--good-wash);color:var(--good);}

.lv-when{font-size:9.5px;color:var(--ink-faint);margin-bottom:8px;}
.lv-sub{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  font-family:"IBM Plex Mono",monospace;margin:12px 0 5px;}
.lv-list{list-style:none;margin:0;padding:0;}
.lv-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;border-top:1px solid var(--hairline);font-size:12px;}
.lv-k:first-child{border-top:none;}
.lv-n{color:var(--ink-muted);}
.lv-v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lv-v.ok{color:var(--good);} .lv-v.bad{color:var(--crit);} .lv-v.warn{color:var(--warn);}
.lv-v.void{font-weight:400;}
.lv-empty{font-size:12px;color:var(--ink-muted);line-height:1.5;}

/* the marker rows sit inside a narrow column now, so they stack */
.lv .mrow{grid-template-columns:1fr;gap:9px;padding:0;border:none;background:none;}
.lv .mrow-l .ss-label{margin-bottom:6px;}
.lv .fl-inputs{max-width:none;}
.lv .ss-now{font-size:12.5px;}
.lv .ss-sug{font-size:11px;color:var(--ink-faint);margin-top:10px;line-height:1.45;}
.lv .mh{padding:4px 6px;gap:7px;font-size:11px;}
.lv .mh-date{width:88px;font-size:10px;}
.lv .mh-typed{display:none;}
.lv-stale{font-size:10.5px;color:var(--warn);background:var(--warn-wash);
  border:1px solid var(--warn-edge);border-radius:6px;padding:6px 8px;margin:6px 0 2px;
  line-height:1.45;}
.lv-stale b{font-weight:600;}

/* ---------- three layers: fitting the marker rows into a narrow column ----------
   The trail row is a single flex line built for a full-width card. At a third
   of the width the date input clipped, the note wrapped under the pill with its
   underline running past it, and the erase button drifted. Inside a layer panel
   the row becomes two lines: date and answer on top, the note its own block. */
.lv .mrow{display:block;}
.lv .st-set{gap:4px;}
.lv .st-btn{font-size:10.5px;padding:4px 9px;}
.lv .ss-now{margin-top:9px;font-size:12px;}
.lv .ss-hint{display:block;margin:2px 0 0;font-size:10.5px;}
.lv .fl-inputs{margin-top:7px;}
.lv .ss-input{font-size:11.5px;padding:6px 9px;}

.lv .mhlist{margin-top:9px;gap:4px;}
.lv .mh{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:
    "date pill del" "note note note";
  gap:5px 7px;align-items:center;padding:6px 8px;}
.lv .mh .mh-date{grid-area:date;width:auto;min-width:0;margin:0;font-size:10px;padding:2px 3px;}
.lv .mh .pill{grid-area:pill;justify-self:start;margin:0;}
.lv .mh .mh-del{grid-area:del;margin:0;}
.lv .mh .mh-note{grid-area:note;width:100%;font-size:11px;padding:3px 5px;margin:0;}
.lv .mh .cu{display:none;}

/* the newest row keeps its edge, but the inset shadow clipped oddly on a grid */
.lv .mhlist .mh:first-child{box-shadow:none;border-left:3px solid var(--plum-edge);
  padding-left:6px;}
.lv3 .mhlist .mh:first-child{border-left-color:var(--good-edge);}

.lv .mh-more{font-size:10.5px;padding:3px 9px;}

/* ---------- state strip: one gutter for everything in it ----------
   .stateStrip has padding:0 while every row inside it carries its own
   14px 18px. So the rows' content sat 19px in, while the section heading and
   the three layer panels sat 1px from the card edge -- nothing lined up and
   the heading looked stuck to the border. The gutter belongs to the container:
   put it there once and stop the rows paying for it twice. */
.stateStrip{padding:16px 18px 4px;}
.stateStrip > .mrow,
.stateStrip > .upwrap,
.stateStrip > .kh{padding-left:0;padding-right:0;}
.stateStrip > .lsub{margin-top:0;}
.stateStrip .ss-sug{padding:0 0 12px;}
.stateStrip .ss-input{margin:12px 0;width:100%;}

/* the dividers now run to the gutter rather than bleeding off the card, which
   reads as deliberate next to the inset panels above them */
.stateStrip > .kh{border-top-color:var(--hairline);}

/* ---------- call summary: the summary, and the transcript ---------- */
.cs-kind{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:3px;
  background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--hairline);
  margin-left:7px;vertical-align:1px;}
.cn-sum p{font-size:12.5px;color:var(--ink);line-height:1.55;overflow-wrap:anywhere;}
.cn-by{display:block;font-size:9.5px;color:var(--ink-faint);margin-top:5px;}
.cn-none{font-size:12px;color:var(--ink-muted);}

/* the transcript is long by nature: it gets its own scroll box rather than
   pushing everything below it off the page */
.tsc summary{cursor:pointer;font-size:11.5px;color:var(--plum);list-style:none;
  display:inline-flex;align-items:center;gap:7px;padding:3px 0;}
.tsc summary::-webkit-details-marker{display:none;}
.tsc summary::before{content:"\25B8";font-size:9px;transition:transform .12s;}
.tsc[open] summary::before{transform:rotate(90deg);}
.tsc-n{color:var(--ink-faint);font-size:9.5px;}
.tsc-body{margin:8px 0 0;max-height:340px;overflow:auto;padding:11px 13px;
  border-radius:8px;background:var(--raised);border:1px solid var(--hairline);
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;
  color:var(--ink-muted);white-space:pre-wrap;overflow-wrap:anywhere;}

.csedit{margin-top:14px;padding-top:12px;border-top:1px dashed var(--hairline-strong);
  display:flex;flex-direction:column;gap:4px;}
.cse-l{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-family:"IBM Plex Mono",monospace;margin-top:6px;}
.csedit textarea{width:100%;font-family:inherit;font-size:12px;line-height:1.5;
  padding:8px 10px;border-radius:7px;border:1px solid var(--hairline-strong);
  background:var(--ground);color:var(--ink);resize:vertical;}
.csedit textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.cse-foot{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.cse-hint{font-size:10.5px;color:var(--ink-faint);}

/* ---------- the cleaned tables behind a report ---------- */
.dslist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:0;}
.ds{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:9px 10px;border-top:1px solid var(--hairline);}
.ds:first-child{border-top:none;}
.ds:hover{background:var(--raised);border-radius:7px;}
.ds-main{min-width:0;display:flex;flex-direction:column;gap:2px;}
.ds-l{font-size:12.5px;font-weight:600;color:var(--ink);}
.ds-m{font-size:9.5px;color:var(--ink-faint);}
.ds-d{font-size:11px;color:var(--ink-muted);line-height:1.45;margin-top:2px;}
.ds-s{font-size:9.5px;color:var(--ink-faint);font-family:"IBM Plex Mono",monospace;}
.ds-dl{text-decoration:none;white-space:nowrap;}

/* ---------- relationship phase ----------
   Top of the page because it frames everything under it: the same number means
   different things at day 20 and day 400. */
.rp{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden;}
.rp-track{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--hairline);}
.rp-step{padding:9px 12px;text-align:center;border-left:1px solid var(--hairline);
  background:var(--surface-2);}
.rp-step:first-child{border-left:none;}
.rp-n{display:block;font-size:11.5px;font-weight:600;color:var(--ink-faint);}
.rp-w{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:2px;}
.rp-step.past{background:var(--surface);}
.rp-step.past .rp-n{color:var(--ink-muted);}
.rp-step.on{background:var(--plum);}
.rp-step.on .rp-n{color:#fff;}
.rp-step.on .rp-w{color:rgba(255,255,255,.72);}
@media (max-width:760px){ .rp-track{grid-template-columns:repeat(2,1fr);} }

.rp-body{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:22px;
  padding:16px 18px;}
@media (max-width:820px){ .rp-body{grid-template-columns:1fr;gap:14px;} }
.rp-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);}
.rp-now h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:3px;}
.rp-days{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:4px;}
.rp-style{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 20px;}
.rp-style dt{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;}
.rp-style dd{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.5;}
.rp-unknown{grid-template-columns:1fr;}
.rp-unknown p{font-size:12.5px;color:var(--ink-muted);line-height:1.55;}
.rp-unknown b{color:var(--ink);}

.rp-onb{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:13px;margin-top:2px;border-top:1px solid var(--hairline);}
.rp-obar{flex:1 1 220px;min-width:180px;height:9px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--hairline);overflow:hidden;}
.rp-obar span{display:block;height:100%;background:var(--good);}
.rp-ostat{font-size:11.5px;color:var(--ink-muted);flex:2 1 300px;line-height:1.45;}
.rp-ostat b{color:var(--ink);font-weight:600;}

/* ---------- the onboarding checklist ---------- */
.obwrap{display:flex;flex-direction:column;gap:18px;}
.ob-g h4{font-size:12px;font-weight:600;margin-bottom:7px;}
.ob-g h4 .mono{font-size:9.5px;color:var(--ink-faint);font-weight:400;margin-left:7px;}
.ob-l{list-style:none;margin:0;padding:0;background:var(--raised);border:1px solid var(--hairline);
  border-radius:10px;overflow:hidden;}
.ob-i{display:grid;grid-template-columns:140px minmax(0,1fr) 78px 74px;gap:12px;align-items:start;
  padding:9px 13px;border-top:1px solid var(--hairline);}
.ob-i:first-child{border-top:none;}
.ob-i:hover{background:var(--plum-wash);}
.ob-sel{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 6px;border-radius:99px;cursor:pointer;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink-faint);width:100%;}
.ob-sel:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.ob-sel.done{background:var(--good-wash);color:var(--good);border-color:var(--good-edge);font-weight:600;}
.ob-sel.prog{background:var(--warn-wash);color:var(--warn);border-color:var(--warn-edge);font-weight:600;}
.ob-sel.wait{background:var(--crit-wash);color:var(--crit);border-color:var(--crit-edge);font-weight:600;}
.ob-title{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.ob-why{display:block;font-size:11px;color:var(--ink-muted);line-height:1.45;margin-top:2px;}
.ob-own{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;text-align:center;background:var(--surface-2);
  color:var(--ink-muted);border:1px solid var(--hairline);white-space:nowrap;}
.ob-own.you{background:var(--plum-wash);color:var(--plum);border-color:var(--plum-edge);}
.ob-when{font-size:9.5px;color:var(--ink-faint);text-align:right;white-space:nowrap;padding-top:4px;}
@media (max-width:760px){
  .ob-i{grid-template-columns:1fr auto;}
  .ob-sel{grid-column:1;width:auto;justify-self:start;}
  .ob-t{grid-column:1/-1;}
}

/* ---------- the three client views ---------- */
.vnav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 20px;}
@media (max-width:800px){ .vnav{grid-template-columns:1fr;} }
.vtab{position:relative;display:block;text-decoration:none;padding:11px 14px;border-radius:10px;
  background:var(--raised);border:1px solid var(--hairline);box-shadow:var(--shadow);}
.vtab:hover{border-color:var(--plum-edge);}
.vtab .vt-l{display:block;font-size:13px;font-weight:600;color:var(--ink);}
.vtab .vt-h{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4;}
.vtab.on{background:var(--plum);border-color:var(--plum);}
.vtab.on .vt-l{color:#fff;}
.vtab.on .vt-h{color:rgba(255,255,255,.72);}
.vtab .vt-n{position:absolute;top:9px;right:11px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--warn);color:#fff;font-size:10.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;}
.vtab.on .vt-n{background:#fff;color:var(--plum);}
.vtab:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}

/* the phase as a chip on the views that are not Phase & strategy */
.pchip{display:inline-flex;align-items:center;gap:5px;text-decoration:none;margin-left:8px;
  font-size:11px;padding:2px 9px;border-radius:99px;border:1px solid var(--plum-edge);
  background:var(--plum-wash);color:var(--plum);}
.pchip:hover{border-color:var(--plum);}
.pchip b{font-weight:600;}
.pchip-none{background:var(--surface-2);color:var(--ink-faint);border-color:var(--hairline);}

/* a link from one view to the thing it depends on in another */
.xlink{font-size:11.5px;color:var(--ink-faint);margin-top:8px;}
.xlink a{color:var(--plum);}

/* the three view titles read as section names, so they are set as labels */
.vtab .vt-l{text-transform:uppercase;letter-spacing:.06em;font-size:12px;}

/* ---------- the landing state ----------
   Arriving at a client opens nothing. The two markers and the account facts sit
   above the three doors, so the page says what this account is before it asks
   where you want to look. */
.cmarkers,.cfacts{margin-bottom:14px;}
.cfacts{padding-top:4px;}
.vland{font-size:12px;color:var(--ink-faint);text-align:center;padding:6px 0 2px;}
.cview[data-view="landing"] .vtab{padding:16px 16px 18px;}
.cview[data-view="landing"] .vtab::after{content:"Open \2192";display:block;margin-top:8px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--plum);}
.cview[data-view="landing"] .vtab:hover::after{text-decoration:underline;}
/* an open section says so, and clicking it again closes back to the landing */
.vtab.on::after{content:"Close \00D7";display:block;margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.72);}

/* ---------- the landing grid ----------
   What this account is on the left, how it is doing on the right. */
/* A real grid rather than two stacked columns: paired blocks share a row, so
   the happiness index and the chart end on the same line instead of drifting
   apart by whatever their content happens to weigh. */
.cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);gap:14px;
  margin-bottom:14px;align-items:stretch;}
@media (max-width:900px){ .cgrid{grid-template-columns:1fr;} }
.cgrid > *{min-width:0;margin-bottom:0;}
/* the left column keeps its narrow-column treatment */
.cgrid > *:nth-child(odd){grid-column:1;}
.cgrid > *:nth-child(even){grid-column:2;}
@media (max-width:900px){ .cgrid > *{grid-column:1!important;} }

.ctgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:11px;overflow:hidden;box-shadow:var(--shadow);}
.ct{background:var(--raised);padding:12px 14px;display:flex;flex-direction:column;gap:1px;}
.ct-v{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
.ct-l{font-size:11.5px;font-weight:600;color:var(--ink-muted);}
.ct-w{font-size:10px;color:var(--ink-faint);line-height:1.35;}
/* one counter answers a question rather than counting, so it is set as a word
   at the weight of a number, not as a number */
.ct-t{font-size:19px;}
.ct-t.ct-yes{color:var(--good);}
.ct-t.ct-no{color:var(--crit);}
.ct-t.ct-none{color:var(--ink-faint);font-size:15px;}

.ktrack{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  padding:13px 15px 10px;box-shadow:var(--shadow);}
.ktrack h4{font-size:12.5px;font-weight:600;line-height:1.4;}
.ktrack h4.ok{color:var(--good);} .ktrack h4.bad{color:var(--crit);}
.ktrack-none h4{color:var(--ink-muted);}
.ktrack-none p{font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:4px;}
.ktsvg{width:100%;height:auto;display:block;margin-top:8px;overflow:visible;}
.kt-fill{fill:var(--plum);opacity:.08;}
.kt-l{fill:none;stroke:var(--plum);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.kt-t{fill:none;stroke:var(--crit);stroke-width:1.2;stroke-dasharray:4 3;opacity:.7;}
.kt-d{fill:var(--plum);stroke:var(--raised);stroke-width:1.5;}
.kt-d.bad{fill:var(--crit);}
.kt-d.last{stroke-width:2;}
.kt-x{font-family:"IBM Plex Mono",monospace;font-size:8.5px;fill:var(--ink-faint);}
.kt-x.kt-r{text-anchor:end;}
.kt-leg{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--ink-faint);
  font-family:"IBM Plex Mono",monospace;margin-top:4px;flex-wrap:wrap;}
.kt-k{display:inline-block;width:11px;height:2px;border-radius:2px;}
.kt-k1{background:var(--plum);} .kt-k2{background:var(--crit);opacity:.7;margin-left:8px;}

/* The marker and upsell rows were built for a full-width card. In the left
   column they get half that, so they stack the same way they do inside a
   layer panel rather than squeezing the answer into a sliver. */
.cgrid > *:nth-child(odd) .mrow,.cgrid > *:nth-child(odd) .upwrap{display:block;padding:13px 16px;}
.cgrid > *:nth-child(odd) .mrow-l .ss-label{margin-bottom:6px;}
.cgrid > *:nth-child(odd) .ss-now{margin-top:9px;}
.cgrid > *:nth-child(odd) .fl-inputs,.cgrid > *:nth-child(odd) .ss-input{max-width:none;}
.cgrid > *:nth-child(odd) .st-set{gap:5px;}
.cgrid > *:nth-child(odd) .mhlist{margin-top:8px;}
.cgrid > *:nth-child(odd) .mh{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"date pill del" "note note note";gap:5px 7px;align-items:center;}
.cgrid > *:nth-child(odd) .mh .mh-date{grid-area:date;width:auto;font-size:10px;}
.cgrid > *:nth-child(odd) .mh .pill{grid-area:pill;justify-self:start;}
.cgrid > *:nth-child(odd) .mh .mh-del{grid-area:del;}
.cgrid > *:nth-child(odd) .mh .mh-note{grid-area:note;width:100%;font-size:11px;}
.cgrid > *:nth-child(odd) .mh .mh-typed{display:none;}
.kt-v{font-family:"IBM Plex Mono",monospace;font-size:8.5px;fill:var(--ink-muted);
  font-variant-numeric:tabular-nums;}
.kt-v.bad{fill:var(--crit);}
.kt-v.last{fill:var(--plum);font-weight:600;font-size:9.5px;}

/* ---------- client happiness index, read only ---------- */
.hxwrap{padding:14px 16px;}
.hxhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;}
.hxhead .lsub{margin:0;}
.hx-more{font-size:10.5px;color:var(--plum);text-decoration:none;white-space:nowrap;}
.hx-more:hover{text-decoration:underline;}
table.hxtable{width:100%;border-collapse:collapse;table-layout:fixed;}
.hx-c{vertical-align:top;padding:10px 11px;border-left:1px solid var(--hairline);}
.hx-c:first-child{border-left:none;padding-left:0;}
.hx-n{display:block;font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);}
.hx-t{display:block;font-size:11.5px;font-weight:600;color:var(--ink);margin:2px 0 6px;}
.hx-c .pill{font-size:10.5px;}
.hx-w{display:block;font-size:9px;color:var(--ink-faint);margin-top:5px;}
.hx-1{box-shadow:inset 3px 0 0 var(--aubergine);}
.hx-2{box-shadow:inset 3px 0 0 var(--plum);}
.hx-3{box-shadow:inset 3px 0 0 var(--good);}
.hx-c:first-child{box-shadow:none;border-top:3px solid var(--aubergine);}
.hx-c.hx-2{box-shadow:none;border-top:3px solid var(--plum);}
.hx-c.hx-3{box-shadow:none;border-top:3px solid var(--good);}

/* ---------- upsell opportunities ----------
   Four controls of very different widths. Left to flex they wrapped one per
   line in the narrow column, which made a small form look like a page. It is a
   grid: the offer takes the full width, value and date share the row below,
   and the button sits with them. */
.upwrap .upform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
  align-items:center;margin-bottom:2px;}
.upwrap .upform input,.upwrap .upform select{font-family:inherit;font-size:12.5px;
  padding:8px 10px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--ground);color:var(--ink);min-width:0;}
.upwrap .upform select{font-size:11.5px;}
.upwrap .upform input:hover,.upwrap .upform select:hover{border-color:var(--hairline-strong);}
.upwrap .upform input:focus,.upwrap .upform select:focus{outline:none;background:var(--surface);
  border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.upwrap .upform input[name=estimated_value]{grid-column:1;}
.upwrap .upform select[name=value_type]{grid-column:2;}
.upwrap .upform input[name=entry_date]{grid-column:1;}
.upwrap .upform button{grid-column:2/-1;justify-self:end;}
.upwrap .upform input[name=upsell_offer]{grid-column:1/-1;}
.upwrap .upform button{white-space:nowrap;}
@media (max-width:520px){
  .upwrap .upform{grid-template-columns:1fr 1fr;}
  .upwrap .upform button{grid-column:1/-1;justify-self:start;}
}
/* Two per row under the offer: value and type, then date and the button. A
   single row of four squeezed the button into a tall oval in this column. */
.cgrid > *:nth-child(odd) .upwrap .upform{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

.uplist{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hairline);}
/* The row carries an optional value and now two pills, so a fixed column
   count could not hold it: the tail wraps instead of pushing the offer out. */
.up{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;
  padding:8px 2px;border-bottom:1px solid var(--hairline);font-size:12.5px;}
.up .up-t{flex:1 1 130px;}
.up .pill{flex:0 0 auto;}
.up:last-child{border-bottom:none;}
.up-when{font-size:10px;color:var(--ink-faint);white-space:nowrap;}
.up-t{min-width:0;overflow-wrap:anywhere;color:var(--ink);}
.up-v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.up-ago{font-size:9.5px;color:var(--ink-faint);white-space:nowrap;}
.up .icon{opacity:.3;}
.up:hover .icon{opacity:1;}
@media (max-width:640px){
  .up{grid-template-columns:1fr auto;}
  .up-t{grid-column:1/-1;order:3;}
  .up-ago{display:none;}
}


/* the paired blocks fill their row, which is what makes their bottoms align */
.cgrid > .ktrack,
.cgrid > .stateStrip{display:flex;flex-direction:column;}
/* The counters keep their 2x2. Their rows split the height so the cells fill
   the block rather than leaving the grid's own gap colour showing as a band. */
.cgrid > .ctgrid{grid-auto-rows:1fr;}
.cgrid > .ctgrid .ct{justify-content:center;}
.cgrid > .ktrack .ktsvg{margin-top:auto;}



/* ---------- the three doors read as buttons ----------
   White, like every other card. What makes them read as pressable is the
   contour: a defined edge, a raised bottom lip, and a plum rule down the
   left that fills in on hover. Grey fill made them look disabled. */
.vtab{background:var(--raised);border:1.5px solid var(--hairline-strong);
  box-shadow:0 2px 0 var(--hairline-strong),var(--shadow);
  padding-left:17px;overflow:hidden;
  transition:border-color .12s,box-shadow .12s,transform .06s;}
.vtab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--hairline-strong);transition:background .12s;}
.vtab:hover{border-color:var(--plum);box-shadow:0 2px 0 var(--plum-edge),var(--shadow);}
.vtab:hover::before{background:var(--plum);}
.vtab:active{transform:translateY(2px);box-shadow:0 0 0 var(--hairline-strong),var(--shadow);}
.vtab .vt-l{color:var(--ink);}
.vtab:hover .vt-l{color:var(--plum);}
.vtab.on{background:var(--plum);border-color:var(--plum);box-shadow:var(--shadow);}
.vtab.on::before{background:rgba(255,255,255,.5);}
.vtab.on .vt-l{color:#fff;}


/* ---------- have we ever actually upsold them ----------
   One line above the opportunities, because "what we could sell" reads very
   differently depending on whether anything has ever been sold. */
.upban{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 13px;border-radius:9px;margin-bottom:11px;
  border:1px solid var(--hairline);background:var(--surface-2);}
.upban b{font-size:12px;font-weight:600;letter-spacing:.02em;}
.upban span{font-size:11px;color:var(--ink-muted);}
.upban-none{background:var(--crit-wash);border-color:var(--crit-edge);}
.upban-none b{color:var(--crit);}
.upban-recent{background:var(--info-wash);border-color:var(--info-edge);}
.upban-recent b{color:var(--info);}
.upban-old{background:var(--info-soft-wash);border-color:var(--hairline);}
.upban-old b{color:var(--info-soft);}

/* ---------- creative, under the forecasting answer ---------- */
.crwrap{background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
  box-shadow:var(--shadow);overflow:hidden;}
.crscroll{max-height:320px;overflow:auto;}
.crtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.crtable th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:8px 12px;border-bottom:1px solid var(--hairline);}
.crtable td{padding:9px 12px;border-top:1px solid var(--hairline);vertical-align:middle;}
.crtable tbody tr:first-child td{border-top:none;}
.crtable tbody tr:hover{background:var(--plum-wash);}
.cr-p{font-weight:500;}
.cr-p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--plum-edge);}
.cr-p a:hover{color:var(--plum);}
.cr-t{display:block;font-size:10px;color:var(--ink-faint);margin-top:1px;}
.cr-n{color:var(--ink-faint);}
.cr-due.late{color:var(--crit);font-weight:600;}
.cr-due.soon{color:var(--warn);}
.cr-done td{color:var(--ink-faint);}
.cr-done .cr-p a,.cr-done .cr-p{color:var(--ink-faint);}
.cr-x{width:1%;text-align:right;}
.cr-x .icon{opacity:.3;}
.crtable tr:hover .icon{opacity:1;}
.cr-empty{font-size:11.5px;color:var(--ink-faint);padding:14px 12px;}
.crform{border-top:1px solid var(--hairline);background:var(--ground);padding:10px 12px;
  display:flex;flex-direction:column;gap:8px;}
.crform .df-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.crform input,.crform select{font-family:inherit;font-size:12px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);min-width:0;}
.crform input[type=text],.crform input[type=url]{flex:1 1 180px;}
.crform input:focus,.crform select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}
.crform .df-l{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  color:var(--ink-faint);}
.crform button[type=submit]{margin-left:auto;}


/* ---------- money on the facts bar ----------
   Contract value is typed; the four upsell figures are read from the upsell
   table. The read-only ones are set as plain boxes, not buttons, so nothing
   invites a click that would do nothing. */
.factbox.static{cursor:default;}
.factbox.static:hover{border-color:var(--hairline);}
.factbox.moneybox .fb-v{font-variant-numeric:tabular-nums;}
button.factbox.moneybox{border-color:var(--plum-edge);}
.fb-q{color:var(--warn);font-weight:700;margin-left:2px;}

/* ---------- the control room ----------
   Two questions on one page: can the data be trusted, is the machine alright.
   Findings are cards with a severity edge; the machine is a row of tiles that
   go amber and red on their own thresholds. Severity colour is the semantic
   set (crit / warn / good), never the plum accent -- plum here would say
   "Amersify" where the page needs to say "wrong". */
.verdict{border-radius:11px;padding:18px 20px;margin-bottom:26px;
  border:1px solid var(--hairline);background:var(--raised);box-shadow:var(--shadow);}
.verdict .v-line{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.35;}
.verdict .v-sub{font-size:12.5px;color:var(--ink-muted);margin-top:7px;line-height:1.55;}
.v-good{background:var(--good-wash);border-color:rgba(11,99,87,.22);}
.v-good .v-line{color:var(--good);}
.v-warn{background:var(--warn-wash);border-color:var(--warn-edge);}
.v-warn .v-line{color:var(--warn);}
.v-bad{background:var(--crit-wash);border-color:var(--crit-edge);}
.v-bad .v-line{color:var(--crit);}

.ckgroup{margin-bottom:26px;}
.ckgh{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:7px;margin-bottom:12px;border-bottom:1px solid var(--hairline);}
.ckgh-critical{color:var(--crit);border-bottom-color:var(--crit-edge);}
.ckgh-warn{color:var(--warn);border-bottom-color:var(--warn-edge);}
.ckgh-info{color:var(--ink-faint);}
.ckgh-broken{color:var(--ink);}
.ckstack{display:flex;flex-direction:column;gap:12px;}

.ck{background:var(--raised);border:1px solid var(--hairline);border-left:4px solid var(--hairline-strong);
  border-radius:9px;padding:15px 17px;box-shadow:var(--shadow);}
.ck-critical{border-left-color:var(--crit);}
.ck-warn{border-left-color:var(--warn);}
.ck-info{border-left-color:var(--hairline-strong);}
.ck-broken{border-left-color:var(--ink);}
.ck-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;}
.ck-n{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
  min-width:34px;height:30px;padding:0 8px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--ink);}
.ck-critical .ck-n{background:var(--crit-wash);color:var(--crit);}
.ck-warn .ck-n{background:var(--warn-wash);color:var(--warn);}
.ck-clear .ck-n{background:var(--good-wash);color:var(--good);}
.ck-broken .ck-n{background:var(--ink);color:var(--raised);}
.ck-t h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;}
.ck-why{font-size:12px;color:var(--ink-muted);line-height:1.55;margin-top:4px;max-width:70ch;}

.ck-l{list-style:none;margin:13px 0 0;padding:0;border-top:1px solid var(--hairline);}
.ck-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:8px 0;border-bottom:1px solid var(--hairline);font-size:13px;}
.ck-l li:last-child{border-bottom:none;}
.ck-l a{color:var(--plum);text-decoration:none;font-weight:500;}
.ck-l a:hover{text-decoration:underline;}
.ck-d{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.ck-more{color:var(--ink-faint);font-size:11.5px;}
.ck-fix{font-size:12px;color:var(--ink-muted);margin-top:11px;line-height:1.5;}
.ck-fix b{color:var(--ink);font-weight:600;margin-right:5px;}
.ck-err{font-size:12.5px;color:var(--crit);margin-top:10px;line-height:1.5;}
.ck-err .mono{font-size:11px;color:var(--ink-muted);display:block;margin-top:3px;}

.allclear{font-size:14px;color:var(--good);background:var(--good-wash);
  border:1px solid rgba(11,99,87,.22);border-radius:9px;padding:15px 17px;}
.passed{margin-top:4px;}
.passed summary{font-size:12px;color:var(--ink-faint);cursor:pointer;padding:6px 0;}
.passed summary:hover{color:var(--plum);}
.passed ul{margin:4px 0 0;padding-left:20px;font-size:12.5px;color:var(--ink-muted);
  line-height:1.8;}

.stgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:11px;
  overflow:hidden;box-shadow:var(--shadow);}
@media (max-width:820px){ .stgrid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .stgrid{grid-template-columns:1fr;} }
.st{background:var(--raised);padding:14px 16px;display:flex;flex-direction:column;gap:2px;
  border-top:3px solid transparent;}
.st-good{border-top-color:var(--good);}
.st-warn{border-top-color:var(--warn);background:var(--warn-wash);}
.st-bad{border-top-color:var(--crit);background:var(--crit-wash);}
.st-unknown{border-top-color:var(--hairline-strong);}
.st-v{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;}
.st-bad .st-v{color:var(--crit);}
.st-warn .st-v{color:var(--warn);}
.st-l{font-size:11px;font-weight:600;color:var(--ink-muted);}
.st-n{font-size:10.5px;color:var(--ink-faint);line-height:1.45;}

.ctrl-tail{font-size:11.5px;color:var(--ink-faint);line-height:1.6;margin-top:16px;
  max-width:72ch;}

/* ---------- the gate: sign in, and set a first password ----------
   No nav, no client list, no counts. A page shown to whoever knocks should
   carry no information about what is behind it. */
/* The gate is two columns: everything you do on the left, a picture on the
   right. The picture carries no information, so below 900px it goes rather
   than shrinking into a stripe. */
body.gate{margin:0;background:var(--raised);}
.gate-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  min-height:100vh;}
.gate-left{display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:40px 32px;position:relative;background:var(--raised);}
.gatebox{width:100%;max-width:360px;}
.gatelogo{height:30px;width:auto;display:block;margin-bottom:34px;}
.gate-foot-note{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}

.gate-art{position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--plum-wash) 0%,#F3E4EE 45%,var(--plum-edge) 100%);}
.gate-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:900px){
  .gate-split{grid-template-columns:1fr;}
  .gate-art{display:none;}
  .gate-left{min-height:100vh;}
}
.gatebox h1{font-size:21px;font-weight:600;letter-spacing:-.02em;}
.gatesub{font-size:13px;color:var(--ink-muted);margin-top:6px;line-height:1.55;}
.gatelbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:18px 0 5px;}
.gatein{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--hairline-strong);background:var(--ground);color:var(--ink);}
.gatein:focus{outline:none;background:var(--surface);border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}
.gatebtn{width:100%;margin-top:20px;justify-content:center;padding:11px;}
.gateerr{margin-top:16px;font-size:12.5px;color:var(--crit);background:var(--crit-wash);
  border:1px solid var(--crit-edge);border-radius:7px;padding:9px 12px;}
.gatehint{font-size:11px;color:var(--ink-faint);margin-top:9px;line-height:1.5;}
.gatefoot{font-size:11.5px;color:var(--ink-faint);margin-top:20px;padding-top:14px;
  border-top:1px solid var(--hairline);}

.whoami{display:inline-flex;align-items:baseline;gap:9px;margin-left:14px;font-size:11.5px;}
.wa-n{color:var(--ink-muted);font-weight:600;}
.whoami a{color:var(--ink-faint);text-decoration:none;}
.whoami a:hover{color:var(--plum);text-decoration:underline;}

/* ---------- the control panel ---------- */
.anav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px;}
.anav a{font-size:11.5px;font-weight:600;color:var(--ink-muted);text-decoration:none;
  padding:6px 12px;border-radius:99px;border:1px solid var(--hairline);background:var(--raised);}
.anav a:hover{border-color:var(--plum);color:var(--plum);}

.apanel{margin-bottom:38px;scroll-margin-top:16px;}
.ahead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:9px;
  margin-bottom:16px;border-bottom:1px solid var(--hairline-strong);}
.ahead h2{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.awhy{font-size:11.5px;color:var(--ink-faint);flex:1 1 240px;}

.rolekey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px;}
@media (max-width:760px){ .rolekey{grid-template-columns:1fr;} }
.rk{background:var(--surface-2);border-radius:8px;padding:11px 13px;display:flex;
  flex-direction:column;gap:5px;}
.rk span:last-child{font-size:11px;color:var(--ink-muted);line-height:1.5;}
.rpill{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;}
.rpill-owner{background:var(--plum);color:#fff;}
.rpill-staff{background:var(--good-wash);color:var(--good);border:1px solid rgba(11,99,87,.24);}
.rpill-client{background:var(--info-wash);color:var(--info);border:1px solid var(--info-edge);}

.utable{width:100%;border-collapse:collapse;font-size:13px;}
.utable th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 12px 8px 0;}
.utable td{padding:10px 12px 10px 0;border-top:1px solid var(--hairline);vertical-align:top;}
.utable tr.u-off{opacity:.5;}
.u-n{font-weight:600;}
.u-you{font-size:9.5px;font-weight:600;color:var(--plum);background:var(--plum-wash);
  border-radius:99px;padding:1px 7px;margin-left:7px;text-transform:uppercase;letter-spacing:.06em;}
.u-e{display:block;font-size:11px;font-weight:400;color:var(--ink-faint);margin-top:2px;}
.u-c{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:4px;}
.u-s{font-size:11.5px;color:var(--ink-muted);}
.u-pend{color:var(--warn);}
.u-live{display:block;font-size:10.5px;color:var(--good);margin-top:2px;}
.u-a{text-align:right;white-space:nowrap;}
.u-a .btn{margin-left:5px;}

.uform{margin-top:16px;background:var(--ground);border:1px solid var(--hairline);
  border-radius:9px;padding:13px 14px;}
.uf-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.uf-row input,.uf-row select{font-family:inherit;font-size:12.5px;padding:8px 10px;
  border-radius:7px;border:1px solid var(--hairline);background:var(--raised);color:var(--ink);
  min-width:0;flex:1 1 150px;}
.uf-row input:focus,.uf-row select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}
.uf-row select:disabled{opacity:.45;}
.uf-row button{flex:0 0 auto;}
.uf-hint{font-size:11px;color:var(--ink-faint);margin-top:9px;line-height:1.5;}

.setuplink{margin-top:14px;background:var(--good-wash);border:1px solid rgba(11,99,87,.26);
  border-radius:9px;padding:14px 15px;}
.sl-h{font-size:12.5px;color:var(--good);font-weight:600;}
.sl-row{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap;}
.sl-u{flex:1 1 260px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  background:var(--raised);border:1px solid var(--hairline);border-radius:6px;
  padding:8px 10px;overflow-wrap:anywhere;}

.cgridlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.clcard{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--raised);
  border:1px solid var(--hairline);border-radius:9px;padding:13px 14px;box-shadow:var(--shadow);}
.clcard:hover{border-color:var(--plum);}
.cl-n{font-size:13.5px;font-weight:600;color:var(--ink);}
.cl-m{font-size:10.5px;color:var(--ink-faint);}
.cl-u{font-size:10.5px;color:var(--ink-muted);margin-top:4px;}

.howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px;}
.hw{background:var(--raised);border:1px solid var(--hairline);border-radius:9px;padding:13px 14px;}
.hw h3{font-size:13px;font-weight:600;}
.hw p{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:4px;}
.alink{font-size:12px;margin-top:12px;}
.alink a{color:var(--plum);}

.bulksteps{margin:0 0 14px;padding-left:20px;font-size:13px;color:var(--ink-muted);line-height:1.9;}
.bulksteps b{color:var(--ink);}
.bulkwarn{font-size:12.5px;background:var(--warn-wash);border:1px solid var(--warn-edge);
  border-radius:8px;padding:12px 14px;color:var(--ink-muted);line-height:1.55;}
.bulkwarn b{color:var(--warn);}
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}

.conlist{display:flex;flex-direction:column;gap:8px;}
.con{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden;}
.con-sum{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;
  list-style:none;}
.con-sum::-webkit-details-marker{display:none;}
.con-sum:hover{background:var(--surface-2);}
.con-dot{width:9px;height:9px;border-radius:50%;background:var(--hairline-strong);flex:0 0 auto;}
.con-connected .con-dot{background:var(--good);}
.con-error .con-dot{background:var(--crit);}
.con-n{font-size:14px;font-weight:600;color:var(--ink);}
.con-s{font-size:10.5px;font-weight:600;color:var(--ink-faint);flex:1;}
.con-connected .con-s{color:var(--good);}
.con-error .con-s{color:var(--crit);}
.con-w{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-muted);white-space:nowrap;}
.con-w.on{background:var(--warn-wash);color:var(--warn);border:1px solid var(--warn-edge);}
.con-chev{color:var(--ink-faint);font-size:16px;transition:transform .14s;}
.con[open] .con-chev{transform:rotate(90deg);}
.con[open] .con-sum{border-bottom:1px solid var(--hairline);background:var(--surface-2);}
.con-body{padding:14px 16px 16px;}
.con-d{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:8px;}
.con-n{font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:7px;}
.con-n b{color:var(--ink-muted);}
.con-e{font-size:11px;color:var(--crit);margin-top:7px;}
.con-later{font-size:11px;color:var(--ink-faint);margin-top:10px;font-style:italic;}
.conform{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;}
.conform input{flex:1 1 150px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  padding:8px 10px;border-radius:7px;border:1px solid var(--hairline);
  background:var(--ground);color:var(--ink);min-width:0;}
.conform input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}

.rmboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media (max-width:900px){ .rmboard{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .rmboard{grid-template-columns:1fr;} }
.rmh{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;padding-bottom:7px;
  margin-bottom:10px;border-bottom:2px solid var(--hairline);color:var(--ink-muted);}
.rmh span{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-faint);}
.rmh-now{color:var(--crit);border-bottom-color:var(--crit-edge);}
.rmh-next{color:var(--plum);border-bottom-color:var(--plum-edge);}
.rmh-done{color:var(--good);border-bottom-color:rgba(11,99,87,.26);}
.rmstack{display:flex;flex-direction:column;gap:8px;}
.rm{background:var(--raised);border:1px solid var(--hairline);border-radius:8px;
  padding:11px 12px;box-shadow:var(--shadow);}
.rm-shipped{background:var(--surface-2);box-shadow:none;}
.rm-t{font-size:12.5px;font-weight:600;line-height:1.4;}
.rm-d{font-size:10.5px;color:var(--ink-faint);line-height:1.5;margin-top:5px;}
.rm-f{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
.rm-shipped .rm-s{color:var(--good);}
.rm-empty{font-size:11px;color:var(--ink-faint);}
.rmform{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;background:var(--ground);
  border:1px solid var(--hairline);border-radius:9px;padding:12px 13px;}
.rmform input,.rmform select{font-family:inherit;font-size:12.5px;padding:8px 10px;
  border-radius:7px;border:1px solid var(--hairline);background:var(--raised);color:var(--ink);
  min-width:0;}
.rmform input[name=title]{flex:1 1 240px;}
.rmform input:focus,.rmform select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash);}

/* ---------- backstage ----------
   A different room, not the same room with a different heading. The dashboard
   ground is white with a plum cast; this is cooler and slightly grey, the
   accent is aubergine rather than plum, and section labels are mono. Still
   light -- the brand has no dark mode -- but you can tell at a glance that you
   are behind the scenes rather than looking at client work. */
body.backstage{
  --ground:#F2F1F4;
  --raised:#FFFFFF;
  --surface-2:#EBE9EE;
  --hairline:#DFDCE3;
  --hairline-strong:#C9C4D0;
  --plum:#45113F;              /* aubergine leads back here */
  --plum-wash:#F4EFF3;
  --plum-edge:rgba(69,17,63,.18);
  background:var(--ground);
}
.bsbar{background:var(--aubergine,#45113F);color:#fff;}
.bsbar-in{max-width:1160px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;}
.bs-mark{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;}
.bs-why{font-size:11px;color:rgba(255,255,255,.62);flex:1 1 220px;}
.bs-out{font-size:11.5px;font-weight:600;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:5px 11px;}
.bs-out:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);}
.bs-who{font-size:11px;color:rgba(255,255,255,.62);display:inline-flex;gap:9px;align-items:baseline;}
.bs-who a{color:#fff;text-decoration:none;}
.bs-who a:hover{text-decoration:underline;}
.bsapp{padding-top:20px;}

.bsnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:26px;}
@media (max-width:820px){ .bsnav{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .bsnav{grid-template-columns:1fr;} }
.bstab{position:relative;display:block;text-decoration:none;padding:10px 13px;border-radius:8px;
  background:var(--raised);border:1px solid var(--hairline-strong);
  box-shadow:0 1px 0 var(--hairline-strong);}
.bstab:hover{border-color:var(--aubergine,#45113F);}
.bst-l{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);}
.bst-h{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:3px;}
.bstab.on{background:var(--aubergine,#45113F);border-color:var(--aubergine,#45113F);box-shadow:none;}
.bstab.on .bst-l{color:#fff;}
.bstab.on .bst-h{color:rgba(255,255,255,.66);}
.bst-n{position:absolute;top:8px;right:10px;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--crit);color:#fff;font-size:10px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;}
.bstab.on .bst-n{background:#fff;color:var(--crit);}

/* the one door into it, from the dashboard nav */
.tab-bs{margin-left:auto;color:var(--aubergine,#45113F);font-weight:600;}
.tab-bs::before{content:"⚙";margin-right:6px;opacity:.6;}

/* archiving */
.clcard{position:relative;}
.cl-open{display:flex;flex-direction:column;gap:3px;text-decoration:none;}
.cl-arc{position:absolute;top:10px;right:10px;opacity:0;transition:opacity .12s;}
.clcard:hover .cl-arc,.cl-arc:focus-visible{opacity:1;}
.cl-arch{background:var(--surface-2);border-style:dashed;}
.cl-arch .cl-n{color:var(--ink-muted);}
.archbox{margin-top:18px;}
.archbox summary{font-size:11.5px;color:var(--ink-faint);cursor:pointer;padding:6px 0;}
.archbox summary:hover{color:var(--plum);}

/* the change log */
.lgnote{font-size:12px;color:var(--ink-muted);line-height:1.6;background:var(--raised);
  border:1px solid var(--hairline);border-left:3px solid var(--warn);border-radius:8px;
  padding:13px 15px;margin-bottom:16px;max-width:80ch;}
.lgnote b{color:var(--warn);}
.lgfilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.lgfilter select{font-family:inherit;font-size:12px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);}
.lgchk{font-size:11.5px;color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px;}
.lgcount{font-size:11px;color:var(--ink-faint);margin-bottom:10px;}
.lgtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.lgtable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 12px 8px 0;}
.lgtable td{padding:8px 12px 8px 0;border-top:1px solid var(--hairline);vertical-align:top;}
.lg-recon{background:repeating-linear-gradient(135deg,transparent,transparent 6px,
  rgba(18,18,18,.016) 6px,rgba(18,18,18,.016) 12px);}
.lg-w{white-space:nowrap;color:var(--ink-muted);}
.lg-t{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-faint);}
.lgpill{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;white-space:nowrap;}
.lgpill-create{background:var(--good-wash);color:var(--good);}
.lgpill-update{background:var(--plum-wash);color:var(--plum);}
.lgpill-erase{background:var(--crit-wash);color:var(--crit);}
.lgpill-restore,.lgpill-unarchive{background:var(--info-wash);color:var(--info);}
.lgpill-archive{background:var(--warn-wash);color:var(--warn);}
.lg-tbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-faint);}
.lg-col{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--plum);margin-left:6px;}
.lg-v{display:block;color:var(--ink);margin-top:2px;overflow-wrap:anywhere;}
.lg-c a{color:var(--plum);text-decoration:none;}
.lg-c a:hover{text-decoration:underline;}
.lg-by{white-space:nowrap;color:var(--ink-muted);font-size:11.5px;}
.lg-r{display:block;font-size:9.5px;color:var(--ink-faint);font-style:italic;}
.lg-empty{color:var(--ink-faint);padding:16px 0;}

/* backups */
.bkwarn{background:var(--raised);border:1px solid var(--hairline);border-left:4px solid var(--crit);
  border-radius:9px;padding:15px 17px;margin-bottom:18px;max-width:80ch;}
.bkwarn h3{font-size:13.5px;font-weight:700;color:var(--crit);}
.bkwarn p{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:8px;}
.bkwarn b{color:var(--ink);}
.bktable{width:100%;border-collapse:collapse;font-size:13px;}
.bktable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 12px 8px 0;}
.bktable td{padding:9px 12px 9px 0;border-top:1px solid var(--hairline);}
.bk-w{white-space:nowrap;font-weight:600;}
.bk-t{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  font-weight:400;color:var(--ink-faint);}
.bk-l{font-size:11.5px;color:var(--ink-muted);}
.bk-s{color:var(--ink-faint);font-size:11.5px;}
.bk-a{text-align:right;white-space:nowrap;}
.bk-a .btn{margin-left:5px;}
.bk-restore{border-color:var(--crit-edge)!important;color:var(--crit)!important;}
.bkresult{margin-top:14px;font-size:13px;padding:13px 15px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--hairline);}
.bkresult.good{background:var(--good-wash);border-color:rgba(11,99,87,.26);color:var(--good);}
.bkresult.bad{background:var(--crit-wash);border-color:var(--crit-edge);color:var(--crit);}
.bklog{list-style:none;margin:10px 0 0;padding:0;font-size:11px;color:var(--ink-muted);
  line-height:1.8;}
.bkdown{max-width:520px;margin:20vh auto;text-align:center;font-family:Montserrat,sans-serif;padding:24px;}
.bkdown h1{font-size:22px;font-weight:600;}
.bkdown p{font-size:13.5px;color:rgba(18,18,18,.62);margin-top:10px;line-height:1.6;}

/* ---------- the ClickUp panel ----------
   The switch is the loudest thing here on purpose: it is the one control in
   the system that lets this desk change something inside somebody else's. */
.cupanel{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);}
.cu-head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;}
.cu-head h4{font-size:12.5px;font-weight:600;}
.cu-acct{font-size:11px;color:var(--ink-muted);margin-top:3px;line-height:1.5;}
.cu-acct b{color:var(--ink);}

.cuswitch{display:flex;align-items:center;gap:14px;margin:12px 0;padding:13px 15px;
  border-radius:9px;border:1px solid var(--hairline);background:var(--surface-2);}
.cuswitch.on{background:var(--warn-wash);border-color:var(--warn-edge);}
.cuswitch .cus-t{flex:1;min-width:0;}
.cus-l{display:block;font-size:12.5px;font-weight:600;color:var(--ink);}
.cus-s{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:var(--ink-faint);margin-top:2px;}
.cuswitch.on .cus-s{color:var(--warn);}
.cus-w{font-size:11px;color:var(--ink-muted);line-height:1.55;margin-top:7px;max-width:62ch;}
.cuswitch button{flex:0 0 auto;white-space:nowrap;}

.cu-team{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;}
.cu-team label{font-size:11px;color:var(--ink-faint);display:inline-flex;align-items:center;gap:7px;}
.cu-teamid{font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:7px 9px;width:130px;
  border-radius:7px;border:1px solid var(--hairline);background:var(--ground);color:var(--ink);}
.cu-note{font-size:10.5px;color:var(--ink-faint);flex:1 1 200px;}

.cutable{width:100%;border-collapse:collapse;font-size:12.5px;}
.cutable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 10px 7px 0;}
.cutable td{padding:8px 10px 8px 0;border-top:1px solid var(--hairline);vertical-align:middle;}
.cu-c{font-weight:600;white-space:nowrap;}
.cu-on{color:var(--good);font-weight:500;}
.cu-p{display:block;font-size:10px;color:var(--ink-faint);}
.cu-off{color:var(--ink-faint);font-style:italic;}
.cu-a{text-align:right;white-space:nowrap;}
.cu-pick{font-family:inherit;font-size:11.5px;padding:6px 8px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);max-width:230px;}
.cu-pick:disabled{opacity:.45;}
.cu-a .btn{margin-left:5px;}
.cu-why{font-size:11px;color:var(--ink-faint);line-height:1.55;margin-top:10px;max-width:68ch;}

.cucalls{margin-top:12px;}
.cucalls summary{font-size:11px;color:var(--ink-faint);cursor:pointer;}
.cucalls ul{list-style:none;margin:8px 0 0;padding:0;font-size:10.5px;}
.cucalls li{display:flex;gap:10px;padding:4px 0;border-top:1px solid var(--hairline);
  color:var(--ink-muted);align-items:baseline;}
.cucalls li.bad{color:var(--crit);}
.cucalls li span:nth-child(2){flex:1;overflow-wrap:anywhere;}
.cu-when{color:var(--ink-faint);white-space:nowrap;}

/* ---------- the space picker ----------
   Four rooms laid out as four equal buttons read as four tabs. They are four
   places, and you are in one of them -- so it is one control: where you are,
   and a menu of everywhere else. The current room's colour rides on the
   button, never on the whole page; the work still has to be readable. */
.spacebar{background:var(--raised);border-bottom:1px solid var(--hairline-strong);
  box-shadow:0 1px 0 rgba(69,17,63,.03);position:relative;z-index:40;}
.spacebar-in{max-width:1160px;margin:0 auto;padding:11px 24px;display:flex;
  align-items:center;gap:16px;}
.spacebar .logoplate{flex:0 0 auto;}
.spacebar .asof{margin-left:auto;}
@media (max-width:700px){ .spacebar .asof{display:none;} }

.spacepick{position:relative;flex:0 0 auto;}
.spacebtn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:inherit;padding:6px 12px 6px 11px;border-radius:10px;
  border:1px solid var(--hairline-strong);background:var(--raised);
  box-shadow:0 1px 0 var(--hairline-strong);
  transition:border-color .12s,box-shadow .12s,background .12s;}
.spacebtn:hover{background:var(--surface-2);}
.spacebtn.open{box-shadow:none;transform:translateY(1px);}
.spacebtn:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.sb-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--hairline-strong);}
.sb-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.sb-k{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
.sb-l{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-top:1px;}
.sb-c{width:10px;height:6px;margin-left:2px;color:var(--ink-faint);transition:transform .15s;}
.spacebtn.open .sb-c{transform:rotate(180deg);}
.sb-n{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--crit);
  color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;}
/* the room you are in tints its own button */
.sb-dashboard .sb-dot{background:#75035A;}  .sb-dashboard{border-color:rgba(117,3,90,.3);}
.sb-backstage .sb-dot{background:#45113F;}  .sb-backstage{border-color:rgba(69,17,63,.3);}
.sb-training .sb-dot{background:#0B6357;}   .sb-training{border-color:rgba(11,99,87,.3);}
.sb-clientview .sb-dot{background:#12507F;} .sb-clientview{border-color:rgba(18,80,127,.3);}

.spacemenu{position:absolute;top:calc(100% + 8px);left:0;min-width:310px;z-index:50;
  background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  padding:7px;box-shadow:0 2px 6px rgba(69,17,63,.06),0 18px 44px rgba(69,17,63,.14);
  animation:smIn .13s ease-out;}
@keyframes smIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .spacemenu{animation:none;} }
.sm-head{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);padding:7px 10px 8px;}
.smi{display:flex;align-items:flex-start;gap:10px;text-decoration:none;padding:9px 10px;
  border-radius:9px;position:relative;}
.smi:hover,.smi:focus-visible{background:var(--surface-2);outline:none;}
.smi-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px;
  background:var(--hairline-strong);}
.smi-dashboard .smi-dot{background:#75035A;} .smi-backstage .smi-dot{background:#45113F;}
.smi-training .smi-dot{background:#0B6357;}  .smi-clientview .smi-dot{background:#12507F;}
.smi-t{flex:1;min-width:0;}
.smi-l{display:block;font-size:13px;font-weight:600;color:var(--ink);}
.smi-h{display:block;font-size:10.5px;color:var(--ink-faint);line-height:1.45;margin-top:1px;}
.smi.on{background:var(--surface-2);}
.smi.on .smi-l{color:var(--ink);}
.smi-tick{font-size:12px;font-weight:700;color:var(--good);align-self:center;}
.smi-n{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--crit);
  color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;align-self:center;}

/* ---------- log something, floating ----------
   It is the one thing you might want from anywhere on a page, so it goes where
   your thumb already is rather than at the top where you have scrolled past it. */
.logfab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;
  align-items:center;gap:9px;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:600;color:#fff;background:var(--plum);border:none;
  padding:13px 18px 13px 15px;border-radius:99px;
  box-shadow:0 3px 10px rgba(69,17,63,.22),0 10px 30px rgba(69,17,63,.18);
  transition:transform .12s,box-shadow .12s,background .12s;}
.logfab svg{width:17px;height:17px;flex:0 0 auto;}
.logfab:hover{background:var(--aubergine);transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(69,17,63,.26),0 14px 38px rgba(69,17,63,.2);}
.logfab:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(69,17,63,.2);}
.logfab:focus-visible{outline:2px solid var(--plum);outline-offset:3px;}
@media (max-width:560px){
  .logfab{right:16px;bottom:16px;padding:14px;}
  .logfab span{display:none;}
}
@media print{ .logfab,.spacebar{display:none!important;} }

/* the room's own tabs, one shape in every space */
.roomnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  margin-bottom:22px;}
.rtab{position:relative;display:block;text-decoration:none;padding:10px 13px;border-radius:8px;
  background:var(--raised);border:1px solid var(--hairline-strong);
  box-shadow:0 1px 0 var(--hairline-strong);}
.rtab:hover{border-color:var(--plum);}
.rt-l{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.rt-h{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:3px;}
.rtab.on{background:var(--plum);border-color:var(--plum);box-shadow:none;}
.rtab.on .rt-l{color:#fff;} .rtab.on .rt-h{color:rgba(255,255,255,.68);}
.rt-n{position:absolute;top:8px;right:10px;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--warn);color:#fff;font-size:10px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;}
.rtab.on .rt-n{background:#fff;color:var(--plum);}
.in-backstage .rtab.on{background:var(--aubergine);border-color:var(--aubergine);}
.in-backstage .rtab:hover{border-color:var(--aubergine);}
.in-training .rtab.on{background:var(--good);border-color:var(--good);}
.in-training .rtab:hover{border-color:var(--good);}

.in-dashboard .roomnav{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;}
.app{padding-top:20px;}
.roomapp{padding-top:20px;}

/* ---------- training ground ---------- */
.in-training{--plum:#0B6357;--plum-wash:#EFF7F5;--plum-edge:rgba(11,99,87,.18);}
.safebar{background:var(--good);color:#fff;}
.safebar > *{display:block;}
.safebar{padding:9px 24px;font-size:11.5px;line-height:1.5;}
.safebar span{max-width:1112px;margin:0 auto;display:block;}
.safe-m{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;}
.safebar span + span{color:rgba(255,255,255,.85);}

.tgsec{margin-bottom:34px;}
.tggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;}
.tgcard{background:var(--raised);border:1px solid var(--hairline);border-radius:9px;
  padding:14px 15px;border-top:3px solid var(--hairline-strong);}
.tgcard h4{font-size:13px;font-weight:600;}
.tgcard p{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:5px;}
.tgcard b{color:var(--ink);}
.tg-dashboard{border-top-color:#75035A;} .tg-backstage{border-top-color:#45113F;}
.tg-training{border-top-color:#0B6357;}  .tg-clientview{border-top-color:#12507F;}

.tgsteps{display:flex;flex-direction:column;gap:12px;}
.tgstep{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;}
.tgn{width:26px;height:26px;border-radius:50%;background:var(--good);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;}
.tgstep h4{font-size:13.5px;font-weight:600;}
.tgstep p{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:3px;max-width:70ch;}
.tgnote{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:14px;max-width:72ch;}
.tgnote a{color:var(--good);font-weight:600;}
.tgrules{margin:0;padding-left:22px;font-size:13px;color:var(--ink-muted);line-height:1.75;}
.tgrules li{margin-bottom:9px;} .tgrules b{color:var(--ink);}
.tghabits{list-style:none;margin:0;padding:0;}
.tghabits li{font-size:13px;color:var(--ink-muted);line-height:1.6;padding:9px 0;
  border-top:1px solid var(--hairline);max-width:76ch;}
.tghabits li:first-child{border-top:none;} .tghabits b{color:var(--ink);}
.tgtry{margin:0;padding-left:22px;font-size:13px;color:var(--ink-muted);line-height:1.9;max-width:72ch;}
.tgtry b{color:var(--ink);}

/* the practice client */
.simbar{display:flex;align-items:flex-start;gap:16px;background:var(--good-wash);
  border:1px solid rgba(11,99,87,.24);border-radius:10px;padding:15px 17px;margin-bottom:20px;}
.sim-t{flex:1;min-width:0;}
.sim-l{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--good);}
.sim-t p{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:6px;max-width:76ch;}
.sim-t b{color:var(--ink);}
.sim-warn{color:var(--crit);}
.simbar .btn{flex:0 0 auto;}
.simblock{display:flex;flex-direction:column;}
.ss-sub{font-size:10.5px;color:var(--ink-faint);display:block;margin-top:2px;}
.simchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.simhap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:11px;}
@media (max-width:640px){ .simhap{grid-template-columns:1fr;} }
.simhap-c{display:flex;flex-direction:column;gap:4px;}
.shl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.shn{font-size:12px;font-weight:600;}
.simsel,.simin{font-family:inherit;font-size:12px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--ground);color:var(--ink);min-width:0;}
.simin{flex:1;} .simin-n{flex:0 0 90px;}
.simsel:focus,.simin:focus{outline:none;border-color:var(--good);
  box-shadow:0 0 0 3px var(--good-wash);}
.simform{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;align-items:center;}
.simlist{list-style:none;margin:11px 0 0;padding:0;}
.simrow{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-top:1px solid var(--hairline);font-size:12.5px;}
.simrow:first-child{border-top:none;}
.simrow-t{flex:1;min-width:0;overflow-wrap:anywhere;}
.simnote{padding:8px 0;border-top:1px solid var(--hairline);}
.simnote:first-child{border-top:none;}
.simnote-h{display:flex;align-items:baseline;gap:8px;}
.simnote-h .icon{margin-left:auto;}
.simempty{font-size:11.5px;color:var(--ink-faint);padding:8px 0;}
.simbar-track{height:6px;border-radius:3px;background:var(--surface-2);margin-top:10px;
  overflow:hidden;}
.simbar-fill{height:100%;background:var(--good);transition:width .2s;}

/* ---------- client view: not built yet ---------- */
.in-clientview{--plum:#12507F;--plum-wash:#EFF5FA;--plum-edge:rgba(18,80,127,.2);}
.soon{background:var(--raised);border:1px solid var(--hairline);border-top:3px solid var(--info);
  border-radius:11px;padding:22px 24px;max-width:74ch;box-shadow:var(--shadow);}
.soon-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--info);}
.soon h3{font-size:18px;font-weight:600;margin-top:7px;letter-spacing:-.015em;}
.soon p{font-size:13px;color:var(--ink-muted);line-height:1.65;margin-top:10px;}
.soon ul{margin:10px 0 0;padding-left:22px;font-size:13px;color:var(--ink-muted);line-height:1.8;}
.soon b{color:var(--ink);}
.soon-why{border-top:1px solid var(--hairline);padding-top:12px;margin-top:16px;font-size:12.5px;}
.soon-link{font-size:12.5px;}
.soon-link a{color:var(--info);font-weight:600;}

/* ---------- the clients index ---------- */
.cxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px;
  margin-bottom:22px;}
.cxcard{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--raised);
  border:1px solid var(--hairline);border-radius:10px;padding:14px 15px;box-shadow:var(--shadow);}
.cxcard:hover{border-color:var(--plum);}
.cx-pod{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.cx-n{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.015em;}
.cx-m{font-size:10.5px;color:var(--ink-faint);}
.cx-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;align-items:baseline;}
.cx-s{font-size:11px;font-weight:600;}
.cx-good{color:var(--good);} .cx-warn{color:var(--warn);}
.cx-crit{color:var(--crit);} .cx-none{color:var(--ink-faint);}
.cx-u{font-size:10px;color:#fff;background:var(--warn);border-radius:99px;padding:1px 7px;}

/* the practice client's own doors and the sections behind them */
.simview{margin-top:20px;padding-top:4px;}
.simview .lhead{margin-bottom:14px;}
.simview .simblock,.simview .ktrack{margin-bottom:14px;}
.phasestrip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.phbit{font-size:11px;font-weight:600;padding:5px 12px;border-radius:99px;
  border:1px solid var(--hairline);color:var(--ink-faint);background:var(--raised);}
.phbit.on{background:var(--good);border-color:var(--good);color:#fff;}
.simtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:11px;}
.simtable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 10px 7px 0;}
.simtable td{padding:7px 10px 7px 0;border-top:1px solid var(--hairline);}
.simtable .simin{width:90px;}
.in-training .vtab.on{background:var(--good);border-color:var(--good);}
.in-training .vtab:hover{border-color:var(--good);}
.in-training .vtab:hover .vt-l{color:var(--good);}

/* ---------- pods and who runs them ---------- */
.pdtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.pdtable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 12px 7px 0;}
.pdtable td{padding:9px 12px 9px 0;border-top:1px solid var(--hairline);vertical-align:middle;}
.pd-n{font-weight:600;white-space:nowrap;}
.pd-c{display:block;font-size:10.5px;font-weight:400;color:var(--ink-faint);margin-top:2px;}
.pd-in{font-family:inherit;font-size:12.5px;padding:7px 10px;border-radius:7px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);
  min-width:150px;max-width:190px;}
.pd-in::placeholder{color:var(--ink-faint);font-style:italic;}
.pd-in:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.pd-note{font-size:10.5px;color:var(--ink-faint);line-height:1.5;max-width:38ch;}
.pd-warn{font-size:12px;color:var(--warn);background:var(--warn-wash);
  border:1px solid var(--warn-edge);border-radius:8px;padding:10px 13px;margin-bottom:13px;
  line-height:1.55;}

.cxpod{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;}
.cxpod .lsub{margin:0;}
.cx-owners{display:inline-flex;gap:14px;flex-wrap:wrap;}
.cxo{font-size:11.5px;color:var(--ink);display:inline-flex;align-items:baseline;gap:6px;}
.cxo-r{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.cxo em{color:var(--ink-faint);font-style:italic;}

/* ---------- staging ----------
   Loud on purpose. The whole value of a second copy is that you never wonder
   which one you are looking at, so the stripe is unmissable and it is the
   first thing on the page. */
.stagebar{background:repeating-linear-gradient(135deg,#8A5000,#8A5000 14px,#6F4000 14px,#6F4000 28px);
  color:#fff;}
.stagebar-in{max-width:1160px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;}
.stg-m{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;background:#fff;color:#8A5000;
  padding:3px 10px;border-radius:4px;}
.stg-w{font-size:11px;color:rgba(255,255,255,.94);flex:1 1 260px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);}
.stg-out{font-size:11px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.5);border-radius:6px;padding:4px 10px;}
.stg-out:hover{background:rgba(255,255,255,.16);}

.stgbox{background:var(--raised);border:1px solid var(--hairline);border-left:4px solid var(--warn);
  border-radius:10px;padding:16px 18px;max-width:74ch;box-shadow:var(--shadow);}
.stgbox p{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:9px;}
.stgbox p:first-child{margin-top:0;}
.stgbox b{color:var(--ink);}
.stgbox-here{border-left-color:var(--good);}
.stg-link{margin-top:14px!important;}
.stg-link a.btn{text-decoration:none;}
.stg-note{font-size:11px!important;color:var(--ink-faint)!important;}

/* the switch reads as a switch even before there is anything to switch */
.cuswitch button[disabled]{opacity:.45;cursor:not-allowed;}
.cuswitch button[disabled]:hover{background:var(--raised);}

/* ---------- who runs this pod, under the pod buttons ---------- */
/* display:inline-flex wins over the hidden attribute, so all three pods'
   owners showed at once until this said otherwise. */
.podowners[hidden]{display:none!important;}
.podowners{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--raised);border:1px solid var(--hairline);border-radius:9px;
  padding:9px 14px;margin:0 0 12px;box-shadow:var(--shadow);}
.po-cell{display:inline-flex;align-items:baseline;gap:8px;}
.po-r{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;}
.po-v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;}
.po-v.po-unset{font-weight:400;font-style:italic;color:var(--ink-faint);}
.po-div{width:1px;align-self:stretch;background:var(--hairline);}
.po-edit{font-size:10.5px;color:var(--ink-faint);text-decoration:none;margin-left:4px;
  border-bottom:1px dotted var(--hairline-strong);}
.po-edit:hover{color:var(--plum);border-bottom-color:var(--plum);}
@media (max-width:520px){ .podowners{width:100%;} .po-div{display:none;} }

/* the other copy of the desk, in the picker */
.sm-sep{display:block;height:1px;background:var(--hairline);margin:7px 10px;}
/* Group labels, not just quiet text: the rule above them is what makes the
   picker a map with three neighbourhoods instead of a list of seven links. */
.sm-grp{font-weight:700;color:var(--ink-muted);letter-spacing:.11em;padding:2px 10px 6px;}
.smi-other .smi-dot{background:repeating-linear-gradient(135deg,#8A5000,#8A5000 3px,#6F4000 3px,#6F4000 6px);}
.smi-live .smi-dot{background:#75035A;}
.smi-ext{font-size:10px;color:var(--ink-faint);margin-left:5px;}
.smi-other:hover .smi-ext{color:var(--warn);}

/* ---------- a switch that looks like a switch ---------- */
.u-stg{white-space:nowrap;}
.sw{position:relative;width:38px;height:21px;border-radius:99px;cursor:pointer;
  border:1px solid var(--hairline-strong);background:var(--surface-2);padding:0;
  vertical-align:middle;transition:background .14s,border-color .14s;}
.sw .sw-k{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--raised);box-shadow:0 1px 2px rgba(69,17,63,.28);transition:left .14s;}
.sw.on{background:var(--good);border-color:var(--good);}
.sw.on .sw-k{left:19px;}
.sw:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.sw-s{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:3px;}
.sw.on + .sw-s{color:var(--good);}
.sw-na{font-size:10.5px;color:var(--ink-faint);font-style:italic;}
.sw-link{margin-top:4px;}
.sw-why{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:14px;
  background:var(--surface-2);border-radius:8px;padding:10px 13px;max-width:76ch;}

/* ---------- tickets, read from ClickUp ----------
   Deliberately not styled like the desk's own tables: these live somewhere
   else, and the page should not imply it owns them. */
.cutask{background:var(--raised);border:1px solid var(--hairline);
  border-left:3px solid var(--info);border-radius:10px;padding:14px 16px;
  margin-bottom:16px;box-shadow:var(--shadow);}
.cutask-err{border-left-color:var(--warn);}
.cutask-none{border-left-color:var(--hairline-strong);}
.cut-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:1px solid var(--hairline);}
.cut-h h4{font-size:13px;font-weight:600;}
.cut-src{font-size:10.5px;color:var(--ink-faint);flex:1 1 auto;}
.cut-c{font-size:11px;font-weight:600;color:var(--info);white-space:nowrap;}
.cutlist{list-style:none;margin:0;padding:0;}
.cut{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid var(--hairline);font-size:12.5px;}
.cut:last-child{border-bottom:none;}
.cut-t{flex:1 1 200px;min-width:0;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;}
.cut-t:hover{color:var(--info);}
.cut-s{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;white-space:nowrap;}
.cut-open{background:var(--info-wash);color:var(--info);}
.cut-done{background:var(--good-wash);color:var(--good);}
.cut-w{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;}
.cut-d{font-size:10.5px;color:var(--ink-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.cut-d.late{color:var(--crit);font-weight:600;}
.cut-n{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:9px;}
.cut-n a{color:var(--info);}
.cut-e{font-size:12px;color:var(--warn);margin-top:9px;font-weight:500;}
.cut-f{font-size:10px;color:var(--ink-faint);margin-top:10px;line-height:1.5;}
.cutdone{margin-top:9px;}
.cutdone summary{font-size:11px;color:var(--ink-faint);cursor:pointer;padding:4px 0;}
.cutdone summary:hover{color:var(--info);}

/* tickets: richer rows now they carry description, estimate and priority */
.cut{display:block;padding:11px 0;border-bottom:1px solid var(--hairline);}
.cut-top{display:flex;align-items:baseline;gap:10px;}
.cut-top .cut-t{flex:1;}
.cut-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:5px;align-items:baseline;}
.cut-p{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 7px;border-radius:99px;background:var(--surface-2);color:var(--ink-muted);}
.cut-p-urgent{background:var(--crit-wash);color:var(--crit);}
.cut-p-high{background:var(--warn-wash);color:var(--warn);}
.cut-p-normal{background:var(--info-wash);color:var(--info);}
.cut-est{font-size:10.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.cut-desc{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:6px;
  max-width:78ch;overflow-wrap:anywhere;}
.cut-cbtn{font-family:inherit;font-size:10.5px;color:var(--info);background:none;
  border:none;padding:0;cursor:pointer;border-bottom:1px dotted var(--info-edge);}
.cut-cbtn:hover,.cut-cbtn.on{border-bottom-style:solid;}
.cut-comments{margin-top:9px;padding:10px 12px;background:var(--surface-2);border-radius:8px;
  font-size:11.5px;color:var(--ink-muted);}
.cut-cm{padding:7px 0;border-top:1px solid var(--hairline);}
.cut-cm:first-child{border-top:none;}
.cut-cm.bot{opacity:.5;}
.cut-cm-h{display:flex;align-items:baseline;gap:8px;}
.cut-cm-w{font-size:11px;font-weight:600;color:var(--info);}
.cut-cm-d{font-size:9.5px;color:var(--ink-faint);}
.cut-cm-t{font-size:11.5px;color:var(--ink-muted);line-height:1.55;margin-top:2px;
  overflow-wrap:anywhere;white-space:pre-wrap;}
.cut-cempty{font-size:11px;color:var(--ink-faint);}
.ct-unk{color:var(--ink-faint);}

/* ---------- the client view ----------
   Not the desk's chrome. A client is reading a statement about their own
   account, not operating a tool, so it is wider, calmer, and everything that
   would only mean something to us is absent rather than styled away. */
.cv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--info);margin-bottom:22px;}
.cv-eyebrow{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);}
.cv-head h1{font-size:29px;font-weight:600;letter-spacing:-.025em;margin-top:5px;}
.cv-when{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint);}

.cv-preview{background:var(--info-wash);border:1px solid var(--info-edge);border-radius:9px;
  padding:12px 15px;font-size:12px;color:var(--ink-muted);line-height:1.6;margin-bottom:20px;}
.cv-preview b{color:var(--info);}
.cv-pick{display:block;margin-top:9px;font-size:11.5px;}
.cv-pick select{font-family:inherit;font-size:12px;padding:5px 8px;border-radius:7px;
  border:1px solid var(--info-edge);background:var(--raised);color:var(--ink);margin-left:6px;}

.cv-grid{display:flex;flex-direction:column;gap:16px;}
.cv-card{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  padding:20px 22px;box-shadow:var(--shadow);}
.cv-card h2{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;}
.cv-empty{font-size:13px;color:var(--ink-muted);line-height:1.6;}
.cv-verdict{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.4;
  margin-bottom:6px;}
.cv-verdict.ok{color:var(--good);} .cv-verdict.off{color:var(--warn);}

.cv-chart{width:100%;height:auto;display:block;margin:10px 0 6px;overflow:visible;}
.cv-line{fill:none;stroke:var(--info);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
.cv-dot{fill:var(--info);stroke:var(--raised);stroke-width:1.6;}
.cv-target{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:5 4;}
.cv-tl{fill:var(--warn);font-size:9px;text-anchor:end;
  font-family:"IBM Plex Mono",monospace;}
.cv-x{fill:var(--ink-faint);font-size:9.5px;font-family:"IBM Plex Mono",monospace;}
.cv-xr{text-anchor:end;}

.cv-scroll{overflow-x:auto;margin-top:12px;}
.cv-table{width:100%;border-collapse:collapse;font-size:13px;}
.cv-table th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 14px 8px 0;}
.cv-table th.num,.cv-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.cv-table td{padding:8px 14px 8px 0;border-top:1px solid var(--hairline);}
.cv-na{color:var(--ink-faint);}

.cv-tickets{list-style:none;margin:0;padding:0;}
.cv-ticket{padding:13px 0;border-top:1px solid var(--hairline);}
.cv-ticket:first-child{border-top:none;}
.cv-th{display:flex;align-items:baseline;gap:12px;}
.cv-tn{flex:1;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.cv-ts{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;background:var(--info-wash);color:var(--info);
  white-space:nowrap;}
.cv-td{font-size:12.5px;color:var(--ink-muted);line-height:1.6;margin-top:6px;
  max-width:80ch;white-space:pre-wrap;overflow-wrap:anywhere;}

.cv-time{list-style:none;margin:0;padding:0;}
.cv-ev{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;padding:9px 0;
  border-top:1px solid var(--hairline);}
.cv-ev:first-child{border-top:none;}
.cv-ed{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-faint);
  padding-top:2px;}
.cv-et{display:block;font-size:13px;color:var(--ink);}
.cv-edet{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.cv-foot{font-size:11.5px;color:var(--ink-faint);line-height:1.6;margin-top:20px;
  padding-top:14px;border-top:1px solid var(--hairline);max-width:76ch;}
@media (max-width:560px){ .cv-ev{grid-template-columns:1fr;gap:2px;} }

/* a pod with nobody in it says so, in the grid as well as the chip row */
.cxpod-block[hidden]{display:none!important;}
.cx-empty{font-size:12.5px;color:var(--ink-faint);line-height:1.6;
  background:var(--surface-2);border-radius:9px;padding:14px 16px;}
.cx-empty a{color:var(--plum);}
/* the pod control is a link on a client page and a button on the Clients page;
   it must look identical either way */
a.podbtn{text-decoration:none;display:inline-flex;align-items:center;}

/* moving a client between pods, from the card */
.cl-pod{position:absolute;bottom:11px;right:11px;font-family:inherit;font-size:10.5px;
  padding:3px 6px;border-radius:6px;border:1px solid var(--hairline);
  background:var(--raised);color:var(--ink-muted);opacity:0;transition:opacity .12s;}
.clcard:hover .cl-pod,.cl-pod:focus{opacity:1;}
.cl-pod:focus{outline:none;border-color:var(--plum);color:var(--ink);}
.clcard{padding-bottom:34px;}
.clform{margin-top:16px;background:var(--ground);border:1px solid var(--hairline);
  border-radius:9px;padding:13px 14px;}
.clform input[name=currency]{flex:0 0 70px;}

/* ---------- ticket filters ---------- */
.cufilters{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px;
  padding:11px 12px;background:var(--surface-2);border-radius:9px;}
.cufrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.cufl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  width:58px;flex:0 0 58px;white-space:nowrap;}
.cufil{font-family:inherit;font-size:11px;font-weight:500;color:var(--ink-muted);
  background:var(--raised);border:1px solid var(--hairline);border-radius:99px;
  padding:4px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:border-color .12s,color .12s,background .12s;}
.cufil:hover{border-color:var(--info);color:var(--info);}
.cufil.on{background:var(--info);border-color:var(--info);color:#fff;}
.cufil-n{font-family:"IBM Plex Mono",monospace;font-size:9.5px;opacity:.7;}
.cufil.on .cufil-n{opacity:.85;}
.cut[hidden]{display:none!important;}
.cut-cd{font-size:10.5px;color:var(--good);white-space:nowrap;}
.cut-none{font-size:12px;color:var(--ink-faint);padding:14px 0;}

/* ---------- where the data comes from ----------
   A ribbon down the left of every block, and a wash behind it. Amber is typed
   by hand, blue arrives as a dropped file, teal is asked of the source. The
   scale is deliberate: the more amber on a page, the more of it somebody has
   to keep up to date. */
.prov{position:relative;padding-left:26px;margin-bottom:2px;border-radius:10px;}
.prov-body{min-width:0;}
.prov-rib{position:absolute;left:0;top:0;bottom:0;width:19px;border-radius:9px 0 0 9px;
  display:flex;align-items:center;justify-content:center;cursor:default;
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);}
.prov-manual .prov-rib{background:var(--warn-wash);color:var(--warn);
  border:1px solid var(--warn-edge);border-right:none;}
.prov-dropin .prov-rib{background:var(--info-wash);color:var(--info);
  border:1px solid var(--info-edge);border-right:none;}
.prov-api .prov-rib{background:var(--good-wash);color:var(--good);
  border:1px solid rgba(11,99,87,.24);border-right:none;}
/* the grid puts these in columns, so the wrapper has to carry the stretch */
.cgrid > .prov{display:flex;margin-bottom:0;}
.cgrid > .prov > .prov-body{flex:1;display:flex;flex-direction:column;}
.cgrid > .prov > .prov-body > *{flex:1;margin-bottom:0;}
@media (max-width:640px){
  .prov{padding-left:0;padding-top:20px;}
  .prov-rib{width:auto;height:17px;right:0;bottom:auto;writing-mode:horizontal-tb;
    transform:none;border-radius:9px 9px 0 0;border:1px solid;border-bottom:none;}
}

/* ---------- the manual / drop-in / API count ---------- */
.pvbar{display:flex;height:26px;border-radius:7px;overflow:hidden;margin-bottom:12px;
  border:1px solid var(--hairline);}
.pvseg{display:flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:700;font-family:"IBM Plex Mono",monospace;color:#fff;}
.pvseg-manual{background:var(--warn);}
.pvseg-dropin{background:var(--info);}
.pvseg-api{background:var(--good);}
.pvsum{font-size:12.5px;color:var(--ink-muted);line-height:1.65;margin-bottom:20px;
  max-width:80ch;}
.pvsum b{color:var(--ink);}

.pvgroup{margin-bottom:18px;border:1px solid var(--hairline);border-radius:10px;
  overflow:hidden;background:var(--raised);}
.pvg-h{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;
  list-style:none;}
.pvg-h::-webkit-details-marker{display:none;}
.pvg-h:hover{background:var(--surface-2);}
.pvgroup[open] .pvg-h{border-bottom:1px solid var(--hairline);background:var(--surface-2);}
.pvg-chev{color:var(--ink-faint);font-size:16px;transition:transform .14s;}
.pvgroup[open] .pvg-chev{transform:rotate(90deg);}
.pvg-rib{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:5px;}
.pvgroup-manual .pvg-rib{background:var(--warn-wash);color:var(--warn);}
.pvgroup-dropin .pvg-rib{background:var(--info-wash);color:var(--info);}
.pvgroup-api .pvg-rib{background:var(--good-wash);color:var(--good);}
.pvg-n{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
.pvg-b{font-size:11.5px;color:var(--ink-faint);flex:1;}
.pvlist{list-style:none;margin:0;padding:0;}
.pvlist li{display:grid;grid-template-columns:minmax(0,1.1fr) 120px minmax(0,1.6fr);
  gap:4px 14px;padding:10px 14px;border-bottom:1px solid var(--hairline);align-items:baseline;}
.pvlist li:last-child{border-bottom:none;}
@media (max-width:820px){ .pvlist li{grid-template-columns:1fr;} }
.pv-l{font-size:13px;font-weight:600;}
.pv-v{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);overflow-wrap:anywhere;}
.pv-s{font-size:11.5px;color:var(--ink-muted);line-height:1.5;}
.pv-t{grid-column:1;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;}
.pv-t-dropin{color:var(--info);} .pv-t-api{color:var(--good);}
.pv-need{grid-column:3;font-size:11px;color:var(--ink-faint);line-height:1.5;}
.pv-stay{grid-column:1/-1;font-size:11px;color:var(--ink-faint);font-style:italic;}
.pv-none{font-size:12px;color:var(--ink-muted);padding:14px;line-height:1.6;}
.tg-manual{border-top-color:#8A5000;} .tg-dropin{border-top-color:#12507F;}
.tg-api{border-top-color:#0B6357;}

.cusort{font-family:inherit;font-size:11px;font-weight:500;line-height:1.4;
  padding:4px 26px 4px 10px;border-radius:99px;border:1px solid var(--hairline);
  background:var(--raised);color:var(--ink-muted);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;}
.cusort:hover{border-color:var(--info);color:var(--info);}
.cusort:focus{outline:none;border-color:var(--info);color:var(--ink);
  box-shadow:0 0 0 3px var(--info-wash);}
.cu-sortnote{font-size:10.5px;color:var(--ink-faint);}

/* An odd number of counters would leave the grid's own gap colour showing as a
   band under the last one, which is what "this is terrible" was about. The odd
   one out takes the whole row instead. */
.ct:last-child:nth-child(odd){grid-column:1/-1;}
.ct-overdue .ct-v{color:var(--crit);}

/* ---------- every open ticket, across the book ---------- */
.ttable{width:100%;border-collapse:collapse;font-size:13px;}
.ttable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 12px 8px 0;}
.ttable td{padding:9px 12px 9px 0;border-top:1px solid var(--hairline);vertical-align:top;}
.ttable tbody tr[hidden]{display:none;}
.ttable a{color:var(--ink);text-decoration:none;}
.ttable td:first-child a{color:var(--plum);font-weight:600;}
.ttable a:hover{text-decoration:underline;}
.tb-w{max-width:520px;}
.tb-a{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.tb-p{font-size:11px;color:var(--ink-muted);text-transform:capitalize;}
.tb-none{color:var(--ink-faint);padding:16px 0;}
.tb-err{font-size:12.5px;color:var(--warn);background:var(--warn-wash);
  border:1px solid var(--warn-edge);border-radius:8px;padding:12px 14px;}

/* The two chip rows belong together, and the table needs air under them --
   before this they were flush against the column headings. */
.tbfilters{display:flex;flex-direction:column;gap:8px;margin:14px 0 18px;}
.tbfilters .tchips{margin-top:0;}
.ttable thead th{padding-top:2px;}

/* --------------------------------------------------------------------------
   Drop-in
   A big obvious target, then a difference table that reads like a sentence:
   this month, this many figures, from this to that. Old value struck through,
   new value in plum -- the same grammar the change log uses.
   -------------------------------------------------------------------------- */
.dzwrap{display:grid;gap:14px;margin:14px 0 22px}
.dz{border:2px dashed var(--hairline);border-radius:14px;background:var(--raised);
    padding:34px 20px;text-align:center;cursor:pointer;
    transition:border-color .12s,background .12s}
.dz:hover{border-color:var(--plum)}
.dz.over{border-color:var(--plum);background:var(--plum-wash);border-style:solid}
.dz.busy{opacity:.6;pointer-events:none}
.dz-big{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--ink)}
.dz-pick{background:none;border:0;padding:0;font:inherit;color:var(--plum);
         text-decoration:underline;cursor:pointer}
.dz-sub{margin:0;font-size:13px;color:var(--ink-muted)}
.dz-sub.dz-ok{color:var(--good);font-weight:600}
.dz-sub.dz-bad{color:var(--crit);font-weight:600}
.dz-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.dz-row label{display:flex;flex-direction:column;gap:5px;font-size:12px;
              font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.dz-row select,.dz-row input[type=month]{font:inherit;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--raised);min-width:210px;text-transform:none;letter-spacing:0}
.dz-note{font-size:11px;font-weight:400;color:var(--ink-muted);text-transform:none;letter-spacing:0}

.dzformats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:10px 0}
.dzf{border:1px solid var(--hairline);border-left:3px solid var(--info);border-radius:10px;
     padding:12px 14px;background:var(--raised);display:grid;gap:4px}
.dzf-l{font-weight:700;font-size:14px}
.dzf-w{font-size:13px;color:var(--ink)}
.dzf-n{font-size:12px;color:var(--ink-muted)}
.dzhint{font-size:13px;color:var(--ink-muted);max-width:70ch}

.dzread{border:1px solid var(--hairline);border-radius:14px;background:var(--raised);
        padding:18px;margin:18px 0}
.dzread-h{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
          padding-bottom:10px;border-bottom:1px solid var(--hairline);margin-bottom:12px}
.dzread-l{font-size:16px;font-weight:700}
.dzread-c{font-size:14px;color:var(--plum);font-weight:600}
.dzread-p{font-size:12px;color:var(--ink-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-left:auto}
.dznotes{margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--ink-muted)}
.dznotes li{margin:3px 0}
.dzsum{font-size:14px;margin:0 0 12px}

.dltable{width:100%;border-collapse:collapse;font-size:13px}
.dltable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
            color:var(--ink-muted);padding:6px 10px;border-bottom:1px solid var(--hairline)}
.dltable td{padding:8px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
.dl-new{color:var(--good);font-weight:600}
.dl-chg{color:var(--warn);font-weight:600}
.dl-same{color:var(--ink-muted)}
.dl-part td{background:var(--warn-wash)}
.dl-flag{display:inline-block;margin-left:8px;font-size:10px;text-transform:uppercase;
         letter-spacing:.05em;color:var(--warn);font-weight:700}
.dl-pick{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.dl-pick input:disabled{cursor:default}
.dl-w{display:flex;flex-wrap:wrap;gap:6px}
.dl-c{display:inline-flex;align-items:baseline;gap:5px;background:var(--surface-2);
      border-radius:6px;padding:2px 8px;font-size:12px}
.dl-c b{font-weight:600;color:var(--ink-muted)}
.dl-c s{color:var(--ink-muted);text-decoration-thickness:1px}
.dl-c i{font-style:normal;font-weight:700;color:var(--plum)}

.dzactions{display:flex;gap:10px;align-items:center;margin-top:14px}
.dzwarn{font-size:12px;color:var(--ink-muted);margin-left:auto}
.dzdone{border:1px solid var(--good);border-left:3px solid var(--good);border-radius:10px;
        background:var(--good-wash);padding:14px 16px;font-size:14px;margin:18px 0}
.dzdone a{color:var(--plum);font-weight:600}

.dztable{width:100%;border-collapse:collapse;font-size:13px}
.dztable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
            color:var(--ink-muted);padding:6px 10px;border-bottom:1px solid var(--hairline)}
.dztable td{padding:7px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
.dz-f{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dzs{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
     letter-spacing:.04em;padding:2px 8px;border-radius:20px}
.dzs-applied{background:var(--good-wash);color:var(--good)}
.dzs-parsed{background:var(--info-wash);color:var(--info)}
.dzs-rejected{background:var(--surface-2);color:var(--ink-muted)}
.dzs-unreadable{background:var(--crit-wash);color:var(--crit)}
.dz-w{font-size:12px;color:var(--ink-muted)}
.dz-p{display:block;font-size:12px;color:var(--crit);margin-top:3px}

/* --------------------------------------------------------------------------
   Reports
   The builder is a checklist, not a form. Each row says where its section
   comes from and whether the desk already has it, so the work is deciding
   what goes in rather than retyping what is already known.
   -------------------------------------------------------------------------- */
.smi-reports .smi-dot{background:#8A5000;}
.in-reports{--plum:#8A5000;--plum-wash:#FDF7EF;--plum-edge:rgba(138,80,0,.2);}

.rbnew{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
       border:1px solid var(--hairline);border-radius:12px;background:var(--raised);
       padding:16px 18px;margin:14px 0 24px}
.rbnew label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;
             color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.rbnew select,.rbnew input{font:inherit;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--raised);min-width:210px;text-transform:none;letter-spacing:0}

.rbtop{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 12px}
.rbf{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;
     color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.rbf-wide{margin-bottom:8px}
/* [hidden] loses to display:flex — the same trap as .toast and tr.newrow above.
   The call-date field carried a hidden attribute from the day it was written
   and has been on screen the whole time, on every template that has no call. */
.rbf[hidden]{display:none}
.rbf input,.rbf textarea{font:inherit;padding:9px 11px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--raised);min-width:280px;text-transform:none;
  letter-spacing:0;color:var(--ink)}
.rbf-wide textarea{width:100%;max-width:74ch}
.rb-note{font-size:11.5px;font-weight:400;color:var(--ink-muted);text-transform:none;letter-spacing:0}

.rblist{display:grid;gap:10px;margin:12px 0}
.rb{display:grid;grid-template-columns:28px minmax(0,1fr) 190px;gap:14px;
    border:1px solid var(--hairline);border-left:3px solid var(--hairline-strong);
    border-radius:11px;background:var(--raised);padding:14px 16px}
.rb-has{border-left-color:var(--good)}
.rb-tick{display:flex;justify-content:center;padding-top:2px}
.rb-head{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.rb-label{font-weight:700;font-size:14.5px}
.rb-state{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
          padding:2px 8px;border-radius:20px}
.rb-ok{background:var(--good-wash);color:var(--good)}
.rb-thin{background:var(--warn-wash);color:var(--warn)}
.rb-gap{background:var(--surface-2);color:var(--ink-muted)}
.rb-req{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
.rb-what{font-size:13px;color:var(--ink-muted);margin:4px 0 0}
.rb-pv{font-size:13px;margin:6px 0 0;font-variant-numeric:tabular-nums}
.rb-why{font-size:12.5px;color:var(--warn);margin:6px 0 0}
.rb-text{display:block;width:100%;margin-top:9px;font:inherit;padding:9px 11px;
         border:1px solid var(--hairline);border-radius:8px;background:var(--ground);
         color:var(--ink);resize:vertical}
.rb-drop{font-size:12.5px;color:var(--ink-muted);margin:8px 0 0}
.rb-from{font-size:11.5px;color:var(--ink-faint);border-left:1px solid var(--hairline);
         padding-left:12px;line-height:1.45}

.rbactions{display:flex;gap:10px;align-items:center;margin:18px 0 6px}
.rb-hint{font-size:12.5px;color:var(--ink-muted)}
.rb-hint.ok{color:var(--good);font-weight:600}
.rb-hint.bad{color:var(--crit);font-weight:600}
.rb-empty{font-size:14px;color:var(--ink-muted);margin:20px 0}

.rbtable{width:100%;border-collapse:collapse;font-size:13px}
.rbtable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
            color:var(--ink-muted);padding:6px 10px;border-bottom:1px solid var(--hairline)}
.rbtable td{padding:8px 10px;border-bottom:1px solid var(--hairline)}
.rbgo{white-space:nowrap}
.rbgo a{color:var(--plum);font-weight:600;margin-right:12px}
.rst{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
     letter-spacing:.05em;padding:2px 8px;border-radius:20px}
.rst-draft{background:var(--surface-2);color:var(--ink-muted)}
.rst-ready{background:var(--info-wash);color:var(--info)}
.rst-shared{background:var(--good-wash);color:var(--good)}
.rst-archived{background:var(--surface-2);color:var(--ink-faint)}

.rbshare{border:1px solid var(--hairline);border-left:3px solid var(--hairline-strong);
         border-radius:11px;background:var(--raised);padding:15px 17px;margin:20px 0;max-width:74ch}
.rbshare.on{border-left-color:var(--good)}
.rbs-h{display:flex;gap:9px;align-items:center}
.rbs-t{font-weight:700;font-size:14.5px}
.rbs-live{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
          padding:2px 8px;border-radius:20px;background:var(--good-wash);color:var(--good)}
.rbs-p{font-size:13px;color:var(--ink-muted);margin:6px 0 0}
.rbs-url input{width:100%;margin-top:10px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:9px 11px;border:1px solid var(--hairline);border-radius:8px;background:var(--ground);
  color:var(--ink)}
.rbs-a{display:flex;gap:8px;margin-top:10px}
.rbs-n{font-size:11.5px;color:var(--ink-faint);margin:8px 0 0}

/* The Report Section's shared client. One line under the tabs, quiet enough to
   ignore once it is set and obvious enough to notice when it is wrong. */
.rsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
       border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
       padding:11px 15px;margin:14px 0 6px}
.rsb-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
       color:var(--ink-muted)}
/* A bare <select> takes the operating system's font and the operating system's
   blue focus ring, both of which arrive uninvited in the middle of the page.
   Say the family explicitly and give it the plum ring the rest of the desk uses. */
.rsbar select{font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;
  padding:8px 11px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--raised);min-width:230px;color:var(--ink)}
.rsbar select:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px var(--plum-wash)}
.rsb-go{margin-left:auto;font-size:12.5px;color:var(--plum);font-weight:600}

.rsstore{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px}
.rss{flex:1 1 150px;border:1px solid var(--hairline);border-radius:11px;
     background:var(--raised);padding:13px 15px;display:grid;gap:3px}
.rss-v{font-size:22px;font-weight:600;letter-spacing:-.02em;
       font-variant-numeric:tabular-nums}
.rss-l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted)}
.rss-warn{border-left:3px solid var(--warn)}
.rss-warn .rss-v{color:var(--warn)}

/* --------------------------------------------------------------------------
   Client view: the two agreements, the two columns, and raising a ticket
   -------------------------------------------------------------------------- */
.cv-ags{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:12px;margin:0 0 16px}
.cv-ag{border:1px solid var(--hairline);border-left:3px solid var(--hairline-strong);
       border-radius:12px;background:var(--raised);padding:14px 16px;display:grid;gap:3px}
.cv-ag.on{border-left-color:var(--good)}
.cv-ag.off{border-left-color:var(--ink-faint)}
.cv-agl{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
        color:var(--ink-muted)}
.cv-agv{font-size:16px;font-weight:600;letter-spacing:-.01em}
.cv-ag.off .cv-agv{color:var(--ink-muted);font-weight:500}
.cv-agt{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cv-ag.on .cv-agt{color:var(--good)}
.cv-ag.off .cv-agt{color:var(--ink-faint)}

/* The months on the left, this month's priority on the right. One column on a
   phone, where side-by-side would make both halves unreadable. */
.cv-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
        align-items:start}
@media (max-width:860px){ .cv-two{grid-template-columns:minmax(0,1fr)} }

.cv-more{font-size:12px;color:var(--ink-muted);margin:10px 0 0}
.cv-pmonth{font-size:12px;color:var(--ink-muted);margin:0 0 10px}
.cv-plist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cv-pit{border-left:2px solid var(--plum-edge);padding-left:12px}
.cv-pt{font-size:14.5px;font-weight:600;display:block}
.cv-pd{font-size:13px;color:var(--ink-muted);margin:4px 0 0}
.cv-ptasks{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.cv-ptasks li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
              background:var(--surface-2);border-radius:7px;padding:6px 10px}
.cv-ptn{font-size:12.5px}
.cv-pts{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
        color:var(--ink-muted);white-space:nowrap}
.cv-pnone{font-size:12px;color:var(--ink-faint);margin:8px 0 0}
.cv-pwarn{font-size:12px;color:var(--warn);margin:10px 0 0}

.cv-soon{border:1px dashed var(--hairline-strong);border-radius:10px;
         background:var(--ground);padding:16px;display:grid;gap:8px}
.cv-soontag{justify-self:start;font-size:10px;font-weight:700;letter-spacing:.08em;
            text-transform:uppercase;color:var(--info);background:var(--info-wash);
            border-radius:20px;padding:3px 10px}
.cv-soon p{font-size:13px;margin:0}
.cv-soonalt{color:var(--ink-muted)}
.dl-c.up i,.dl-c.up{color:var(--good)}
.dl-c.dn i,.dl-c.dn{color:var(--crit)}

/* Which kind of report this is. Two cards, not a dropdown: the choice changes
   what the rest of the page contains, so it should look like a fork. */
.rbtpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
       gap:12px;margin:16px 0 4px}
.rbt{display:grid;gap:4px;border:1px solid var(--hairline);border-radius:12px;
     background:var(--raised);padding:14px 16px;cursor:pointer;
     border-left:3px solid var(--hairline-strong)}
.rbt.on{border-left-color:var(--plum);background:var(--plum-wash)}
.rbt input{margin-bottom:4px}
.rbt-l{font-weight:700;font-size:14.5px}
.rbt-w{font-size:12.5px;color:var(--ink-muted)}

/* --------------------------------------------------------------------------
   Communication Lounge
   -------------------------------------------------------------------------- */
.smi-lounge .smi-dot{background:#12507F;}
.smi-strategy .smi-dot{background:#45113F;}
.smi-handover .smi-dot{background:#8A5000;}
.smi-sales .smi-dot{background:#0B6357;}
/* Its own room, so its own colour: aubergine, the darkest thing on the desk,
   for the one place where you write down what you actually think. */
.in-strategy{--plum:#45113F;--plum-wash:#F5F0F4;--plum-edge:rgba(69,17,63,.2);}
.in-lounge{--plum:#12507F;--plum-wash:#EFF5FA;--plum-edge:rgba(18,80,127,.2);}

.lgdrop{display:grid;gap:12px;margin:14px 0 22px}
.lgd{border:2px dashed var(--hairline);border-radius:14px;background:var(--raised);
     padding:26px 20px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.lgd:hover,.lgd.over{border-color:var(--plum)}
.lgd.over{background:var(--plum-wash);border-style:solid}
.lgd.busy{opacity:.6;pointer-events:none}
.lgd-big{margin:0 0 6px;font-size:16px;font-weight:600}
.lgd-sub{margin:0;font-size:13px;color:var(--ink-muted)}
.lgd-sub.dz-bad{color:var(--crit);font-weight:600}
.lgd-sub.dz-ok{color:var(--good);font-weight:600}

.lgline{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lgi{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
     padding:13px 0;border-bottom:1px solid var(--hairline)}
.lgi-when{display:grid;gap:2px;text-align:right}
.lgi-d{font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lgi-k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.lgi-call .lgi-k{color:var(--plum)}
.lgi-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.lgi-t{font-weight:600;font-size:14.5px;color:var(--ink)}
/* Whose account this is, before what was said about it. Reading the lounge
   unfiltered means scanning seven clients at once, and the client name is the
   thing the eye is looking for. */
.lgi-c{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--plum);background:var(--plum-wash);border:1px solid var(--plum-edge);
  border-radius:4px;padding:2px 7px;white-space:nowrap}
.lg-cn{white-space:nowrap}
.lgi-s{font-size:13px;color:var(--ink-muted);margin:5px 0 0;max-width:82ch}
.lgi-raw{font-style:italic}
.lgi-no{font-size:12px;color:var(--ink-faint);margin:3px 0 0}

.lg-tone{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
         padding:2px 8px;border-radius:20px}
.lg-tone-positive{background:var(--good-wash);color:var(--good)}
.lg-tone-neutral{background:var(--surface-2);color:var(--ink-muted)}
.lg-tone-concerned{background:var(--warn-wash);color:var(--warn)}
.lg-tone-frustrated{background:var(--crit-wash);color:var(--crit)}
.lg-tone-mixed{background:var(--info-wash);color:var(--info)}
.lg-tone-none{background:transparent;color:var(--ink-faint);font-weight:500;
              text-transform:none;letter-spacing:0;padding:2px 0}
.lg-has{font-size:12.5px}
.lg-no{color:var(--ink-faint)}

.lgtone{margin:14px 0}
.lgtones{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.lgt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline);
     border-radius:20px;padding:5px 12px;font-size:12.5px;cursor:pointer;background:var(--raised)}
.lgt.on{border-color:var(--plum);background:var(--plum-wash);font-weight:600}
.lgt input{margin:0}

.lg-warn{font-size:12px;color:var(--ink-muted);margin:0 0 8px;max-width:74ch}
.lgraw{white-space:pre-wrap;word-break:break-word;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--raised);border:1px solid var(--hairline);border-radius:11px;
       padding:16px;max-height:520px;overflow:auto;margin:0 0 16px}
.lgform{margin-bottom:24px}
.lgi-f{margin:7px 0 0;padding-left:17px;font-size:12.5px;color:var(--ink)}
.lgi-f li{margin:2px 0}
.lgi-ch{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);
        border:1px solid var(--hairline);border-radius:20px;padding:1px 7px;margin-left:6px}
.lg-how{font-size:13px;color:var(--ink-muted);max-width:78ch;margin:12px 0 18px}

/* --------------------------------------------------------------------------
   The Strategy Room, and the level square
   -------------------------------------------------------------------------- */
.lvl{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:5px;
     font-weight:800;font-size:12.5px;letter-spacing:0;margin-right:9px;
     vertical-align:middle;color:#fff;line-height:1}
.lvl-sm{width:18px;height:18px;font-size:10.5px;border-radius:4px;margin-right:7px}
.lvl-A{background:var(--good)}
.lvl-B{background:var(--info)}
.lvl-C{background:var(--warn)}

.chead-last{font-size:12.5px;color:var(--ink-muted);margin-top:5px}
.chead-last b{color:var(--ink)}

.srtable{width:100%;border-collapse:collapse;font-size:12.5px}
.srtable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
            color:var(--ink-muted);padding:6px 7px;border-bottom:1px solid var(--hairline);
            white-space:nowrap;position:sticky;top:0;background:var(--ground);z-index:1}
.srtable td{padding:3px 5px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.srtable .sr-name{position:sticky;left:0;background:var(--ground);white-space:nowrap;
                  padding-right:14px;font-weight:600}
.srtable .sr-name a{color:var(--ink)}
.sr-in{width:100%;font:inherit;padding:5px 7px;border:1px solid transparent;border-radius:6px;
       background:transparent;color:var(--ink)}
.sr-in:hover{border-color:var(--hairline)}
.sr-in:focus{border-color:var(--plum);background:var(--raised);outline:none}
.sr-in.sr-busy{opacity:.5}
.sr-in.sr-ok{border-color:var(--good);background:var(--good-wash)}
.sr-url{white-space:nowrap}
.sr-url a{margin-left:2px;color:var(--plum);text-decoration:none}
.sr-lvl select{font-weight:700}
.sr-msg{font-size:12.5px;min-height:18px;margin:8px 0 0}
.sr-msg.ok{color:var(--good)} .sr-msg.bad{color:var(--crit);font-weight:600}

.sr-new{display:grid;grid-template-columns:200px 160px minmax(0,1fr) auto;gap:9px;
        align-items:start;margin:12px 0 16px}
.sr-new select,.sr-new input,.sr-new textarea{font:inherit;padding:8px 10px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--raised);color:var(--ink)}
.sr-new textarea{resize:vertical}
@media (max-width:820px){ .sr-new{grid-template-columns:minmax(0,1fr)} }

.sr-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.sr-e{padding:11px 0;border-bottom:1px solid var(--hairline)}
.sr-e.sr-solved{opacity:.6}
.sr-eh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sr-ew{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
       color:var(--ink-muted)}
.sr-ea{font-size:11.5px;font-weight:700;color:var(--plum)}
.sr-ec{font-size:11.5px;color:var(--ink-muted)}
.sr-done{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
         color:var(--good);background:var(--good-wash);border-radius:20px;padding:2px 8px}
.sr-del,.sr-solve{margin-left:auto;background:none;border:0;cursor:pointer;
                  color:var(--ink-faint);font-size:12px;padding:2px 6px}
.sr-solve{border:1px solid var(--hairline);border-radius:20px;font-size:11px}
.sr-del:hover{color:var(--crit)} .sr-solve:hover{border-color:var(--good);color:var(--good)}
.sr-eb{font-size:13.5px;margin:5px 0 0;max-width:88ch;line-height:1.55}

.cnarr{margin-bottom:16px}
.cn-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
      color:var(--ink-muted);margin:14px 0 7px}
.cn-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.cn-e{padding:8px 0;border-bottom:1px solid var(--hairline)}
.cn-e:last-child{border-bottom:0}
.cn-e.cn-solved{opacity:.58}
.cn-h{display:flex;gap:9px;align-items:center}
.cn-w{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-muted)}
.cn-a{font-size:11px;font-weight:700;color:var(--plum)}
.cn-b{font-size:13px;margin:3px 0 0;line-height:1.55;max-width:82ch}
.cn-none{font-size:12.5px;color:var(--ink-faint);margin:4px 0 0}


/* ---------------------------------------------------------------------------
   Dropdowns

   A <select> left at appearance:auto is drawn by the operating system, and the
   operating system does not know about Montserrat or about plum. It renders the
   chosen option in the system UI font and rings it in system blue, so the one
   control that says which client you are looking at is the one thing on the page
   that looks like it belongs to a different application.

   Turning the native appearance off is what actually makes the font stick. Once
   it is off the arrow has to be drawn here, so it is drawn once, in aubergine,
   and every picker on the desk uses it. This block sits at the end of the file
   deliberately: several of these selectors set `background` on their own, and a
   background shorthand declared later would wipe the arrow out. */
.rsbar select, .sr-new select, .lgfilter select, .cv-pick select, .dz-row select,
.rbnew select, .composer select, .lp-form select, .df-row select, .evform select,
.addrow select, .te-box select, .rmform select, .uf-row select, .crform select{
  -webkit-appearance:none; appearance:none; font-family:inherit; cursor:pointer;
  padding-right:29px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2345113F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
/* The engagement grid is dense enough that a boxed arrow would cost a column. */
.sr-lvl select{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;
  text-align:center;padding-right:7px}
select:disabled{cursor:default;opacity:.55}

/* The biggest challenge on the book. When it came from the Strategy Room it is
   somebody's sentence, so it is shown as one, with the date and the name under
   it -- an unrevisited challenge from four months ago is the finding. */
.pchall{max-width:34ch}
.pch-said{display:block;line-height:1.35}
.pch-w{display:block;font-size:10px;color:var(--ink-faint);margin-top:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ptable th .lvl{margin-right:6px;vertical-align:1px}


/* ---------------------------------------------------------------------------
   The Handover Peak

   A backroom, so it takes the warn amber rather than plum: nothing in here is
   on the book yet, and the colour is the reminder. */
.in-handover{--plum:#8A5000;--plum-wash:#FDF7EF;--plum-edge:rgba(138,80,0,.2);}

.hptable th a{color:var(--ink);font-weight:600}
.hptable .lvl{margin-right:7px;vertical-align:1px}
.hp-in{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--good);background:var(--good-wash);border-radius:20px;padding:2px 7px;
  margin-left:7px}
.hp-alertcell{max-width:30ch}
.hp-alert{display:block;color:var(--crit);font-size:12px;line-height:1.35}
.hp-due{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.hp-due.hp-soon{color:var(--warn);font-weight:600}
.hp-due.hp-late{color:var(--crit);font-weight:700}

.hp-bar{display:inline-block;width:74px;height:6px;border-radius:4px;
  background:var(--hairline);overflow:hidden;vertical-align:middle}
.hp-fill{display:block;height:100%;background:var(--plum);border-radius:4px}
.hp-pcell{white-space:nowrap}
.hp-pct{font-size:11.5px;color:var(--ink-muted);margin-left:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hp-state{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:20px;padding:3px 9px;white-space:nowrap}
.hp-done{color:var(--good);background:var(--good-wash)}
.hp-mid{color:var(--warn);background:var(--plum-wash)}
.hp-none{color:var(--ink-faint);background:var(--surface-2)}

/* One account */
.hp-meta{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;
  border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  padding:12px 16px;margin:14px 0 12px}
.hp-m{display:grid;gap:4px}
.hp-m label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-muted)}
.hp-mi{min-width:120px}
.hp-prog{margin-left:auto;display:flex;align-items:center;gap:2px}

.hp-alertbox{border:1px solid var(--hairline);border-left:3px solid var(--hairline-strong);
  border-radius:9px;padding:11px 14px;margin:0 0 8px;background:var(--raised)}
.hp-alertbox.on{border-left-color:var(--crit);background:var(--crit-wash)}
.hp-alertbox label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-muted);margin-bottom:5px}

/* Every box on this page saves itself, so they all look like one thing. */
textarea.hp-in,input.hp-in,select.hp-in{width:100%;font-family:inherit;font-size:13px;
  padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--surface);color:var(--ink);line-height:1.5}
textarea.hp-in{resize:vertical}
.hp-in:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash)}
.hp-in.sr-busy{opacity:.5}
.hp-in.sr-ok{border-color:var(--good);background:var(--good-wash)}

.hp-checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:1px}
.hp-check{padding:9px 0;border-bottom:1px solid var(--hairline);display:flex;
  align-items:center;gap:10px;font-size:13.5px}
.hp-check label{display:flex;align-items:center;gap:10px;cursor:pointer}
.hp-check.on span{color:var(--ink-muted);text-decoration:line-through}
.hp-check input{width:16px;height:16px;accent-color:var(--plum);cursor:pointer}

.hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;
  margin-bottom:8px}
.hp-f{display:grid;gap:5px}
.hp-wide{grid-column:1 / -1}
.hp-f label{font-size:11.5px;font-weight:600;color:var(--ink-muted)}
@media (max-width:760px){ .hp-grid{grid-template-columns:minmax(0,1fr)} }

.hp-sub{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted);margin:20px 0 8px}
.hp-contacts{display:grid;gap:8px;margin-bottom:10px}
.hp-contact{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:8px;align-items:center}
.hp-cin{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.hp-cin:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash)}
.hp-cin.sr-ok{border-color:var(--good);background:var(--good-wash)}
.hp-crm{background:none;border:0;cursor:pointer;color:var(--ink-faint);font-size:15px;
  padding:2px 7px}
.hp-crm:hover{color:var(--crit)}
@media (max-width:760px){ .hp-contact{grid-template-columns:minmax(0,1fr) auto} }

.hp-qs{display:grid;gap:20px;margin-bottom:12px}
.hp-q{display:grid;gap:5px;max-width:78ch}
.hp-ql{font-size:14px;font-weight:600}
.hp-qh{font-size:11.5px;color:var(--ink-faint)}
.hp-tall{min-height:88px}

.hp-rate{display:flex;gap:7px;align-items:center;margin-top:2px}
.hp-r{width:38px;height:34px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--raised);font-family:inherit;font-size:14px;font-weight:600;
  color:var(--ink-muted);cursor:pointer}
.hp-r:hover{border-color:var(--plum);color:var(--plum)}
.hp-r.on{background:var(--plum);border-color:var(--plum);color:#fff}
.hp-rclear{background:none;border:0;font-family:inherit;font-size:11.5px;
  color:var(--ink-faint);cursor:pointer;padding:0 4px}
.hp-rclear:hover{color:var(--crit)}

/* Who said it, and when. The stamp is half the value of a handover answer. */
.hp-stamp{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink-faint);margin-left:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* One room, so the plate stops pretending to be a menu. */
.spacebtn.sb-only{cursor:default;opacity:1}
.spacebtn.sb-only:hover{background:inherit}

/* ---------------------------------------------------------------------------
   Client type: the words, then the accounts. */
.ct-words{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:2px}
.ct-w{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--hairline)}
.ct-mean{font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid transparent;
  border-radius:7px;background:transparent;color:var(--ink);width:100%}
.ct-mean:hover{border-color:var(--hairline)}
.ct-mean:focus{outline:none;border-color:var(--plum);background:var(--raised)}
.ct-mean.sr-busy{opacity:.5}
.ct-mean.sr-ok{border-color:var(--good);background:var(--good-wash)}
@media (max-width:700px){ .ct-w{grid-template-columns:minmax(0,1fr)} }

.ct-list{display:grid;gap:3px}
.ct-row{padding:14px 0;border-bottom:1px solid var(--hairline)}
.ct-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.ct-name{font-weight:600;font-size:14.5px}
.ct-name a{color:var(--ink)}
.ct-when{font-size:11px;color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ct-never{color:var(--warn);font-weight:600}
.ct-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.ct-chip{font-family:inherit;font-size:12px;padding:5px 11px;border-radius:20px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink-muted);
  cursor:pointer}
.ct-chip:hover{border-color:var(--plum);color:var(--plum)}
.ct-chip.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600}
.ct-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.ct-note{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--surface);color:var(--ink)}
.ct-note:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash)}
.ct-cur{font-size:12.5px;color:var(--ink-muted);margin:8px 0 0;max-width:80ch;line-height:1.5}
.ct-hist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.ct-hist li{display:flex;gap:9px;align-items:baseline;font-size:11.5px;
  color:var(--ink-faint);flex-wrap:wrap}
.ct-hw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ct-hv{font-weight:600;color:var(--ink-muted)}
.ct-hn{color:var(--ink-faint)}
.ct-hb{margin-left:auto}
@media (max-width:700px){ .ct-save{grid-template-columns:minmax(0,1fr)} }

.ct-pod{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);border:1px solid var(--hairline);border-radius:4px;padding:1px 6px}
.podfilter{margin:10px 0 12px}

/* ---------------------------------------------------------------------------
   Per-client blocks in the Strategy Room. Nobody asks what anyone wrote this
   week; they ask what we think about Seedball, and the answer belongs under
   that one name. */
.cgrps{display:grid;gap:14px;margin-bottom:24px}
.cgrp{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  padding:13px 16px}
.cgrp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.cgrp-n{font-weight:600;font-size:14.5px}
.cgrp-n a{color:var(--ink)}
.cgrp-p,.cgrp-c{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint)}
.cgrp-c{margin-left:auto}
.cgrp-f{grid-template-columns:150px minmax(0,1fr) auto;margin:0 0 10px}
.cgrp-f textarea[name=detail]{grid-column:2}
.cgrp .sr-list{margin-bottom:0}
.cgrp .sr-e:last-child{border-bottom:0;padding-bottom:0}
.sr-ed{font-size:12.5px;color:var(--ink-muted);margin:4px 0 0;max-width:88ch;
  line-height:1.5}
@media (max-width:820px){ .cgrp-f{grid-template-columns:minmax(0,1fr)}
  .cgrp-f textarea[name=detail]{grid-column:auto} }

/* Internal until somebody says otherwise. The off state is the quiet one on
   purpose: this is the only switch in the room a client ever feels. */
.sr-pub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--hairline);border-radius:20px;padding:2px 9px;cursor:pointer;
  background:var(--raised);color:var(--ink-faint);font-family:inherit}
.sr-pub:hover{border-color:var(--plum);color:var(--plum)}
.sr-pub.on{background:var(--good-wash);border-color:var(--good);color:var(--good)}

.cn-d{font-size:12px;color:var(--ink-faint);margin:2px 0 0;line-height:1.5;max-width:80ch}
.cn-pub{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);border:1px solid var(--hairline);border-radius:20px;padding:1px 7px}
.cn-pub.on{color:var(--good);background:var(--good-wash);border-color:var(--good-edge)}

/* ---------------------------------------------------------------------------
   The Sales Connection. Headquarters, but its own green: money is a different
   kind of question from strategy and reads better when it looks like one. */
.in-sales{--plum:#0B6357;--plum-wash:#EFF7F5;--plum-edge:rgba(11,99,87,.18);}

.sc-new,.tl-new{display:grid;gap:9px;align-items:center;margin:10px 0 16px}
.sc-new{grid-template-columns:180px minmax(0,1fr) 130px 130px 150px auto}
.tl-new{grid-template-columns:180px 150px 110px 110px minmax(0,1fr) auto}
.sc-new input,.sc-new select,.tl-new input,.tl-new select{font-family:inherit;font-size:13px;
  padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--raised);color:var(--ink);min-width:0}
.sc-new input:focus,.sc-new select:focus,.tl-new input:focus,.tl-new select:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash)}
@media (max-width:900px){ .sc-new,.tl-new{grid-template-columns:minmax(0,1fr)} }

.sctable td,.tltable td{vertical-align:middle}
.sc-when{white-space:nowrap;font-size:11.5px}
.sc-client{white-space:nowrap;font-weight:600}
.sc-offer{max-width:34ch;line-height:1.4}
.sc-why{min-width:180px;font-size:12.5px;color:var(--ink-muted);line-height:1.4}
.sc-why:focus{outline:none;background:var(--surface);box-shadow:0 0 0 3px var(--plum-wash);
  border-radius:6px}
.sc-out{font-family:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--hairline);
  border-radius:7px;background:var(--raised);color:var(--ink)}
.sc-pub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--hairline);border-radius:20px;padding:2px 9px;cursor:pointer;
  background:var(--raised);color:var(--ink-faint);font-family:inherit;white-space:nowrap}
.sc-pub:hover{border-color:var(--plum);color:var(--plum)}
.sc-pub.on{background:var(--good-wash);border-color:var(--good);color:var(--good)}

.tl-n{width:70px;font-family:inherit;font-size:13px;padding:5px 7px;text-align:right;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink)}
.tl-n:hover,.tl-note:hover{border-color:var(--hairline)}
.tl-n:focus,.tl-note:focus{outline:none;border-color:var(--plum);background:var(--surface)}
.tl-note{width:100%;font-family:inherit;font-size:12.5px;padding:5px 7px;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-muted)}
.tltable tfoot th{font-size:12px;padding-top:8px;border-top:1px solid var(--hairline-strong)}

/* On the client's own homepage. */
.cv-utable{width:100%;border-collapse:collapse;margin-top:10px}
.cv-utable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-muted);padding:6px 8px;border-bottom:1px solid var(--hairline)}
.cv-utable td{padding:9px 8px;border-bottom:1px solid var(--hairline);vertical-align:top}
.cv-uw{white-space:nowrap;font-size:12px;color:var(--ink-muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cv-uo{font-size:14px;line-height:1.5}
.cv-ut{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--good);background:var(--good-wash);border-radius:20px;padding:2px 9px;
  white-space:nowrap}

/* ---------------------------------------------------------------------------
   Last month. Five figures, the target, the verdict, and what the account is
   actually struggling with — which is usually about those five figures. */
.lmtable td,.lmtable th{vertical-align:top}
.lmtable tbody th{white-space:nowrap;font-weight:600;text-align:left}
.lmtable tbody th a{color:var(--ink)}
.lm-gap{display:block;font-size:10px;font-weight:400;color:var(--warn);
  text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.lm-tc,.lm-vc{white-space:nowrap}
.lm-t{display:block;font-size:11.5px;color:var(--ink-muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lm-v{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:2px}
.lm-hit{color:var(--good)} .lm-missed{color:var(--crit)}
.lm-unknown{color:var(--ink-faint)}
.lm-none{font-size:11.5px;color:var(--ink-faint);font-style:italic}

/* Three lines, then an ellipsis, with the whole thing on hover. One account
   writing two paragraphs should not set the width of the table. */
.lm-ch{max-width:38ch;min-width:220px}
.lm-said{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;line-height:1.4;white-space:normal}
.lm-cw{display:block;font-size:10px;color:var(--ink-faint);margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.uptable tbody th{white-space:nowrap;font-weight:600;text-align:left}
.uptable tbody th a{color:var(--ink)}
.up-offer{max-width:36ch;line-height:1.4}
.up-why{max-width:30ch;font-size:12.5px;color:var(--ink-muted);line-height:1.4}
.up-when{white-space:nowrap;font-size:11.5px}

/* Every cell in the Sales Connection is an input that saves itself. */
.sc-in{width:100%;font-family:inherit;font-size:13px;padding:6px 8px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);
  min-width:0}
.sc-in:hover{border-color:var(--hairline)}
.sc-in:focus{outline:none;border-color:var(--plum);background:var(--surface)}
.sc-in.sr-busy{opacity:.5}
.sc-in.sr-ok{border-color:var(--good);background:var(--good-wash)}
textarea.sc-in{resize:vertical;line-height:1.4}
.sc-off{min-width:220px}
.sc-val{text-align:right}
.sc-date{width:130px}
.sc-dc{white-space:nowrap}
/* An opportunity we have written down and not yet raised. The common case, and
   the reason the room is worth having. */
.sc-nyp{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--warn);margin-top:2px}
.sc-acts{white-space:nowrap;display:flex;gap:4px;align-items:center}
.sc-del{opacity:.3}
tr:hover .sc-del{opacity:1}
.sc-del:hover{color:var(--crit)}

/* ---------------------------------------------------------------------------
   Notes. Written on the book or on a client page, answered underneath, and
   marked noted when there is nothing to answer back. */
.cm-new{display:grid;grid-template-columns:190px 160px minmax(0,1fr) auto;gap:9px;
  align-items:start;margin:12px 0 18px}
.cm-new input,.cm-new select,.cm-new textarea{font-family:inherit;font-size:13px;
  padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--raised);color:var(--ink);min-width:0}
.cm-new textarea{resize:vertical}
.cm-new input:focus,.cm-new select:focus,.cm-new textarea:focus{outline:none;
  border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash)}
@media (max-width:820px){ .cm-new{grid-template-columns:minmax(0,1fr)} }

.cm-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.cm{border:1px solid var(--hairline);border-radius:11px;background:var(--raised);
  padding:11px 14px}
.cm-pin{border-color:var(--plum-edge);background:var(--plum-wash)}
.cm-noted{opacity:.72}
.cm-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.cm-who{font-size:12px;font-weight:700;color:var(--plum)}
.cm-when{font-size:10.5px;color:var(--ink-faint)}
.cm-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--plum);background:var(--plum-wash);border:1px solid var(--plum-edge);
  border-radius:4px;padding:2px 7px;text-decoration:none;white-space:nowrap}
.cm-book{color:var(--ink-faint);background:var(--surface-2);border-color:var(--hairline)}
.cm-ok{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--good);background:var(--good-wash);border-radius:20px;padding:2px 9px;
  white-space:nowrap}
.cm-note{margin-left:auto;font-family:inherit;font-size:10.5px;font-weight:600;
  border:1px solid var(--hairline);border-radius:20px;padding:2px 10px;cursor:pointer;
  background:var(--raised);color:var(--ink-muted);white-space:nowrap}
.cm-note:hover{border-color:var(--good);color:var(--good)}
.cm-ok + .cm-pin-b,.cm-ok{margin-left:auto}
.cm-pin-b{background:none;border:0;cursor:pointer;font-size:13px;color:var(--ink-faint);
  padding:0 2px}
.cm-pin-b.on{color:var(--plum)}
.cm-del{opacity:.3}
.cm:hover .cm-del{opacity:1}
.cm-b{font-size:13.5px;line-height:1.55;margin:0;max-width:88ch;white-space:pre-wrap}

/* One level of reply. A thread of threads is a thing nobody reads to the
   bottom of. */
.cm-res{list-style:none;margin:10px 0 0;padding:0 0 0 14px;display:grid;gap:8px;
  border-left:2px solid var(--hairline)}
.cm-re{border:0;background:none;padding:4px 0}
.cm-re .cm-b{font-size:13px}
.cm-ref{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:7px;
  margin-top:9px;padding-left:14px}
.cm-ref input{font-family:inherit;font-size:12.5px;padding:6px 9px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--surface);
  color:var(--ink);min-width:0}
.cm-ref input:focus{outline:none;border-color:var(--plum)}
@media (max-width:700px){ .cm-ref{grid-template-columns:minmax(0,1fr)} }

.rbsub{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px}

/* Status sits with the heading and the call date, not in the actions row: it is
   a fact about the report, not a thing you press. */
#rbStatus,#rbCategory{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--raised);color:var(--ink);min-width:150px}
#rbStatus:disabled{opacity:.55;cursor:default}
.rst-ready{background:var(--good-wash);color:var(--good);border-color:var(--good-edge)}

/* A file that has the shape of a short month. It cannot be proved from the
   file, so it is a sentence to read rather than a tick that is taken away. */
.dl-warn{display:block;margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--warn);
  background:var(--plum-wash);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
  padding:7px 10px;max-width:62ch}

.hp-duec{white-space:nowrap}
.hp-dd{width:132px}
.hp-dnote{display:block;margin-top:2px;font-size:10.5px}

/* The Seller Central check. Deliberately not quiet: it is the one step the desk
   cannot do for you, and the only one that stands between an export and a
   client. */
.rbsc{border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:10px;
  background:var(--plum-wash);padding:13px 16px;margin:4px 0 16px;display:grid;gap:6px}
.rbsc.on{border-color:var(--good-edge);border-left-color:var(--good);
  background:var(--good-wash)}
.rbsc-l{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.rbsc-l input{width:18px;height:18px;margin-top:1px;accent-color:var(--good);cursor:pointer}
.rbsc-l b{display:block;font-size:14px}
.rbsc-w{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:3px;
  line-height:1.45;max-width:70ch}
.rbsc-when{font-size:11.5px;color:var(--good);font-weight:600;padding-left:29px}
.rbsc-need{font-size:11.5px;color:var(--warn);font-weight:600;padding-left:29px}
.rbsc-yes{font-size:11.5px;color:var(--good);font-weight:600;white-space:nowrap}
.rbsc-no{font-size:11.5px;color:var(--warn);font-weight:600;white-space:nowrap}
.rbsc-na{font-size:11.5px;color:var(--ink-faint)}

/* The Build Room --------------------------------------------------------- */
.in-build{--plum:#3B4A6B;--plum-wash:#F1F3F8;--plum-edge:rgba(59,74,107,.2);}
.bqlist{display:grid;gap:10px;margin:8px 0 22px}
.bq{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:14px 16px;min-width:0}
.bq-todo{border-left:3px solid var(--warn)}
.bq-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bq-topic{font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em}
.bq-when{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.bq-q{font-size:14.5px;font-weight:600;margin:8px 0 4px;letter-spacing:-.01em}
.bq-c{font-size:12.5px;color:var(--ink-muted);margin:0 0 6px;line-height:1.5;max-width:78ch}
.bq-b{font-size:12px;color:var(--ink-muted);margin:0 0 8px}
.bq-b b{font-weight:600;color:var(--ink);margin-right:4px}
.bq-opts{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.bq-opt{font-family:inherit;font-size:12px;cursor:pointer;background:transparent;text-align:left}
.bq-rec{margin-left:6px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.bq-a{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 10px;margin-top:4px;
  border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface);resize:vertical}
.bq-a:focus{outline:2px solid var(--plum);outline-offset:1px}
.bq-acts{display:flex;gap:8px;margin-top:8px}
.bboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
@media (max-width:860px){.bboard{grid-template-columns:minmax(0,1fr)}}
.bcol{min-width:0}
.bcol .lsub .chipn,.bshipped .chipn{margin-left:6px}
.bitem{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:11px 13px;margin-bottom:8px}
.bitem-building{border-left:3px solid var(--good)}
.bitem-t{font-size:13.5px;font-weight:600}
.bitem-d{font-size:12px;color:var(--ink-muted);margin:4px 0 6px;line-height:1.45}
.bitem-f{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11px;color:var(--ink-faint)}
.bshipped{margin-top:22px}
.bshipped summary{cursor:pointer}
.bshiplist{display:grid;gap:4px;margin-top:8px}
.bship{display:grid;grid-template-columns:minmax(0,1fr) 110px 90px;gap:10px;font-size:12.5px;
  padding:6px 0;border-bottom:1px solid var(--hairline)}
.bship-a,.bship-d{color:var(--ink-faint);font-size:11.5px}

/* ClickUp Pulse ----------------------------------------------------------- */
.pulse{background:var(--raised);border:1px solid var(--hairline);border-left:3px solid var(--plum);
  border-radius:10px;padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow);min-width:0}
.pulse-bad{border-left-color:var(--warn)}
.pulse-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:9px;
  border-bottom:1px solid var(--hairline)}
.pulse-h h4{font-size:13px;font-weight:600}
.pulse-src{font-size:10.5px;color:var(--ink-faint);flex:1 1 240px}
.pulse-headline{font-size:14px;font-weight:600;margin:12px 0 4px;line-height:1.45;letter-spacing:-.005em}
.pulse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px}
@media (max-width:900px){.pulse-grid{grid-template-columns:minmax(0,1fr)}}
.pulse-sec{min-width:0}
.pulse-sec h5{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);margin:12px 0 4px}
.pulse-overdue h5{color:var(--crit)} .pulse-stuck h5,.pulse-waiting_on_client h5{color:var(--warn)}
.pulse-moving h5{color:var(--good)}
.pulse-sec ul{list-style:none;margin:0;padding:0}
.pulse-sec li{padding:6px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;line-height:1.45}
.pulse-sec li:last-child{border-bottom:none}
.pulse-refs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pulse-ref{font-size:10.5px;padding:1px 7px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--hairline);color:var(--ink-muted);text-decoration:none;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.pulse-ref:hover{border-color:var(--plum);color:var(--plum)}
.pulse-uns{display:inline-block;margin-top:4px;font-size:10.5px;color:var(--warn)}
.pulse-empty{font-size:12.5px;color:var(--ink-muted);margin:10px 0 2px;line-height:1.5}
.pulse-note{font-size:11px;color:var(--ink-faint);margin-top:12px}
.pulse-foot{font-size:10.5px;color:var(--ink-faint);margin-top:4px;font-family:"IBM Plex Mono",monospace}
.pulse-msg{font-size:11.5px;color:var(--ink-muted);margin-top:6px}
.pulse-msg:empty{display:none}
.bmap{display:block;width:100%;height:calc(100vh - 190px);min-height:560px;border:1px solid var(--hairline);
  border-radius:10px;background:#FAF8F9}

/* The Agents Rooms ------------------------------------------------------- */
.in-agents{--plum:#5B3A8C;--plum-wash:#F4F0FA;--plum-edge:rgba(91,58,140,.2);}
.ag-clients{margin:6px 0 16px;flex-wrap:wrap}
.ag-clients .tchip{text-decoration:none}
.ag-nomap{font-size:10px;opacity:.7;margin-left:4px}
.ag-idea{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;
  display:grid;gap:9px;max-width:80ch}
.ag-idea p{font-size:13px;line-height:1.55;color:var(--ink-muted);margin:0}
.ag-idea b{color:var(--ink);font-weight:600}
.ag-brief{margin:10px 0;background:var(--raised);border:1px solid var(--hairline);border-radius:10px;
  padding:10px 14px}
.ag-brief summary{cursor:pointer;font-size:12.5px;font-weight:600}
.ag-brief summary .mono{font-weight:400;font-size:11px;color:var(--ink-faint);margin-left:6px}
.ag-brief pre{white-space:pre-wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.55;
  color:var(--ink-muted);margin:10px 0 2px;max-height:520px;overflow:auto}
.ag-runs td{font-size:12px;vertical-align:top}
.ag-err{display:block;font-size:11px;color:var(--warn);margin-top:3px;max-width:40ch}

/* The MD Rooms ------------------------------------------------------------ */
.in-md{--plum:#2F5D62;--plum-wash:#EEF5F5;--plum-edge:rgba(47,93,98,.2);}
.md-room{margin-bottom:18px}
.md-rh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.md-rh .lsub{margin:12px 0 6px}
.md-list{list-style:none;margin:0;padding:0;background:var(--raised);border:1px solid var(--hairline);border-radius:10px}
.md-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline;
  padding:9px 14px;border-bottom:1px solid var(--hairline);font-size:13px}
.md-list li:last-child{border-bottom:none}
.md-list a{font-weight:600;color:var(--ink);text-decoration:none}
.md-list a:hover{color:var(--plum)}
.md-list .mono{font-size:10.5px;color:var(--ink-faint)}
.md-when{font-size:11px;color:var(--ink-faint)}
@media (max-width:760px){.md-list li{grid-template-columns:minmax(0,1fr)}}
.md-new{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.md-new input{flex:1 1 220px;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--hairline-strong);
  border-radius:8px;background:var(--surface)}
.md-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.md-split{grid-template-columns:minmax(0,1fr)}}
.md-edit{display:flex;flex-direction:column;gap:8px;min-width:0}
.md-title{font:inherit;font-size:15px;font-weight:600;padding:8px 10px;border:1px solid var(--hairline-strong);
  border-radius:8px;background:var(--surface)}
#mdBody{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.6;min-height:560px;padding:12px;
  border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface);resize:vertical}
.md-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md-del{margin-left:auto}
.md-prev{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:14px 18px;min-width:0;
  max-height:760px;overflow:auto}
.md-full{max-height:none}
.md-plabel{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.md{font-size:13px;line-height:1.6;color:var(--ink)}
.md h2{font-size:18px;margin:10px 0 8px}.md h3{font-size:14.5px;margin:18px 0 6px}
.md h4,.md h5{font-size:13px;margin:14px 0 4px}
.md p{margin:0 0 9px}.md ul,.md ol{margin:0 0 10px;padding-left:20px}.md li{margin:2px 0}
.md code{font-family:"IBM Plex Mono",monospace;font-size:.9em;background:var(--surface-2);padding:1px 4px;border-radius:3px}
.md pre{white-space:pre-wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--surface-2);
  padding:10px;border-radius:8px}
.md .md-t td,.md .md-t th{font-size:11.5px;vertical-align:top}
.md-ver{margin:6px 0}.md-ver summary{cursor:pointer;font-size:12px}
.md-steps{font-size:13px;line-height:1.6;color:var(--ink-muted);padding-left:20px;max-width:80ch}
.md-prompt{white-space:pre-wrap;font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--raised);
  border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;max-width:90ch}
.mcp-once{background:var(--warn-wash);border:1px solid var(--warn-edge);border-radius:10px;padding:10px 14px;margin:8px 0}
.mcp-once p{margin:0 0 6px;font-size:12.5px}
.mcp-once input{width:100%;box-sizing:border-box;font-family:"IBM Plex Mono",monospace;font-size:12px;padding:7px 9px;
  border:1px solid var(--hairline-strong);border-radius:6px;background:var(--surface)}
.md blockquote{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--plum);background:var(--plum-wash);
  color:var(--ink-muted);font-size:12.5px;border-radius:0 6px 6px 0}
.ag-overview{max-width:920px}
.ag-overview .md{font-size:13.5px}
.bplan{margin:0 0 26px;background:var(--raised);border:1px solid var(--hairline);border-left:3px solid var(--plum);
  border-radius:10px;padding:12px 16px}
.bplan > summary{cursor:pointer;display:flex;flex-direction:column;gap:3px;list-style:none}
.bplan > summary::-webkit-details-marker{display:none}
.bplan-t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.bplan-h{font-size:12px;color:var(--ink-faint)}
.bplan .md-prev{border:none;padding:10px 0 0;background:transparent}

/* Coming: compose from Supermetrics -------------------------------------- */
.smnote{margin:10px 0 16px;padding:10px 14px;border-radius:10px;background:#EEF4F9;border:1px solid rgba(18,80,127,.18);
  border-left:3px solid #12507F;font-size:12.5px;line-height:1.5;color:#12324F}
.smnote b{color:#12507F}
.md a{color:var(--plum)}
.mdk-grid{display:grid;gap:14px;margin-top:22px}
.mdk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start;margin:0;
  background:var(--raised);border:1px solid var(--hairline);border-radius:12px;padding:16px}
@media (max-width:860px){.mdk{grid-template-columns:minmax(0,1fr)}}
.mdk-text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.mdk-h{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.mdk-w{font-size:13px;color:var(--ink-muted);line-height:1.5;margin:0}
.mdk-prev{display:block;text-decoration:none;color:inherit;border:1px solid var(--hairline);border-radius:10px;
  overflow:hidden;background:#FAF8F9;min-width:0}
a.mdk-prev:hover{border-color:var(--plum)}
.mdk-frame{display:block;position:relative;height:240px;overflow:hidden}
.mdk-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
@media (max-width:860px){.mdk-frame{height:200px}}
.mdk-cap{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;font-size:12px;
  border-top:1px solid var(--hairline);background:var(--raised)}
.mdk-cap b{color:var(--plum);font-weight:600}
.mdk-none{display:flex;align-items:center;justify-content:center;height:240px;font-size:12.5px;color:var(--ink-faint);
  padding:20px;text-align:center}

/* Notifications ------------------------------------------------------------ */
.in-notifications{--plum:#8A5000;--plum-wash:#FDF7EF;--plum-edge:rgba(138,80,0,.2);}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:99px;border:1px solid var(--hairline);color:var(--ink-muted);margin-right:10px;text-decoration:none}
.bell svg{width:18px;height:18px}
.bell:hover{border-color:var(--ink-muted);color:var(--ink)}
.bell-on{color:var(--warn);border-color:var(--warn-edge);background:var(--warn-wash)}
.bell-n{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--crit);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center}
.nt-clear{background:var(--good-wash);color:var(--good);border-radius:10px;padding:12px 14px;font-size:13px}
.nt-stack{display:grid;gap:10px;margin-bottom:18px}
.nt{background:var(--raised);border:1px solid var(--hairline);border-left:3px solid var(--warn);border-radius:10px;
  padding:14px 16px;min-width:0}
.nt-crit{border-left-color:var(--crit)} .nt-broken{border-left-color:var(--hairline-strong)}
.nt-h{display:flex;gap:12px;align-items:flex-start}
.nt-n{flex:none;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:var(--warn-wash);color:var(--warn);
  font-weight:700;display:grid;place-items:center;font-size:14px}
.nt-crit .nt-n{background:var(--crit-wash);color:var(--crit)}
.nt-t h3{font-size:14px;font-weight:600;margin:3px 0 3px}
.nt-t p{font-size:12.5px;color:var(--ink-muted);margin:0;line-height:1.5;max-width:90ch}
.nt-th{font-size:11px;font-weight:500;color:var(--ink-faint);margin-left:4px}
.nt-l{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hairline)}
.nt-l li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.nt-l a{font-weight:600;color:var(--ink)}
.nt-d{color:var(--ink-muted);font-size:12px}
.nt-a{display:flex;gap:6px}
@media (max-width:760px){.nt-l li{grid-template-columns:minmax(0,1fr)}}
.nt-fix{font-size:12.5px;color:var(--ink-muted);margin:10px 0 0}
.nt-fix b{color:var(--ink);margin-right:4px}
.nt-err{font-size:12.5px;color:var(--warn);margin:10px 0 0}
.nt-rules td{vertical-align:top;font-size:12.5px}
.nt-rw{display:block;color:var(--ink-muted);font-size:12px;margin-top:3px;max-width:80ch;line-height:1.45}
.nt-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.nt-thc{white-space:nowrap}
.nt-thr{width:64px;font:inherit;font-size:13px;padding:5px 7px;border:1px solid var(--hairline-strong);border-radius:6px;margin-right:4px}
.ntc{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;background:var(--warn-wash);border:1px solid var(--warn-edge);
  border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:12.5px}
.ntc-h{font-weight:700;color:var(--warn)}
.ntc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 400px}
.ntc b{font-weight:600}

/* Kris & Rich Catch Ups ---------------------------------------------------- */
.in-catchups{--plum:#2E5E4E;--plum-wash:#EEF5F2;--plum-edge:rgba(46,94,78,.2);}
.ka-new input[name="action"]{flex:3 1 320px}
.ka-table td{vertical-align:top;font-size:12.5px}
.ka-tick{width:28px;padding-top:12px}
.ka-in{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:transparent;
  width:100%;box-sizing:border-box}
.ka-in:hover,.ka-in:focus{border-color:var(--hairline-strong);background:var(--surface)}
.ka-text{resize:vertical;min-width:260px}
.ka-from{display:block;font-size:11px;color:var(--ink-faint);padding:0 8px}
.ka-done .ka-text,.ka-done td{opacity:.6}
tr.ka-done .ka-text{text-decoration:line-through}
tr.ka-dropped .ka-text{text-decoration:line-through;opacity:.5}
.ka-log{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;margin-top:10px}
.ka-log label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}
.ka-log .ka-wide{grid-column:1 / -1}
.ka-log input,.ka-log select,.ka-log textarea{font:inherit;font-size:13px;font-weight:400;padding:7px 9px;
  border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface)}
.ka-log button{justify-self:start}
.kc{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;margin:12px 0}
.kc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kc-h h3{font-size:14.5px;font-weight:600;margin:0}
.kc-notes{width:100%;box-sizing:border-box;margin-top:10px;font:inherit;font-size:13px;line-height:1.55;padding:10px 12px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--surface);resize:vertical}
.kc-acts{list-style:none;margin:4px 0 8px;padding:0;font-size:12.5px}
.kc-acts li{padding:4px 0;border-bottom:1px solid var(--hairline)}
.kc-acts b{font-weight:600;margin-right:6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}

/* Contracts ------------------------------------------------------------------ */
.kx{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;padding:16px;margin:14px 0}
.kx-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:10px}
.kx-client{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.kx-h h3{font-size:16px;font-weight:600;margin:2px 0 3px}
.kx-sum{font-size:12.5px;color:var(--ink-muted)}
.kx-file{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kx-up{cursor:pointer}
.kx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;margin-top:10px}
@media (max-width:900px){.kx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kx-f{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.04em;min-width:0}
.kx-long{grid-column:span 2}
@media (max-width:900px){.kx-long{grid-column:1 / -1}}
.kx-in{font:inherit;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:7px 9px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--surface);min-width:0}
.kx-f > select.kx-in{max-width:280px}
textarea.kx-in{resize:vertical;line-height:1.5}
.kx-read{font-size:11.5px;color:var(--ink-faint);margin:10px 0 0}

/* The selects added with the catch-ups, contracts and MD Rooms get the same
   aubergine arrow as every other picker on the desk. */
.md-new select, .ka-log select, select.ka-in, select.kx-in, #rbCategory, #rbStatus{
  -webkit-appearance:none; appearance:none; font-family:inherit; cursor:pointer;
  padding-right:29px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2345113F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.md-new select{font-size:13px;padding:7px 29px 7px 10px;border:1px solid var(--hairline-strong);border-radius:8px;
  background-color:var(--surface);color:var(--ink)}

/* Every room its own dot, in the colour its pages use. The rooms added in
   September were falling back to grey. */
.smi-notifications .smi-dot, .sb-notifications .sb-dot{background:#8A5000;}
.smi-md .smi-dot, .sb-md .sb-dot{background:#2F5D62;}
.smi-agents .smi-dot, .sb-agents .sb-dot{background:#5B3A8C;}
.smi-build .smi-dot, .sb-build .sb-dot{background:#3B4A6B;}
.smi-catchups .smi-dot, .sb-catchups .sb-dot{background:#2E5E4E;}
.sb-reports .sb-dot{background:#8A5000;} .sb-lounge .sb-dot{background:#12507F;}
.sb-strategy .sb-dot{background:#45113F;} .sb-handover .sb-dot{background:#8A5000;}
.sb-sales .sb-dot{background:#0B6357;}
.kx-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;margin:8px 0 6px;
  padding:26px 20px;border:2px dashed var(--hairline-strong);border-radius:12px;background:var(--raised);color:var(--ink-muted);font-size:12.5px}
.kx-drop b{font-size:15px;color:var(--ink)}
.kx-drop:hover,.kx-drop.on{border-color:var(--plum);background:var(--plum-wash)}
.kx-drop:focus-within{outline:2px solid var(--plum);outline-offset:2px}
.kx-or{font-size:12px;color:var(--ink-faint);margin:12px 0 0}
.msform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:10px}
.msform label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink-muted)}
.msform input,.msform select{font:inherit;font-size:13px;font-weight:400;color:var(--ink);padding:7px 9px;
  border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface);min-width:0}
.msform input[name=tenant_id],.msform input[name=client_id],.msform input[name=folder_url]{font-family:"IBM Plex Mono",monospace;font-size:12px}
.ms-one{grid-template-columns:minmax(0,1fr)}
.msacts,.msform .con-n{grid-column:1 / -1}
.msacts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:700px){.msform{grid-template-columns:minmax(0,1fr)}}
.msform select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:29px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2345113F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.ms-msg{grid-column:1 / -1;font-size:12.5px;margin:0}
.ms-msg:empty{display:none}
.ms-msg.ok{color:var(--good)} .ms-msg.bad{color:var(--crit)}

/* Contracts, read-only view ------------------------------------------------ */
.cvt th a{font-weight:600;color:var(--ink);text-decoration:none}
.cvt th a:hover{color:var(--plum)}
.cvt td,.cvt th{font-size:13px;vertical-align:top}
.cv-na{color:var(--ink-faint)}
.cv-nav{margin:18px 0 6px;flex-wrap:wrap}
.cv-nav .tchip{text-decoration:none}
.cv{background:var(--raised);border:1px solid var(--hairline);border-radius:14px;padding:22px 24px;margin:16px 0;
  scroll-margin-top:16px}
.cv-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:14px;
  border-bottom:1px solid var(--hairline)}
.cv-client{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);font-weight:600}
.cv-h h3{margin:3px 0 2px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.cv-with{margin:0;font-size:12.5px;color:var(--ink-muted)}
.cv-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:10px;overflow:hidden;margin:16px 0}
.cv-money > div{background:var(--surface-2);padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cv-l{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.cv-v{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cv-vs{font-size:14px;letter-spacing:0;line-height:1.35}
.cv-s{font-size:12px;color:var(--ink-muted);line-height:1.4}
.cv-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 6px}
.cv-f dt{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.cv-f dd{margin:2px 0 0;font-size:13px}
.cv-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;margin-top:10px}
.cv-b{min-width:0;padding:10px 0;border-top:1px solid var(--hairline)}
.cv-b h4{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--ink)}
.cv-b p{margin:0 0 6px;font-size:13px;line-height:1.6;color:var(--ink-muted);max-width:72ch}
.cv-wide{grid-column:1 / -1}
.cv-note{grid-column:1 / -1;background:var(--warn-wash);border:1px solid var(--warn-edge);border-radius:10px;padding:12px 14px;margin-top:8px}
.cv-note h4{color:var(--warn)}
.cv-note p{color:var(--ink)}
.cv-foot{margin:12px 0 0;font-size:11.5px;color:var(--ink-faint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (max-width:760px){.cv-money,.cv-body{grid-template-columns:minmax(0,1fr)}.cv{padding:18px}}
.cvt td.mono{white-space:nowrap}
.cv-foot{max-width:none;width:100%}
.cv-foot a{margin-left:auto}
.cv-cap{margin:10px 0 4px;padding:10px 14px;border-radius:10px;background:var(--plum-wash);border:1px solid var(--plum-edge);font-size:13px}
.cv-cap b{color:var(--plum);margin-right:6px}
.cv-cap span{color:var(--ink-faint);font-size:12px;margin-left:4px}
.kc-in{font:inherit;border:1px solid transparent;border-radius:6px;background:transparent;padding:4px 6px}
.kc-in:hover,.kc-in:focus{border-color:var(--hairline-strong);background:var(--surface)}
.kc-date{font-family:"IBM Plex Mono",monospace;font-size:12px}
.kc-title{flex:1 1 300px;font-size:14.5px;font-weight:600;min-width:0}
.kc .lsub{margin:12px 0 4px}
.kc-tr{margin:10px 0}
.kc-tr summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.kc-tr pre{white-space:pre-wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.55;color:var(--ink-muted);
  max-height:520px;overflow:auto;background:var(--surface-2);border-radius:8px;padding:10px 12px;margin-top:8px}
.ka-table{table-layout:fixed;width:100%}
.ka-table .ka-text{min-width:0;overflow:hidden}
.ka-table select.ka-in,.ka-table input.ka-in{width:100%}
.ka-note{display:block;font-size:11.5px;color:var(--good);padding:2px 8px 0}
.ms-signin{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.ms-signin h4,.ms-h4{margin:0 0 6px;font-size:12.5px;font-weight:600}
.ms-h4{margin-top:14px}
.ms-signin p{font-size:12.5px;color:var(--ink-muted);margin:0 0 8px;max-width:80ch}
.ms-err{color:var(--crit)}
.ms-domains{margin-top:6px;max-width:620px}
.ms-domains td{font-size:12.5px;padding:5px 8px}
.ms-dom{width:100%;box-sizing:border-box;font-family:"IBM Plex Mono",monospace;font-size:12px;padding:5px 8px;
  border:1px solid var(--hairline-strong);border-radius:6px;background:var(--surface)}

/* ---------- Note from the Ads ----------
   Terracotta: a colour no other room uses, so its tile on the client page and
   its dot in the picker read as the same place. */
.smi-ads .smi-dot, .sb-ads .sb-dot{background:#9A3B26;}
.in-ads{--plum:#9A3B26;--plum-wash:#FBF2EF;--plum-edge:rgba(154,59,38,.2);}
.acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;margin-top:16px;}
.ac{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);scroll-margin-top:90px;}
.ac:target{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.ac-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.ac-h h3{font-size:15px;font-weight:600;}
.ac-m{font-size:11px;color:var(--ink-faint);}
.ac-u{font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-wash);border:1px solid var(--warn-edge);border-radius:99px;padding:1px 8px;}
.ac-open{margin-left:auto;font-size:12px;}
.anform{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.anform textarea{grid-column:1/-1;resize:vertical;min-height:54px;}
.anform select,.anform textarea{font-family:inherit;font-size:13px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--hairline);background:var(--ground);color:var(--ink);min-width:0;}
.anform select:focus,.anform textarea:focus{outline:none;background:var(--surface);border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-wash);}
.anform .btn{grid-column:2;justify-self:end;}
.anlist{list-style:none;margin:14px 0 0;padding:0;}
.an{padding:10px 0;border-top:1px solid var(--hairline);}
.an-unseen{background:var(--warn-wash);margin:0 -10px;padding:10px;border-radius:8px;border-top-color:transparent;}
.an-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.an-a{font-size:12px;font-weight:600;color:var(--ink);}
.an-w{font-size:10.5px;color:var(--ink-faint);}
.an-client{font-size:12.5px;font-weight:600;}
.an-h .icon{margin-left:auto;opacity:.3;}
.an:hover .icon{opacity:1;}
.an-b{font-size:13px;color:var(--ink-muted);line-height:1.55;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;}
.an-seen{font-size:11px;color:var(--good);margin-top:4px;}
.an-seen-btn{margin-top:6px;}
.an-empty,.an-more{font-size:12px;color:var(--ink-faint);margin-top:12px;}
.an-wide{max-width:780px;}
.an-topic{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);color:var(--ink-muted);}
.an-topic.at-test-running{background:#EFF5FA;color:#12507F;}
.an-topic.at-budget{background:var(--warn-wash);color:var(--warn);}
.an-topic.at-risk{background:var(--crit-wash);color:var(--crit);}
.an-topic.at-win{background:var(--good-wash);color:var(--good);}
.an-topic.at-heads-up-for-the-am{background:#9A3B26;color:#fff;}

/* ---------- the client page, made up of the rooms ---------- */
.cmp-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 10px;}
.cmp-head h2{font-size:24px;}
.cmp-pod{font-size:12.5px;color:var(--ink-muted);margin-top:6px;}
.cmp-links{display:flex;gap:8px;flex-wrap:wrap;}
.cmp-links a{font-size:12px;padding:5px 11px;border:1px solid var(--hairline);border-radius:99px;background:var(--raised);text-decoration:none;}
.cmp-lede{font-size:12.5px;color:var(--ink-faint);margin:4px 0 14px;}
.cmp-alert{background:#FBF2EF;border:1px solid rgba(154,59,38,.25);color:#6E2A1B;border-radius:10px;padding:10px 14px;font-size:13px;margin:8px 0 12px;}
.cmp-alert a{color:#9A3B26;margin-left:6px;}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
@media (max-width:860px){.cmp-grid{grid-template-columns:1fr;}}
.cmp-t{--room:#75035A;background:var(--raised);border:1px solid var(--hairline);border-top:3px solid var(--room);
  border-radius:12px;padding:14px 18px 16px;box-shadow:var(--shadow);min-width:0;}
.cmp-wide{grid-column:1/-1;}
.cmp-strategy{--room:#45113F;} .cmp-lounge{--room:#12507F;} .cmp-reports{--room:#8A5000;}
.cmp-sales{--room:#0B6357;} .cmp-ads{--room:#9A3B26;} .cmp-handover{--room:#8A5000;}
.cmp-tickets{--room:#3B4A6B;} .cmp-amnotes{--room:#75035A;}
.cmp-th{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cmp-dot{width:9px;height:9px;border-radius:50%;background:var(--room);flex:0 0 auto;}
.cmp-th h3{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--room);}
.cmp-go{margin-left:auto;font-size:12px;color:var(--room);text-decoration:none;font-weight:600;}
.cmp-go:hover{text-decoration:underline;}
.cmp-tb h4{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:12px 0 4px;}
.cmp-q{font-size:13px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;}
.cmp-by,.cmp-sub{font-size:11px;color:var(--ink-faint);}
.cmp-r{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--hairline);font-size:13px;}
.cmp-r:first-child{border-top:none;}
.cmp-k{color:var(--ink-faint);font-size:12px;}
.cmp-gap{color:var(--ink-faint);font-style:italic;}
.cmp-warn{color:var(--warn);}
.cmp-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cmp-chip{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink-muted);}
.cmp-chip.sm{font-size:10.5px;padding:1px 7px;}
.cmp-sample{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--crit);border:1px solid var(--crit-edge);border-radius:4px;padding:0 4px;}
.cmp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px;}
.cmp-kpis3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cmp-kpis > div{background:var(--surface-2);border-radius:8px;padding:8px 10px;min-width:0;}
.cmp-kv{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.cmp-kl{display:block;font-size:10.5px;color:var(--ink-faint);}
@media (max-width:520px){.cmp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.cmp-t .ktrack{box-shadow:none;border:none;padding:8px 0 0;background:none;}
.cmp-notes{list-style:none;margin:6px 0 0;padding:0;}
.cmp-notes li{padding:8px 0;border-top:1px solid var(--hairline);}
.cmp-notes li:first-child{border-top:none;}
.cmp-notes li.hot{background:#FBF2EF;border-radius:8px;padding:8px 10px;margin:0 -10px;}
.cmp-notes p{font-size:13px;line-height:1.5;margin-top:3px;overflow-wrap:anywhere;}
.cmp-note{font-size:11px;color:var(--ink-faint);margin-top:10px;border-top:1px dashed var(--hairline);padding-top:8px;}
.cmp-review{margin:26px 0 10px;background:var(--raised);border:1px dashed var(--hairline-strong);border-radius:12px;padding:14px 18px;}
.cmp-review summary{font-weight:600;cursor:pointer;font-size:13.5px;}
.cmp-review .cmp-sub{font-size:12px;margin:8px 0 10px;}
.cmp-state{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;}
.cmp-s-there{background:var(--good-wash);color:var(--good);}
.cmp-s-move{background:var(--warn-wash);color:var(--warn);}
.cmp-s-ask{background:var(--crit-wash);color:var(--crit);}
.cmp-s-new{background:#FBF2EF;color:#9A3B26;}

/* ---------- the sidebar and the header ----------
   The rooms sit in a sidebar that slides away with one click; the logo, the
   bell and who is signed in sit in a header over the page. Below 900px the
   sidebar is a drawer that opens over the page. The dot colours come from the
   .smi-<room> rules, so a room has one colour wherever it appears. */
:root{--sbw:254px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.spacebar{position:fixed;top:0;left:0;bottom:0;width:var(--sbw);z-index:60;background:var(--raised);
  border-right:1px solid var(--hairline-strong);border-bottom:none;box-shadow:none;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .2s ease;}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 6px 20px;}
.sb-title{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
.sb-hide{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border-radius:8px;border:1px solid var(--hairline-strong);background:var(--raised);color:var(--ink-muted);cursor:pointer;}
.sb-hide{border-color:transparent;}
.sb-hide:hover{background:var(--surface-2);color:var(--ink);}
.sb-hide svg{width:18px;height:18px;}
.sb-hide:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.navrow{display:flex;flex-direction:column;gap:2px;padding:4px 10px 20px;}
.smi{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--ink);}
.smi .smi-dot{margin-top:0;}
.smi-l{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3;}
.smi.on{background:var(--surface-2);}
.smi.on .smi-l{font-weight:700;}
.smi-ext{font-size:10px;color:var(--ink-faint);margin-left:auto;}
.smi-solo{margin:2px 0;}
.smi-solo .smi-l{font-weight:600;}
.navdd{margin-top:14px;}
/* A heading, not a button. It stopped being something to click when the
   sections stopped folding; the hairline carries the eye across to the rooms. */
.navhd{display:flex;align-items:center;gap:8px;margin:0;padding:0 10px 6px;color:var(--ink-faint);}
.navhd::after{content:"";flex:1 1 auto;height:1px;background:var(--hairline);}
.nb-k{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.navlist{display:flex;flex-direction:column;gap:1px;margin-top:2px;}
.navlist[hidden]{display:none;}
.sb-backdrop{display:none;}

/* the header over the page */
/* Not sticky: several rooms pin their own section bar to the top of the page,
   and a sticky header would sit on top of it. */
.lodgebar{background:var(--raised);border-bottom:1px solid var(--hairline-strong);position:relative;z-index:40;}
.lodgebar-in{max-width:1160px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px;}
.lodgebar .logoplate{flex:0 0 auto;}
.lodgebar .logo{height:40px;width:auto;display:block;}
.lodgebar .asof{margin-left:auto;}
.lodgebar .whoami{margin-left:4px;}

/* On a computer the page sits right beside the sidebar, and takes the room
   back when the sidebar is hidden. */
@media (min-width:900px){
  body:not(.gate){padding-left:var(--sbw);transition:padding-left .2s ease;}
  html:not(.sb-closed) .app, html:not(.sb-closed) .lodgebar-in, html:not(.sb-closed) .stagebar-in{margin-left:0;}
  html.sb-closed body:not(.gate){padding-left:0;}
  html.sb-closed .spacebar{transform:translateX(-100%);}
}
@media (max-width:899px){
  .spacebar{width:min(290px,86vw);transform:translateX(-100%);box-shadow:0 0 40px rgba(69,17,63,.18);}
  html.sb-drawer .spacebar{transform:none;}
  html.sb-drawer .sb-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(18,18,18,.28);}
  .lodgebar-in{padding:8px 16px;gap:10px;}
  .lodgebar .logo{height:32px;}
  .lodgebar .asof{display:none;}
  .lodgebar .bell{margin-left:auto;}
  .lodgebar .whoami .wa-n{display:none;}
}
@media (prefers-reduced-motion:reduce){ .spacebar, body:not(.gate){transition:none;} }
.gatelogo{height:auto;width:220px;max-width:70%;}

/* The way back to the rooms: a pull-tab on the left edge, where the sidebar went.
   Shown only while the rooms are hidden. */
.sb-tab{position:fixed;left:0;top:112px;z-index:50;display:none;flex-direction:column;align-items:center;gap:8px;
  width:30px;padding:12px 0 14px;border:1px solid var(--hairline-strong);border-left:none;border-radius:0 12px 12px 0;
  background:var(--raised);color:var(--plum);cursor:pointer;font-family:inherit;
  box-shadow:0 2px 10px rgba(69,17,63,.10);transition:width .15s ease,background .15s ease;}
.sb-tab svg{width:16px;height:16px;flex:0 0 auto;}
.sb-tab-l{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.sb-tab:hover{width:36px;background:var(--plum-wash);}
.sb-tab:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
@media (min-width:900px){ html.sb-closed .sb-tab{display:flex;} html.sb-closed body:not(.gate){padding-left:34px;} }
@media (max-width:899px){ body:not(.gate){padding-left:30px;} }
@media (max-width:899px){ html:not(.sb-drawer) .sb-tab{display:flex;top:84px;} }
@media (prefers-reduced-motion:reduce){ .sb-tab{transition:none;} }

/* An email opened in the Lounge, read from Outlook. */
.lg-acts{white-space:nowrap}
.lg-acts .btn{margin-right:8px}
tr.lg-body td{background:var(--surface-2);padding:0}
.lg-mailbox{padding:14px 18px 16px;max-width:760px}
.lg-mailmeta{font-size:12px;color:var(--ink-muted);margin-bottom:4px}
.lg-mailmeta b{color:var(--ink-faint);font-weight:600}
.lg-mailtext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.6;color:var(--ink);
  background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;margin-top:10px;
  max-height:480px;overflow-y:auto}
.lg-mailbox details{margin-top:10px}
.lg-mailbox summary{cursor:pointer;font-size:12px;color:var(--plum)}
.lg-thread{color:var(--ink-muted);font-size:12.5px}

/* ---------- where you are: the pod-and-client bar, the trail, Go to ---------- */
.trail{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-faint);min-width:0;flex-wrap:wrap;margin-left:6px}
.trail a{color:var(--ink-muted);text-decoration:none}
.trail a:hover{color:var(--plum);text-decoration:underline}
.trail span:not(.tr-sep){color:var(--ink);font-weight:600}
.tr-sep{color:var(--hairline-strong)}
.scopebar{background:var(--raised);border-bottom:1px solid var(--hairline)}
.scopebar-in{max-width:1160px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html:not(.sb-closed) .scopebar-in{margin-left:0}
.sc-pods,.sc-clients{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.sc-pod,.sc-client{font-size:12px;text-decoration:none;color:var(--ink-muted);padding:4px 10px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.sc-pod:hover,.sc-client:hover{background:var(--surface-2);color:var(--ink)}
.sc-pod.on{background:var(--aubergine, #45113F);color:#fff;font-weight:600}
.sc-client.on{background:var(--plum-wash, #FBF2F8);border-color:var(--plum);color:var(--plum);font-weight:600}
.sc-all{color:var(--ink-faint)}
.sc-people{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.sc-people b{color:var(--ink-muted);font-weight:600}
.sc-sep{color:var(--hairline-strong);font-size:16px}
.sc-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;color:var(--ink-muted);
  background:var(--ground);border:1px solid var(--hairline-strong);border-radius:8px;padding:4px 8px;cursor:pointer}
.sc-go:hover{border-color:var(--plum);color:var(--plum)}
.sc-go svg{width:14px;height:14px}
.sc-go kbd,.goto kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;border:1px solid var(--hairline-strong);border-radius:4px;padding:0 4px;color:var(--ink-faint);background:var(--raised)}
/* the chosen client, at the top of the sidebar */
.sb-client{margin:2px 0 10px;padding:10px;border-radius:10px;background:var(--plum-wash, #FBF2F8);border:1px solid rgba(117,3,90,.16)}
.sbc-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sbc-name{font-size:14px;font-weight:700;color:var(--plum)}
.sbc-x{font-size:17px;line-height:1;text-decoration:none;color:var(--ink-faint);padding:0 4px;border-radius:5px}
.sbc-x:hover{color:var(--crit);background:#fff}
.sbc-pod{display:block;font-size:10.5px;color:var(--ink-faint);margin:1px 0 6px}
.sbc-views{display:flex;flex-direction:column;gap:1px}
.sbc-v{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);text-decoration:none;padding:5px 8px;border-radius:7px}
.sbc-v:hover{background:rgba(255,255,255,.7)}
.sbc-v.on{background:#fff;font-weight:700}
.sbc-n{font-size:10px;font-weight:600;color:#8A5000;background:#FDF7EF;border:1px solid rgba(138,80,0,.22);border-radius:99px;padding:0 6px;white-space:nowrap}
/* Go to */
.goto{position:fixed;inset:0;z-index:90;background:rgba(18,18,18,.28);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 0}
.goto[hidden]{display:none}
.goto-box{width:min(560px,100%);background:var(--raised);border-radius:14px;box-shadow:0 20px 60px rgba(69,17,63,.25);overflow:hidden}
.goto-box input{width:100%;border:none;border-bottom:1px solid var(--hairline);padding:16px 18px;font:inherit;font-size:15px;outline:none;background:var(--raised);color:var(--ink)}
.goto-box ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow-y:auto}
.goto-box li{padding:9px 12px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.goto-box li.on,.goto-box li:hover{background:var(--plum-wash, #FBF2F8);color:var(--plum)}
.goto-box li.none{color:var(--ink-faint);cursor:default;background:none}
.goto-foot{font-size:11px;color:var(--ink-faint);padding:8px 14px;border-top:1px solid var(--hairline)}
@media (max-width:899px){ .trail{display:none} .sc-go span,.sc-go kbd{display:none} }

/* One line on a computer: pods, then the clients scrolling sideways, then Go to.
   The date gives way to the trail when there is one. */
@media (min-width:900px){
  .scopebar-in{flex-wrap:nowrap}
  .sc-clients{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .lodgebar .trail ~ .asof{display:none}
}
.lodgebar .whoami{white-space:nowrap}
@media (min-width:900px){
  .sc-pods{flex:none;flex-wrap:nowrap}
  .sc-go{flex:none}
  .sc-sep{flex:none}
}
@media (max-width:1280px){ .sc-people{display:none} }

.cmp-s-gone{background:#EFEFEF;color:var(--ink-muted);text-decoration:line-through}
.lg-points{list-style:none;padding:0;margin:6px 0 0}
.lg-points li{padding:7px 0;border-top:1px solid var(--hairline);font-size:13px;line-height:1.5}
.lg-points .mono{color:var(--ink-faint);font-size:11px;margin-right:6px}

/* ---------- The Happiness Index and Tickets ---------- */
.smi-happiness .smi-dot, .sb-happiness .sb-dot{background:#A16207;}
.in-happiness{--plum:#A16207;--plum-wash:#FEF9EE;--plum-edge:rgba(161,98,7,.2);}
.smi-tickets .smi-dot, .sb-tickets .sb-dot{background:#4B5563;}
.in-tickets{--plum:#4B5563;--plum-wash:#F3F4F6;--plum-edge:rgba(75,85,99,.2);}
.hxbook td{vertical-align:middle}
.hx-client{font-weight:600}
.hx-sub{display:block;font-size:11px;color:var(--ink-faint)}
.hx-block{margin-top:14px}
.tk-stats{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.tk-stats > div{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:10px 16px;min-width:120px}
.tk-v{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tk-v.tk-bad{color:var(--crit)}
.tk-l{font-size:11px;color:var(--ink-faint)}
.tk-moved{font-size:12.5px;color:var(--ink-faint);margin:22px 0 0}
.cmp-happiness{--room:#A16207;} .cmp-tickets{--room:#4B5563;}
.cmp-journey{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--raised);border:1px solid var(--hairline);
  border-radius:12px;padding:10px 16px;margin:10px 0 12px}
.cmp-journey-none{font-size:12.5px;color:var(--ink-muted)}
.cmp-jk{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.cmp-jsteps{display:flex;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}
.cmp-jsteps li{display:flex;flex-direction:column;padding:4px 12px;border-radius:8px;background:var(--surface-2);min-width:96px}
.cmp-jsteps li b{font-size:12px;font-weight:600;color:var(--ink-muted)}
.cmp-jsteps li span{font-size:10px;color:var(--ink-faint)}
.cmp-jsteps li.past{opacity:.6}
.cmp-jsteps li.on{background:#75035A}
.cmp-jsteps li.on b,.cmp-jsteps li.on span{color:#fff}
.cmp-jnow{font-size:12.5px;color:var(--ink-muted);margin-left:auto}
.hxbook .pchip{white-space:nowrap}
.hx-room.stateStrip{background:none;border:none;box-shadow:none;padding:0}

/* ---------- The Client Journey ---------- */
.smi-journey .smi-dot, .sb-journey .sb-dot{background:#0E7490;}
.in-journey{--plum:#0E7490;--plum-wash:#ECFEFF;--plum-edge:rgba(14,116,144,.2);}
.jr-bar{display:inline-block;vertical-align:middle;width:90px;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-right:6px}
.jr-bar span{display:block;height:100%;background:#0E7490}
.jr-room .rp{margin-top:6px}
.cmp-jgo{margin-left:10px;font-weight:600;color:#0E7490;text-decoration:none}
.cmp-jgo:hover{text-decoration:underline}

/* ---------- where the data comes from: four layers ---------- */
.pvseg-computed{background:#6B7280;}
.pvgroup-computed .pvg-rib{background:#F3F4F6;color:#4B5563;}
.pv-t-manual{color:var(--warn);} .pv-t-computed{color:#4B5563;}
.pvr-manual{background:var(--warn-wash);color:var(--warn);}
.pvr-dropin{background:var(--info-wash);color:var(--info);}
.pvr-api{background:var(--good-wash);color:var(--good);}
.pvr-computed{background:#F3F4F6;color:#4B5563;}
.dm-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0 16px}
.dm-legend > div{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink-muted)}
.dm-legend b{font-size:18px;color:var(--ink);margin:0 4px}
.dm-legend span{display:block;margin-top:4px}
.dm-sources ul{margin:6px 0 10px 18px;font-size:13px;line-height:1.6;color:var(--ink-muted)}
.dm-place{margin-top:14px}
.dm-table td{vertical-align:top;font-size:12.5px}
.dm-next{color:var(--ink-muted)}
.dm-arrow{color:var(--ink-faint)}

/* Tactiq test: meetings on their way into the Lounge ---------------------- */
.tq-stat{display:flex;gap:26px;margin:14px 0 18px}
.tq-v{display:block;font-size:22px;font-weight:700;line-height:1.1}
.tq-l{font-size:11px;color:var(--ink-faint)}
.tq-wire{border:1px solid var(--hairline);border-radius:10px;padding:14px 18px;background:var(--raised);margin:0 0 20px}
.tq-steps{margin:8px 0 10px 18px;font-size:13px;line-height:1.7;color:var(--ink-muted)}
.tq-steps b{color:var(--ink)}
.tq-gap{font-size:12.5px;color:var(--ink-muted);margin:0}
.tq-list{list-style:none;margin:10px 0 0;padding:0}
.tq-m{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--hairline)}
.tq-done{opacity:.72}
.tq-d{display:block;font-size:12px;font-weight:600}
.tq-p,.tq-dur{display:inline-block;margin-right:6px;font-size:10.5px;color:var(--ink-faint)}
.tq-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tq-t{font-weight:600;font-size:14px}
.tq-who{margin:3px 0 0;font-size:11.5px;color:var(--ink-faint)}
.tq-s{margin:6px 0 0;font-size:13px;line-height:1.55}
.tq-raw{color:var(--ink-muted);font-style:italic}
.tq-no{margin:6px 0 0;font-size:12.5px;color:var(--ink-faint)}
.tq-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.tq-pick{font-size:11px;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.tq-pick select{font-size:12.5px;padding:3px 6px}
.tq-by{font-size:11px;color:var(--ink-faint)}
.tq-text{margin:10px 0 0;padding:12px 14px;background:var(--raised);border:1px solid var(--hairline);
  border-radius:8px;max-height:340px;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.6}
.tq-prov{margin:8px 0 0;font-size:11px;color:var(--ink-faint)}
@media (max-width:720px){ .tq-m{grid-template-columns:1fr} }

/* ---------- Seasonal Events: the trackers ---------- */
.smi-season .smi-dot, .sb-season .sb-dot{background:#B45309;}
.in-season{--plum:#B45309;--plum-wash:#FEF6EC;--plum-edge:rgba(180,83,9,.2);}
.cmp-season{--room:#B45309;}
.se-lede{font-size:12.5px;color:var(--ink-muted);margin:2px 0 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.se-back{font-size:12px;white-space:nowrap}
.se-now{color:var(--good)}

/* the cards on the front page */
.se-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:12px 0 20px}
.se-card{display:block;text-decoration:none;color:inherit;background:var(--raised);
  border:1px solid var(--hairline);border-left:4px solid #B45309;border-radius:12px;padding:14px 16px}
.se-card:hover{border-color:#B45309}
.se-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.se-ch h3{margin:0;font-size:15px}
.se-cw{margin:4px 0 0;font-size:12px;color:var(--ink-muted)}
.se-ci{margin:6px 0 0;font-size:12.5px;color:var(--ink-muted)}
.se-cs{display:flex;gap:14px;flex-wrap:wrap;margin:9px 0 7px;font-size:11.5px;color:var(--ink-faint)}
.se-cs b{color:var(--ink);font-size:13px}
.se-warn b{color:var(--crit)}

/* the ready bar */
.se-bar{display:inline-block;width:64px;height:7px;border-radius:4px;background:var(--hairline);
  overflow:hidden;vertical-align:middle}
.se-bar > span{display:block;height:100%;background:#B45309;border-radius:4px}
.se-bar.big{display:block;width:100%;height:6px;margin-top:2px}
.se-bn{font-size:11px;color:var(--ink-faint);margin-left:6px;font-variant-numeric:tabular-nums}

/* the tracker table */
.setrack{margin-top:4px}
.setable{font-size:12.5px}
.setable th{vertical-align:bottom;font-size:11px;line-height:1.3}
.se-h{display:block;font-weight:400;font-size:10px;color:var(--ink-faint);margin-top:2px;max-width:130px}
.se-cl{min-width:170px}
.se-cl a{font-weight:600}
.se-c{padding:3px 4px !important}
.se-c select,.se-c .se-in{width:100%;border:1px solid transparent;background:transparent;font:inherit;
  border-radius:5px;padding:3px 5px;color:inherit}
.se-c select:hover,.se-c .se-in:hover{border-color:var(--hairline)}
.se-c select:focus,.se-c .se-in:focus{border-color:#B45309;background:var(--paper);outline:none}
.se-s{min-width:112px}
.se-good{background:var(--good-wash)} .se-good select{color:var(--good);font-weight:600}
.se-warn{background:var(--warn-wash)} .se-warn select{color:var(--warn);font-weight:600}
.se-mute{background:transparent}
.se-off{background:#F3F4F6} .se-off select{color:#6B7280}
.se-t{min-width:150px} .se-l{min-width:130px}
.se-l a{font-size:11px;margin-right:4px}
.se-out{opacity:.5}
.se-saving{opacity:.5} .se-saved{box-shadow:0 0 0 2px var(--good-wash)}
.se-pr{white-space:nowrap}

/* who is on it, and the create form */
.se-manage{margin-top:18px;border-top:1px solid var(--hairline);padding-top:12px}
.se-manage summary{cursor:pointer;font-size:13px;font-weight:600}
.se-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:12px 0}
.se-ck{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:6px 8px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--raised)}
.se-new{margin-top:6px}
.se-new > summary{display:inline-block;cursor:pointer;list-style:none}
.se-new > summary::-webkit-details-marker{display:none}
.se-form{margin-top:14px;border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;background:var(--raised)}
.se-frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.se-form label{display:block;font-size:11px;color:var(--ink-faint)}
.se-form input,.se-form select{display:block;font:inherit;font-size:13px;padding:5px 7px;margin-top:3px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--paper);color:inherit}
.se-wide input{width:100%}
.se-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:10px 0 4px}
.se-kind{display:inline-block;margin-left:6px;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-faint)}

/* one client, every event */
.se-cli{border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;margin:0 0 16px;background:var(--raised)}
.se-clih{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.se-clih h3{margin:0;font-size:15px}
.se-rk{text-align:left;font-weight:600;width:210px;font-size:12px}
.se-open{margin:10px 0 0;font-size:12.5px;color:var(--ink-muted)}
.se-done{margin:10px 0 0;font-size:12.5px;color:var(--good)}
.cmp-se .cmp-k{font-size:12px}
@media (max-width:720px){ .se-rk{width:auto} }
.cmp-se .cmp-k .cmp-sub{display:block;font-size:10.5px;margin-top:1px}
.cmp-se{align-items:flex-start}

/* ---------- The Perfect Client Journey ---------- */
.smi-perfect .smi-dot, .sb-perfect .sb-dot{background:#0F766E;}
.in-perfect{--plum:#0F766E;--plum-wash:#EFF9F7;--plum-edge:rgba(15,118,110,.2);}
.pjgrid{border-collapse:separate;border-spacing:8px;width:100%;min-width:900px}
.pj-corner{width:150px;text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);vertical-align:bottom;padding-bottom:6px}
.pj-team{vertical-align:bottom;text-align:left;padding:0 6px 6px}
.pj-tn{display:block;font-size:13px;font-weight:700}
.pj-tb{display:block;font-size:10.5px;font-weight:400;color:var(--ink-faint);margin-top:2px}
.pj-cad{text-align:left;vertical-align:top;padding:10px 8px;background:var(--raised);
  border:1px solid var(--hairline);border-radius:10px;position:relative}
.pj-cn{display:block;font-size:13px;font-weight:700}
.pj-cb{display:block;font-size:10.5px;font-weight:400;color:var(--ink-faint);margin-top:3px}
.pj-cc{position:absolute;top:10px;right:10px;font-size:11px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.pj-cell{vertical-align:top;background:var(--paper);border:1px solid var(--hairline);border-radius:10px;
  padding:8px;min-width:190px}
.pj-list{list-style:none;margin:0;padding:0}
.pj-card{border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:8px;
  padding:7px 9px;margin-bottom:7px;background:var(--raised)}
.pj-idea{border-left-color:#9CA3AF}
.pj-agreed{border-left-color:var(--info)}
.pj-in-place{border-left-color:var(--good)}
.pj-dropped{border-left-color:#D1D5DB;opacity:.55}
.pj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.pj-title{font-size:12.5px;font-weight:600;line-height:1.35}
.pj-detail{margin:3px 0 0;font-size:11.5px;color:var(--ink-muted);line-height:1.4}
.pj-meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.pj-meta input,.pj-meta select{font:inherit;font-size:10.5px;padding:2px 5px;border:1px solid transparent;
  border-radius:5px;background:transparent;color:var(--ink-muted);min-width:0}
.pj-meta input:hover,.pj-meta select:hover{border-color:var(--hairline)}
.pj-meta input:focus,.pj-meta select:focus{border-color:#0F766E;background:var(--paper);outline:none}
.pj-who{width:82px} .pj-when{width:78px} .pj-st{width:74px}
.pj-add input{display:block;width:100%;font:inherit;font-size:11.5px;padding:5px 7px;margin-top:4px;
  border:1px dashed var(--hairline);border-radius:7px;background:transparent;color:inherit}
.pj-add input:focus{border-style:solid;border-color:#0F766E;background:var(--paper);outline:none}
.pj-add input[name=detail]{display:none}
.pj-add .pj-go{display:none;margin-top:5px;font-size:11px;padding:3px 10px}
.pj-add:focus-within input[name=detail]{display:block}
.pj-add:focus-within .pj-go{display:inline-block}

/* ---------- The Intake Hub ---------- */
.smi-intake .smi-dot, .sb-intake .sb-dot{background:#7C2D12;}
.in-intake{--plum:#7C2D12;--plum-wash:#FBF2EE;--plum-edge:rgba(124,45,18,.2);}
.ih-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:14px 0 20px}
.ih-card{display:block;text-decoration:none;color:inherit;background:var(--raised);
  border:1px solid var(--hairline);border-left:4px solid #7C2D12;border-radius:12px;padding:14px 16px}
.ih-card:hover{border-color:#7C2D12}
.ih-closed{opacity:.6}
.ih-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ih-ch h3{margin:0;font-size:15px}
.ih-ci{margin:6px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.45}
.ih-cs{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 7px;font-size:11.5px;color:var(--ink-faint)}
.ih-cs b{color:var(--ink);font-size:13px}
.ih-warn b{color:var(--crit)}
.ih-bar{display:inline-block;width:72px;height:7px;border-radius:4px;background:var(--hairline);
  overflow:hidden;vertical-align:middle}
.ih-bar > span{display:block;height:100%;background:#7C2D12;border-radius:4px}
.ih-bn{font-size:11px;color:var(--ink-faint);margin-left:6px;font-variant-numeric:tabular-nums}
.ih-lede{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-muted);margin:2px 0 16px}
.ihtable th{font-size:11px}
.ih-aud{display:block;font-weight:400;font-size:10px;color:var(--ink-faint);margin-top:2px}
.ih-sc{white-space:nowrap}
.ih-none{background:var(--warn-wash)}
.ih-full{background:var(--good-wash)}
.ih-when{white-space:nowrap;font-size:11.5px}
.ih-sec{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;margin:0 0 18px;background:var(--raised)}
.ih-sh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--hairline);padding-bottom:10px;margin-bottom:12px}
.ih-sh h3{margin:0;font-size:15px;display:inline-block}
.ih-for{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#7C2D12;background:#FBF2EE;border-radius:20px;padding:2px 9px;vertical-align:middle}
.ih-sb{margin:5px 0 0;font-size:12px;color:var(--ink-muted)}
.ih-qs{display:grid;gap:12px}
.ih-q label{display:block;font-size:12.5px;font-weight:600;margin-bottom:4px}
.ih-hint{display:block;font-weight:400;font-size:11px;color:var(--ink-faint);margin-top:2px}
.ih-q textarea,.ih-q input,.ih-q select{width:100%;font:inherit;font-size:13px;padding:7px 9px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--paper);color:inherit;resize:vertical}
.ih-q textarea:focus,.ih-q input:focus,.ih-q select:focus{border-color:#7C2D12;outline:none}
.ih-k-money input,.ih-k-percent input,.ih-k-number input{max-width:200px}
.ih-k-text input,.ih-k-select select{max-width:420px}
.ih-saving{opacity:.6}
.ih-saved{border-color:var(--good) !important;box-shadow:0 0 0 2px var(--good-wash)}
/* The quarter so far, read from the months and shown beside the target being
   typed. Never an input: nothing here is answered, it is only compared. */
.ih-cmp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px;padding:6px 9px;
  border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:8px;
  background:var(--paper);font-size:12px}
.ih-cmp-l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.ih-cmp b{font-size:14px;font-variant-numeric:tabular-nums}
.ih-cmp-part{font-size:10.5px;color:var(--ink-faint);font-style:italic}
.ih-cmp-d{font-variant-numeric:tabular-nums;font-weight:600;padding:1px 7px;border-radius:20px;font-size:11.5px}
.ih-cmp-d.good{background:var(--good-wash);color:var(--good)}
.ih-cmp-d.warn{background:var(--warn-wash);color:#7C2D12}
.ih-cmp-none{display:block;color:var(--ink-faint);font-style:italic;border-left-color:var(--hairline)}
.ih-log{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--ink-muted)}
.ih-log li{padding:4px 0;border-top:1px solid var(--hairline)}
.ih-log .mono{margin-right:8px;color:var(--ink-faint)}
@media (min-width:860px){ .ih-qs{grid-template-columns:1fr 1fr} .ih-k-long{grid-column:1 / -1} }
.ih-q{position:relative}
.ih-nab{position:absolute;top:0;right:0;font:inherit;font-size:10px;letter-spacing:.06em;
  padding:1px 7px;border:1px solid var(--hairline);border-radius:20px;background:var(--paper);
  color:var(--ink-faint);cursor:pointer}
.ih-nab:hover{border-color:var(--ink-faint);color:var(--ink)}
.ih-na .ih-nab{background:var(--ink-faint);border-color:var(--ink-faint);color:var(--paper)}
.ih-na textarea,.ih-na input,.ih-na select{color:var(--ink-faint);background:#F7F7F8}
.ih-sr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ih-by{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:6px}
.ih-by select{font:inherit;font-size:12px;text-transform:none;letter-spacing:0;padding:3px 6px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--paper);color:var(--ink)}
.ih-aud2{display:inline-block;margin-left:6px;font-size:10px;color:var(--ink-faint)}
.ih-who{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.pj-spine{list-style:none;display:flex;gap:0;margin:14px 0 18px;padding:0;overflow-x:auto}
.pj-step{flex:1 1 0;min-width:150px;position:relative}
.pj-step a{display:block;text-decoration:none;color:inherit;background:var(--raised);
  border:1px solid var(--hairline);border-top:3px solid #0F766E;border-radius:10px;
  padding:10px 12px;margin-right:16px;height:100%}
.pj-step a:hover{border-color:#0F766E}
.pj-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:4px;width:10px;height:10px;
  border-top:2px solid var(--hairline);border-right:2px solid var(--hairline);transform:translateY(-50%) rotate(45deg)}
.pj-empty a{border-top-color:var(--hairline);opacity:.6}
.pj-sn{display:block;font-size:12.5px;font-weight:700}
.pj-sc{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.pj-sf{display:block;font-size:11.5px;color:var(--ink-muted);margin-top:6px;line-height:1.35}
.pj-none{font-style:italic;color:var(--ink-faint)}
.pj-st{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#0F766E;margin-top:6px}
.con-bq textarea{width:100%;font:inherit;font-size:12px;font-family:"IBM Plex Mono",monospace;
  padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;background:var(--paper);
  color:inherit;resize:vertical;margin-bottom:8px}
.bqform{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 6px}
.bqform label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.bqform input,.bqform select{display:block;font:inherit;font-size:13px;padding:5px 8px;margin-top:3px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--paper);color:inherit}

/* ---------- Supermetrics Testing ---------- */
.smi-bqtest .smi-dot, .sb-bqtest .sb-dot{background:#7C2D12;}
.in-bqtest{--plum:#7C2D12;--plum-wash:#FBF2EE;--plum-edge:rgba(124,45,18,.2);}
.bqcard{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;margin:0 0 16px;background:var(--raised)}
.bq-sub{margin:2px 0 10px;font-size:12px;color:var(--ink-muted)}
.bq-foot{margin:8px 0 0;font-size:11.5px;color:var(--ink-faint)}
.bqchart{width:100%;height:auto;display:block}
.bqt{font-size:9px;fill:var(--ink-faint);font-family:"IBM Plex Mono",monospace}
.bqbars{list-style:none;margin:6px 0 0;padding:0}
.bqbars li{display:grid;grid-template-columns:170px minmax(60px,1fr) 90px;gap:10px;align-items:center;
  padding:6px 0;border-top:1px solid var(--hairline)}
.bqb-k{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bqb-t{display:block;height:9px;background:var(--hairline);border-radius:5px;overflow:hidden}
.bqb-t > span{display:block;height:100%;border-radius:5px}
.bqb-v{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.bqb-n{grid-column:1 / -1;font-size:11px;color:var(--ink-faint);margin-top:-2px}
.bq-gaps ul{margin:6px 0 0 18px;font-size:12.5px;line-height:1.65;color:var(--ink-muted)}
.bq-gaps b{color:var(--ink)}
.bq-pick{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 14px}
.bq-pick label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.bq-pick select{display:block;font:inherit;font-size:13px;padding:5px 8px;margin-top:3px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--paper);color:inherit}
.bqasin{font-size:12px}
.bqasin th{white-space:nowrap;font-size:10.5px}
.bq-asin{min-width:190px}
.bq-zero{color:var(--hairline-strong)}
.bq-tot{font-weight:700}
.bq-name{display:block;font-size:11px;color:var(--ink-muted);line-height:1.3;margin-top:2px;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bq-name-in{display:block;width:210px;margin-top:3px;font:inherit;font-size:11px;padding:2px 5px;
  border:1px dashed var(--hairline);border-radius:5px;background:transparent;color:inherit}
.bq-name-in:focus{border-style:solid;border-color:#7C2D12;background:var(--paper);outline:none}
.bq-unmapped{background:var(--warn-wash)}
.bq-acc{font-weight:600;font-size:12.5px}
.bq-map{font:inherit;font-size:12.5px;padding:4px 7px;border:1px solid var(--hairline);border-radius:7px;
  background:var(--paper);color:inherit;max-width:220px}
.bq-accept{margin-left:8px;font-size:11px}
.pd-who td{padding-top:0 !important;border-top:none !important}
.pd-cl{display:inline-block;font-size:11.5px;padding:2px 8px;margin:0 5px 5px 0;border-radius:20px;
  background:var(--raised);border:1px solid var(--hairline);text-decoration:none;color:var(--ink-muted)}
.pd-cl:hover{border-color:var(--plum);color:var(--ink)}
.fdtable th{font-size:10.5px}
.fd-h{display:block;font-weight:400;font-size:9px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}
.fd-feed{background:#FBF7F4}
.fd-gap{font-size:11.5px;color:var(--ink-faint)}
.fd-gap.fd-big{color:var(--warn);font-weight:700}
.fd-unmapped{background:var(--warn-wash)}

/* ---------- The weekly note ---------- */
.smi-weekly .smi-dot, .sb-weekly .sb-dot{background:#1D4ED8;}
.in-weekly{--plum:#1D4ED8;--plum-wash:#EFF4FF;--plum-edge:rgba(29,78,216,.2);}
.wk-missing-card{border-left:4px solid var(--warn)}
.wk-missing{list-style:none;margin:6px 0 0;padding:0}
.wk-missing li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0;
  border-top:1px solid var(--hairline);font-size:13px}
.wk-what{flex:1 1 auto}
.wk-who{font-size:11px;color:var(--ink-faint)}
.wk-go{font-size:11.5px;white-space:nowrap}
.wk-clear{font-size:13px;color:var(--good);margin:6px 0 0}
.wk-list{list-style:none;margin:6px 0 0;padding:0;font-size:13px}
.wk-list li{padding:5px 0;border-top:1px solid var(--hairline)}
.wk-move{font-size:12px;color:var(--ink-muted)}
.wk-move.wk-big{font-weight:700;color:var(--ink)}
.wk-move.wk-bad{font-weight:700;color:var(--crit)}
.wk-draft{background:var(--paper);border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.6;white-space:pre-wrap;
  max-height:420px;overflow:auto;margin:6px 0 12px}

/* ---------- Strategy · Communication · Delivery ---------- */
/* The band name runs down the side of its rooms, with the band's colour as a
   rail beside it. Nothing folds: the rooms are always all there, and the label
   is a thing you read rather than a button you work. The rail is
   currentColor, so each band is coloured once -- on the label -- and the rule
   follows. */
.navband{display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:5px;margin:8px 0 0;}
.navband + .navband{margin-top:10px;}
.nb-spine{writing-mode:vertical-rl;text-align:center;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-left:0;padding:2px 0 2px 5px;border-left:2px solid currentColor;
  -webkit-user-select:none;user-select:none;}
.nbb-list{display:flex;flex-direction:column;gap:1px;min-width:0;}
.nb-strategy{color:#75035A;} .nb-communication{color:#1D4ED8;} .nb-delivery{color:#B45309;}

/* The same three on the client card, at the card's smaller scale. */
.sbc-group{display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:8px;margin:7px 0 0;}
.sbc-band{writing-mode:vertical-rl;text-align:center;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-left:2px;padding:1px 0 1px 5px;border-left:2px solid currentColor;
  -webkit-user-select:none;user-select:none;}
.sbc-blist{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sbc-b-strategy{color:#75035A;} .sbc-b-communication{color:#1D4ED8;}
.sbc-b-delivery{color:#B45309;} .sbc-b-more{color:var(--ink-faint);}
.nb-the-machine{color:#4B5563;} .nb-claude{color:#0F766E;} .nb-the-workbench{color:#7C2D12;}

/* ---------- Hours ---------- */
.smi-hours .smi-dot, .sb-hours .sb-dot{background:#3F6212;}
.in-hours{--plum:#3F6212;--plum-wash:#F3F7EC;--plum-edge:rgba(63,98,18,.2);}
.hrtable td{vertical-align:middle}
.hr-b{min-width:130px}
.hr-bar{display:inline-block;width:100px;height:9px;border-radius:5px;background:var(--hairline);
  overflow:hidden;vertical-align:middle}
.hr-bar > span{display:block;height:100%;border-radius:5px}
.hr-ok{background:#3F6212} .hr-over{background:var(--warn)} .hr-under{background:var(--hairline-strong)}
.hr-p{font-size:11.5px;color:var(--ink-faint);margin-left:7px;font-variant-numeric:tabular-nums}
.hr-who{font-size:11.5px;color:var(--ink-muted)}
/* Where a call came from. Two stickers and no more: it arrived by itself, or a
   person put it here. The auto one is the quieter of the two -- it is the
   normal case now, and a room shouting FIREFLIES down one column teaches
   nobody anything. */
.lg-src{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:middle;
  white-space:nowrap;border:1px solid transparent}
.lg-src-auto{background:#F3F7EC;color:#3F6212;border-color:rgba(63,98,18,.22)}
.lg-src-manual{background:var(--raised);color:var(--ink-faint);border-color:var(--hairline-strong)}
.shead .lg-src{margin-left:8px}
/* A client the feed has nothing for in this month. Still listed -- a name that
   vanishes is harder to ask about than one that has gone quiet. */
.hr-quiet td{color:var(--ink-faint)}
.hr-quiet td b{font-weight:500}
/* The figures are a day old by design, so the page says how old. This is the
   colour it turns when the answer stops being "a day". */
.rb-note.hr-stale{border-left:3px solid var(--warn);background:var(--warn-wash,#FEF6EC)}
/* Thirteen months of totals, so the shape of the year is visible above the
   table and the month picker has somewhere to point. */
/* align-items must stretch: with flex-end the columns take their content
   height, and then the percentage height on the bar inside has nothing to
   resolve against and every month draws as a 2px stub. */
.hr-strip{display:flex;align-items:stretch;gap:4px;height:72px;margin:4px 0 18px;
  padding:0 2px;border-bottom:1px solid var(--hairline)}
.hr-col{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-decoration:none;min-width:0}
.hr-colv{display:block;width:100%;max-width:34px;border-radius:3px 3px 0 0;
  background:rgba(63,98,18,.28)}
.hr-col:hover .hr-colv{background:rgba(63,98,18,.55)}
.hr-col.on .hr-colv{background:#3F6212}
.hr-coll{font-size:10px;color:var(--ink-faint);margin-top:4px;font-variant-numeric:tabular-nums}
.hr-col.on .hr-coll{color:#3F6212;font-weight:700}

/* ---- Management, folded while a client is picked -------------------------- */
.navmgmt{margin:6px 0 0}
.navmgmt > summary{display:flex;flex-direction:column;gap:1px;cursor:pointer;list-style:none;
  padding:9px 12px;border-radius:9px;border:1px solid var(--hairline);background:var(--raised)}
.navmgmt > summary::-webkit-details-marker{display:none}
.navmgmt > summary:hover{border-color:var(--hairline-strong)}
.nm-k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-muted);display:flex;align-items:center;gap:7px}
.nm-k::before{content:"\25B8";font-size:9px;color:var(--plum);transition:transform .15s}
.navmgmt[open] > summary .nm-k::before{transform:rotate(90deg)}
.nm-h{font-size:10.5px;color:var(--ink-faint);padding-left:16px}
.navmgmt[open] > summary{margin-bottom:4px}
.navmgmt-b{padding-top:2px}

/* ---- Internal rounds and client rounds, kept apart ----------------------- */
/* Two groups on one page, and the eye has to be able to tell at a glance which
   kind it is looking at, because they are chased in completely different ways.
   The room's own accent is the rust above; the client group takes the brand
   plum -- which is also the colour of the form the client actually sees.
   Written out rather than as var(--plum), because .in-intake redefines that
   token to the rust and the two groups would come out identical. */
.in-intake{--ih-cli:#75035A;--ih-cli-wash:#F7EFF5;}
.ih-grp{margin:0 0 4px}
.ih-gh{display:flex;align-items:center;gap:9px;margin:20px 0 2px;font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.ih-gh::before{content:"";width:3px;height:14px;border-radius:2px;background:#7C2D12}
.ih-g-cli .ih-gh{color:var(--ih-cli)}
.ih-g-cli .ih-gh::before{background:var(--ih-cli)}
.ih-gn{font-size:10.5px;font-weight:700;letter-spacing:0;color:var(--ink-faint);
  background:var(--sunken);border-radius:999px;padding:1px 8px}
.ih-g-cli .ih-gn{color:var(--ih-cli);background:var(--ih-cli-wash)}
.ih-gi{margin:5px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5;max-width:64ch}
.ih-grp .ih-cards{margin:12px 0 0}

/* An intake the client answers, not the team. */
.ih-card.ih-inbound{border-left:4px solid var(--ih-cli);background:var(--ih-cli-wash)}
.ih-card.ih-inbound:hover{border-color:var(--ih-cli)}
/* No per-card "from the client" badge any more: the group heading above it says
   so once, for every card under it, which is the whole point of the split. */

/* ---- Downloading the intake answers -------------------------------------- */
.ih-dls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.ih-dl{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--plum);color:#fff;border-radius:999px;padding:9px 18px 9px 14px;
  font-size:13.5px;font-weight:600;white-space:nowrap}
.ih-dl:hover{background:#45113F;color:#fff}
.ih-dl-i{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:rgba(255,255,255,.22);font-size:12px;line-height:1}
.ih-dl-n{font-size:12.5px;color:var(--ink-faint);max-width:56ch}
@media (max-width:640px){ .ih-dls{align-items:flex-start;flex-direction:column;gap:8px} }

/* One client in the ads room: a single card should not sit in a two-up grid
   pretending the other column is coming. */
.acgrid.acgrid-one{grid-template-columns:minmax(0,760px)}

/* ---- One client's strategy ------------------------------------------------ */
/* The engagement fields at the width of a single client. A fourteen-column
   table is right for comparing and unreadable for one account. */
.sr-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.sr-who .se-back{margin-left:auto}
.sfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  padding:16px;margin:0 0 6px}
.sf{display:flex;flex-direction:column;gap:5px;min-width:0}
.sf-l{font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-faint)}
.sf .sr-in{width:100%;padding:7px 9px;border:1px solid var(--hairline-strong);
  border-radius:7px;font:inherit;font-size:13px;background:var(--paper);min-width:0}
.sf-n .sr-in{text-align:right;font-variant-numeric:tabular-nums}
.sf-url{display:flex;align-items:center;gap:6px;min-width:0}
.sf-url .sr-in{flex:1 1 auto}
/* Hours is read-only here: it mirrors Alex's allowance and has no other writer. */
.sf-read{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:7px;
  background:var(--well,#F4F1F3);border:1px solid var(--hairline);font-size:13px;
  font-variant-numeric:tabular-nums}
.sf-src{font-size:10px;color:var(--ink-faint);letter-spacing:.03em}

/* One marker block instead of the whole directory of them. */
.ct-row.ct-solo{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  padding:14px 16px;margin:0 0 12px}
.ct-row.ct-solo .ct-name{font-weight:700}
.cgrp.cgrp-solo{background:var(--raised);border:1px solid var(--hairline);border-radius:12px;
  padding:16px}

/* ---- The plan ------------------------------------------------------------ */
/* Whether it has been agreed is the loudest thing on the page, because it
   changes what every other line means. */
.pl-sign{border:1px solid var(--hairline);border-left-width:3px;border-radius:10px;
  padding:12px 16px;margin:0 0 18px;background:var(--raised)}
.pl-sign-warn{border-left-color:var(--warn);background:#FEF6EC}
.pl-sign-good{border-left-color:#3F6212;background:#F3F7EC}
.pl-sign-mute{border-left-color:var(--hairline-strong)}
.pl-sign-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-sign-s{font-weight:600}
.pl-sign-d{margin:6px 0 0;font-size:12.5px;color:var(--ink-muted);max-width:70ch}
.pl-chip{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.pl-chip-warn{background:var(--warn);color:#fff}
.pl-chip-good{background:#3F6212;color:#fff}
.pl-chip-mute{background:var(--hairline-strong);color:var(--ink)}

.pl-stats{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pl-stats > div{background:var(--raised);border:1px solid var(--hairline);border-radius:10px;
  padding:10px 16px;min-width:110px}
.pl-v{display:block;font-size:22px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums}
.pl-l{font-size:11px;color:var(--ink-faint)}

/* The timeline. A rail down the left, one row per thing that happens. */
.pl-line{list-style:none;margin:0 0 20px;padding:0}
.pl-it{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:14px 0;
  border-top:1px solid var(--hairline);position:relative}
.pl-it:first-child{border-top:none}
.pl-when{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pl-wl{font-weight:700;font-size:12.5px}
.pl-own{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--hairline-strong);
  color:var(--ink-faint);white-space:nowrap}
.pl-own-amersify{background:#F3F7EC;color:#3F6212;border-color:rgba(63,98,18,.25)}
.pl-own-client{background:var(--plum-wash,#F6F1F7);color:var(--plum,#6B2D5C);
  border-color:rgba(107,45,92,.22)}
.pl-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pl-t{font-weight:600}
.pl-d{margin:5px 0 0;font-size:12.5px;color:var(--ink-muted);max-width:74ch}
.pl-note{margin:6px 0 0;font-size:12px;color:var(--ink-faint);font-style:italic}
.pl-st{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint)}
.pl-done .pl-t{text-decoration:line-through;text-decoration-thickness:1px}
.pl-done .pl-st{color:#3F6212}
.pl-blocked .pl-st{color:var(--warn)}
.pl-dropped{opacity:.55}

.pl-comm td{vertical-align:top}
.pl-target{font-weight:700;white-space:nowrap}
.pl-why{font-size:12.5px;color:var(--ink-muted)}

.pl-acts{margin:22px 0 0}
.pl-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  align-items:end;background:var(--raised);border:1px solid var(--hairline);
  border-radius:10px;padding:16px}
.pl-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;
  color:var(--ink-muted)}
.pl-form .pl-wide{grid-column:1/-1}
.pl-form input{padding:8px 10px;border:1px solid var(--hairline-strong);border-radius:7px;
  font:inherit;font-size:13px;background:var(--paper)}
.pl-form h3,.pl-form .rb-note{grid-column:1/-1;margin:0}

/* The deck, beside the plan it was read from. */
.pl-deck{border:1px solid var(--hairline);border-radius:12px;background:var(--card,#fff);
  margin:0 0 22px;overflow:hidden}
.pl-deck > summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;
  padding:13px 16px;list-style:none;background:var(--raised)}
.pl-deck > summary::-webkit-details-marker{display:none}
.pl-deck > summary::before{content:"\25B8";color:var(--plum);font-size:11px;transition:transform .15s}
.pl-deck[open] > summary::before{transform:rotate(90deg)}
.pl-deck-t{font-weight:600}
.pl-deck-f{font-size:12px;color:var(--ink-faint)}
.pl-deck-v{display:block;width:100%;height:min(78vh,760px);border:0;border-top:1px solid var(--hairline);
  background:var(--well,#F4F1F3)}
.pl-deck-l{margin:0;padding:10px 16px;font-size:12.5px;border-top:1px solid var(--hairline)}

/* The numbers, at the top, where the question is. */
.pl-nums{margin:0 0 20px}
.pl-nums-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--plum);margin:0 0 10px}
/* Four across, so seven numbers read as 4 + 3 rather than leaving the seventh
   stranded on a row of its own. */
.pl-numgrid{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .pl-numgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .pl-numgrid{grid-template-columns:1fr} }
.pl-num{background:var(--card,#fff);border:1px solid var(--hairline);border-radius:12px;
  padding:14px 15px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pl-num-v{font-size:26px;font-weight:700;line-height:1.1;color:var(--plum);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pl-num-l{font-size:12px;font-weight:600}
.pl-num-f{font-size:11.5px;color:var(--ink-muted);margin-top:3px}
.pl-num{cursor:help}

/* "Slide 4" — into the deck, at the page a thing is described on. */
.pl-slide{display:inline-block;margin-left:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--plum);text-decoration:none;
  border:1px solid var(--hairline-strong);border-radius:999px;padding:2px 9px;
  vertical-align:middle;white-space:nowrap}
.pl-slide:hover{background:var(--plum-wash,#F6F1F7);border-color:var(--plum)}

/* What a move is buying: a figure on the closed row, a line when it opens. */
.pl-ph-e{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.pl-ph-e b{font-size:12px;font-weight:700;color:var(--plum);
  background:var(--plum-wash,#F6F1F7);border-radius:999px;padding:2px 9px}
.pl-earn{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:7px}
.pl-earn li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 13px;border-radius:9px;background:var(--plum-wash,#F6F1F7);
  border:1px solid rgba(117,3,90,.15)}
.pl-earn-v{font-size:16px;font-weight:700;color:var(--plum);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-earn-l{font-size:12.5px;font-weight:600}
.pl-earn-f{font-size:12px;color:var(--ink-muted);flex:1 1 auto;min-width:0}
@media (max-width:700px){ .pl-ph-e{display:none} }

/* One line for where the plan has got to. */
.pl-prog{margin:0 0 20px}
.pl-prog-bar{position:relative;height:8px;border-radius:5px;background:var(--hairline);
  overflow:visible}
.pl-prog-bar > span{display:block;height:100%;border-radius:5px;background:#3F6212;
  max-width:100%}
.pl-prog-now{position:absolute;top:-4px;width:2px;height:16px;background:var(--plum);
  border-radius:1px}
.pl-prog-l{margin:7px 0 0;font-size:12.5px;color:var(--ink-muted)}

/* Open all / close all, beside the heading. */
.pl-th{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pl-th .lsub,.pl-th .cv-psub{margin-bottom:0}
.pl-all{margin-left:auto;font:inherit;font-size:12px;font-weight:600;color:var(--plum);
  background:none;border:1px solid var(--hairline-strong);border-radius:999px;
  padding:4px 13px;cursor:pointer}
.pl-all:hover{background:var(--plum-wash,#F6F1F7)}

/* The shape of the quarter: one line per move, opening on a click. */
.pl-track{list-style:none;margin:0 0 22px;padding:0}
.pl-ph{position:relative;padding:0 0 8px}
.pl-ph::before{content:"";position:absolute;left:17px;top:38px;bottom:-4px;width:2px;
  background:var(--hairline)}
.pl-ph:last-child::before{display:none}
.pl-phd{border:1px solid var(--hairline);border-radius:12px;background:var(--card,#fff);
  overflow:hidden}
.pl-ph.is-now > .pl-phd{border-color:var(--plum);box-shadow:0 0 0 2px var(--plum-wash,#F6F1F7)}
.pl-phd > summary{display:flex;align-items:center;gap:13px;cursor:pointer;padding:11px 15px;
  list-style:none}
.pl-phd > summary::-webkit-details-marker{display:none}
.pl-ph-i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;background:var(--plum-wash,#F6F1F7);
  color:var(--plum);border:2px solid var(--plum);position:relative;z-index:1}
.pl-ph.is-done .pl-ph-i{background:#3F6212;border-color:#3F6212;color:#fff}
.pl-ph.is-going .pl-ph-i{background:var(--warn);border-color:var(--warn);color:#fff}
.pl-ph-sum{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.pl-ph-w{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint)}
.pl-ph-nm{font-size:15px;font-weight:700;line-height:1.25}
.pl-ph-c{font-size:12px;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pl-ph-s{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--plum);white-space:nowrap}
.pl-ph.is-done .pl-ph-s{color:#3F6212}
.pl-ph.is-going .pl-ph-s{color:var(--warn)}
.pl-ph-b{padding:2px 15px 15px 58px;border-top:1px solid var(--hairline)}
.pl-ph-d{margin:10px 0 0;max-width:70ch;font-weight:500}
.pl-ph-x{margin:6px 0 0;font-size:12.5px;color:var(--ink-muted);max-width:74ch}
.pl-ph-t{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.pl-ph-t li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13.5px;
  padding:8px 12px;background:var(--raised);border:1px solid var(--hairline);border-radius:9px}
.pl-ph-t li.pl-done .pl-ph-tt{text-decoration:line-through;color:var(--ink-faint)}
.pl-ph-tl{font-size:11px;font-weight:700;color:var(--ink-faint);white-space:nowrap;min-width:96px}
.pl-ph-tt{flex:1 1 auto;min-width:0}
.pl-ph-none{margin:10px 0 0;font-size:12.5px;color:var(--ink-faint)}
.pl-sub2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
  margin:18px 0 6px}

/* Anything else that folds away: the dated list. */
.pl-fold{border:1px solid var(--hairline);border-radius:12px;background:var(--card,#fff);
  margin:0 0 22px;overflow:hidden}
.pl-fold > summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 16px;
  list-style:none;background:var(--raised)}
.pl-fold > summary::-webkit-details-marker{display:none}
.pl-fold > summary::before{content:"\25B8";color:var(--plum);font-size:11px;transition:transform .15s}
.pl-fold[open] > summary::before{transform:rotate(90deg)}
.pl-fold-t{font-weight:600}
.pl-fold-n{font-size:11px;font-weight:700;color:var(--ink-faint);
  background:var(--well,#F4F1F3);border-radius:999px;padding:2px 9px}
.pl-fold-b{padding:4px 16px 12px;border-top:1px solid var(--hairline)}

@media (max-width:700px){
  .pl-ph-b{padding-left:15px}
  .pl-deck-v{height:60vh}
}

/* The client's copy. Same idea, their typography. */
.cv-plan-card .pl-sign{margin:10px 0 16px}
.cv-pintro{margin:0 0 14px;color:var(--ink-muted);max-width:66ch}
.cv-plan{list-style:none;margin:0;padding:0}
.cv-pi{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:13px 0;
  border-top:1px solid var(--hairline)}
.cv-pi:first-child{border-top:none}
.cv-piw{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cv-piwl{font-weight:700;font-size:12.5px}
.cv-pio{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint)}
.cv-pit{font-weight:600}
.cv-pis{font-size:10px;font-weight:700;text-transform:uppercase;margin-left:8px;
  color:var(--ink-faint)}
.cv-pid{margin:4px 0 0;font-size:12.5px;color:var(--ink-muted);max-width:66ch}
.cv-psub{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);margin:20px 0 8px}
.cv-ptable{width:100%;border-collapse:collapse}
.cv-ptable th{text-align:left;font-weight:600;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--hairline);width:42%}
.cv-ptable td{padding:8px 0;border-bottom:1px solid var(--hairline);font-weight:700;
  font-variant-numeric:tabular-nums}
.cv-pfoot{margin:10px 0 0;font-size:12px;color:var(--ink-faint)}

@media (max-width:700px){
  .pl-it,.cv-pi{grid-template-columns:1fr;gap:6px}
  .pl-when,.cv-piw{flex-direction:row;align-items:center;gap:10px}
}

/* ---- The Numbers Room ---------------------------------------------------- */
.nr-counts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hairline);border-radius:12px;
  overflow:hidden;margin:0 0 18px;background:var(--raised)}
.nr-count{flex:1 1 150px;padding:14px 16px;border-right:1px solid var(--hairline)}
.nr-count:last-child{border-right:none}
.nr-count b{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1}
.nr-count span{display:block;font-size:11px;color:var(--ink-faint);margin-top:4px}
.nr-count.warn b{color:#7C2D12}
.nr-t{width:100%;border-collapse:collapse;font-size:13px}
.nr-t th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--hairline);
  white-space:nowrap}
.nr-t td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
.nr-t td.n,.nr-t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nr-t tbody tr:last-child td{border-bottom:none}
.nr-t tfoot th{border-top:2px solid var(--ink-faint);border-bottom:none;font-size:12px;
  text-transform:none;letter-spacing:0;color:var(--ink);padding-top:11px}
.nr-t tfoot .nr-ly th{border-top:1px solid var(--hairline);color:var(--ink-faint);font-weight:400}
.nr-empty td{opacity:.55}
.nr-t .where{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}

.nr-up{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:16px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--raised);margin-bottom:8px}
.nr-up label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.nr-up select,.nr-up input[type=file]{font:inherit;font-size:13px;padding:6px 9px;
  border:1px solid var(--hairline);border-radius:8px;background:var(--paper);color:var(--ink);
  text-transform:none;letter-spacing:0}
.nr-hint{font-size:11.5px;color:var(--ink-faint);margin:0 0 18px}
.nr-prog{font-size:12px;color:var(--ink-muted);padding:8px 0}

.nr-pick{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.nr-pick label{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.nr-pick select{font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--paper);color:var(--ink);text-transform:none;letter-spacing:0}

.nr-band{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hairline);border-radius:12px;
  overflow:hidden;background:var(--raised);margin:0 0 20px}
.nr-band>div{flex:1 1 220px;padding:13px 16px;border-right:1px solid var(--hairline)}
.nr-band>div:last-child{border-right:none}
.nr-band>div.warn{background:#FDF6EF}
.nr-bl{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.nr-band b{display:block;font-size:21px;font-variant-numeric:tabular-nums;margin:3px 0 4px}
.nr-bn{display:block;font-size:11px;color:var(--ink-faint);line-height:1.45}

.nr-f td.n b{font-variant-numeric:tabular-nums}
.nr-rng{display:block;font-size:10.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.nr-mdl{display:inline-block;font-size:9px;letter-spacing:.08em;color:var(--ink-faint);
  border:1px solid var(--hairline);border-radius:3px;padding:0 4px;margin-top:3px}
.nr-none{color:var(--ink-faint)}
.nr-wide{background:#FDF6EF}
.nr-new td{background:#FBFAF6}
.nr-q b{font-size:14px}

.nr-note{border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:8px;
  padding:13px 16px;margin-top:18px;font-size:13px;color:var(--ink-muted);background:var(--raised)}
.nr-note.warn{border-left-color:#B45309;background:#FDF6EF}
.nr-note b{color:var(--ink)}
.nr-refuse{border:1px solid var(--hairline);border-left:3px solid #B45309;border-radius:12px;
  padding:18px 20px;background:#FDF6EF}
.nr-refuse h3{margin:0 0 8px;font-size:16px}
.nr-refuse p{margin:0 0 9px;font-size:13.5px;color:var(--ink-muted)}
.nr-refuse p:last-child{margin-bottom:0}

.nr-m{border:1px solid var(--hairline);border-radius:12px;padding:18px 20px;margin:0 0 16px;
  background:var(--raised)}
.nr-m h3{margin:0 0 6px;font-size:17px}
.nr-m p{margin:0 0 10px;font-size:13.5px;color:var(--ink-muted);max-width:74ch}
.nr-m p:last-child{margin-bottom:0}
.nr-m b{color:var(--ink)}
.nr-ms{font-size:14px !important;color:var(--ink) !important}
.nr-say{border-left:2px solid var(--hairline);padding-left:12px}
.nr-lim{font-size:12.5px !important}
.nr-hard{border-left:3px solid #7C2D12}
@media (max-width:640px){ .nr-up{flex-direction:column;align-items:stretch} }

/* ---- The Numbers Room: drawing ------------------------------------------- */
.nr-chart{width:100%;height:auto;display:block}
.nrt{font-size:10px;fill:rgba(18,18,18,.42);font-family:inherit}
.nr-plot{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px 10px;
  background:var(--raised);margin:0 0 16px}
.nr-ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:6px}
.nr-ph h3{margin:0;font-size:15px}
.nr-key{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint);padding:4px 0 2px}
.nr-key i{display:inline-block;width:18px;height:0;vertical-align:middle;margin-right:6px}
.nr-key .k-solid{border-top:2px solid #75035A}
.nr-key .k-dash{border-top:2px dashed #75035A}
.nr-key .k-band{height:9px;background:rgba(117,3,90,.10);border-radius:2px}
.nr-spark{width:104px;height:26px;display:block}
.nr-sparkc,.nr-covc{width:1%;white-space:nowrap}
.nr-nospark{color:var(--ink-faint);font-size:11px}
.nr-cov{display:inline-flex;gap:2px}
.nr-cov i{display:block;width:7px;height:16px;border-radius:2px}
.nr-cov .c-have{background:#75035A;opacity:.75}
.nr-cov .c-part{background:#75035A;opacity:.3}
.nr-cov .c-gap{background:var(--surface-2);border:1px solid var(--hairline)}
.nr-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:11.5px;
  color:var(--ink-faint);margin:0 0 8px}
.nr-legend i{display:inline-block;width:8px;height:12px;border-radius:2px;margin-right:5px;
  vertical-align:-2px}
.nr-legend .c-have{background:#75035A;opacity:.75}
.nr-legend .c-part{background:#75035A;opacity:.3}
.nr-legend .c-gap{background:var(--surface-2);border:1px solid var(--hairline)}
.nr-legend-r{margin-left:auto;font-variant-numeric:tabular-nums}
.nr-exp{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.nr-expn{font-size:11.5px;color:var(--ink-faint);flex:1 1 280px}
.nr-link{color:var(--plum);text-decoration:none;border-bottom:1px solid var(--plum-edge)}
.nr-link:hover{border-bottom-color:var(--plum)}
.btn.ghost{background:var(--raised);color:var(--ink);border:1px solid var(--hairline)}
.nr-key .k-part{width:9px;height:9px;border:1.6px dashed rgba(18,18,18,.28);border-radius:50%;
  background:#fff;margin-right:6px}
.nr-rest td{background:var(--surface-2)}

/* ---- Forecasting corner: built for a conversation with a client ---------- */
.nr-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.nr-chip{font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--hairline);
  background:var(--raised);color:var(--ink-muted);text-decoration:none;white-space:nowrap}
.nr-chip:hover{border-color:var(--plum);color:var(--plum)}
.nr-chip.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600}
.nr-chip.thin{opacity:.45}
.nr-chip.thin:hover{border-color:var(--hairline);color:var(--ink-muted)}

.nr-vs{display:flex;align-items:stretch;gap:0;border:1px solid var(--hairline);border-radius:12px;
  overflow:hidden;background:var(--raised);margin:0 0 14px}
.nr-vsb{flex:1 1 240px;padding:16px 20px}
.nr-vsf{background:var(--plum-wash);border-left:1px solid var(--hairline)}
.nr-vsl{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.nr-vsb b{display:block;font-size:30px;line-height:1.1;margin:5px 0 4px;font-variant-numeric:tabular-nums}
.nr-vsf b{color:var(--plum)}
.nr-vsn{display:block;font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.nr-vsarrow{display:flex;align-items:center;padding:0 14px;background:var(--raised)}
.nr-vsc{font-size:15px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}
.nr-vsc.up{background:var(--good-wash);color:var(--good)}
.nr-vsc.down{background:var(--warn-wash);color:#7C2D12}

.nr-say-box{border:1px solid var(--hairline);border-left:3px solid var(--plum);border-radius:12px;
  padding:16px 20px;background:var(--raised);margin:0 0 16px}
.nr-say-box h3{margin:0 0 7px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
.nr-sayq{margin:0 0 8px;font-size:16px;line-height:1.55;max-width:72ch}
.nr-sayn{margin:0;font-size:12.5px;color:var(--ink-muted);max-width:76ch}

.nr-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin:0 0 16px}
.nr-work{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;background:var(--raised)}
.nr-work h3{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
.nr-workn{margin:10px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.55}
.nr-workn b{color:var(--ink)}
.nr-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nr-sum>div{min-width:0}
.nr-sum span{display:block;font-size:10.5px;color:var(--ink-faint)}
.nr-sum b{display:block;font-size:17px;font-variant-numeric:tabular-nums;line-height:1.25}
.nr-sum i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-faint)}
.nr-op{font-size:17px;color:var(--ink-faint);padding:0 2px}
.nr-res b{color:var(--plum)}
.nr-res.warn b{color:#7C2D12}

.nr-was{display:block;font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.nr-th2{display:block;font-size:9.5px;letter-spacing:.04em;color:var(--ink-faint);text-transform:none;
  font-weight:400}
.nr-ch{font-size:12px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap}
.nr-ch.up{background:var(--good-wash);color:var(--good)}
.nr-ch.down{background:var(--warn-wash);color:#7C2D12}
.nr-why{font-size:11.5px;color:var(--ink-muted);max-width:30ch;line-height:1.45}
@media (max-width:720px){ .nr-vs{flex-direction:column} .nr-vsarrow{padding:8px 20px} }
.nr-sayr{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--ink-muted);max-width:76ch;
  padding-top:8px;border-top:1px solid var(--hairline)}
.nr-sayr b{color:var(--ink)}

/* ---- The Skills room ------------------------------------------------------ */
.sk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin:0 0 20px}
.sk-card{border:1px solid var(--hairline);border-radius:12px;padding:18px 20px;background:var(--raised);
  display:flex;flex-direction:column;gap:10px}
.sk-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sk-h h3{margin:0;font-size:16px;flex:1 1 auto}
.sk-v{font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);border:1px solid var(--hairline);
  border-radius:20px;padding:1px 8px}
.sk-p{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.5}
.sk-name{display:flex;align-items:baseline;gap:8px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.sk-name code{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--plum);
  background:var(--plum-wash);border-radius:5px;padding:2px 7px}
.sk-desc{border-left:2px solid var(--hairline);padding-left:11px}
.sk-desc span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px}
.sk-desc p{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.5}
.sk-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-faint);
  border-top:1px solid var(--hairline);padding-top:9px;margin-top:auto}
.sk-act{display:flex;gap:8px}
.sk-back{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.sk-file{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin:0 0 14px;
  background:var(--raised)}
.sk-fh{padding:9px 14px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.sk-fh code{font-size:12px;color:var(--ink-muted)}
.sk-pre{margin:0;padding:14px 16px;font-size:12px;line-height:1.55;white-space:pre-wrap;
  word-break:break-word;color:var(--ink);overflow-x:auto;background:var(--raised)}
.sk-i{border:1px solid var(--hairline);border-radius:12px;padding:18px 20px;margin:0 0 14px;
  background:var(--raised)}
.sk-i h3{margin:0 0 8px;font-size:16px}
.sk-i p{margin:0 0 9px;font-size:13.5px;color:var(--ink-muted);line-height:1.55;max-width:74ch}
.sk-i p:last-child{margin-bottom:0}
.sk-i b{color:var(--ink)}
.sk-i code{font-size:12.5px;background:var(--surface-2);border-radius:5px;padding:1px 6px}
.sk-i .sk-pre{border:1px solid var(--hairline);border-radius:8px;background:var(--surface-2);
  margin:0 0 9px;font-size:12px}
.sk-in{font-size:12.5px !important}

/* the ASIN table on its own scroll, header and totals pinned */
.nr-scroll{border:1px solid var(--hairline);border-radius:12px;background:var(--raised);
  max-height:560px;overflow:auto;position:relative}
.nr-sticky thead th{position:sticky;top:0;z-index:3;background:var(--raised);
  box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.nr-sticky tfoot th{position:sticky;bottom:0;z-index:3;background:var(--raised);
  box-shadow:inset 0 1px 0 var(--ink-faint)}
.nr-scrolln{font-size:11.5px;color:var(--ink-faint);margin:7px 0 0}
.nr-chs{display:block;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.nr-chs.up{color:var(--good)} .nr-chs.down{color:#7C2D12} .nr-chs.none{color:var(--ink-faint);font-weight:400}
.nr-chs.big{font-size:12px;padding:1px 7px;border-radius:20px;display:inline-block;margin-top:3px}
.nr-chs.big.up{background:var(--good-wash)} .nr-chs.big.down{background:var(--warn-wash)}
.nr-yoy{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;background:var(--raised);
  margin:0 0 16px}
.nr-yoy .tw{border:none;background:transparent}
.nr-yf td{background:var(--plum-wash)}
.nr-yq td{border-top:2px solid var(--ink-faint);background:var(--plum-wash);font-size:14px}

/* the year-on-year table with the sign-off beside it */
.nr-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;
  align-items:start;margin:0 0 16px}
.nr-side>.nr-yoy{margin:0}
.nr-appr{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;background:var(--raised);
  border-top:3px solid var(--ink-faint);position:sticky;top:12px}
.nr-appr.a-approved{border-top-color:var(--good)}
.nr-appr.a-needs-work{border-top-color:#8A5000}
.nr-apt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.nr-apt h3{margin:0;font-size:15px}
.nr-apo{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7C2D12;background:#FBF2EE;
  border-radius:20px;padding:2px 9px}
.nr-apn{margin:0 0 10px;font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.nr-apstate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.nr-apw{font-size:11px;color:var(--ink-faint)}
.nr-apl{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 10px}
.nr-apl select,.nr-apl textarea{display:block;width:100%;font:inherit;font-size:13px;margin-top:4px;
  padding:7px 9px;border:1px solid var(--hairline);border-radius:8px;background:var(--paper);
  color:var(--ink);text-transform:none;letter-spacing:0;resize:vertical}
.nr-apb{display:flex;gap:8px;margin:0 0 10px}
.nr-aplog{border-top:1px solid var(--hairline);padding-top:9px;margin-top:4px}
.nr-aplog span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.nr-aplog p{margin:4px 0 0;font-size:11.5px;color:var(--ink-muted)}

/* arrived this year / gone since last year */
.nr-flags{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:0 0 12px}
.nr-flag{border:1px solid var(--hairline);border-radius:10px;padding:12px 15px;background:var(--raised)}
.nr-flag b{display:block;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.nr-flag span{display:block;font-size:12px;margin:4px 0 3px;color:var(--ink)}
.nr-flag i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.nr-flag.f-new{border-left:3px solid var(--crit);background:var(--crit-wash)}
.nr-flag.f-new b{color:var(--crit)}
.nr-flag.f-gone{border-left:3px solid var(--info);background:var(--info-wash)}
.nr-flag.f-gone b{color:var(--info)}
tr.nr-arrived td{background:var(--crit-wash)}
tr.nr-departed td{background:var(--info-wash)}
@media (max-width:980px){ .nr-side{grid-template-columns:1fr} .nr-appr{position:static} }
.nr-mx{margin:0 0 14px}
.nr-mx:last-child{margin-bottom:0}
.nr-mxh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.nr-mxh b{font-size:13.5px}
.nr-mxh span{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.nr-mxbar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin:5px 0 6px}
.nr-mxbar i{display:block;height:100%;background:var(--plum);border-radius:4px}
.nr-mx p{margin:0;font-size:12px;color:var(--ink-muted);line-height:1.5}

/* the method, stated before any number */
.nr-method{border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:12px;
  padding:15px 18px;background:var(--raised);margin:0 0 14px}
.nr-method.t-good{border-left-color:var(--good)}
.nr-method.t-ok{border-left-color:var(--info)}
.nr-method.t-warn{border-left-color:#8A5000;background:#FDF7EF}
.nr-method.t-bad{border-left-color:var(--crit);background:var(--crit-wash)}
.nr-mh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.nr-ml{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.nr-mh b{font-size:16px}
.nr-method p{margin:0 0 7px;font-size:13px;color:var(--ink-muted);line-height:1.55;max-width:88ch}
.nr-method p:last-child{margin-bottom:0}
.nr-mwarn{border-top:1px solid var(--hairline);padding-top:8px;color:#7C2D12 !important}
.nr-mwarn b{color:#7C2D12}
.nr-vsu .nr-vsb b{font-size:34px}
.nr-vsm{margin-top:-1px}
.nr-vsm .nr-vsb{padding:11px 20px}
.nr-vsm .nr-vsb b{font-size:20px;margin:2px 0 0}
.nr-vsc.sm{font-size:13px}
.nr-money{color:var(--ink-muted);font-size:12px}
.nr-pod{border:1px solid var(--hairline);border-radius:12px;background:var(--raised);margin:0 0 16px;
  overflow:hidden}
.nr-podh{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.nr-podh h3{margin:0;font-size:16px;display:inline-block}
.nr-podh .nr-apo{margin-left:9px}
.nr-podm{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-faint)}
.nr-podm b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.nr-podm .good b{color:var(--good)} .nr-podm .warn b{color:#7C2D12}
.nr-pod .tw{border:none;background:transparent}
.nr-t .nr-lo{color:var(--info);background:var(--info-wash)}
.nr-t .nr-hi{color:#7C2D12;background:var(--warn-wash)}
.nr-t th.nr-lo,.nr-t th.nr-hi{background:var(--surface-2)}

/* What is in the warehouse, and what is missing. The gap is the only column
   on this table that is an instruction rather than an estimate, so it is the
   one that carries colour: red means send stock. */
.nr-t .nr-stk{color:var(--ink-muted);white-space:nowrap}
.nr-t .nr-inb{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  color:var(--good);letter-spacing:.02em}
.nr-t .nr-gap{white-space:nowrap}
.nr-t .nr-gap.is-short{color:var(--crit);background:var(--crit-wash);font-variant-numeric:tabular-nums}
.nr-t .nr-gap.is-ok{color:var(--ink-faint)}
.nr-t .nr-cov{font-size:10.5px;letter-spacing:.02em}
.nr-t th.nr-stk,.nr-t th.nr-gap{background:var(--surface-2);color:var(--ink-faint)}
.nr-pods{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 9px}
.nr-podl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);
  margin-right:2px}
.nr-podall{font-size:11.5px;margin-left:auto}
.nr-hist{border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;background:var(--raised);
  margin:0 0 16px}
.nr-hist .tw{border:none;background:transparent}
.nr-hist tr.nr-part td{opacity:.6}

/* the forecast, inside the intake */
.ih-fc{grid-column:1 / -1}
.ih-fcm{margin:0 0 12px}
.ih-fcm>span{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.ih-fcm b{font-size:15px}
.ih-fcw{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-top:3px}
.ih-fc3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hairline);
  border-radius:12px;overflow:hidden;margin:0 0 10px}
.ih-fc3>div{padding:14px 16px;text-align:center;border-right:1px solid var(--hairline)}
.ih-fc3>div:last-child{border-right:none}
.ih-fc3 span{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.ih-fc3 b{display:block;font-size:28px;line-height:1.1;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.ih-fc3 i{display:block;font-style:normal;font-size:11px;color:var(--ink-faint)}
.ih-fc3 .lo{background:var(--info-wash)} .ih-fc3 .lo b{color:var(--info)}
.ih-fc3 .mid{background:var(--plum-wash)} .ih-fc3 .mid b{color:var(--plum)}
.ih-fc3 .hi{background:var(--warn-wash)} .ih-fc3 .hi b{color:#7C2D12}
.ih-fcr{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-muted);margin:0 0 8px}
.ih-fcr b{color:var(--ink)}
.ih-fcwarn{color:#7C2D12}
.ih-fcn{font-size:12px;color:var(--ink-muted);line-height:1.55;margin:0 0 12px;max-width:80ch}
.ih-fcap{border:1px solid var(--hairline);border-top:3px solid var(--ink-faint);border-radius:12px;
  padding:14px 16px;background:var(--paper)}
.ih-fcap.a-approved{border-top-color:var(--good)}
.ih-fcap.a-needs-work{border-top-color:#8A5000}
.ih-fcas{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px}
.ih-fc-none{grid-column:1 / -1;border:1px solid var(--hairline);border-left:3px solid #8A5000;
  border-radius:12px;padding:14px 16px;background:#FDF7EF}
.ih-fc-none p{margin:0 0 6px;font-size:13px}
.ih-fc-none p:last-child{margin:0}

/* the two kinds of round in the Intake Hub read apart */
.ih-kind{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  border-radius:20px;padding:2px 9px;background:var(--info-wash);color:var(--info);
  border:1px solid var(--info-edge)}
.ih-kind-q{background:var(--plum-wash);color:var(--plum);border-color:var(--plum-edge)}
.ih-card-f{border-left-color:var(--info) !important;background:linear-gradient(
  180deg, var(--info-wash) 0%, var(--raised) 46%)}
.ih-card-f h3{color:var(--info)}

/* the approval round */
.ih-fp{border:1px solid var(--hairline);border-radius:12px;background:var(--raised);margin:0 0 16px;
  overflow:hidden}
.ih-fph{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.ih-fph h3{margin:0;font-size:16px;display:inline-block}
.ih-fph .ih-for{margin-left:9px}
.ih-fpc{font-size:12px;color:var(--ink-faint)}
.ih-fpc b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.ih-fpr{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(280px,1.6fr) minmax(200px,1fr);
  gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--hairline)}
.ih-fpr:last-child{border-bottom:none}
.ih-fpr.a-approved{background:var(--good-wash)}
.ih-fpr.a-needs-work{background:var(--warn-wash)}
.ih-fprn a{font-weight:600}
.ih-fprn .where{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}
.ih-fpn{display:flex;gap:0;border:1px solid var(--hairline);border-radius:9px;overflow:hidden;
  background:var(--paper)}
.ih-fpn>span{flex:1;padding:6px 10px;text-align:center;border-right:1px solid var(--hairline)}
.ih-fpn>span:last-child{border-right:none}
.ih-fpn i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.ih-fpn b{display:block;font-size:16px;font-variant-numeric:tabular-nums;margin-top:1px}
.ih-fpn .lo{background:var(--info-wash)} .ih-fpn .lo b{color:var(--info)}
.ih-fpn .mid b{color:var(--plum);font-size:19px}
.ih-fpn .hi{background:var(--warn-wash)} .ih-fpn .hi b{color:#7C2D12}
.ih-fpn .was b{color:var(--ink-faint);font-size:14px}
.ih-fpnone{display:block;padding:8px 10px;font-size:12px;color:var(--ink-faint);text-align:center}
.ih-fpa{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ih-fpa .where{font-size:11px;color:var(--ink-faint)}
.btn.sm{font-size:11.5px;padding:4px 10px}
@media (max-width:900px){ .ih-fpr{grid-template-columns:1fr} }
.ih-fcd{border:1px solid var(--hairline);border-radius:12px;background:var(--paper);margin:0 0 12px;
  overflow:hidden}
.ih-fcd>summary{padding:10px 16px;cursor:pointer;font-size:13px;font-weight:600;
  background:var(--surface-2);list-style:none}
.ih-fcd>summary::-webkit-details-marker{display:none}
.ih-fcd>summary::before{content:"▸ ";color:var(--ink-faint)}
.ih-fcd[open]>summary::before{content:"▾ "}
.ih-fcd>summary:hover{color:var(--plum)}
.ih-fcd .tw{border:none;background:transparent;max-height:420px;overflow:auto}
.ih-fcd .nr-t thead th{position:sticky;top:0;background:var(--paper);z-index:2;
  box-shadow:inset 0 -1px 0 var(--hairline)}
.ih-fcd .ih-fcn{padding:10px 16px;margin:0}
.ih-fchow{font-size:11px;color:var(--ink-faint)}

/* How the forecast works: one worked example per method */
.nr-ex{border:1px solid var(--hairline);border-radius:12px;padding:18px 20px;margin:0 0 16px;
  background:var(--raised)}
.nr-ex-none{border-left:3px solid var(--crit);background:var(--crit-wash)}
.nr-ex-hard{border-left:3px solid #8A5000;background:#FDF7EF}
.nr-exh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.nr-exh h3{margin:0;font-size:19px}
.nr-exk{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--hairline);border-radius:20px;padding:2px 9px}
.nr-exl{font-size:15px !important;color:var(--ink) !important;margin:0 0 12px !important;max-width:70ch}
.nr-ex p{margin:0 0 10px;font-size:13.5px;color:var(--ink-muted);line-height:1.6;max-width:78ch}
.nr-ex p:last-child{margin-bottom:0}
.nr-ex b{color:var(--ink)}
.nr-exw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin:0 0 12px;
  border:1px solid var(--hairline);border-radius:10px;background:var(--paper)}
.nr-exs{min-width:0}
.nr-exs span{display:block;font-size:10.5px;color:var(--ink-faint)}
.nr-exs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.3}
.nr-exs.res b{color:var(--plum)}
.nr-exs.lo b{color:var(--info)} .nr-exs.hi b{color:#7C2D12}
.nr-exo{font-size:16px;color:var(--ink-faint)}
.nr-exr{border-left:2px solid var(--plum-edge);padding-left:12px}
.nr-exn{font-size:12.5px !important;border-top:1px solid var(--hairline);padding-top:9px}
.ih-fpd{grid-column:1 / -1;margin-top:10px}
.ih-fpd .tw{max-height:320px}

/* ---- The Supermetrics room ----------------------------------------------- */
.bs-when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-faint);margin:0 0 20px}
.bs-cost{flex:1 1 320px;font-size:11.5px}
.bs-g{margin:0 0 22px}
.bs-g h3{margin:0 0 10px;font-size:15px;display:flex;align-items:baseline;gap:9px}
.bs-g h3 span{font-size:11px;color:var(--ink-faint);font-weight:400}
.bs-ts{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.bs-t{border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;background:var(--raised)}
.bs-t.bs-empty{opacity:.55}
.bs-th{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.bs-th code{font-size:12px;color:var(--plum);background:var(--plum-wash);border-radius:5px;padding:2px 7px}
.bs-is{margin:0 0 9px;font-size:13px;color:var(--ink);line-height:1.5}
.bs-n{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:7px 0;margin:0 0 9px}
.bs-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.bs-use{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.55}

/* rooms added since the dot list was written */
.sb-supermetrics .sb-dot,.smi-supermetrics .smi-dot{background:#0E7490;}
.sb-numbers .sb-dot,.smi-numbers .smi-dot{background:#7C2D12;}
.sb-skills .sb-dot,.smi-skills .smi-dot{background:#5B3A8C;}

/* the one-client dashboard */
.bd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 18px}
.bd-tile{border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;background:var(--raised)}
.bd-tile span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.bd-tile b{display:block;font-size:24px;line-height:1.15;margin:4px 0 3px;font-variant-numeric:tabular-nums}
.bd-tile i{display:block;font-style:normal;font-size:11px;color:var(--ink-faint)}
.bd-tile.t-good b{color:var(--good)} .bd-tile.t-warn b{color:#7C2D12}
.bd-tile.t-warn{background:var(--warn-wash)}
.nr-key .k-spend{width:10px;height:10px;background:#75035A;border-radius:2px;margin-right:6px}
.nr-key .k-adsales{width:10px;height:10px;background:rgba(11,99,87,.26);border-radius:2px;margin-right:6px}
.nr-pick input[type=date]{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--paper);color:var(--ink)}
.bd-quick{font-size:11.5px;color:var(--ink-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nr-keyn{color:var(--ink-faint);font-style:italic}
.nr-apnote{font-size:12.5px;color:var(--ink-muted);font-style:italic;border-left:2px solid var(--hairline);
  padding-left:10px;margin:0 0 10px}
.bs-gapn{font-size:12.5px;color:var(--ink-muted);line-height:1.6;max-width:84ch;margin:0 0 12px}
.bs-gapn b{color:var(--ink)}
.bs-g .tw{margin-bottom:12px}
/* What was built, in Backstage */
.bt-navs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.bt-nav{font-size:12.5px;padding:6px 12px;border-radius:20px;border:1px solid var(--hairline);
  background:var(--raised);color:var(--ink-muted);text-decoration:none}
.bt-nav:hover{border-color:var(--plum);color:var(--plum)}
.bt-nav.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600}
.bt-doc{border:1px solid var(--hairline);border-radius:12px;padding:20px 24px;background:var(--raised);
  max-width:none}
.bt-when{font-size:11px;color:var(--ink-faint);margin:8px 0 0}

/* An urgent QBR. The row moves to the top and says why; it never removes
   anybody, so the marker is a nudge and not a filter. */
.ih-urgent td{background:var(--warn-wash)}
.ih-pri{display:inline-block;margin-left:7px;font-family:"IBM Plex Mono",monospace;font-size:9px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:2px 6px;border-radius:99px;
  background:#fff;color:var(--warn);border:1px solid var(--warn-edge);vertical-align:1px;cursor:help}

/* Stock on the approval form. The person signing off is deciding what to
   send, so the shortfall gets the same weight as the forecast itself -- two
   figures side by side, not a column buried in a details table. */
.ih-fcstock{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-start;
  margin:12px 0 0;padding:13px 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--hairline)}
.ih-fcstock.is-short{background:var(--crit-wash);border-color:var(--crit-edge)}
.ih-fcstock.is-ok{background:var(--good-wash);border-color:var(--good-edge)}
.ih-fcsn{display:flex;flex-direction:column;gap:1px;min-width:120px}
.ih-fcsl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint)}
.ih-fcsn b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  line-height:1.15;color:var(--ink)}
.ih-fcsn i{font-style:normal;font-size:11.5px;color:var(--ink-muted)}
.ih-fcstock.is-short .ih-fcsg b{color:var(--crit)}
.ih-fcstock.is-ok .ih-fcsg b{color:var(--good);font-size:19px}
.ih-fcsw{flex:1 1 280px;min-width:240px;font-size:11px;line-height:1.55;color:var(--ink-muted);margin:0}
.ih-fcsw b{color:var(--ink);font-weight:600}
@media (max-width:560px){ .ih-fcstock{gap:10px 18px} .ih-fcsn{min-width:0} }

/* An account manager's adjustment to a forecast. It sits above the numbers
   because somebody who does not know a figure was adjusted will quote it as
   the desk's own. The old version stays on screen beside the new one. */
.nr-adj{background:var(--plum-wash);border:1px solid var(--plum-edge);border-radius:11px;
  padding:16px 18px;margin:0 0 14px}
.nr-adjh{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.nr-adjt{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--plum)}
.nr-adjn{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.nr-adjo,.nr-adjp{display:flex;flex-direction:column;gap:1px}
.nr-adjo span,.nr-adjp span{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint)}
.nr-adjo b{font-size:19px;font-weight:500;color:var(--ink-faint);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.nr-adjp b{font-size:26px;font-weight:600;color:var(--aubergine);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.nr-adjp i{font-style:normal;font-size:11.5px;font-weight:600}
.nr-adjp i.up{color:var(--good)} .nr-adjp i.down{color:var(--crit)}
.nr-adja{color:var(--ink-faint);font-size:18px;padding-bottom:4px}
.nr-adjq{margin:13px 0 0;padding:10px 14px;border-left:3px solid var(--plum);
  background:rgba(255,255,255,.7);border-radius:0 8px 8px 0;font-size:13px;line-height:1.6;
  color:var(--ink);white-space:pre-wrap}
.nr-adjt2{margin-top:12px}
.nr-adj .tw{margin-top:12px}
.nr-adjsame td{color:var(--ink-faint)}
.nr-adjf{font-size:11px;color:var(--ink-muted);line-height:1.55;margin:11px 0 0;max-width:86ch}
.nr-bandt{display:inline-block;margin-left:6px;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.05em;padding:1px 5px;border-radius:99px;background:var(--surface-2);
  color:var(--ink-faint);vertical-align:1px}
.nr-bandt.on{background:var(--plum-wash);color:var(--plum);border:1px solid var(--plum-edge)}
.nr-apnote{font-size:11px;color:var(--ink-muted);margin:6px 0 0}
.nr-apnote b{color:var(--ink)}

/* ---- A client intake's book -------------------------------------------- */
/* Where a team intake shows progress per section, this shows the state of one
   link, because that is the only thing that moves until the client replies. */
.ih-st{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border-radius:999px;padding:2px 10px;white-space:nowrap}
.ih-st-none{color:#8a6b83;background:var(--sunken);border:1px dashed var(--hairline-strong)}
.ih-st-sent{color:#7C2D12;background:#FBF2EE}
.ih-st-open{color:#75035A;background:#F7EFF5}
.ih-st-in{color:#0B5D3B;background:#EAF5EF}
.ih-in-none td{opacity:.72}
.ih-npsnote{border-left:3px solid #75035A;padding-left:14px}

/* ---- A client intake, read back on the desk ----------------------------- */
/* Shown, never typed: the value of this round is that none of it came from us. */
.ih-ro label{font-weight:600}
.ih-scale{display:inline-flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.ih-sq{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  padding:0 7px;border:1px solid var(--hairline);border-radius:8px;font-size:13px;font-weight:600;
  color:var(--ink-faint);background:var(--raised)}
.ih-sq-on{background:#75035A;border-color:#75035A;color:#fff}
.ih-scale-n .ih-sq{min-width:28px;height:28px;font-size:12px}
.ih-picks{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.ih-pick{font-size:12.5px;border:1px solid rgba(117,3,90,.25);background:#F7EFF5;color:#75035A;
  border-radius:999px;padding:3px 11px}
.ih-said{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink);
  border-left:3px solid var(--hairline-strong);padding-left:11px;white-space:pre-wrap}
.ih-unans{margin:7px 0 0;font-size:12.5px;color:var(--ink-faint);font-style:italic}
.ih-scale{align-items:center}
.ih-scale-off .ih-sq{opacity:.45}
.ih-scale .ih-unans{margin:0 0 0 6px}
.ih-mail{font-size:12.5px;color:#75035A;text-decoration:none;word-break:break-all}
.ih-mail:hover{text-decoration:underline}
.ih-noaddr{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#9A3412;background:#FBF2EE;border-radius:999px;padding:2px 9px;white-space:nowrap}
.ih-addrwarn{border-left:3px solid #9A3412;padding-left:14px}

/* A multi-select on the team side: boxes that add up to one answer. */
.ih-multi{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ih-mo input{position:absolute;opacity:0;width:0;height:0}
.ih-mo label{display:inline-block;font-size:12.5px;border:1px solid var(--hairline);
  background:var(--raised);border-radius:999px;padding:5px 13px;cursor:pointer;
  color:var(--ink-muted);transition:background .15s,border-color .15s,color .15s}
.ih-mo label:hover{border-color:#7C2D12;color:var(--ink)}
.ih-mo input:checked+label{background:#7C2D12;border-color:#7C2D12;color:#fff;font-weight:600}
.ih-mo input:focus-visible+label{outline:2px solid #7C2D12;outline-offset:2px}

/* ---- The plan, shown on the intake that judges it ----------------------- */
/* Deck, then the numbers, then the phases, then the questions. The panel is
   one object so the questions underneath read as a separate act. */
.ih-planref{border:1px solid var(--hairline);border-left:4px solid var(--plum);
  border-radius:14px;background:var(--raised);margin:0 0 26px;padding:0 0 6px;overflow:hidden}
.ih-pr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:16px 20px 14px;border-bottom:1px solid var(--hairline)}
.ih-pr-head h3{margin:4px 0 0;font-size:17px}
.ih-pr-head p{margin:7px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.55;max-width:66ch}
.ih-pr-k{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--plum)}
.ih-planref .pl-deck,.ih-planref .pl-nums{margin:16px 20px}
.ih-planref .pl-track{margin:16px 20px 4px}

/* The N/A button sits top-right of a question, so a long label has to stop
   before it reaches it. It was running underneath and printing over the top. */
.ih-q > label{padding-right:52px}
.ih-q.ih-ro > label,.ih-q.ih-k-multi > label{padding-right:0}
.ih-q .ih-hint{display:block;padding-right:0;font-weight:400}

/* ---- Company Brainstorms: the vision, as a map -------------------------- */
/* A centre and spokes at the top so the shape is visible at a glance, then the
   branches underneath where the reading actually happens. The spokes are
   anchors into the branches rather than a second copy of them. */
.vmap{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:22px;align-items:center;
  border:1px solid var(--hairline);border-radius:16px;background:var(--raised);
  padding:22px;margin:18px 0 20px}
.vcore{text-align:center;padding:20px 18px;border-radius:14px;
  background:linear-gradient(160deg,#F7EFF5,#FBF6F2);border:1px solid rgba(117,3,90,.18)}
.vcore-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#75035A}
.vcore p{margin:9px auto 10px;font-size:16px;line-height:1.5;color:var(--ink);max-width:34ch;text-wrap:balance}
.vcore-s{font-size:11px;color:var(--ink-faint);line-height:1.4;display:block}
.vspokes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vspoke{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  border:1px solid var(--hairline);border-left:4px solid var(--vb);border-radius:11px;
  padding:11px 13px;background:var(--paper);transition:border-color .15s,transform .15s}
.vspoke:hover{border-color:var(--vb);transform:translateY(-1px)}
.vspoke-n{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--vb);color:#fff;font-size:11px;font-weight:700;flex:none}
.vspoke-t{font-size:12.5px;font-weight:600;line-height:1.3;flex:1}
.vspoke-c{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
@media (max-width:820px){.vmap{grid-template-columns:1fr}}

.vbs{display:flex;flex-direction:column;gap:12px;margin:18px 0 22px}
.vb{border:1px solid var(--hairline);border-left:4px solid var(--vb);border-radius:13px;
  background:var(--raised);overflow:hidden}
.vb > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:14px 17px}
.vb > summary::-webkit-details-marker{display:none}
.vb > summary::after{content:"\25B8";margin-left:auto;font-size:10px;color:var(--vb);
  transition:transform .15s}
.vb[open] > summary::after{transform:rotate(90deg)}
.vb-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--vb);color:#fff;font-size:12.5px;font-weight:700;flex:none}
.vb-ttl b{display:block;font-size:15px}
.vb-c{font-size:11.5px;color:var(--ink-faint)}
.vb-b{margin:0 17px 4px;padding-left:38px;font-size:12.5px;color:var(--ink-muted);
  line-height:1.55;max-width:74ch}
.vn-rev{font-size:11.5px;color:var(--ink-faint)}
.vn-none{color:#9A5B00;font-weight:600}
.vnote-warn{border-left:3px solid #9A5B00;padding-left:14px}

/* The role diagram. Scales by its viewBox, so it stays readable at phone width
   by shrinking rather than by scrolling sideways. */
.vdiag{margin:20px 0 22px;padding:0}
.vdiag svg{display:block;width:100%;max-width:100%;height:auto;color:var(--ink)}
.vdiag figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-muted);line-height:1.6;
  max-width:88ch}

/* A concept: a heading and the lines that make it true, not another bullet. */

/* ---- The vision, as tables -------------------------------------------- */
/* Concept on the left, one short line on the right. The left column is fixed
   and narrow so the eye can run down it without reading the right at all. */
.vt-wrap{margin:8px 17px 16px;border:1px solid var(--hairline);border-radius:11px;overflow:hidden}
.vt{width:100%;border-collapse:collapse;background:var(--paper)}
.vt th,.vt td{text-align:left;vertical-align:top;padding:13px 16px;
  border-bottom:1px solid var(--hairline)}
.vt tr:last-child th,.vt tr:last-child td{border-bottom:0}
.vt th{width:34%;min-width:150px;font-size:14px;font-weight:700;line-height:1.35;
  color:var(--ink);background:var(--sunken);border-right:1px solid var(--hairline)}
.vt td p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-muted);max-width:68ch}
.vt td b{color:var(--ink);font-weight:700}
.vr-c th{border-left:3px solid var(--vb)}
.vr-h th{border-left:3px solid var(--vb)}
.vr-h{background:linear-gradient(90deg,rgba(176,58,78,.035),transparent 70%)}
.vr-sig{margin-top:8px!important;padding-left:11px;border-left:2px solid var(--vb)}
.vr-sig span{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--vb);margin-bottom:2px}
.vr-f{display:flex;align-items:center;gap:10px;margin-top:9px!important;flex-wrap:wrap}
@media (max-width:620px){
  .vt th{width:auto;display:block;border-right:0;border-bottom:0;padding-bottom:4px}
  .vt td{display:block;padding-top:0}
}

/* ---- The journey: who said it, and the two lists that are not tasks ---- */
.pj-src{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:2px 7px;white-space:nowrap;margin-left:auto;margin-right:6px}
.pj-src-jolle,.pj-src-joelle{color:#75035A;background:#F7EFF5}
.pj-src-jess{color:#0B5D3B;background:#EAF5EF}

.pj-notes{border:1px solid var(--hairline);border-left:4px solid var(--n);border-radius:13px;
  background:var(--raised);padding:18px 22px 6px;margin:26px 0 0}
.pj-notes h3{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0;font-size:16px}
.pj-nk{font-weight:700;color:var(--ink)}
.pj-nw{font-size:11.5px;color:var(--ink-faint);font-weight:400}
.pj-nc{font-size:11px;font-weight:700;color:var(--n);background:var(--sunken);
  border-radius:999px;padding:1px 9px;margin-left:auto}
.pj-nl{margin:9px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.55;max-width:74ch}
.pj-nlist{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.pj-nlist li{border:1px solid var(--hairline);border-radius:10px;padding:11px 14px;
  background:var(--paper)}
.pj-nh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pj-nh b{font-size:13.5px;line-height:1.35}
.pj-nb{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--n);white-space:nowrap}
.pj-nlist p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.pj-notes{margin-bottom:8px}

/* ---- The journey, read as phases rather than filled in as a grid ------- */
/* Reading is the default; editing is a mode, and the checkbox drives it with
   no script, so the inputs the board already binds to stay exactly where the
   script expects them. */
.pj-mode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 6px;
  padding:11px 15px;border:1px solid var(--hairline);border-radius:10px;background:var(--raised)}
/* The checkbox drives the mode with no script, so it has to be a sibling of
   the phases for the ~ selectors below to reach them. It is taken out of the
   flow and the label is the control. */
.pj-cb{position:absolute;opacity:0;width:0;height:0}
.pj-toggle{font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--hairline-strong);
  border-radius:999px;padding:5px 14px;white-space:nowrap;background:var(--paper)}
.pj-toggle:hover{border-color:#75035A;color:#75035A}
.pj-cb:focus-visible ~ .pj-mode .pj-toggle{outline:2px solid #75035A;outline-offset:2px}
.pj-cb:checked ~ .pj-mode .pj-toggle{background:#75035A;border-color:#75035A;color:#fff}
.pj-mh{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.pj-meta,.pj-add,.ph-empty,.pj-del{display:none}


.pj-phases{display:flex;flex-direction:column;gap:18px;margin:16px 0 8px}
.ph{border:1px solid var(--hairline);border-radius:13px;background:var(--raised);overflow:hidden}
.ph-h{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--hairline);
  background:var(--sunken)}
.ph-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:#75035A;color:#fff;font-size:12.5px;font-weight:700}
.ph-t h3{margin:0;font-size:16px;font-weight:700}
.ph-t p{margin:2px 0 0;font-size:12px;color:var(--ink-faint)}
.ph-c{margin-left:auto;font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
.ph-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0}
.ph-team{padding:14px 18px;border-right:1px solid var(--hairline)}
.ph-team:last-child{border-right:0}
.ph-team h4{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;gap:7px;align-items:center}
.ph-team h4 span{font-size:10px;color:var(--ink-faint);background:var(--sunken);
  border-radius:999px;padding:1px 7px}

.pt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pt{border-left:2px solid var(--hairline-strong);padding-left:11px}
.pt-in-place{border-left-color:#0B6357}
.pt-agreed{border-left-color:#3C3A8C}
.pt-idea{border-left-color:var(--hairline-strong)}
.pt-dropped{border-left-color:var(--hairline);opacity:.5}
.pt-h{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pt-dot{display:none}
.pt-t{font-size:13.5px;font-weight:700;line-height:1.35}
.pt-st{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.pt-in-place .pt-st{color:#0B6357}
.pt-agreed .pt-st{color:#3C3A8C}
.pt-d{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.pt-m{margin:6px 0 0;display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--ink-faint)}
.pt-m span::after{content:"·";margin-left:9px;opacity:.5}
.pt-m span:last-child::after{content:""}

/* Edit mode: the furniture comes back. */
.pj-cb:checked ~ .pj-phases .pj-meta{display:flex;gap:6px;margin-top:8px}
.pj-cb:checked ~ .pj-phases .pj-meta input{flex:1;min-width:0}
.pj-cb:checked ~ .pj-phases .pj-add{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pj-cb:checked ~ .pj-phases .pj-add input{flex:1;min-width:120px}
.pj-cb:checked ~ .pj-phases .ph-empty{display:block;opacity:.65}
.pj-cb:checked ~ .pj-phases .pj-del{display:inline-block;margin-left:auto}
.pj-cb:checked ~ .pj-phases .pt-m{display:none}
.pj-meta input,.pj-meta select,.pj-add input{font:inherit;font-size:12px;padding:5px 8px;
  border:1px solid var(--hairline);border-radius:7px;background:var(--paper);color:var(--ink)}
@media (max-width:640px){.ph-team{border-right:0;border-bottom:1px solid var(--hairline)}}

.pj-spine{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;margin:16px 0 0;padding:0}
.pj-step a{display:block;text-decoration:none;color:inherit;border:1px solid var(--hairline);
  border-top:3px solid #75035A;border-radius:10px;padding:10px 12px;background:var(--raised)}
.pj-step a:hover{border-color:#75035A}
.pj-empty a{border-top-color:var(--hairline);opacity:.6}
.pj-sn{display:block;font-size:12.5px;font-weight:700}
.pj-sc{display:block;font-size:11px;color:var(--ink-faint);margin-top:1px}
.pj-stm{display:block;font-size:10px;color:var(--ink-faint);margin-top:5px;line-height:1.4}

/* ---- The first 100 days ------------------------------------------------ */
.fh{display:flex;flex-direction:column;gap:12px;margin:18px 0 8px}
.fh-s{border:1px solid var(--hairline);border-left:3px solid #75035A;border-radius:11px;
  background:var(--raised);overflow:hidden}
.fh-s > header{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--hairline);background:var(--sunken)}
.fh-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border-radius:50%;background:#75035A;color:#fff;font-size:12px;font-weight:700}
.fh-s h3{margin:0;font-size:15px;font-weight:700}
.fh-s > header p{margin:1px 0 0;font-size:11.5px;color:var(--ink-faint)}
.fh-c{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-faint);
  background:var(--paper);border-radius:999px;padding:2px 9px}
.fh-none{border-left-color:var(--hairline);opacity:.7}
.fh-l{list-style:none;margin:0;padding:8px 16px 12px}
/* A grid rather than a flex row, so team, source and timing line up in
   columns down the stage instead of landing wherever the title ends. */
.fh-t{display:grid;grid-template-columns:1fr auto auto auto;align-items:baseline;
  gap:10px;padding:7px 0;border-bottom:1px solid var(--hairline)}
@media (max-width:640px){.fh-t{grid-template-columns:1fr auto}}
.fh-l li:last-child{border-bottom:0}
.fh-t b{font-size:13.5px;font-weight:600}
.fh-team{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.fh-operations{color:#8A5000;background:#FBF4EA}
.fh-creative{color:#3C3A8C;background:#EFEFF7}
.fh-performance{color:#0B6357;background:#EAF5EF}
.fh-accountmanagement{color:#75035A;background:#F7EFF5}
.fh-w{font-size:11px;color:var(--ink-faint);white-space:nowrap;text-align:right}
.fh-empty{font-size:12.5px;color:var(--ink-faint);font-style:italic;padding:7px 0}