/* daylight.css — THE one stylesheet for the Otto cockpit.
   Ruled 8/11 (Jeremiah): the UI was "all over the place" because 9 pages each
   carried their own drifted :root. This is the single source of truth. Every
   surface links it and defines NOTHING a surface below could define here.
   DAYLIGHT (CANON): paper white + slate + amber, Jost headings, Open Sans body.
   Teal is OTTO's voice (renamed from HAL 8/11 — Otto, the autopilot). */

:root{
  --paper:#f4f5f7; --card:#ffffff; --line:#e3e6ea;
  --ink:#2e3338; --mute:#68737f; --dim:#9aa3ad;
  --otto:#177b9d; --ottobg:#eef6f9; --ottoline:#d5e8ef;   /* teal = Otto's voice */
  --amber:#f5a623; --amberdk:#e09612;                     /* work waiting */
  --gold:#a8781f;                                          /* Beacon (outreach) */
  --slate:#5a7fb0;                                         /* a human waiting */
  --ok:#3e8e57; --okbg:#edf6f0; --red:#c85c4c;
  --rail:212px; --glance:380px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);
  font:15px/1.55 'Open Sans',sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',monospace}
h1,h2,h3,.jost{font-family:'Jost',sans-serif}
a{color:var(--otto)}

/* ── the rail: drawn once by the shell, identical on every door ─────────── */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:20;
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:26px 0 20px}
.rail .wordmark{font-family:'Jost',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:0.14em;padding:0 24px 26px;color:var(--ink)}
.rail .wordmark span{color:var(--amber)}
.rail a{position:relative;display:flex;align-items:center;gap:13px;padding:13px 24px;
  font-family:'Jost',sans-serif;font-weight:600;font-size:15px;
  color:var(--mute);text-decoration:none;border-left:3px solid transparent;cursor:pointer}
