/* Succinct Client Desk -- application stylesheet.
   Seeded from the approved mockup; edit HERE from now on, not the mockup.
   Deep Royal Purple #4B1678 / Rich Violet #5E248D / Lavender #7A49A5
   Charcoal #2F2F2F on Warm White #F9F9F9.
   Tokens first: every colour is defined on :root and redefined for dark,
   so nothing is styled directly inside a media or [data-theme] block. */

:root{
  --paper:#F9F9F9; --surface:#FFFFFF; --surface-2:#FBFAFC; --raise:#FFFFFF;
  --ink:#2F2F2F; --ink-2:#4A4453; --muted:#6B6472; --faint:#9A93A3;
  --line:#E4E0EA; --line-strong:#CCC5D6;
  --teal:#4B1678; --teal-soft:#F0EAF7; --teal-ink:#3B0F60;
  --orchid:#7A49A5; --orchid-soft:#F4EFFA;
  --on-accent:#FFFFFF;
  --ok:#15764A; --ok-soft:#E3F1EA;
  --warn:#8A5B0C; --warn-soft:#FBF0DC;
  --late:#A8322C; --late-soft:#FBE7E5;
  --lock:#F2F0F5;
  --shadow:0 1px 2px rgba(16,26,28,.06), 0 8px 24px -12px rgba(16,26,28,.18);
  --shadow-pop:0 2px 6px rgba(16,26,28,.10), 0 18px 40px -16px rgba(16,26,28,.32);
  --r:6px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#151119; --surface:#1D1825; --surface-2:#241E2D; --raise:#2A2333;
  --ink:#EDEAF2; --ink-2:#C7C0D2; --muted:#968EA3; --faint:#6F6880;
  --line:#332C3E; --line-strong:#443C52;
  --teal:#B490DC; --teal-soft:#2C2040; --teal-ink:#D2B8ED;
  --orchid:#C49BE4; --orchid-soft:#31254A;
  --on-accent:#1A1322;
  --ok:#4FBB86; --ok-soft:#13301F;
  --warn:#D9A441; --warn-soft:#2F2412;
  --late:#E0736A; --late-soft:#331A18;
  --lock:#221C2B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-pop:0 2px 8px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --paper:#151119; --surface:#1D1825; --surface-2:#241E2D; --raise:#2A2333;
  --ink:#EDEAF2; --ink-2:#C7C0D2; --muted:#968EA3; --faint:#6F6880;
  --line:#332C3E; --line-strong:#443C52;
  --teal:#B490DC; --teal-soft:#2C2040; --teal-ink:#D2B8ED;
  --orchid:#C49BE4; --orchid-soft:#31254A;
  --on-accent:#1A1322;
  --ok:#4FBB86; --ok-soft:#13301F;
  --warn:#D9A441; --warn-soft:#2F2412;
  --late:#E0736A; --late-soft:#331A18;
  --lock:#221C2B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-pop:0 2px 8px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600}
.serif{font-family:"Newsreader",Georgia,serif; font-weight:500; letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:216px 1fr; min-height:100vh}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:14px 10px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.brand{display:flex; gap:9px; align-items:center; padding:4px 8px 16px}
.mark{
  width:26px; height:26px; border-radius:5px; flex:none;
  background:linear-gradient(150deg,#4B1678,#7A49A5);
  display:grid; place-items:center; color:var(--on-accent); font-weight:700; font-size:12px;
  font-family:"IBM Plex Mono",monospace;
}
.brand b{font-size:14px; font-weight:600; letter-spacing:-.01em; display:block; line-height:1.2}
.brand span{font-size:10.5px; color:var(--muted); display:block}
.navlabel{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); padding:14px 8px 5px; font-weight:600}
.nav{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r);
  color:var(--ink-2); cursor:pointer; border:0; background:none; width:100%; text-align:left;
  font:inherit; font-size:13px;
}
.nav{text-decoration:none}
.nav:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.nav[aria-selected="true"]{background:var(--teal-soft); color:var(--teal-ink); font-weight:600}
.nav .ic{width:15px; height:15px; flex:none; opacity:.85}
.nav .count{margin-left:auto; font-size:10.5px; color:var(--muted); font-family:"IBM Plex Mono",monospace}
.railfoot{margin-top:auto; padding:10px 8px 2px; border-top:1px solid var(--line); font-size:11px; color:var(--muted)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:11px 20px;
}
.topbar h1{font-size:16px; font-weight:600; letter-spacing:-.015em}
.topbar .sub{font-size:11.5px; color:var(--muted)}
.spacer{margin-left:auto}
.who{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.avatar{width:24px; height:24px; border-radius:50%; background:var(--orchid-soft); color:var(--orchid);
  display:grid; place-items:center; font-size:10.5px; font-weight:700}
.screen{padding:18px 20px 60px; display:none}
.screen.on{display:block}
/* ---------- toolbar ---------- */
.toolbar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:8px; margin-bottom:12px; position:sticky; top:47px; z-index:30; box-shadow:var(--shadow);
}
.field{display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface-2);
  border-radius:5px; padding:5px 8px; font-size:12.5px}
