/* ============================================================================
   OWNERMIND — COACH ROSTER & SELECTION
   Sana · 31 Jul 2026 · brief from Scott, Khoa-approved direction

   Built on desk.css, which is not a mock stylesheet: `packages/sana-ui` on
   origin/develop exports DeskRoot / Masthead / RuleBar / ContextBar /
   OrientationStrip / Funnel / ReviewLane / Proposal, rendering `omhead`,
   `rulebar`, `ctxbar`, `orient` — the Desk classes verbatim. So this pack is
   drawn in the language the app actually ships.

   THE HARD LAW THIS DESIGN OBEYS
   A coach signals STYLE, never authority. No fund-manager or stock-picker
   framing, no fictional credentials (CFA, adviser, analyst-of-record) that
   could imply regulated advice. Every background here is a NON-FINANCIAL
   craft chosen for how that person listens and presses — a story editor, a
   debate teacher, a wire editor, an archivist. That is deliberate: it makes
   the coach's authority procedural, and it makes a credential claim
   structurally impossible rather than merely discouraged.

   This also inherits OwnerMind's standing rule: show · structure · compare ·
   calculate · journal · question — never score · rank · recommend · size.
   ============================================================================ */

/* ── portrait system ──────────────────────────────────────────────────────────
   Faces are TAVUS-READY BY CONSTRUCTION: a fixed circular crop, a flat
   low-contrast field behind the head, and no cropping detail near the jaw —
   so a still and a talking-head loop occupy the same frame and swapping one
   for the other changes nothing else on the page. The CourseVenture companion
   faces are the direct precedent.
   The gradient fields below are PLACEHOLDERS standing in for real portraits;
   the frame, ratio, safe area and states are the deliverable. */
.face{position:relative;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;isolation:isolate}
.face::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px #ffffff14;pointer-events:none}
.face .mono2{font-weight:500;letter-spacing:-.02em;color:#0f0d0b;opacity:.82;
  font-family:var(--num)}
.face.xl{width:132px;height:132px} .face.xl .mono2{font-size:40px}
.face.lg{width:84px;height:84px}   .face.lg .mono2{font-size:26px}
.face.md{width:52px;height:52px}   .face.md .mono2{font-size:17px}
.face.sm{width:34px;height:34px}   .face.sm .mono2{font-size:12px}
.face.xs{width:26px;height:26px}   .face.xs .mono2{font-size:10px}
/* each coach gets a field, not a hue-coded status — these must never be read
   as state colours, so they sit outside the --pos/--neg/--warn scale */
/* now backed by the REAL sprite this pack ships — sana-coach-sprite.webp, 2x2,
   addressed exactly as the app will address it */
.f-nadia,.f-daniel,.f-june,.f-arthur{
  background-image:url("sana-coach-sprite.webp");background-repeat:no-repeat;
  background-size:200% 200%}