.rail a:hover{color:var(--ink);background:#fafbfc}
.rail a.on{color:var(--ink);border-left-color:var(--amber);background:#fdf7ec}
.rail .gap{flex:1}
.rail .dot{width:7px;height:7px;border-radius:50%;margin-left:auto}
.rail .dot.amber{background:var(--amber)}
.rail .dot.slate{background:var(--slate)}
.rail .dot.gold{background:var(--gold)}
.rail .foot{padding:14px 24px;display:flex;align-items:center;gap:11px;
  border-top:1px solid var(--line)}
.rail .foot .av{width:34px;height:34px;border-radius:50%;background:#d98e3b;
  display:flex;align-items:center;justify-content:center;
  font:700 14px 'Jost',sans-serif;color:#fff}
.rail .foot b{font-family:'Jost',sans-serif;font-size:14px}
.rail .foot .out{margin-left:auto;font-size:11px;color:var(--dim);
  cursor:pointer;background:none;border:none}

/* ── the content region every door mounts into ─────────────────────────── */
#stage{margin-left:var(--rail);height:100vh;overflow:hidden}

/* ── the docked Otto ask-bar: drawn once, present on every surface ──────── */
/* ── Otto: bubble launcher + floating/dockable chat pane (8/12) ─────────── */
.obub{position:fixed;right:26px;bottom:24px;z-index:30;width:60px;height:60px;
  border-radius:50%;border:none;cursor:pointer;padding:0;background:#fff;
  box-shadow:0 6px 20px rgba(14,91,118,0.35);display:flex;align-items:center;
  justify-content:center;transition:transform .15s, box-shadow .15s}
.obub:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(14,91,118,0.45)}
.obub img{width:52px;height:52px;object-fit:contain;display:block}
.obub .dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border:2.5px solid #fff}

.opane{position:fixed;right:26px;bottom:96px;z-index:29;width:390px;height:min(560px,72vh);
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:none;flex-direction:column;box-shadow:0 18px 50px rgba(46,51,56,0.28)}
.opane.open{display:flex}
.opane.docked{right:0;top:0;bottom:0;width:400px;height:100vh;border-radius:0;
  border-left:1px solid var(--line);box-shadow:-8px 0 40px rgba(46,51,56,0.16)}
/* docked Otto reserves its own column — content reflows, never sits under it */
body.otto-docked #stage{margin-right:400px}
.opane .ohead{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--ottobg)}
.opane .ohead .who{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:0.1em;color:var(--otto)}
.opane .ohead .hico{width:26px;height:26px;object-fit:contain}
.opane .ohead .oacts{margin-left:auto;display:flex;gap:4px}
.opane .ohead .oacts button{border:none;background:none;cursor:pointer;color:var(--mute);
  font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;padding:5px 9px;border-radius:8px}
.opane .ohead .oacts button:hover{background:#fff;color:var(--ink)}
.opane .ohead .oacts #oclose{font-size:18px;line-height:1;padding:3px 9px}
.olog{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.omsg{max-width:88%;font-size:14px;line-height:1.5}
.omsg .lbl{display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:0.12em;margin-bottom:3px}
.omsg .txt{display:block;padding:9px 12px;border-radius:12px;white-space:pre-wrap;overflow-wrap:break-word}
.omsg.you{align-self:flex-end;text-align:right}
.omsg.you .lbl{color:var(--mute)}
.omsg.you .txt{background:var(--ink);color:#fff;border-bottom-right-radius:4px;text-align:left}
.omsg.otto{align-self:flex-start}
.omsg.otto .lbl{color:var(--otto)}
.omsg.otto .txt{background:var(--ottobg);color:var(--ink);border:1px solid var(--ottoline);
  border-bottom-left-radius:4px}
.obox{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.obox input{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:10px 13px;font:14px 'Open Sans',sans-serif;color:var(--ink);outline:none}
.obox input:focus{border-color:var(--otto)}
.obox button{border:none;background:var(--otto);color:#fff;border-radius:12px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:700;font-size:13px;padding:0 16px}
.obox button:hover{background:#12657f}
/* Otto history (past chats) */
.ohisthead{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.12em;
  color:var(--mute);padding:2px 2px 6px}
.ohistnote{color:var(--dim);font-size:13.5px;padding:10px 2px}
.ohrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  font-family:'Open Sans',sans-serif}
.ohrow:hover{border-color:var(--otto);background:var(--ottobg)}
.ohrow.cur{border-color:var(--otto);background:var(--ottobg)}
.ohrow b{font-weight:600;font-size:13.5px;color:var(--ink);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ohrow span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);flex:none}

/* ── Messages slide-over: overlay, NEVER a navigation (CANON) ───────────── */
.slideover{position:fixed;top:0;right:0;bottom:0;width:360px;z-index:30;
  background:#fff;border-left:1px solid var(--line);
  box-shadow:-12px 0 34px rgba(46,51,56,0.14);
  transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column}
.slideover.open{transform:translateX(0)}
.slideover .head{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;
  border-bottom:1px solid var(--line)}
.slideover .head h2{font-size:18px;font-weight:800}
.slideover .head .x{margin-left:auto;background:none;border:none;cursor:pointer;
  font-size:20px;color:var(--dim);line-height:1}
.slideover .body{flex:1;overflow-y:auto;padding:14px 18px}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(46,51,56,0.12);
  opacity:0;pointer-events:none;transition:opacity .22s}
.scrim.open{opacity:1;pointer-events:auto}

/* ── card grammar: one everywhere ──────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  margin-bottom:14px;overflow:hidden;position:relative;
  box-shadow:0 2px 8px rgba(46,51,56,0.06);transition:opacity .3s}
.card .body{padding:15px 20px 14px}
.card .proj{font-family:'Jost',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:0.12em;color:var(--mute)}
.card h3{font-family:'Jost',sans-serif;font-weight:700;font-size:19px;margin:2px 0 5px}
.card .why{color:var(--mute);font-size:14.5px;margin-bottom:12px;max-width:64ch}
.card.done{border-color:#bcd9c6}
.card.done .receipt{display:flex;align-items:center;gap:12px;font-size:14.5px;
  color:var(--ok);padding:14px 20px;width:100%}
.card.gone{opacity:0.4}
.verbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.verbs button{cursor:pointer;font-family:'Jost',sans-serif;border-radius:11px}
.verbs .go{font-size:15px;font-weight:700;padding:11px 22px;border:none;
  background:var(--amber);color:#fff;box-shadow:0 2px 8px rgba(245,166,35,0.35)}
.verbs .go:hover{background:var(--amberdk)}
.verbs .quiet{font-size:13.5px;font-weight:600;padding:10px 15px;background:#fff;
  border:1.5px solid var(--line);color:var(--mute)}
.verbs .quiet:hover{color:var(--ink);border-color:var(--dim)}

/* ── panels / glance rows ──────────────────────────────────────────────── */
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;flex:none}
.panel .plabel{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.12em;color:var(--mute);margin-bottom:8px;display:flex;
  gap:8px;align-items:baseline}
.panel .plabel .soft{margin-left:auto;font-weight:600;font-size:11px;
  letter-spacing:0;color:var(--otto)}
.panel .plabel .plink{font-family:'Jost',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:0;color:var(--otto);text-decoration:none}
.panel .plabel .plink:hover{text-decoration:underline}
/* Otto proposes (Arc 1): standing proposals + the fresh next-move box */
.prop{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#fff}
.prop .ptext{font-size:13.5px;line-height:1.5;margin-bottom:8px}
.prop .pacts{display:flex;gap:8px}
.movebox{border-left:3px solid var(--otto);background:var(--ottobg);border-radius:0 10px 10px 0;padding:11px 13px;margin-top:2px}
.movetext{font-size:14px;line-height:1.55;color:var(--ink)}
/* Per-project unread chat dot on the Projects grid (Arc 1) */
.pdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--slate);vertical-align:middle;margin-right:7px;flex:none}
.pdot.gold{background:var(--gold);box-shadow:0 0 0 3px rgba(168,120,31,0.16)}
/* Radar (Arc 1 capstone): one cross-project read of what needs you */
.rsec{margin-bottom:22px}
.rlabel{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.1em;color:var(--mute);margin-bottom:8px}
.rlabel .rn{background:var(--slate);color:#fff;border-radius:999px;font-size:11px;padding:1px 8px;font-family:var(--mono)}
.ritem{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:8px}
.ritem.link{cursor:pointer}
.ritem.link:hover{border-color:var(--otto);background:var(--ottobg)}
.ritem .rmain{flex:1;min-width:0}
.ritem .rtext{font-size:14.5px;line-height:1.45;color:var(--ink)}
.ritem .rsub{font-size:12px;color:var(--mute);margin-top:3px}
.ritem .rbad{color:#c2523f;font-weight:600}
.ritem .rwarn{color:#b07d27;font-weight:600}
.ritem .racts{display:flex;gap:8px;flex:none}
.ritem .rchev{flex:none;color:var(--dim);font-size:20px;line-height:1}
/* calendar/email rows that open Google in a new tab */
.panel .trow,.panel .irow{display:flex;gap:10px;align-items:center;padding:8px 0;
  border-bottom:1px solid #eef0f2;text-decoration:none;color:var(--ink)}
.panel a.gout{cursor:pointer}
.panel a.gout:hover{background:#fafbfc}
.panel a.gout:hover b{color:var(--otto)}
.panel .irow{align-items:flex-start}
.panel .irow .ecol{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.panel .irow .etop{display:flex;gap:8px;align-items:baseline;min-width:0}
.panel .irow .subj{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.panel .irow b{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .irow .ewhy{font-size:12px;color:var(--otto);font-style:italic}
.panel .irow .env{margin-top:3px}
/* a tiny drawn envelope so the row reads unmistakably as email (no emoji) */
.panel .irow .env{flex:none;width:15px;height:11px;border:1.5px solid var(--dim);
  border-radius:2px;position:relative}
.panel .irow .env::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  border-bottom:1.5px solid var(--dim);
  clip-path:polygon(0 0,50% 100%,100% 0)}
.panel a.irow:hover .env{border-color:var(--otto)}
.panel a.irow:hover .env::after{border-color:var(--otto)}
.quiet-note{color:var(--dim);font-size:13px;font-style:italic;padding:4px 0}
.zlabel{display:flex;align-items:baseline;gap:12px;font-family:'Jost',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:0.12em;color:var(--ink);margin:4px 0 10px}
.zlabel .hint{margin-left:auto;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--dim);letter-spacing:0}

/* ── toasts ────────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:22px;bottom:96px;display:flex;flex-direction:column;
  gap:9px;z-index:40}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);
  border-radius:12px;padding:12px 16px;font-size:14px;color:var(--ink);
  max-width:340px;box-shadow:0 8px 26px rgba(46,51,56,0.16);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes breathe{0%,100%{opacity:0.4;transform:scale(0.85)}50%{opacity:1;transform:scale(1.2)}}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--otto);animation:breathe 3.2s ease-in-out infinite}

/* ── project posters/cards (Projects door) ────────────────────────────── */
.attn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 2px 8px rgba(46,51,56,0.06);transition:transform .15s,box-shadow .15s;color:var(--ink)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(46,51,56,0.14)}
.pcard .poster{position:relative;aspect-ratio:16/6;display:flex;align-items:center;justify-content:center}
.pcard .poster .init{font-family:'Jost',sans-serif;font-weight:800;font-size:52px;color:rgba(255,255,255,0.92)}
.pcard .stage{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 9px;font-family:'Jost',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.1em;color:#fff;background:linear-gradient(transparent,rgba(20,24,28,0.75))}
.pcard .body{padding:13px 17px 15px}
.pcard .cap{font-family:'Jost',sans-serif;font-weight:600;font-size:12px;color:var(--mute)}
.pcard h3{font-family:'Jost',sans-serif;font-weight:700;font-size:22px;margin:2px 0 4px}
.pcard .why{color:var(--mute);font-size:14.5px;max-width:60ch}
.pcard .why .open{color:var(--otto);font-weight:700;text-decoration:none;white-space:nowrap}
.roll{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 8px rgba(46,51,56,0.06);transition:transform .15s,box-shadow .15s;color:var(--ink)}
.tile:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(46,51,56,0.13)}
.tile .poster{position:relative;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center}
.tile .poster .init{font-family:'Jost',sans-serif;font-weight:800;font-size:34px;color:rgba(255,255,255,0.92)}
.tile .meta{padding:9px 13px 11px}
.tile .meta b{font-family:'Jost',sans-serif;font-weight:700;font-size:14px;display:block}
.tile .meta span{font-size:12.5px;color:var(--mute)}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-bottom:24px}
.prow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:14px}
.prow .swatch{width:10px;height:10px;border-radius:3px;flex:none}
.prow b{font-family:'Jost',sans-serif;font-weight:600}
.prow .own{margin-left:auto;color:var(--dim);font-size:12.5px}
.stated{color:var(--dim);font-size:14px;padding:8px 0 24px}
.dlist{display:flex;flex-direction:column}

/* ── People door (scoped under .ppl so .prow doesn't clash with projects) ─ */
.ppl .search{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:13px;
  padding:12px 16px;font:15px 'Open Sans',sans-serif;color:var(--ink);outline:none;margin-bottom:18px}
.ppl .search:focus{border-color:var(--otto)}
.ppl .cols{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:22px}
.ppl .list{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  max-height:calc(100vh - 210px);overflow-y:auto}
.ppl .prow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #eef0f2;cursor:pointer}
.ppl .prow:last-child{border-bottom:none}
.ppl .prow:hover{background:#fafbfc}
.ppl .prow.on{background:var(--ottobg)}
.ppl .av{width:34px;height:34px;border-radius:50%;flex:none;color:#fff;display:flex;
  align-items:center;justify-content:center;font:700 13px 'Jost',sans-serif}
.ppl .who{min-width:0;flex:1}
.ppl .who b{font-family:'Jost',sans-serif;font-weight:700;font-size:14.5px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl .who span{font-size:12px;color:var(--mute);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl .prow .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);flex:none}
.ppl .detail{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;min-height:340px}
.ppl .detail .top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ppl .detail .top .av{width:48px;height:48px;font-size:17px}
.ppl .detail h2{font-family:'Jost',sans-serif;font-weight:800;font-size:21px}
.ppl .detail .meta{font-size:13px;color:var(--mute)}
.ppl .detail .meta a{color:var(--otto);text-decoration:none}
.ppl .pills{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.ppl .pill{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.06em;
  border-radius:14px;padding:4px 11px;background:#fafbfc;border:1.5px solid var(--line);color:var(--mute)}
.ppl .pill.email{border-color:#cde2ea;color:var(--otto);background:var(--ottobg)}
.ppl .pill.meeting{border-color:#f0d29a;color:var(--amberdk);background:#fdf7ec}
.ppl .pill.chat{border-color:#bcd9c6;color:var(--ok);background:#edf6f0}
.ppl .pill.review{border-color:#e4d3a8;color:var(--gold);background:#f9f4e6}
.ppl .tl{margin-top:14px}
.ppl .t{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid #eef0f2}
.ppl .t:last-child{border-bottom:none}
.ppl .t .when{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);flex:none;width:74px;padding-top:2px}
.ppl .t .k{flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px}
.ppl .t .body{min-width:0;flex:1}
.ppl .t .body b{font-family:'Jost',sans-serif;font-weight:700;font-size:14px;display:block}
.ppl .t .body p{font-size:12.5px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ppl .t .body a{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--otto);text-decoration:none;
  border:1px solid #cde2ea;border-radius:11px;padding:1px 8px;display:inline-block;margin-top:5px}

/* ── Beacon door (scoped .bcn; Otto teal = voice, gold = the door) ──────── */
.bcn .read{background:var(--ottobg);border:1px solid var(--ottoline);border-left:5px solid var(--otto);
  border-radius:14px;padding:12px 18px;margin-bottom:14px}
.bcn .read .who{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:0.12em;color:var(--otto);margin-bottom:4px}
.bcn .gate{display:flex;align-items:center;gap:14px;background:#f9f4e6;border:1.5px solid #e4d3a8;
  border-left:5px solid var(--gold);border-radius:14px;padding:12px 18px;margin-bottom:18px}
.bcn .gate .lock{font-family:'Jost',sans-serif;font-weight:800;font-size:11px;letter-spacing:0.14em;color:var(--gold);flex:none}
.bcn .gate .txt{color:var(--ink);font-size:14.5px;min-width:0}
.bcn .gate .ask{margin-left:auto;flex:none;cursor:pointer;border:none;border-radius:11px;padding:10px 18px;
  background:var(--amber);color:#fff;font:700 14px 'Jost',sans-serif}
.bcn .gate .ask:hover{background:var(--amberdk)}
.bcn .gate .ask.sent{background:var(--ok);cursor:default}
.bcn .band{margin-bottom:22px}
.bcn .bandhead{display:flex;align-items:baseline;gap:12px;margin:0 2px 10px}
.bcn .bandhead h2{font-family:'Jost',sans-serif;font-weight:800;font-size:17px}
.bcn .bandhead .sub{color:var(--mute);font-size:13px}
.bcn .bandhead .n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:0.1em}
.bcn .cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}
.bcn .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 18px 17px;margin-bottom:18px}
.bcn .plabel{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.12em;color:var(--mute);margin-bottom:10px}
.bcn .lrow{display:flex;align-items:baseline;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid #eef0f2}
.bcn .lrow:last-child{border-bottom:none}
.bcn .lrow .co{font-family:'Jost',sans-serif;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38%}
.bcn .lrow .who{font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcn .lrow .sc{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);flex:none}
.bcn .lrow a{color:var(--otto);text-decoration:none}
.bcn .lrow .act{margin-left:12px;flex:none;font-family:'Jost',sans-serif;font-weight:700;font-size:12px;
  color:var(--otto);border:1.5px solid var(--ottoline);border-radius:9px;padding:4px 11px;cursor:pointer;background:#fff}
.bcn .cold .lrow{opacity:0.62}
.bcn .tools{display:grid;grid-template-columns:1fr;gap:10px}
.bcn .tool{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;text-decoration:none;color:var(--ink);background:#fff}
.bcn .tool.soon{opacity:0.65}
.bcn .tool .mono{width:38px;height:38px;border-radius:10px;flex:none;background:#f9f4e6;color:var(--gold);
  display:flex;align-items:center;justify-content:center;font:800 15px 'Jost',sans-serif}
.bcn .tool b{font-family:'Jost',sans-serif;font-weight:700;font-size:14.5px;display:block}
.bcn .tool span{font-size:12px;color:var(--mute)}

/* ── DOOR: Tools (the launcher wall) ─────────────────────────────────────── */
.tls .zlabel{display:flex;align-items:baseline;font-family:'Jost',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:0.14em;color:var(--ink);margin:20px 2px 12px}
.tls .zlabel:first-child{margin-top:2px}
.tls .zlabel .d{color:var(--dim);font-weight:600;letter-spacing:0;font-size:12.5px;margin-left:10px}
.tls .bmark{display:inline-flex;align-items:center;gap:6px;margin-left:9px;font-family:'Jost',sans-serif;
  font-weight:700;font-size:10px;letter-spacing:0.22em;color:var(--gold);border:1.5px solid #e4d3a8;
  background:#f9f4e6;border-radius:16px;padding:2px 9px;vertical-align:2px}
.tls .bmark i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 2.5px rgba(168,120,31,0.2)}
.tls .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tls .tool{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(46,51,56,0.06);text-decoration:none;
  color:var(--ink);display:block;transition:transform .15s,box-shadow .15s}
.tls .tool:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(46,51,56,0.13)}
.tls .tool.soon{cursor:default;opacity:0.72}
.tls .tool.soon:hover{transform:none;box-shadow:0 2px 8px rgba(46,51,56,0.06)}
.tls .band{position:relative;height:84px;display:flex;align-items:center;padding:0 18px;overflow:hidden}
.tls .band .mono-lg{font-family:'Jost',sans-serif;font-weight:800;font-size:46px;letter-spacing:0.02em;line-height:1}
.tls .band .ghost{position:absolute;right:-14px;bottom:-30px;font-family:'Jost',sans-serif;font-weight:800;
  font-size:110px;line-height:1;opacity:0.08;letter-spacing:-0.02em;user-select:none}
.tls .newdot{position:absolute;top:11px;right:11px;width:12px;height:12px;border-radius:50%;
  background:var(--amber);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(20,24,28,0.35)}
.tls .meta{padding:11px 17px 14px}
.tls .meta b{font-family:'Jost',sans-serif;font-weight:700;font-size:16.5px;display:block}
.tls .meta p{font-size:13px;color:var(--mute);line-height:1.45;margin-top:2px}
.tls .meta .soonnote{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);
  letter-spacing:0.08em;margin-top:6px;display:block}
.tls .picture .band{background:#e2eef3}
.tls .picture .mono-lg,.tls .picture .ghost{color:var(--otto)}
.tls .sound .band{background:#e7f1ea}
.tls .sound .mono-lg,.tls .sound .ghost{color:var(--ok)}
.tls .sell .band{background:#f5eedd}
.tls .sell .mono-lg,.tls .sell .ghost{color:var(--gold)}
.tls .run .band{background:#eee9f5}
.tls .run .mono-lg,.tls .run .ghost{color:#7b5ea7}
@media(max-width:1100px){.tls .grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tls .grid{grid-template-columns:1fr}}

/* ── DOOR: Activity (Log + Memory lens) ──────────────────────────────────── */
.act .lens{display:flex;gap:6px;margin:0 0 14px}
.act .lens button{cursor:pointer;font-family:'Jost',sans-serif;font-weight:600;font-size:13.5px;
  padding:7px 16px;border-radius:20px;background:#fff;border:1.5px solid var(--line);color:var(--mute)}
.act .lens button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.act .lens .count{margin-left:auto;align-self:center;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--dim)}
.act .dayhead{font-family:'Jost',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.12em;
  color:var(--ink);margin:22px 0 10px}
.act .dayhead:first-child{margin-top:0}
.act .row{display:flex;gap:14px;align-items:baseline;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 16px;margin-bottom:8px}
.act .row .when{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);flex:none;width:52px}
.act .row .kind{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.08em;
  color:var(--otto);flex:none;width:150px;text-transform:uppercase}
.act .row.human .kind{color:var(--ok)}
.act .row .body{color:var(--ink);font-size:14px;min-width:0;overflow-wrap:break-word}
.act .stated{color:var(--dim);font-size:14px;padding:14px 2px}
.act .mbar{display:flex;gap:10px;margin-bottom:12px}
.act .mbar input{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:10px 15px;font:14.5px 'Open Sans',sans-serif;color:var(--ink);outline:none}
.act .mbar input:focus{border-color:var(--otto)}
.act .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.act .chip{font-family:'Jost',sans-serif;font-weight:600;font-size:12px;border:1.5px solid var(--line);
  border-radius:16px;padding:4px 12px;color:var(--mute);background:#fff;cursor:pointer}
.act .chip:hover{border-color:var(--dim);color:var(--ink)}
.act .chip.on{background:var(--ottobg);border-color:var(--otto);color:var(--otto)}
.act .fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:9px}
.act .fact .b{font-size:14.5px;color:var(--ink)}
.act .fact.infer .b{color:var(--otto);font-style:italic}
.act .fact .meta{display:flex;align-items:center;gap:9px;margin-top:5px;flex-wrap:wrap}
.act .kindtag{font-family:'Jost',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.1em;
  color:var(--dim);text-transform:uppercase}
.act .ent{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mute);cursor:pointer}
.act .ent:hover{color:var(--otto)}
.act .fact .when{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim)}
.act .rcpt{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--otto);background:#fff;border:1px solid #cde2ea;border-radius:12px;padding:1px 8px;
  text-decoration:none;white-space:nowrap}
.act .rcpt:hover{border-color:var(--otto);background:var(--ottobg)}
.act .owner{font-family:'Jost',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:0.1em;
  color:var(--gold);border:1px solid #e4d3a8;border-radius:10px;padding:1px 7px}
@media(max-width:1100px){.act .row .kind{width:auto;min-width:90px}}

/* ── DOOR: Messages (tiling chat board) ──────────────────────────────────── */
.msgboard{height:100vh;display:flex}
.msgboard .picker{width:212px;flex:none;border-right:1px solid var(--line);background:#fff;
  overflow-y:auto;padding:16px 10px}
.msgboard .ptitle{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.14em;
  color:var(--mute);padding:2px 8px 12px}
.msgboard .prow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-radius:10px;padding:9px 8px;font-family:'Open Sans',sans-serif}
.msgboard .prow:hover{background:#fafbfc}
.msgboard .prow.on{background:var(--ottobg)}
.msgboard .prow .av{width:30px;height:30px;border-radius:50%;flex:none;color:#fff;display:flex;
  align-items:center;justify-content:center;font:700 12px 'Jost',sans-serif}
.msgboard .prow .nm{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgboard .prow .doton{width:7px;height:7px;border-radius:50%;background:var(--otto);flex:none;margin-left:auto}
.msgboard .prow .undot{width:9px;height:9px;border-radius:50%;background:var(--slate);flex:none;margin-left:auto}
.msgboard .prow .undot.gold{background:var(--gold);box-shadow:0 0 0 3px rgba(168,120,31,0.16)}
.msgboard .prow.unread .nm{font-weight:700;color:var(--ink)}
/* fit-to-screen: chats stack as full-width horizontal strips, sharing the
   HEIGHT equally and getting shorter as you add more — never any scroll on the
   board (Jeremiah 8/12: rows, not columns) */
.msgboard .board{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;
  align-items:stretch;padding:18px;overflow:hidden}
.msgboard #board_empty{margin:auto;text-align:center;padding:20px;color:var(--dim);font-style:italic}
.msgboard .ctile{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 2px 10px rgba(46,51,56,0.06)}
.msgboard .chead{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);
  background:var(--paper)}
.msgboard .chead .nm{font-family:'Jost',sans-serif;font-weight:700;font-size:14px;color:var(--ink);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgboard .chead .x{border:none;background:none;cursor:pointer;color:var(--mute);font-size:18px;line-height:1;
  padding:2px 7px;border-radius:6px}
.msgboard .chead .x:hover{background:#eef0f2;color:var(--ink)}
.msgboard .clog{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.msgboard .cmsg{max-width:88%;font-size:13.5px;line-height:1.45}
.msgboard .cmsg .who{display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;color:var(--mute)}
.msgboard .cmsg .tx{display:block;padding:8px 11px;border-radius:11px;white-space:pre-wrap;overflow-wrap:break-word}
.msgboard .cmsg.mine{align-self:flex-end}
.msgboard .cmsg.mine .who{text-align:right}
.msgboard .cmsg.mine .tx{background:var(--ink);color:#fff;border-bottom-right-radius:3px}
.msgboard .cmsg.them .tx{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:3px}
.msgboard .cbox{display:flex;gap:8px;padding:8px 10px;border-top:1px solid var(--line)}
.msgboard .cbox input{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;
  padding:9px 12px;font:13.5px 'Open Sans',sans-serif;color:var(--ink);outline:none}
.msgboard .cbox input:focus{border-color:var(--otto)}
.msgboard .cbox button{border:none;background:var(--otto);color:#fff;border-radius:10px;cursor:pointer;
  font:700 12.5px 'Jost',sans-serif;padding:0 14px}
.msgboard .cbox button:hover{background:#12657f}
@media(max-width:1100px){
  .msgboard .picker{width:150px}
  .msgboard .ctile{min-width:260px}
}

/* ── SUB-VIEWS: Project drill-down + Work item (Arc 1) ───────────────────── */
.projview,.workview{height:100vh;overflow-y:auto;padding:18px 32px 92px;max-width:1100px;margin:0 auto}
.projview .crumb,.workview .crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mute);padding:2px 0 12px}
.projview .crumb a,.workview .crumb a{color:var(--otto);cursor:pointer;font-weight:600}
.projview .crumb a:hover,.workview .crumb a:hover{text-decoration:underline}
.phead,.whead{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-bottom:18px;box-shadow:0 2px 8px rgba(46,51,56,0.06)}
.phead .strip,.whead .strip{height:6px}
.phead .in,.whead .in{padding:16px 22px 18px}
.phead .pj,.whead .pj{font-family:'Jost',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:0.12em;color:var(--mute)}
.phead h1,.whead h1{font-family:'Jost',sans-serif;font-weight:800;font-size:26px;margin:3px 0 8px;line-height:1.2}
.phead .sub{color:var(--mute);font-size:13.5px}
.whead .note{color:var(--mute);margin-bottom:10px;max-width:70ch}
.whead .facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.whead .pill{font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;border:1.5px solid var(--line);
  border-radius:20px;padding:4px 13px;color:var(--mute);background:#fafbfc}
.whead .pill.due{border-color:#f0d29a;background:#fdf7ec;color:var(--amberdk)}
.whead .pill.late{border-color:#e8b9b0;background:#fbeeec;color:var(--red)}
.whead .pill.done{border-color:#bcd9c6;background:var(--okbg);color:var(--ok)}
.whead .verbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.whead .verbs button{cursor:pointer;font-family:'Jost',sans-serif;border-radius:11px}
.whead .verbs .go{font-size:14.5px;font-weight:700;padding:10px 20px;border:none;background:var(--amber);
  color:#fff;box-shadow:0 2px 8px rgba(245,166,35,0.35)}
.whead .verbs .go:hover{background:var(--amberdk)}
.whead .verbs .quiet{font-size:13.5px;font-weight:600;padding:9px 15px;background:#fff;border:1.5px solid var(--line);color:var(--mute)}
.whead .verbs .quiet:hover{color:var(--ink);border-color:var(--dim)}
.whead .fixrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.whead .fixrow label{font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase}
.whead .fixrow select{font:13.5px 'Open Sans',sans-serif;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;cursor:pointer}
.whead .fixrow select:hover{border-color:var(--otto)}
.whead .fixrow .guessed{font-size:11.5px;color:var(--amberdk);background:#fdf7ec;border:1px solid #f0d29a;border-radius:10px;padding:2px 9px}
.dlabel{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.12em;color:var(--ink);margin:4px 2px 10px}
.drow{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px;font-family:'Open Sans',sans-serif}
.drow:hover{border-color:var(--otto);background:#fafbfc}
.drow .dt{font-size:15px;font-weight:600;color:var(--ink);flex:1;min-width:0}
.drow .dm{font-size:12.5px;color:var(--mute);flex:none}
.drow.attn{border-left:4px solid var(--amber)}
.drow.done .dt{color:var(--mute)}
.drow.done{opacity:0.7}
.wcols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}
.wcols .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 18px 17px;margin-bottom:18px}
.wcols .plabel{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.12em;color:var(--mute);margin-bottom:10px}
/* THE STORY — Otto's readable catch-up + steps done / left */
.wcols .storytext{font-size:14px;color:var(--ink);line-height:1.55;white-space:pre-wrap;margin-bottom:6px}
.wcols .steplabel{font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:0.12em;
  color:var(--mute);margin:14px 0 7px}
.wcols .step{display:flex;gap:9px;align-items:baseline;padding:4px 0;font-size:13.5px;color:var(--ink)}
.wcols .step .mk{flex:none;color:var(--amberdk);font-size:13px;width:14px;text-align:center}
.wcols .step.d{color:var(--mute)}
.wcols .step.d .mk{color:var(--ok)}
.wcols .erow{display:flex;gap:12px;padding:7px 0;font-size:13.5px;align-items:baseline;border-bottom:1px solid #eef0f2}
.wcols .erow:last-child{border-bottom:none}
.wcols .erow .t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);flex:none;width:52px}
.wcols .erow .who{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;color:var(--otto);flex:none;width:70px}
.wcols .frow{display:flex;gap:10px;padding:6px 0;font-size:13px;align-items:baseline;border-bottom:1px solid #eef0f2}
.wcols .frow:last-child{border-bottom:none}
.wcols .frow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcols .frow .sz{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);flex:none}
/* work-item thread — talk + system events interleaved, composer at the foot */
.wcols .thread{display:flex;flex-direction:column;max-height:62vh}
.wcols .tlist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:2px 2px 12px}
.wcols .tmsg{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:9px 13px}
.wcols .tmsg.otto{background:var(--ottobg);border-color:var(--ottoline)}
.wcols .tmsg .th{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.wcols .tmsg .th .who{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;color:var(--ink)}
.wcols .tmsg.otto .th .who{color:var(--otto)}
.wcols .tmsg .th .when{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim)}
.wcols .tmsg .tb{font-size:14px;color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word;line-height:1.5}
.wcols .tsys{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);padding:1px 4px}
.wcols .tsys .d{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.wcols .tsys .when{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px}
.wcols .composer{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.wcols .composer input{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;
  padding:10px 13px;font:14px 'Open Sans',sans-serif;color:var(--ink);outline:none}
.wcols .composer input:focus{border-color:var(--otto)}
.wcols .composer button{border:none;background:var(--otto);color:#fff;border-radius:11px;cursor:pointer;
  font:700 13px 'Jost',sans-serif;padding:0 16px}
.wcols .composer button:hover{background:#12657f}
/* shared project chat (one thread: project page + work item + Messages) */
.wcols .thread{max-height:64vh}
.chatbox{display:flex;flex-direction:column;flex:1;min-height:0;height:100%}
.chatbox .clist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px 2px 10px}
.chatbox .cmsg2{max-width:88%;font-size:13.5px;line-height:1.45}
.chatbox .cmsg2 .who{display:block;font-family:'Jost',sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;color:var(--mute)}
.chatbox .cmsg2 .tx{display:block;padding:8px 11px;border-radius:11px;white-space:pre-wrap;overflow-wrap:break-word}
.chatbox .cmsg2.mine{align-self:flex-end}
.chatbox .cmsg2.mine .who{text-align:right}
.chatbox .cmsg2.mine .tx{background:var(--ink);color:#fff;border-bottom-right-radius:3px}
.chatbox .cmsg2.them .tx{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:3px}
.chatbox .cmsg2.otto .tx{background:var(--ottobg);color:var(--ink);border:1px solid var(--ottoline);border-bottom-left-radius:3px}
.chatbox .cmsg2.otto .who{color:var(--otto)}
.chatbox .composer{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.chatbox .composer input{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;
  padding:10px 13px;font:14px 'Open Sans',sans-serif;color:var(--ink);outline:none}
.chatbox .composer input:focus{border-color:var(--otto)}
.chatbox .composer button{border:none;background:var(--otto);color:#fff;border-radius:11px;cursor:pointer;
  font:700 13px 'Jost',sans-serif;padding:0 16px}
.chatbox .composer button:hover{background:#12657f}
@media(max-width:1100px){.wcols{grid-template-columns:1fr}}
/* project page: deliverables + the project chat, side by side */
.projview .pcols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.projview .pmain{min-width:0}
.projview .pside .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 18px 17px}
.projview .pside .plabel{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:0.12em;color:var(--mute);margin-bottom:10px}
.projview .pside .chatpanel{display:flex;flex-direction:column;height:68vh}
@media(max-width:1100px){.projview .pcols{grid-template-columns:1fr}}

/* ── mobile: rail collapses, everything stacks (keeps mobile.css intent) ── */
@media(max-width:1100px){
  #stage{margin-left:0}
  .rail{transform:translateX(-100%);transition:transform .2s}
  .rail.open{transform:translateX(0)}
  .slideover{width:100%}
  .obub{right:16px;bottom:16px}
  .opane{right:0;left:0;bottom:0;width:auto;height:72vh;border-radius:16px 16px 0 0}
  .opane.docked{width:auto;left:0;height:100vh;border-radius:0}
  body.otto-docked #stage{margin-right:0}
}
/* Radar sweep line (Orbit 2.0 spatial instrument) */
.rsweep{transform-origin:300px 300px;animation:rsweep 9s linear infinite}
@keyframes rsweep{to{transform:rotate(360deg)}}
.rdot{cursor:grab}
.rdot .rcore{transition:r .1s ease}
.rdot:hover .rcore{r:8}
.rdot.dragging{cursor:grabbing}
.rdot.dragging .rcore{r:9;stroke-width:2}
.rdot.dragging .rhalo{opacity:0.4}
@media(prefers-reduced-motion:reduce){.rsweep{display:none}}

/* ── Dispatch board (Orbit's Flight Plan over commitments) ─────────────── */
.dboard{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.dcol{flex:0 0 200px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;min-height:120px;max-height:calc(100vh - 210px)}
.dcol.d1{background:#fdf7ec;border-color:#f0dcae}
.dcol.hot{border-color:var(--otto);box-shadow:0 0 0 2px var(--ottoline) inset;background:var(--ottobg)}
.dcolhead{display:flex;align-items:baseline;gap:7px;padding:11px 13px 9px;border-bottom:1px solid var(--line)}
.dcolhead .dshort{font-size:11px;letter-spacing:0.14em;color:var(--ink);font-weight:700}
.dcolhead .ddate{font-size:11px;color:var(--dim)}
.dcolhead .dcount{margin-left:auto;font-size:11px;color:var(--mute);font-family:'JetBrains Mono',monospace}
.dcards{flex:1;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:8px}
.dempty{color:var(--dim);font-size:13px;text-align:center;padding:8px 0}
.dcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--spine,#8a93a3);
  border-radius:9px;padding:9px 11px;cursor:grab;transition:box-shadow .12s,transform .05s}
.dcard:hover{box-shadow:0 3px 12px rgba(46,51,56,0.12)}
.dcard.drag{opacity:0.55;cursor:grabbing}
.dcard.over{border-left-color:#e0912b}
.dcard.blk{border-left-color:#c2523f}
.dcard .dtitle{font-size:13.5px;line-height:1.4;color:var(--ink);margin-bottom:6px}
.dcard .dmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dcard .dwho{width:19px;height:19px;border-radius:50%;background:var(--slate);color:#fff;
  font:700 9px 'Jost',sans-serif;display:inline-flex;align-items:center;justify-content:center;flex:none}
.dcard .dwhotxt{font-size:11.5px;color:var(--mute)}
.dcard .dproj{font-size:10.5px;color:var(--dim);background:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard .dflag{font-size:10px;font-weight:700;letter-spacing:0.04em;color:#c07a1a;
  text-transform:uppercase;margin-left:auto}
.dcard .dflag.blk{color:#c2523f}

/* Dispatch: pointer-drag ghost that follows the cursor */
.dcard{touch-action:none;user-select:none}
.dghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) rotate(-2deg);
  box-shadow:0 12px 30px rgba(46,51,56,0.28);opacity:0.95;background:#fff}

/* ── Otto's proposals ON the board (the AI layer) ─────────────────────── */
.propstrip{background:var(--ottobg);border:1px solid var(--ottoline);border-radius:14px;
  padding:11px 14px 13px;margin-bottom:14px}
.propshead{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:0.12em;color:var(--otto);margin-bottom:10px}
.proprow{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}
.propcard{flex:0 0 240px;background:#fff;border:1px dashed var(--otto);border-radius:11px;
  padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.propcard .ptitle{font-size:13.5px;line-height:1.4;color:var(--ink)}
.propcard .pmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--mute)}
.propcard .pdue{color:var(--amberdk);font-weight:600}
.propcard .psrc{font-size:11px;color:var(--dim);font-style:italic}
.propcard .pacts{display:flex;gap:7px;margin-top:3px}
.propcard .papprove{flex:1;border:none;background:var(--otto);color:#fff;border-radius:8px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:700;font-size:12.5px;padding:7px 0}
.propcard .papprove:hover{background:#12657f}
.propcard .pdismiss{border:1px solid var(--line);background:#fff;color:var(--mute);border-radius:8px;
  cursor:pointer;font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;padding:7px 12px}
.propcard .pdismiss:hover{border-color:var(--red);color:var(--red)}

/* ── Dispatch team bar (drag-to-reassign drop targets) ────────────────── */
.peoplebar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.peoplebar .pbhint{font-size:12px;color:var(--dim);margin-right:4px}
.person{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:4px 12px 4px 4px;transition:border-color .1s,box-shadow .1s}
.person .pname{font-size:12.5px;color:var(--ink);font-weight:600;font-family:'Jost',sans-serif}
.person .pcnt{font-size:11px;color:var(--mute);font-family:'JetBrains Mono',monospace;
  background:var(--paper);border-radius:8px;padding:1px 6px;min-width:20px;text-align:center}
.person .pcnt.hot{background:#fbe9d6;color:#c07a1a}
.person.hotdrop{border-color:var(--otto);box-shadow:0 0 0 3px var(--ottoline);transform:scale(1.04)}
.person.hotdrop .pname{color:var(--otto)}

/* ── Otto working the board (read + one-tap fixes) ────────────────────── */
.advise{background:linear-gradient(180deg,var(--ottobg),#fff);border:1px solid var(--ottoline);
  border-radius:14px;padding:12px 16px 14px;margin-bottom:14px}
.advhead{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:0.12em;color:var(--otto);margin-bottom:7px}
.advread{font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:10px}
.advsug{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}
.asug{flex:0 0 250px;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.asug .asugtop{display:flex;align-items:center;gap:8px}
.asug .atag{font-family:'Jost',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:6px}
.asug .atag.reschedule{background:#fbe9d6;color:#c07a1a}
.asug .atag.reassign{background:var(--ottobg);color:var(--otto)}
.asug .ato{font-size:12px;font-weight:600;color:var(--ink)}
.asug .atitle{font-size:13.5px;line-height:1.4;color:var(--ink)}
.asug .awhy{font-size:11.5px;color:var(--mute);font-style:italic}
.asug .aacts{display:flex;gap:7px;margin-top:2px}
.asug .aapply{flex:1;border:none;background:var(--otto);color:#fff;border-radius:8px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:700;font-size:12.5px;padding:7px 0}
.asug .aapply:hover{background:#12657f}
.asug .askip{border:1px solid var(--line);background:#fff;color:var(--mute);border-radius:8px;
  cursor:pointer;font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;padding:7px 12px}
.asug .askip:hover{border-color:var(--red);color:var(--red)}

/* ── Otto drafts a nudge (draft → review → send in-app only) ──────────── */
.advnudge{margin-top:6px}
.anudge{border:1px solid var(--otto);background:#fff;color:var(--otto);border-radius:9px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:700;font-size:12.5px;padding:8px 14px}
.anudge:hover{background:var(--otto);color:#fff}
.ndraft{margin-top:10px}
.ndbody{font-size:13px;color:var(--mute);padding:8px 2px}
.ndcard{background:#fff;border:1px solid var(--ottoline);border-radius:11px;padding:12px;max-width:560px}
.ndhd{font-size:11.5px;color:var(--mute);margin-bottom:8px}
.ndta{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;
  font:14px/1.5 'Open Sans',sans-serif;color:var(--ink);outline:none;resize:vertical}
.ndta:focus{border-color:var(--otto)}
.ndacts{display:flex;align-items:center;gap:8px;margin-top:9px}
.ndacts .ndlbl{font-size:12px;color:var(--dim)}
.ndacts .ndto{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:13px 'Open Sans',sans-serif;color:var(--ink)}
.ndacts .ndsend{border:none;background:var(--otto);color:#fff;border-radius:8px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:700;font-size:12.5px;padding:8px 16px;margin-left:auto}
.ndacts .ndsend:hover{background:#12657f}
.ndacts .ndcancel{border:1px solid var(--line);background:#fff;color:var(--mute);border-radius:8px;
  cursor:pointer;font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;padding:8px 12px}

/* ── Orbit 2.0 · Outreach one-pager (ported behavior) ─────────────────── */
.oscbtn{border:1px solid var(--line);background:#fff;color:var(--mute);border-radius:7px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;padding:3px 10px;margin-left:5px}
.oscbtn.on{background:var(--otto);color:#fff;border-color:var(--otto)}
.lrow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;margin-bottom:10px}
.lrow.done{opacity:0.6}
.lcheck{flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line);
  background:#fff;cursor:pointer;margin-top:1px;transition:border-color .12s,background .12s;position:relative}
.lcheck:hover{border-color:var(--otto)}
.lcheck.on{background:var(--ok);border-color:var(--ok)}
.lcheck.on::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.lbody{flex:1;min-width:0}
.lhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.lco{font-family:'Jost',sans-serif;font-weight:700;font-size:16px;color:var(--ink)}
.lrow.done .lco{text-decoration:line-through}
.larea{font-size:12px;color:var(--dim)}
.lown{margin-left:auto;font-size:11px;font-weight:700;color:var(--otto);background:var(--ottobg);
  border:1px solid var(--ottoline);border-radius:6px;padding:1px 8px}
.lact{font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:3px}
.ldone{font-size:11.5px;color:var(--ok);font-weight:600;margin-top:5px}
.lnoteother{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.4}
.lnoteother b{color:var(--ink);font-weight:600}
.lnote{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font:13.5px/1.5 'Open Sans',sans-serif;color:var(--ink);outline:none;resize:none;overflow:hidden}
.lnote:focus{border-color:var(--otto)}
.lnote::placeholder{color:var(--dim)}
.lassign{margin-top:8px;font-size:11.5px;color:var(--dim)}
.lassign .lown-sel{margin-left:6px;border:1px solid var(--line);border-radius:7px;padding:4px 8px;
  font:12.5px 'Open Sans',sans-serif;color:var(--ink)}

/* ── rollout front door: primary doors + a collapsed "More" (8/19) ─────── */
.rail .moretog{background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Jost',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--dim);padding:14px 24px 8px}
.rail .moretog:hover{color:var(--mute)}
.rail .moredoors{display:none;flex-direction:column}
.rail .moredoors.open{display:flex}

/* Docked Otto: the page slides over to make room instead of being covered (8/19) */
#stage{transition:margin-right .18s ease}
@media(prefers-reduced-motion:reduce){#stage{transition:none}}