.field label{color:var(--muted); font-size:11px; letter-spacing:.03em}
.field select,.field input{border:0; background:none; color:var(--ink); font:inherit; font-size:12.5px; outline:none; min-width:74px}
.field.search{min-width:230px}
.field.search input{width:100%}
.btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font:inherit; font-size:12.5px; font-weight:500; padding:6px 11px; border-radius:5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.btn{text-decoration:none}
.btn:hover{background:var(--surface-2)}
a.btn.primary:hover{color:var(--on-accent)}
.btn.primary{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent; background:none; color:var(--muted)}
.btn.ghost:hover{color:var(--ink); background:var(--surface-2)}

/* ---------- grid ---------- */
.gridwrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:auto; max-height:60vh; box-shadow:var(--shadow); position:relative;
}
table.grid{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:12.5px}
table.grid th,table.grid td{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0; white-space:nowrap; height:31px; vertical-align:middle;
}
table.grid thead th{
  position:sticky; top:0; z-index:20; background:var(--surface-2); color:var(--ink-2);
  font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  text-align:left; padding:0 9px; border-bottom:1px solid var(--line-strong); cursor:pointer; user-select:none;
}
table.grid thead th:hover{color:var(--teal-ink)}
table.grid thead th .sortcue{opacity:.3; font-size:9px; margin-left:3px}
table.grid thead th .sortcue.on{opacity:1; color:var(--teal)}
table.grid thead th.sorted{color:var(--teal-ink); background:var(--teal-soft)}
th.gp{ text-align:center; font-size:9.5px; letter-spacing:.1em; color:var(--muted); background:var(--surface); }
td .cell{display:block; padding:0 9px; height:30px; line-height:30px; overflow:hidden; text-overflow:ellipsis}
td.num{width:44px; text-align:right; color:var(--faint); background:var(--surface-2)}
td.num .cell{padding-right:10px}
tbody tr:hover td{background:var(--surface-2)}
tbody tr:hover td.sticky{background:var(--surface-2)}
.sticky{position:sticky; z-index:10; background:var(--surface)}
thead .sticky{z-index:25; background:var(--surface-2)}
.s0{left:0} .s1{left:44px}
.s1{border-right:1px solid var(--line-strong)}
td.editable{cursor:cell}
td.editable:hover .cell{box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:3px}
td.locked .cell{color:var(--faint); background:var(--lock)}
td.saved{animation:flash 1.1s ease}
@keyframes flash{0%{background:var(--ok-soft)}100%{background:transparent}}
.editing{padding:0!important; position:relative}
.editing input,.editing select{
  position:absolute; left:0; top:0; z-index:35;
  width:100%; min-width:100%; height:30px; border:2px solid var(--teal); border-radius:3px; padding:0 6px;
  font:inherit; font-size:12.5px; background:var(--raise); color:var(--ink); outline:none;
  box-shadow:var(--shadow-pop);
}
.editing select{width:auto; padding-right:22px}
.cname{color:var(--ink); font-weight:500; cursor:pointer}
.cname:hover{color:var(--teal); text-decoration:underline; text-underline-offset:2px}
.empty{color:var(--faint)}
.dv-late{color:var(--late); font-weight:600}
.dv-soon{color:var(--warn); font-weight:600}
.derived{font-style:normal}
td.locked .cell .dv-late,td.locked .cell .dv-soon{opacity:1}

/* pills */
.pill{display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:20px;
  font-size:10.5px; font-weight:600; letter-spacing:.02em; line-height:17px}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.late{background:var(--late-soft); color:var(--late)}