.f-nadia {background-position:0% 0%}
.f-daniel{background-position:100% 0%}
.f-june  {background-position:0% 100%}
.f-arthur{background-position:100% 100%}
/* the monogram now sits UNDER the portrait, visible only if the sprite fails */
.face .mono2{position:absolute;z-index:-1}
/* live video state — the same frame, so nothing reflows when Tavus attaches */
.face .liveband{position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(0deg,#00000055,transparent);display:grid;place-items:center}
.face .liveband s{text-decoration:none;font-size:8px;letter-spacing:.14em;
  color:#fff;opacity:.9;font-weight:600}

/* ── roster ─────────────────────────────────────────────────────────────── */
/* FOUR coaches, so auto-fit is wrong: at wide widths it lays 3 + 1 and orphans
   the fourth on its own row, which reads as an afterthought rather than a peer.
   Cap at two columns so the set is always a balanced 2x2 or a single column. */
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
@media (min-width:900px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the change-coach step offers three, where 3-up is correct */
.pane2 .roster{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:14px;text-align:left;width:100%;
  color:inherit;font:inherit;cursor:pointer}
.ccard:hover{border-color:var(--line-2)}
.ccard[aria-pressed="true"]{border-color:var(--accent);background:#7FBFA80d}
.ccard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccard .top{display:flex;align-items:center;gap:14px}
.ccard h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ccard .anchor{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream-3);font-weight:600;margin-top:3px}
.ccard .bio{font-size:12.5px;color:var(--cream-2);line-height:1.65}
.ccard .traits{display:flex;flex-wrap:wrap;gap:6px}
.trait{font-size:10.5px;color:var(--cream-3);border:1px solid var(--line-2);
  border-radius:20px;padding:3px 9px;white-space:nowrap}
.ccard .sample{border-left:2px solid var(--line-2);padding-left:12px;
  font-size:12.5px;color:var(--cream);line-height:1.6;font-style:normal}
.ccard .sample s{text-decoration:none;display:block;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-3);font-weight:600;margin-bottom:5px}
.ccard .pick{margin-top:auto;font-size:12px;font-weight:500;color:var(--accent)}

/* ── first-run ──────────────────────────────────────────────────────────── */
.frwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:56px 24px 72px}
.frwrap .inner{width:100%;max-width:1040px}
.frhead{text-align:center;margin-bottom:34px}
.frhead h1{font-size:29px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
.frhead p{font-size:14px;color:var(--cream-2);line-height:1.7;max-width:62ch;margin:0 auto}
.frfoot{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:30px;
  flex-wrap:wrap}
.frfoot .note{font-size:12px;color:var(--cream-3)}

/* ── in-app dock ────────────────────────────────────────────────────────── */
.dockhead{display:flex;align-items:center;gap:12px;padding:15px 17px;
  border-bottom:1px solid var(--line)}
.dockhead .who{min-width:0;flex:1}
.dockhead .who b{display:block;font-size:13.5px;font-weight:600}
.dockhead .who span{display:block;font-size:11px;color:var(--cream-3);margin-top:2px}
.dockhead .swap{font-size:11px;color:var(--cream-3);border:1px solid var(--line-2);
  border-radius:8px;padding:5px 10px;white-space:nowrap;cursor:pointer}
.dockhead .swap:hover{color:var(--cream);border-color:var(--cream-3)}

/* ── handover ───────────────────────────────────────────────────────────── */
.hand{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;max-width:660px}
.hand .row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.hand .arrow{color:var(--cream-3);font-size:16px}
.hand h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.hand p{font-size:13px;color:var(--cream-2);line-height:1.7;margin-bottom:12px}
.hand .carry{background:var(--sunk);border-radius:9px;padding:14px 16px;margin-bottom:14px}
.hand .carry .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream-3);font-weight:600;margin-bottom:8px}
.hand .carry ul{margin:0;padding-left:17px}
.hand .carry li{font-size:12.5px;color:var(--cream-2);line-height:1.7}
.hand .carry li b{color:var(--cream);font-weight:500}

/* ── pack pages ─────────────────────────────────────────────────────────── */
.pack{max-width:1040px;margin:0 auto;padding:34px 22px 72px}
.pack h1{font-size:27px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
.pack .lede{font-size:14.5px;color:var(--cream-2);line-height:1.7;max-width:76ch;margin-bottom:26px}
.pack h2{font-size:17px;font-weight:600;margin:34px 0 12px;padding-top:20px;
  border-top:1px solid var(--line)}
.pack h3{font-size:14px;font-weight:600;margin:20px 0 8px}
.pack p{font-size:13.5px;color:var(--cream-2);line-height:1.7;max-width:78ch;margin-bottom:12px}
.pack p b,.pack li b{color:var(--cream);font-weight:500}
.pack ul{margin:0 0 14px 18px}
.pack li{font-size:13.5px;color:var(--cream-2);line-height:1.7;margin-bottom:5px;max-width:76ch}
.pack table{border-collapse:collapse;width:100%;font-size:12.5px;margin-bottom:16px}
.pack th,.pack td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.pack th{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cream-3);
  font-weight:600}
.pack td{color:var(--cream-2);line-height:1.6}
.pack td b{color:var(--cream)}
.pack code{font-family:var(--num);font-size:12px;color:var(--cream-2)}
.scrollx{overflow-x:auto}
.law{background:#1e1512;border:1px solid #D2764F55;border-left:3px solid var(--neg);
  border-radius:9px;padding:18px 20px;margin-bottom:18px}
.law h3{margin-top:0;color:#E0A184}
.law p:last-child{margin-bottom:0}
.navlinks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.navlinks a{font-size:12.5px;font-weight:500;color:var(--cream-2);border:1px solid var(--line-2);
  border-radius:20px;padding:7px 14px}
.navlinks a:hover{color:var(--cream);border-color:var(--cream-3)}
.navlinks a.on{background:var(--surface);color:var(--cream);border-color:var(--accent)}

/* ============================================================================
   PRESENCE PANEL v2 — 31 Jul, direct Khoa feedback via Scott
   Order top→bottom: coach identity · specialist faces · ONE standing box ·
   chat lane with the dock at the bottom.
   ============================================================================ */
.drawer.v2{display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* 1 · identity anchor */
.cpid{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:20px 17px 16px;border-bottom:1px solid var(--line);flex:none;text-align:center}
.cpid b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.cpid span{font-size:11px;color:var(--cream-3)}
/* the Change control belongs to the identity block, anchored to it rather than
   floating over the panel edge */
.cpwrap{position:relative}
.cpid .swap{position:absolute;top:12px;right:12px;z-index:2}

/* 2 · specialists as FACES. Hover OR keyboard focus reveals the role; on touch the
   first tap reveals and the second brings them in — so the same control teaches
   itself without a separate mobile affordance. */
.spec{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:13px 14px;border-bottom:1px solid var(--line);flex:none}
.specbtn{position:relative;border:0;background:none;padding:0;cursor:pointer;
  border-radius:50%;line-height:0}
.specbtn .face{transition:transform .12s var(--ease)}
.specbtn:hover .face,.specbtn:focus-visible .face,.specbtn.peek .face{transform:scale(1.12)}
.specbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.specbtn .tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--raised);border:1px solid var(--line-2);border-radius:8px;
  padding:6px 10px;white-space:nowrap;font-size:11px;line-height:1.35;color:var(--cream);
  opacity:0;pointer-events:none;transition:opacity .12s var(--ease);z-index:30}
.specbtn .tip s{text-decoration:none;display:block;color:var(--cream-3);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.specbtn:hover .tip,.specbtn:focus-visible .tip,.specbtn.peek .tip{opacity:1}

/* 3 · the ONE standing box — stage-entry briefing, always on, no question needed */
.standing{margin:14px;padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--sunk);flex:none}
.standing .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3);
  font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.standing p{font-size:12.5px;color:var(--cream);line-height:1.65}
