*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#EFE9EB;color:#3B4250;
  font:400 14px/1.6 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:root{--red:#F0203C;--magenta:#FF1E7A;--violet:#7B2FF7;--ink:#14161A;
  --grad:linear-gradient(90deg,#F0203C 0%,#FF1E7A 52%,#7B2FF7 100%);
  /* See public-site/assets/site.css — same values, same reason. */
  --blush:#FDF0F3;--line:#E4DFE1;--warm:#FBF9F9;--muted:#2B303A;--grey:#414855;
  --display:Archivo,system-ui,sans-serif;--mono:"IBM Plex Mono",monospace}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1;color:var(--ink)}
/* Product UI: density, comparison, workflow, state. No Eventino, no glow. */
/* min-width:0 on both children. A grid item defaults to min-width:auto, so a
   wide child — the nav strip, a table — widens the TRACK instead of
   scrolling inside it, and the whole document scrolls sideways. */
.shell{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
.shell>aside,.shell>main{min-width:0}
aside{background:#fff;color:var(--muted);padding:22px 18px;display:flex;flex-direction:column;
  gap:26px;border-right:1px solid var(--line)}
/* Flat black AR monogram — see public-site. Transparent asset, sized by height,
   no plate and no blend mode. */
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none}
.lockup,.lockup *{text-decoration:none}
.mark{display:block;flex:0 0 auto;height:34px}
.mark img{display:block;height:100%;width:auto}
.lockup b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;
  line-height:1;color:var(--ink);display:block}
.lockup i{font-family:var(--display);font-style:normal;font-weight:700;font-size:8.5px;
  letter-spacing:.4em;color:var(--violet);display:block;margin-top:3px}
aside nav{display:flex;flex-direction:column;gap:2px}
aside nav a{padding:.78rem .9rem;border-radius:10px;color:var(--text);font-size:15px;
  font-weight:500;cursor:pointer}
aside nav a:hover{background:var(--surface-sunken);color:var(--ink)}
aside nav a.on{background:var(--grad);color:#fff;font-weight:600}
.switcher{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;font-size:11.5px;color:var(--grey)}
main{padding:var(--sp-8) var(--sp-10);overflow:auto}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-8)}
.topbar p{margin:var(--sp-1) 0 0;color:var(--text-muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-8)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.kpi label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-size:34px;margin-top:8px;color:var(--ink)}
.kpi .sub{color:var(--text-muted);font-size:var(--fs-12)}
.bar{height:8px;border-radius:var(--r-full);background:var(--surface-sunken);overflow:hidden;margin-top:var(--sp-3)}
.bar i{display:block;height:100%;background:var(--grad)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--sp-6)}
.panel>header{padding:var(--sp-5);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.panel>header h2{font-size:var(--fs-20)}
.panel .body{padding:var(--sp-5)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
th,td{text-align:left;padding:0 var(--sp-4);height:var(--cmp-row-height);border-bottom:1px solid var(--cmp-divider)}
thead th{background:var(--cmp-header-bg);font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle)}
tbody tr:hover{background:var(--surface-raised)}
td.num,th.num{text-align:right;font-family:var(--font-numeric);font-variant-numeric:tabular-nums lining-nums}
.best{background:var(--cmp-highlight-bg)}
.diff{color:var(--cmp-diff-marker);font-weight:var(--fw-semibold)}
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border-radius:var(--r-md);cursor:pointer;
  font:var(--fw-semibold) var(--fs-14)/1 var(--font-body);padding:.65rem 1.1rem;border:1px solid transparent}