.pill.mute{background:var(--lock); color:var(--muted)}
.pill.teal{background:var(--teal-soft); color:var(--teal-ink)}
.pill.crit{background:var(--late); color:var(--on-accent)}
.pill.gone{background:var(--orchid-soft); color:var(--orchid)}
.code{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; padding:1px 6px; border-radius:3px; line-height:18px; display:inline-block}
.code.c-C{background:var(--warn-soft); color:var(--warn)}
.code.c-CP{background:var(--warn-soft); color:var(--warn)}
.code.c-CR{background:var(--late-soft); color:var(--late)}
.code.c-CRP{background:var(--late-soft); color:var(--late)}
.code.c-Y{background:var(--teal-soft); color:var(--teal-ink)}
.code.c-Yes{background:var(--ok-soft); color:var(--ok)}
.code.c-Check{background:var(--orchid-soft); color:var(--orchid)}

.chipbar{display:flex; align-items:center; gap:8px; margin:-4px 0 10px; min-height:26px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--teal-soft); color:var(--teal-ink);
  border:1px solid var(--teal); border-radius:20px; padding:3px 5px 3px 11px; font-size:11.5px; font-weight:600}
.chip button{border:0; background:var(--teal); color:var(--on-accent); border-radius:50%; width:16px; height:16px;
  font:inherit; font-size:10px; line-height:1; cursor:pointer; padding:0}