.standing .act{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}

/* 4 · chat lane — dock pinned bottom, stream above */
/* deliberately NOT scroll-behavior:smooth — a smooth animation running against
   ~30 appends a second lags behind the text and fights the reader's own scroll */
.lane{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 14px;
  display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.turn{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.turn.you{grid-template-columns:minmax(0,1fr)}
.turn.you .bub{justify-self:end;background:var(--raised);border-radius:12px 12px 3px 12px;
  padding:9px 12px;font-size:12.5px;max-width:88%;color:var(--cream)}
/* the streamed body. min-height reserves the first line so the first token does not
   push the dock — the single biggest source of jank in a streaming panel. */
.turn .body{font-size:12.5px;color:var(--cream);line-height:1.7;min-height:1.7em}
.turn .body .cursor2{display:inline-block;width:7px;height:14px;vertical-align:-2px;
  background:var(--accent);opacity:.85;margin-left:1px}
@media (prefers-reduced-motion:no-preference){
  .turn .body .cursor2{animation:blink 1s steps(2,start) infinite}}
@keyframes blink{50%{opacity:0}}
.turn .who3{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);
  font-weight:600;margin-bottom:5px}
/* PROVENANCE: a specialist's face sits in the gutter of the section they produced,
   so attribution is spatial and survives scrolling past the header. */
.turn.spec-tagged .body{border-left:2px solid var(--line-2);padding-left:11px}

/* draft cards — structured, never loose prose */
.dcard{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--surface);margin-top:10px}
.dcard .dh{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--warn);font-weight:600}
.dcard .dh .sp{flex:1}
.dcard .dh .fld2{color:var(--cream-3);letter-spacing:0;text-transform:none;font-size:11px;
  font-weight:400;font-family:var(--num)}