.btn--primary{background:var(--grad);color:#fff}
.btn--primary:hover{filter:brightness(1.06)}
.btn--ghost{border-color:var(--border-strong);background:var(--surface);color:var(--text)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.missing{margin:var(--sp-3) 0 0;padding-left:1.1rem;color:var(--danger)}
.missing li{margin:.2rem 0}
.reqrow{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}
.reqrow:last-child{border-bottom:0}
.reqrow b{flex:1;font-weight:var(--fw-semibold)}
.upcoming li{display:flex;justify-content:space-between;padding:var(--sp-3) 0;border-bottom:1px solid var(--border);list-style:none}
.upcoming{margin:0;padding:0}
.note{color:var(--text-muted);font-size:var(--fs-12);margin-top:var(--sp-4)}

/* ── MVP 002 interaction surfaces ─────────────────────────────── */
.panel-in{border:1px solid var(--line);border-radius:12px;background:var(--warm);
  padding:16px 18px;margin:10px 0 16px}
.panel-in h4{margin:0 0 12px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.cand{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.cand:last-of-type{border-bottom:0}
.cand input{margin-top:3px;accent-color:#D6155F;width:16px;height:16px;flex:none}
.cand .who{flex:1;min-width:0}
.cand b{display:block;font-weight:600;color:var(--ink);font-size:14px}
.cand .why{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.cand-more{flex:none;align-self:center;font-size:13px;font-weight:600;color:#D6155F;
  text-decoration:none;padding:4px 10px;border:1px solid var(--line);border-radius:6px}
.cand-more:hover{border-color:#D6155F;background:rgba(214,21,95,.05)}
.why em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:#F1ECEE;color:var(--muted);padding:3px 8px;border-radius:999px}
.thin{padding:14px;border:1px dashed #D9DDE3;border-radius:10px;color:var(--muted);font-size:13px}
.frm{display:grid;gap:10px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frm label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:5px}
/* Hints stay lighter than typed content, but above AA. */
.frm input::placeholder,.frm textarea::placeholder,
input::placeholder,textarea::placeholder{color:#5A6270}
.frm input,.frm textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font:400 13.5px "IBM Plex Sans",sans-serif;background:#fff;color:var(--ink)}
.frm textarea{min-height:56px;resize:vertical}
.frm input:focus,.frm textarea:focus{outline:none;border-color:#FF1E7A;
  box-shadow:0 0 0 3px rgba(255,30,122,.12)}
.acts-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.err{color:#96201A;font-size:12.5px;margin-top:8px}
.ok-note{color:#0B5F3D;font-size:12.5px;margin-top:8px}
.btn--sm{padding:.45rem .8rem;font-size:12.5px}

/* ── MVP 003 · guided organiser journey ───────────────────────── */
.journey{display:flex;gap:0;margin:0 0 22px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.jstep{flex:1;padding:14px 16px;border-right:1px solid var(--line);position:relative;min-width:0}
.jstep:last-child{border-right:0}
.jstep .n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--grey)}
.jstep b{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jstep.done{background:#F3FBF6}
.jstep.done .n{color:#0A5436}.jstep.done b{color:#0A5436}
.jstep.now{background:linear-gradient(90deg,rgba(240,32,60,.07),rgba(123,47,247,.07))}
.jstep.now::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad)}
.jstep.now b{color:var(--ink)}

.ask{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:20px}
.ask h3{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 4px}
.ask p.hint{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.ask .askrow{display:flex;gap:10px;align-items:stretch}
.ask input.big{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:11px;
  font:400 15px "IBM Plex Sans",sans-serif;color:var(--ink)}
.ask input.big:focus{outline:none;border-color:#FF1E7A;box-shadow:0 0 0 3px rgba(255,30,122,.12)}
.guess{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--warm)}
.guess .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px}
.guess .pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.guess select,.guess input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:400 13.5px "IBM Plex Sans",sans-serif;background:#fff;color:var(--ink)}
.guess .qty{width:88px}.guess .unit{width:120px}

.todo{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:11px;
  background:#FFF8F9;border:1px solid #F6D9E1;margin:10px 0}
.todo .ico{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none;margin-top:6px}
.todo b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.todo span{font-size:13px;color:var(--muted)}

.reqcard{border:1px solid var(--line);border-radius:13px;background:#fff;margin-bottom:12px;overflow:hidden}
.reqcard>.hd{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer}
.reqcard>.hd:hover{background:var(--warm)}
.reqcard>.hd b{flex:1;font-size:14.5px;color:var(--ink);font-weight:600}
.reqcard .body-in{padding:0 18px 18px;border-top:1px solid var(--line)}
.pips{display:flex;gap:4px}
.pip{width:22px;height:5px;border-radius:3px;background:#E9E4E6}
.pip.on{background:var(--grad)}
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty b{display:block;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:6px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #E9E4E6;border-top-color:#FF1E7A;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;right:22px;bottom:22px;z-index:50;background:var(--ink);color:#fff;
  padding:13px 18px;border-radius:11px;font-size:13.5px;box-shadow:0 12px 34px rgba(20,22,26,.24);
  display:flex;align-items:center;gap:10px;max-width:380px}
.toast.err{background:#B3261E}
.toast .dot{width:8px;height:8px;border-radius:50%;background:#3FCB8E;flex:none}
/* The mobile shell lives in one place — see "THE APP ON A PHONE" at the end of
   this file. An earlier block here made `aside` a horizontal row and fought it,
   which is why the nav showed one item and the persona switcher was squeezed
   against the edge. */
@media(max-width:860px){
  .journey{flex-wrap:wrap}.jstep{flex:1 1 33%;border-bottom:1px solid var(--line)}
}

/* ── EVENT SPINE — funding is the organising principle, not a card ──────
   The question a page like this exists to answer is "is this event viable and
   what happens next". Everything below is ordered by that. */
.spine-money{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 30px;margin-bottom:var(--sp-6)}
.sm-head{display:flex;gap:34px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:20px}
.sm-head .lbl{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey)}
.sm-head>div:first-child b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin-top:8px}
.sm-head>div:first-child b.gap{color:var(--pink-deep,#D6155F)}
.sm-head .sub{margin:8px 0 0;color:var(--text-muted);font-size:14px}
.sm-side{display:flex;gap:30px;flex-wrap:wrap}
.sm-side label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.sm-side b{display:block;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink)}
.sm-side span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px}

.flines{display:grid;gap:0}
.fline{display:grid;grid-template-columns:190px 130px 1fr;gap:16px;align-items:baseline;
  padding:9px 0;font-size:14px}
.fline .fl{color:var(--ink);font-weight:500}
.fline .fv{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.fline .fn{color:var(--text-muted);font-size:12.5px}
.nc{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  color:var(--text-muted)}
.sm-side .nc{font-size:12px}
.fline.rule{border-top:1px solid var(--border);margin-top:6px;padding-top:14px}
.fline.total{border-top:2px solid var(--ink);margin-top:2px;padding-top:12px;font-size:15.5px}
.fline.total .fv{font-size:17px}
.fline.muted .fl,.fline.muted .fv{color:var(--text-muted);font-weight:400}

.nact{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.nact:last-child{border-bottom:0}
.nact .nn{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;background:var(--hair);color:var(--text-muted)}
.nact.first .nn{background:var(--grad);color:#fff}
.nact .ns{flex:1;font-size:14.5px;color:var(--ink)}

.rail6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.st{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 16px;position:relative}
.st::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--hair)}
.st-done::before{background:var(--grad)}
.st-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--grey);margin-bottom:8px}
.st b{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.st-state{font-size:13px;color:var(--ink);margin:6px 0 10px}
.st ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.st li{font-size:12px;color:var(--text-muted)}
@media(max-width:1200px){.rail6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.rail6{grid-template-columns:1fr}
  .fline{grid-template-columns:1fr auto}.fline .fn{grid-column:1/-1;margin-top:2px}}

/* Funding ledger — a state is a fact about money, so it reads as a label and
   not as a warning. RECEIVED is the only one that counts, so it is the only one
   that carries colour. */
.fstate{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;background:var(--hair);color:var(--text-muted);white-space:nowrap}
.fs-RECEIVED{background:#E7F5EE;color:#0A5436}
.fs-COMMITTED{background:#EDE6FE;color:#421793}
.frm select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font:400 13.5px "IBM Plex Sans",sans-serif;background:#fff;color:var(--ink)}

/* Cash control — what has been promised against what is held. Different
   question from the production gap and more urgent, so it sits above it. */
.cash{border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 22px;
  background:var(--surface-raised,#FBFAFB)}
.cash.short{border-color:#F3C9C4;background:#FEF7F6}
.cc-bar{height:8px;border-radius:999px;background:var(--hair);overflow:hidden;margin-bottom:16px}
.cc-bar i{display:block;height:100%;background:var(--grad)}
.cash.short .cc-bar i{background:linear-gradient(90deg,#F0203C,#FF1E7A)}
.cc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cc-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.cc-row b{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink)}
.cc-row b.bad{color:#96201A}
.cash p{margin:14px 0 0;font-size:13px;color:var(--text-muted)}
@media(max-width:820px){.cc-row{grid-template-columns:repeat(2,1fr)}}

tr.hist td{padding:6px var(--sp-4) 12px;border-bottom:1px solid var(--cmp-divider)}
tr.hist span{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--text-muted);margin-right:14px}
tr.trow td{padding:0 var(--sp-4) 14px;background:var(--warm)}

/* Delivery */
.ms,.iss{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.ms:last-of-type,.iss:last-of-type{border-bottom:0}
.ms-k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-muted);width:92px;flex:none}
.ms-t{flex:1;min-width:0}
.ms-t b{display:block;font-weight:600;color:var(--ink);font-size:14.5px}
.ms-t span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}
.ms-dep{font-style:italic}
.ms-due{font-family:var(--mono);font-size:11px;color:var(--text-muted);white-space:nowrap}
.ms-COMPLETE .ms-t b{color:var(--text-muted);text-decoration:line-through}
.ms-BLOCKED{opacity:.72}
.sysgen{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;padding:3px 7px;
  border-radius:5px;background:var(--hair);color:var(--text-muted)}
.iss-BLOCKER .ms-t b{color:#96201A}
.iss.done{opacity:.55}
.state{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;white-space:nowrap}
.s-can{background:#E7F5EE;color:#0A5436}
.s-cant{background:#FDE8E6;color:#96201A}
.s-in{background:#EDE6FE;color:#421793}
.kpi b.bad{color:#96201A}

/* Notifications */
.hd-r{display:flex;align-items:center;gap:14px}
.bell{position:relative}
.bell-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:#fff;cursor:pointer;display:grid;place-items:center}
.bell-btn svg{width:19px;height:19px;fill:none;stroke:var(--text-muted);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bell-btn.has svg{stroke:var(--ink)}
.bell-btn i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--grad);color:#fff;font:600 10.5px/18px var(--font-body);
  font-style:normal;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bell-panel{position:absolute;right:0;top:46px;width:320px;z-index:40;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,26,.16);
  overflow:hidden;text-align:left}
.bell-panel>header{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border)}
.bell-panel>header b{font-size:14px;color:var(--ink)}
.bell-panel>header button{font:inherit;font-size:12px;color:var(--text-muted);background:none;
  border:0;cursor:pointer;text-decoration:underline}
.bn{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.bn:hover{background:var(--warm)}
.bn.new{border-left:3px solid var(--pink-deep,#D6155F)}
.bn b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.bn span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}
.bn em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--grey);margin-top:3px}
.bell-panel>footer{padding:10px 14px;font-size:11.5px;color:var(--text-muted);background:var(--warm)}

/* ── AIRIER PRODUCT ─────────────────────────────────────────────────────
   The workspace read as spreadsheet rows: every line the same height, the
   status chip as loud as the person's name. Names, messages and titles now
   dominate; the badges are metadata again. */
main{padding:var(--sp-8) var(--sp-10) 72px}
.panel{margin-bottom:26px}
.panel>header{padding:20px 24px}
.panel .body{padding:22px 24px}
.thin{padding:20px;font-size:14px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Conversation */
.msg{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.msg:last-of-type{border-bottom:0}
.ava{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-sunken);color:var(--text);font:600 13px/1 var(--font-body)}
.msg.me .ava{background:var(--grad);color:#fff}
.msg-b{flex:1;min-width:0}
.msg-h{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.msg-h b{font-size:15.5px;font-weight:600;color:var(--text)}
.msg-h time{font-size:12.5px;color:var(--text-subtle)}
.msg-b p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}

.composer{display:flex;gap:12px;align-items:flex-end;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--border)}
.composer textarea{flex:1;min-height:52px;padding:14px 16px;border:1px solid var(--border-strong);
  border-radius:12px;font:400 15px/1.5 var(--font-body);color:var(--text);background:var(--surface);
  resize:vertical}
.composer textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,30,122,.12)}
.composer .btn{padding:14px 26px}

/* Files and delivery items — cards, not rows */
.filelist,.mslist{display:grid;gap:10px}
.filecard,.mscard{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.filecard:hover,.mscard:hover{border-color:var(--border-strong)}
.fi{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-sunken)}
.fi svg{width:20px;height:20px;fill:none;stroke:var(--text);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.fi-b{flex:1;min-width:0}
.fi-b b{display:block;font-size:15.5px;font-weight:600;color:var(--text)}
.fi-b span{display:block;font-size:13px;color:var(--text-muted);margin-top:3px}
.mstick{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--border-strong);
  display:grid;place-items:center;font:700 13px/1 var(--font-body);color:transparent}
.mscard.done .mstick{background:var(--success);border-color:var(--success);color:#fff}
.mscard.done .fi-b b{color:var(--text-muted);text-decoration:line-through}

/* Status metadata. Quiet by construction: it is never the thing being read. */
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;background:var(--surface-sunken);color:var(--text-muted);
  white-space:nowrap;flex:none}

.uploader{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--border)}
.uploader input[type=file]{font:400 14px var(--font-body);color:var(--text)}
.uploader input[type=text],.uploader input:not([type]),.uploader input[type=date]{
  flex:1;min-width:180px;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:10px;font:400 15px var(--font-body);color:var(--text)}
.hint{margin:16px 0 0;font-size:13.5px;color:var(--text-muted)}

/* Disclosure — the technical answer, one click away from the task */
.disc{display:inline-block;margin-left:4px}
/* A link colour that survives being small and sitting on a tinted panel.
   --accent is the brand magenta and lands at 4.49:1 there — under AA. */
.disc summary{display:inline;cursor:pointer;font-size:14px;color:#9A0E46;font-weight:500;
  text-decoration:underline;text-underline-offset:3px}
.disc summary:hover{color:#7A0A37}
.disc summary::-webkit-details-marker{display:none}
.disc[open] summary{color:var(--text-muted)}
.disc>div{margin-top:10px;padding:14px 16px;border-left:3px solid var(--border-strong);
  background:var(--surface-sunken);border-radius:0 10px 10px 0;
  font-size:13.5px;line-height:1.6;color:var(--text-muted)}
.panel .body>.disc{display:block;margin:16px 0 0}

/* The DEV switcher is not product. It says so and looks it. */
aside .devbox{margin-top:14px;padding:12px 14px;border:1px dashed var(--border-strong);
  border-radius:10px;background:var(--surface-sunken)}
aside .devbox b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
aside .devbox select{width:100%;padding:9px 10px;border:1px solid var(--border-strong);
  border-radius:8px;font:400 14px var(--font-body);color:var(--text);background:var(--surface)}
aside .devbox .disc{margin:8px 0 0;display:block}

/* ── THE APP ON A PHONE ─────────────────────────────────────────────────
   The shell is a fixed sidebar beside a main column, which at 390px clipped the
   nav at both edges, collided the event name with its provenance badge and cut
   columns off the tables. Vanessa checks a funding position from a phone; that
   has to work rather than merely not scroll sideways. */
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  aside{position:sticky;top:0;z-index:40;flex-direction:column;align-items:stretch;
    padding:12px 0 10px;border-bottom:1px solid var(--border);border-right:0;
    background:var(--surface);gap:10px;overflow:visible}
  aside .lockup{padding:0 16px}
  aside nav{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding:2px 16px;scroll-snap-type:x proximity}
  aside nav::-webkit-scrollbar{display:none}
  aside nav a{flex:none;scroll-snap-align:start;white-space:nowrap;padding:.6rem .9rem}
  aside .devbox{margin:0 16px}

  main{padding:20px 16px 56px;min-width:0;overflow-x:hidden}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:22px}
  .topbar h1{font-size:26px;line-height:1.15}
  .hd-r{width:100%;justify-content:space-between}
  .bell-panel{right:auto;left:0;width:min(320px,calc(100vw - 40px))}

  .panel>header{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px}
  .panel .body{padding:18px}
  /* A table that will not fit scrolls inside its own box rather than dropping
     the columns on its right, which is how the milestone count disappeared. */
  .panel .body>table{display:block;overflow-x:auto;white-space:nowrap}

  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .kpi{padding:16px}.kpi b{font-size:26px}
  .cc-row{grid-template-columns:1fr 1fr}
  .fline{grid-template-columns:1fr auto}
  .fline .fn{grid-column:1/-1;margin-top:2px}
  .sm-head{gap:18px}
  .sm-side{gap:20px}

  .composer{flex-direction:column;align-items:stretch}
  .composer .btn{width:100%}
  .filecard,.mscard{flex-wrap:wrap;row-gap:10px}
  .fi-b{flex:1 1 60%}
  .filecard .btn{width:100%}
  .uploader{flex-direction:column;align-items:stretch}
  .uploader .btn{width:100%}
  .msg-h{gap:6px}
}

/* Quote comparison context. The page must state the requirement it is comparing
   before it shows a single number — arriving from one line and reading another's
   quotes is the failure this block exists to prevent. */
.cmp-ctx{padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.cmp-ctx h2{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;
  letter-spacing:-.01em;color:var(--text);margin:0 0 6px}
.cmp-ctx .cmp-ev{margin:0 0 8px;font-size:14px;color:var(--text-muted)}
.cmp-ctx .cmp-recip{margin:0;font-size:13.5px;color:var(--text-muted)}
.cmp-ctx .cmp-recip b{color:var(--text);font-weight:700}

/* A disabled field must look disabled. This one is correct to disable — no money
   has arrived at COMMIT, so there is no receipt date — but it was rendered
   identically to a live input, and the organiser clicked and typed into it before
   working out it would never accept anything. */
input.is-off,select.is-off{background:var(--surface-sunken);color:var(--text-subtle);
  border-color:var(--border);cursor:not-allowed}
label .hint{font-weight:400;color:var(--text-subtle)}

/* A financial button says what it is doing. A click with no visible response is
   indistinguishable from a dead control, which is how anyone learns to
   double-click a ledger write. */
.btn[data-state="submitting"]{opacity:.75;cursor:progress}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* The reason for a variance is the thing worth keeping. It was stored from the
   start and simply never shown. */
.fnote{display:block;margin-top:2px;font-style:normal;color:var(--text-muted);font-size:12.5px}

.pick-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pick{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  cursor:pointer;text-align:left;font:inherit;color:var(--text)}
.pick:hover{border-color:var(--border-strong);background:var(--surface-raised)}
.pick b{font-weight:600}
.pick span{color:var(--text-muted);font-size:13.5px}

/* Supplier Book. The state badge is the point of the row — an organiser must be
   able to tell at a glance whether AmpRoom knows this supplier or she does. */
.sup-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.sup-row{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--surface)}
.sup-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sup-id b{font-size:15px;font-weight:600}
.sup-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:13.5px;color:var(--text-muted)}
.sup-note{margin:8px 0 0;font-size:13.5px;color:var(--text-muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 20px;margin-top:8px}
.kv>div{display:flex;flex-direction:column;gap:2px}
.kv span{font-size:12px;color:var(--text-subtle)}
.kv b{font-size:14px;font-weight:600;color:var(--text)}

/* One history, in order. Invitations, openings, quotes and awards are the same
   kind of fact and belong on one line of time, not scattered across panels. */
.tl{list-style:none;margin:8px 0 0;padding:0;border-left:2px solid var(--border)}
.tl li{display:flex;gap:14px;padding:7px 0 7px 14px;position:relative}
.tl li::before{content:"";position:absolute;left:-5px;top:13px;width:8px;height:8px;
  border-radius:50%;background:var(--border-strong)}
.tl-when{flex:0 0 132px;font-size:12.5px;color:var(--text-subtle)}
.tl-what{font-size:13.5px;color:var(--text)}

/* Which build a tester is actually running. Heuristic caching can leave somebody
   on this morning's app shell while we ship fixes, and "it still does it" is
   impossible to act on without knowing what they were running. */
.buildstamp{display:block;margin-top:6px;font:11px/1.4 var(--mono,monospace);color:var(--text-subtle)}

/* Connection lost. Deliberately unmissable and deliberately reassuring: the fear
   when an app stops responding is that the work is gone. */
#connbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;
  gap:12px;padding:12px 20px;background:#5C3A00;color:#fff;font-size:13.5px;
  box-shadow:0 -2px 14px rgba(0,0,0,.18)}
#connbar b{font-weight:700}
#connbar span{color:#F6E7CE}
#connbar .btn{margin-left:auto;border-color:rgba(255,255,255,.45);color:#fff}
#connbar .spin{width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:cspin 1s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
/* While offline, controls that write are visibly not available. */
body.is-offline main .btn--primary{opacity:.55;pointer-events:none}

/* The bottom line is the bottom line, and the parts above it are what make two
   quotes actually comparable. */
.cmp-total th,.cmp-total td{border-top:2px solid var(--border-strong);font-weight:700}
.cmp-total .numeric{font-size:16px}
.rev{display:block;font-size:13px}
.rev-down{color:#0A5436}
.rev-up{color:#8A3B00}

/* Commercial documents. Direction is the first thing on the row on purpose: with
   ten suppliers and two sponsors, "invoice" alone tells you nothing. */
.doctabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.doctab{padding:8px 14px;border:1px solid var(--border);border-radius:var(--pill,999px);
  background:var(--surface);font:inherit;font-size:13.5px;cursor:pointer;color:var(--text-muted)}
.doctab.on{background:var(--text);color:#fff;border-color:var(--text)}
.doclist{display:flex;flex-direction:column;gap:8px}
.docrow{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px}
.docrow--flag{border-color:#C08A2E;background:#FFFBF3}
.dirtag{flex:0 0 auto;font:700 10.5px/1 var(--mono,monospace);letter-spacing:.08em;
  padding:6px 8px;border-radius:5px}
.dir-incoming{background:#E7F0FB;color:#14477E}
.dir-outgoing{background:#EAF6EE;color:#0A5436}
.dir-receipt{background:#F3EFF7;color:#4A2A73}
.dir-quote{background:#FBF1DC;color:#5C3A00}
.dir-agree{background:#EFEFF2;color:#2B303A}
.docmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.docmain b{font-size:14.5px}
.docmain span{font-size:13px;color:var(--text-muted)}
.docdates{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-subtle);min-width:120px}
.docmoney{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:150px}
.docmoney b{font-size:15px}
.var-bad{font-size:12.5px;color:#8A3B00;font-weight:600}
.var-ok{font-size:12.5px;color:var(--text-muted)}
table.mini{width:100%;font-size:13.5px}
table.mini td{padding:5px 0;border-bottom:1px solid var(--border)}

/* The decision surface. Fitness first, because it is the question she came with. */
.fitness{padding:14px 16px;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface-raised);margin-bottom:18px}
.fchecks{list-style:none;margin:10px 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.fchecks li{display:flex;flex-direction:column;gap:1px;padding-left:22px;position:relative;font-size:13.5px}
.fchecks li::before{position:absolute;left:0;top:1px;font-weight:700;font-size:12px}
.f-yes::before{content:"✓";color:#0A5436}
.f-no::before{content:"✕";color:#B3261E}
.f-unknown::before{content:"?";color:#5C3A00}
.fchecks li span{color:var(--text-muted);font-size:12.5px}
.dq{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--border)}
.dq-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--text);color:#fff;
  display:grid;place-items:center;font:700 12px/1 var(--mono,monospace)}
.dq h4{margin:2px 0 6px}
.dq p{margin:0 0 4px;font-size:14px}
ul.plain{margin:0;padding-left:18px;font-size:14px}
.linkrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.plink{padding:7px 12px;border:1px solid var(--border);border-radius:var(--pill,999px);
  font-size:13px;text-decoration:none;color:var(--text)}
.gallery{display:flex;flex-wrap:wrap;gap:10px}
.shot{margin:0;width:132px}
.shot-ph{height:96px;border-radius:8px;background:linear-gradient(135deg,#EFE9EB,#DDD6DA);
  display:grid;place-items:center;font:700 24px/1 var(--display,sans-serif);color:#9A8F94}
.shot figcaption{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.evlist,.reflist{display:flex;flex-direction:column;gap:8px}
.ev,.ref{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface)}
.ev-ok{border-color:#8FBFA6}
.ev-bad{border-color:#C88B86;background:#FDF4F3}
.ev-soft{border-color:var(--border)}
.ev b,.ref b{font-size:14px}
.ev span,.ref span{font-size:13px;color:var(--text-muted)}
.ref .status{align-self:flex-start;margin-top:4px}

.tl--mail .tl-what{color:var(--ink-2)}
.tl-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:1px 6px;border:1px solid var(--line);border-radius:4px;
  margin-right:6px;vertical-align:1px}
.thin-inline{color:var(--ink-3);font-size:12px}

.warn-inline{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;
  color:#8A5A00;background:#FFF6E5;border:1px solid #F0D9A8;border-radius:4px;padding:1px 6px}