.chip button:hover{filter:brightness(1.15)}
.list .row.click{cursor:pointer}
.list .row.click:hover{background:var(--surface-2)}
.card[data-view]{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.card[data-view]:hover{transform:translateY(-1px); box-shadow:var(--shadow-pop)}
.card .go{font-size:10.5px; color:var(--teal); font-weight:600; margin-top:5px; opacity:0}
.card[data-view]:hover .go{opacity:1}
.gridfoot{display:flex; align-items:center; gap:10px; padding:9px 2px; font-size:11.5px; color:var(--muted)}
.pager{margin-left:auto; display:flex; gap:4px}
.pager button{border:1px solid var(--line); background:var(--surface); border-radius:4px; min-width:26px; height:26px;
  font:inherit; font-size:11.5px; color:var(--ink-2); cursor:pointer}
.pager button[aria-current="true"]{background:var(--teal); border-color:var(--teal); color:var(--on-accent); font-weight:600}

/* cards */
.cards{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:16px}
@media (max-width:1320px){ .cards{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1080px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card .v{font-size:23px}
.card .k{line-height:1.25; min-height:2.5em; display:flex; align-items:flex-end}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; box-shadow:var(--shadow)}
.card .k{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.card .v{font-size:25px; font-weight:600; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums}
.card .d{font-size:11px; color:var(--muted); margin-top:2px}
.card.alert{border-left:3px solid var(--late)}
.card.due{border-left:3px solid var(--warn)}
.card.good{border-left:3px solid var(--ok)}
.spark{display:flex; align-items:flex-end; gap:2px; height:22px; margin-top:6px}
.spark i{flex:1; background:var(--teal-soft); border-radius:1px}
.spark i:last-child{background:var(--teal)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.panel > header{display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line)}
.panel > header h2{font-size:13px; font-weight:600}
.two{display:grid; grid-template-columns:1.55fr 1fr; gap:14px; align-items:start}
@media (max-width:1180px){ .two{grid-template-columns:1fr} }
.list{display:flex; flex-direction:column}
.list .row{display:flex; gap:10px; align-items:baseline; padding:8px 13px; border-bottom:1px solid var(--line); font-size:12.5px}
.list .row:last-child{border-bottom:0}
.list .row .when{color:var(--faint); font-size:11px; width:52px; flex:none}
.list .row .what{color:var(--ink-2)}
.list .row b{font-weight:600; color:var(--ink)}
/* drawer */
.scrim{position:fixed; inset:0; background:rgba(16,26,28,.28); z-index:60; display:none}
.scrim.on{display:block}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(470px,94vw); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:var(--shadow-pop); z-index:61;
  transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer header{padding:14px 16px 10px; border-bottom:1px solid var(--line)}
.drawer .tabs{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.drawer .tabs button{border:0; background:none; font:inherit; font-size:12px; padding:8px 10px; color:var(--muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.drawer .tabs button[aria-selected="true"]{color:var(--teal-ink); border-bottom-color:var(--teal); font-weight:600}
.drawer .body{overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:14px}
.kv{display:grid; grid-template-columns:130px 1fr; gap:4px 10px; font-size:12.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; color:var(--ink)}
.dsection{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.dsection h3{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  padding:7px 11px; background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:600}
.dsection .inner{padding:11px}

/* toast */
.modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:70;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-pop);
  width:min(430px,92vw); max-height:78vh; display:none; flex-direction:column}
.modal.on{display:flex}
.modal > header{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:8px}
.modal > header h2{font-size:13.5px; font-weight:600}
.modal > header .sub{font-size:11px; color:var(--muted)}
.modal > footer{padding:10px 14px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center}
.modal > footer .note{font-size:11px; color:var(--muted); margin-left:auto; text-align:right}
.collist{overflow:auto; padding:5px 0}
.colrow{display:flex; align-items:center; gap:9px; padding:5px 14px; font-size:12.5px}
.colrow:hover{background:var(--surface-2)}
.colrow input[type=checkbox]{accent-color:var(--teal); width:14px; height:14px; margin:0}
.colrow .lbl{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.colrow .tagx{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.colrow.pinned .lbl{color:var(--muted)}
.colrow .mv{border:1px solid var(--line); background:var(--surface); border-radius:4px; width:23px; height:23px;
  font:inherit; font-size:9px; cursor:pointer; color:var(--ink-2); padding:0; flex:none}
.colrow .mv:hover:not(:disabled){border-color:var(--teal); color:var(--teal)}
.colrow .mv:disabled{opacity:.3; cursor:default}
.toasts{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:8px}
.toast{background:var(--raise); border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r); box-shadow:var(--shadow-pop); padding:9px 13px; font-size:12.5px; min-width:250px;
  animation:rise .18s ease}
.toast b{display:block; font-size:12px}
.toast span{color:var(--muted); font-size:11.5px}
.toast.err{border-left-color:var(--late)}
@keyframes rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* prose / spec screen */
.prose{max-width:78ch}
.prose h2{font-size:19px; margin:26px 0 8px; letter-spacing:-.015em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:13.5px; margin:18px 0 5px}
.prose p{margin:0 0 10px; color:var(--ink-2)}
.prose ul{margin:0 0 12px; padding-left:18px; color:var(--ink-2)}
.prose li{margin-bottom:4px}
.lead{font-size:15px; color:var(--ink-2); border-left:2px solid var(--teal); padding-left:12px; margin-bottom:20px}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0 16px}
.tbl th,.tbl td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top}
.tbl th{background:var(--surface-2); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tblwrap{overflow-x:auto}
.q{border:1px solid var(--line); border-left:3px solid var(--orchid); border-radius:var(--r);
  background:var(--surface); padding:12px 14px; margin:0 0 10px; box-shadow:var(--shadow)}
.q b{display:block; font-size:13px; margin-bottom:4px}
.q p{margin:0; font-size:12.5px; color:var(--ink-2)}
.q .tag{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--orchid); background:var(--orchid-soft);
  padding:1px 6px; border-radius:3px; margin-right:7px}
.flow{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11.5px; margin:10px 0 18px}
.flow span{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:4px 11px}
.flow span.hi{background:var(--teal-soft); border-color:var(--teal); color:var(--teal-ink); font-weight:600}
.flow em{color:var(--faint); font-style:normal}
/* Three to a row, not auto-fit. auto-fit sized the columns to the number of
   fields in the group, so a two-field section stretched each input across half
   the screen to hold "60" -- and every section lined up differently from the
   one above it. A fixed three keeps the columns in the same place all the way
   down, and the cap stops them growing without limit on a wide monitor. */
.setgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 16px; padding:11px 13px; max-width:1120px}
@media (max-width:1080px){.setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.setgrid{grid-template-columns:minmax(0,1fr)}}
.setfield{display:flex; flex-direction:column; gap:3px; min-width:0}
.setfield label{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.setfield input,.setfield select{border:1px solid var(--line); background:var(--surface-2); border-radius:5px;
  padding:6px 8px; font:inherit; font-size:12.5px; color:var(--ink); outline:none; width:100%}
.setfield input:focus,.setfield select:focus{border-color:var(--teal); background:var(--surface)}
.setfield .note{font-size:10.5px; color:var(--faint); line-height:1.35}
.setfoot{display:flex; gap:8px; align-items:center; padding:0 13px 13px; font-size:11.5px; color:var(--muted)}
.hide{display:none!important}
.tl{padding:4px 0 10px}
.tlday{display:flex; align-items:center; gap:9px; padding:9px 14px 5px; position:sticky; top:0;
  background:var(--surface); border-bottom:1px solid var(--line); z-index:2}
.tlday b{font-size:12px} .tlday span{font-size:11px; color:var(--muted)}
.tlrow{display:grid; grid-template-columns:56px 16px 1fr; gap:0 10px; padding:0 14px}
.tlrow .t{font-size:11px; color:var(--faint); text-align:right; padding-top:9px;
  font-family:"IBM Plex Mono",monospace}
.tlrow .tlrail{position:relative}
.tlrow .tlrail:before{content:""; position:absolute; left:6px; top:0; bottom:0; width:1px; background:var(--line)}
.tlrow .tldot{position:absolute; left:2px; top:12px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--teal)}
.tlrow.first .tlrail:before{top:12px}
.tlrow.last .tlrail:before{bottom:auto; height:12px}
.tlbody{padding:8px 0 10px; min-width:0}
.tlbody .hd{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.tlbody .who{font-weight:600; font-size:12.5px}
.tlbody .meta{font-size:11px; color:var(--muted); margin-top:2px}
.tlbody .val{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 6px; display:inline-block}
.hint{font-size:11.5px; color:var(--muted); display:flex; gap:6px; align-items:center; margin-bottom:10px}
.hint kbd{font-family:"IBM Plex Mono",monospace; font-size:10.5px; border:1px solid var(--line-strong);
  border-bottom-width:2px; border-radius:4px; padding:1px 5px; background:var(--surface)}

/* ---------- families ---------- */
/* Members sit under their head. The indent and the branch mark are what make a
   family read as a block rather than as unrelated rows that happen to sort together. */
tr.member-row td.sticky .cell{padding-left:6px}
.branch{color:var(--faint); margin-right:5px; font-size:11px}
tr.member-row td.num{color:var(--faint)}
tr.member-row td.sticky{box-shadow:inset 3px 0 0 var(--teal-soft)}
.tagx{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  margin-left:6px}

/* ---------- report status codes ---------- */
/* Colour follows the workflow: amber while it is our move, red once we have
   chased and heard nothing, green when the report has gone. */
.code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  padding:1px 6px; border-radius:3px; line-height:18px; display:inline-block}
.code.c-C,.code.c-CP{background:var(--warn-soft); color:var(--warn)}
.code.c-CR,.code.c-CRP{background:var(--late-soft); color:var(--late)}
.code.c-Y{background:var(--teal-soft); color:var(--teal-ink)}
.code.c-Yes{background:var(--ok-soft); color:var(--ok)}

/* ---------- activity timeline ---------- */
/* Grouped by day so the log reads as a story rather than a table. */
.tl{padding:4px 0 10px}
.tlday{display:flex; align-items:center; gap:9px; padding:10px 14px 6px; position:sticky; top:0;
  background:var(--surface); border-bottom:1px solid var(--line); z-index:2}
.tlday b{font-size:12.5px} .tlday span{font-size:11px; color:var(--muted)}
.tlrow{display:grid; grid-template-columns:56px 16px 1fr; gap:0 10px; padding:0 14px}
.tlrow .t{font-size:11px; color:var(--faint); text-align:right; padding-top:9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.tlrow .tlrail{position:relative}
.tlrow .tlrail:before{content:""; position:absolute; left:6px; top:0; bottom:0; width:1px;
  background:var(--line)}
.tlrow .tldot{position:absolute; left:2px; top:12px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--teal)}
.tlrow.first .tlrail:before{top:12px}
.tlrow.last .tlrail:before{height:12px; bottom:auto}
.tlbody{padding:8px 0 10px; min-width:0}
.tlbody .hd{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.tlbody .who{font-weight:600; font-size:12.5px}
.tlbody .meta{font-size:11px; color:var(--muted); margin-top:3px}
.tlbody .val{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:1px 6px; display:inline-block}

/* ---------- editable cells ---------- */
/* A cell you can change has to look like one. Without an affordance a
   dropdown reads as static text, and people do not discover it. */
/* No position here. Setting position:relative on a cell that is also sticky
   turns `left` from a sticky offset into a relative shove, which slides the
   pinned column sideways over its neighbour. */
td.editable{cursor:text}
td.editable .cell{border-bottom:1px dashed var(--line-strong); margin:0 4px;
  padding-left:5px; padding-right:5px}
td.editable:hover{background:var(--teal-soft)}
td.editable:hover .cell{border-bottom-color:var(--teal); border-bottom-style:solid}

/* Choice cells get a caret, because a dropdown is not obvious from its value. */
td.editable[data-kind="choice"],
td.editable[data-kind="status"],
td.editable[data-kind="check"]{cursor:pointer}
td.editable[data-kind="choice"] .cell:after,
td.editable[data-kind="status"] .cell:after,
td.editable[data-kind="check"] .cell:after{
  content:"\25BE"; font-size:8px; color:var(--faint); margin-left:6px;
  vertical-align:1px}
td.editable[data-kind="choice"]:hover .cell:after,
td.editable[data-kind="status"]:hover .cell:after,
td.editable[data-kind="check"]:hover .cell:after{color:var(--teal)}

/* Date cells hint at the picker. */
td.editable[data-kind="date"]{cursor:pointer}

/* A calculated or read-only cell must not look clickable at all. */
td.locked{cursor:default}
td.locked .cell{border-bottom:0}

/* ---------- dragging columns into order ---------- */
tr.drag-row{cursor:grab}
tr.drag-row:active{cursor:grabbing}
tr.drag-row:hover td{background:var(--teal-soft)}
tr.dragging{opacity:.45}
tr.dragging td{background:var(--teal-soft)}
tr.just-moved td{animation:flash 1.1s ease}
tr.pinned-row td{background:var(--lock)}

/* The grip is the affordance. Without it a draggable row looks like a table. */
.grip{display:inline-block; color:var(--faint); margin-right:9px; letter-spacing:-3px;
  font-size:13px; line-height:1; vertical-align:1px; cursor:grab}
tr.drag-row:hover .grip{color:var(--teal)}

.mv{border:1px solid var(--line); background:var(--surface); border-radius:4px;
  width:24px; height:22px; font:inherit; font-size:9px; color:var(--ink-2);
  cursor:pointer; padding:0; margin-right:3px}
.mv:hover{border-color:var(--teal); color:var(--teal)}

/* Save is only interesting once something has moved. */
#column-savebar .unsaved{display:none; color:var(--warn); font-weight:600}
#column-savebar.dirty .unsaved{display:inline}
#column-savebar.dirty .settled{display:none}

/* ---------- compact cards ---------- */
/* On a working screen the cards are a summary, not the subject: shrink them so
   the grid starts higher up. */
.cards.compact{gap:8px; margin-bottom:11px}
.cards.compact .card{padding:8px 11px}
.cards.compact .k{min-height:auto; font-size:10px}
.cards.compact .v{font-size:21px; margin-top:1px}
.cards.compact .d{font-size:10.5px}
.cards.compact .go{display:none}

/* ---------- reference notes under a grid ---------- */
/* Explanation belongs near what it explains, but below it. The work is at the
   top of the screen; the reference is there when it is wanted. */
.notes{margin-top:14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow)}
.notes > summary{cursor:pointer; padding:9px 13px; font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); list-style:none}
.notes > summary::-webkit-details-marker{display:none}
.notes > summary:before{content:"\25B8"; display:inline-block; margin-right:7px;
  font-size:9px; transition:transform .15s ease}
.notes[open] > summary:before{transform:rotate(90deg)}
.notes > summary:hover{color:var(--teal-ink)}
.notes-body{padding:2px 13px 12px; border-top:1px solid var(--line)}
.notes-body p{margin:9px 0 0; font-size:11.5px; color:var(--ink-2);
  line-height:1.55; max-width:110ch}

/* Settings tabs ---------------------------------------------------------
   Four errands on one screen, so the tab bar has to say which one you are
   on without shouting. The active tab is carried by a solid underline in the
   brand purple rather than a filled pill, which would compete with the
   primary buttons inside each panel. */
.tabbar{display:flex; align-items:center; gap:2px; margin-bottom:14px;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.tabbar .spacer{flex:1}
.tab{padding:9px 14px 10px; font-size:12.5px; font-weight:600;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap; transition:color .12s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--teal-ink); border-bottom-color:var(--teal)}
.tabnote{font-size:11.5px; color:var(--muted); padding-bottom:9px;
  max-width:52ch; text-align:right}

/* Section heading inside the rules panel. Was an inline style repeated in
   the template; it is one rule now so the four groups cannot drift apart. */
.setgroup{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:14px 13px 0; font-weight:600}
.setgroup + .setgrid{padding-top:6px}

@media (max-width:860px){
  .tabnote{display:none}
}

/* Days since the last one went out ---------------------------------------
   Deliberately not a pill. A KYC age has a compliance threshold behind it
   and earns a colour; "days since the last report" is a fact about the
   workflow, and colouring it would imply a rule nobody has set. */
.daysago{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--ink-2)}

/* A month an edit was made FROM, rather than one it belongs to. Lighter, so
   the two read as different facts without needing a second column. */
.fromonth{color:var(--muted); font-style:italic}