.dcard .db{padding:11px 12px;font-size:12.5px;color:var(--cream);line-height:1.65}
.dcard .da{display:flex;gap:7px;padding:0 12px 11px;flex-wrap:wrap}
.dcard.accepted{border-color:#6FBF9B55}
.dcard.accepted .dh{color:var(--pos)}
.dcard.ignored{opacity:.5}

/* dock */
.dock{flex:none;border-top:1px solid var(--line);padding:11px 14px;
  display:flex;gap:8px;align-items:flex-end;background:var(--surface)}
.dock textarea{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 11px;color:var(--cream);font:inherit;font-size:12.5px;
  resize:none;min-height:38px;max-height:120px;line-height:1.5}
.dock textarea:focus{outline:none;border-color:var(--accent)}
.dock .send{flex:none}
.dockhint{font-size:10px;color:var(--cream-3);padding:0 14px 10px;flex:none}

/* ── COLLAPSIBLE DRAWER · addendum 31 Jul ────────────────────────────────────
   The slide mechanism already ships: .app3 transitions grid-template-columns and
   .app3.drawer-closed collapses the third column to 0. Reused, not reinvented.
   What is new is the HANDLE, the persistence, and the badge. */

/* the coach's face IS the reopen handle — identity survives the collapse, so the
   panel does not become an anonymous chevron the moment it is hidden */
.dopen.coachhandle{writing-mode:horizontal-tb;flex-direction:column;gap:6px;
  padding:10px 9px;border-radius:14px 0 0 14px;right:0;
  background:var(--surface);border:1px solid var(--line-2);border-right:0}
.dopen.coachhandle .face{box-shadow:0 2px 10px #0006}
.dopen.coachhandle .lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-3);font-weight:600}
.dopen.coachhandle:hover .lbl,.dopen.coachhandle:focus-visible .lbl{color:var(--cream)}
.dopen.coachhandle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* CLOSING MUST NOT SWALLOW A WAITING ITEM. If the coach has a standing read or an
   undecided draft, the handle carries a dot — otherwise hiding the panel quietly
   hides an obligation, which is the failure this whole cockpit tries to avoid. */
.dopen .wait{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
  background:var(--warn);border:2px solid var(--surface);display:none}
.dopen.haswait .wait{display:block}
.dopen .sr2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the stage must genuinely reclaim the width, not just hide the panel */
.app3.drawer-closed .work{max-width:none}
@media (prefers-reduced-motion:reduce){
  .app3,.drawer{transition:none !important}
}

/* ── v2.2 ────────────────────────────────────────────────────────────────────
   (1) three-dot settings only  (2) shorter identity block
   (3) the top slides into a single rail once the conversation starts          */

/* 1 · settings — icon only, and it carries the attention dot too, because the
   dot must live on whatever chrome remains when the rest collapses */
.gear{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;
  border:0;background:none;color:var(--cream-3);border-radius:8px;cursor:pointer;
  font-size:15px;line-height:1;display:grid;place-items:center}
.gear:hover{background:var(--raised);color:var(--cream)}
.gear:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gear::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;
  border-radius:50%;background:var(--warn);display:none}
.gear.haswait::after{display:block}

/* 2 · shorter identity block — face still the anchor, just less air */
.cpid{padding:13px 17px 12px;gap:7px}
.face.lgc{width:60px;height:60px}
.face.lgc .mono2{font-size:19px}
.cpid b{font-size:14px}

/* 3 · THE RAIL. The header is expensive furniture once a conversation is going —
   it costs the same vertical space whether you have read it or not. So on the
   first response it folds into one row that keeps every affordance: the coach's
   face (identity never becomes an anonymous chevron), the specialists, the
   standing read as a chip, and the attention dot. Tap it to bring the full
   header back. */
.foldable{overflow:hidden;transition:max-height .26s var(--ease),opacity .18s var(--ease);
  max-height:420px;opacity:1}
.drawer.v2.railed .foldable{max-height:0;opacity:0;pointer-events:none}

.railbar{display:none;align-items:center;gap:9px;padding:9px 11px;flex:none;
  border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer;
  width:100%;text-align:left;color:inherit;font:inherit;position:relative}
.drawer.v2.railed .railbar{display:flex}
.railbar:hover{background:var(--raised)}
.railbar:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.railbar .rname{font-size:12.5px;font-weight:600;white-space:nowrap}
.railbar .rspecs{display:flex;gap:-4px;align-items:center;flex:none}
.railbar .rspecs .specbtn{margin-left:-7px}
.railbar .rspecs .face{box-shadow:0 0 0 2px var(--surface)}
.railbar .rspecs .specbtn:first-child{margin-left:0}
.railbar .rspecs .tip{top:calc(100% + 5px)}
.railbar .rchip{flex:1;min-width:0;font-size:11px;color:var(--cream-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railbar .rchip b{color:var(--warn);font-weight:500}
.railbar .rexp{font-size:11px;color:var(--cream-3);flex:none}
.railbar .rdot{width:7px;height:7px;border-radius:50%;background:var(--warn);
  flex:none;display:none}
.railbar.haswait .rdot{display:block}