/* ════════════════════════════════════════════════════════════════
   Task OS (tos-*) — Asana-grade work management on the CRUX dark
   "quiet authority" language. Consumes the shared :root tokens from
   app.css + cs.css (no @import). Mobile-first; @min-width:760px upgrades
   to the docked detail panel + multi-column board.
   FOUNDATION — extended by the tos render layer in app.js.
   ════════════════════════════════════════════════════════════════ */

/* People OS wordmark (UI-wave 2026-06-11): the outline "Batman Forever" face
   was oversized, collided with the iOS status-bar clock, and sat outside the
   app's type system. Replaced with .pos-wordmark — small, premium, the app's
   own display face. The custom @font-face is retired. */
.tos-shell{ position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink); z-index:40; }
.tos-topbar{ display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:5; }
.tos-back{ width:34px; height:34px; flex:none; border:1px solid var(--line);
  background:transparent; color:var(--ink-dim); border-radius:var(--r-pill);
  font-size:18px; cursor:pointer; }
.tos-title{ font-weight:600; font-size:15px; }
.tos-grow{ flex:1; min-width:0; }
.tos-iconbtn{ width:34px; height:34px; flex:none; border:1px solid var(--line);
  background:transparent; color:var(--ink-dim); border-radius:var(--r-pill);
  font-size:15px; cursor:pointer; }
.tos-iconbtn:active{ transform:scale(.92); }

/* view switcher (segmented) */
.tos-seg{ display:flex; gap:2px; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:3px; overflow-x:auto; }
.tos-seg button{ font-size:11px; font-family:var(--mono); border:none; cursor:pointer;
  white-space:nowrap; background:transparent; color:var(--ink-mute);
  padding:5px 11px; border-radius:var(--r-pill); }
.tos-seg button.on{ color:var(--accent-text); background:var(--accent); }

/* pulse — decision tiles (horizontal snap-scroll on mobile) */
.tos-pulse{ display:flex; gap:8px; overflow-x:auto; padding:10px 14px;
  scroll-snap-type:x mandatory; border-bottom:1px solid var(--line-soft); }
.tos-stat{ flex:none; min-width:118px; scroll-snap-align:start; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-squircle);
  background:var(--bg-card); padding:10px 12px; text-align:left; }
.tos-stat__v{ font-family:var(--mono); font-size:20px; font-weight:600; line-height:1; }
.tos-stat__l{ font-size:10px; color:var(--ink-mute); text-transform:uppercase;
  letter-spacing:.05em; margin-top:4px; }
.tos-stat--alert{ background:color-mix(in srgb,var(--danger) 9%,var(--bg-card)); }
.tos-stat--alert .tos-stat__v{ color:var(--danger); }

/* relay meter (PR-R1) — inserted after the pulse strip by app.js ONLY
   when the server says EON_RELAY is armed; with the flag off none of
   these rules ever have a subject. Classic shell language: the pulse
   strip's own type scale, hairline rules, no new colour. */
.tos-meter{ border-bottom:1px solid var(--line-soft); padding:10px 14px 12px; }
.tos-meter__h{ display:flex; justify-content:space-between; align-items:baseline;
  gap:8px; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); }
.tos-meter__h span{ letter-spacing:.04em; text-transform:none; }
/* THE METER PANEL, as the rooms artifact draws it (2026-08-13): a label
   cell and four stage cells, each printing the FROZEN 2026-08-10
   baseline under its number. The panel is a COMPARISON, not four
   readings — "if the meter doesn't show the lift, the relay didn't earn
   it" only means something when the bar it must clear is beside it.
   The grid collapses to two columns under 700px rather than scrolling
   sideways: a panel a reader has to drag is a panel nobody reads. */
.tos-meter__funnel{ display:grid; gap:1px; margin-top:8px;
  grid-template-columns:1.15fr repeat(4,1fr);
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--r-squircle); overflow:hidden; }
.tos-meter__lbl{ background:var(--bg-card); padding:9px 11px;
  display:flex; flex-direction:column; justify-content:center; gap:3px; }
.tos-meter__lbl b{ font-size:11px; font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:.05em; }
.tos-meter__lbl span{ font-size:10px; color:var(--ink-mute); line-height:1.35; }
.tos-meter__stage{ background:var(--bg-card); padding:9px 11px; min-width:0; }
.tos-meter__v{ font-family:var(--mono); font-size:17px; font-weight:600; line-height:1; }
.tos-meter__stage--ack .tos-meter__v{ color:var(--accent); }
.tos-meter__l{ font-size:9px; color:var(--ink-mute); text-transform:uppercase;
  letter-spacing:.08em; margin-top:3px; }
.tos-meter__p{ font-family:var(--mono); font-size:10px; color:var(--ink-dim);
  margin-top:2px; min-height:13px; }
/* The frozen line. Quiet on purpose — it is the floor, not the news. */
.tos-meter__b{ font-family:var(--mono); font-size:9px; color:var(--ink-mute);
  margin-top:4px; line-height:1.35; }
/* (The `\203a` separator rule between the stage cells was retired
   2026-08-14: the panel is a GRID now and the character went with the
   flex row that held it — _tosMeterHTML joins the cells with ''. A rule
   with no element left is the one nobody can prove is dead.) */
@media (max-width:700px){
  .tos-meter__funnel{ grid-template-columns:repeat(2,1fr); }
  .tos-meter__lbl{ grid-column:1 / -1; }
}

/* ── THE ASK HAS A FACE (relay rooms, floor 6, 2026-08-13) ──────────
   The five lanes stay, the drag stays, the stamp ceremony stays. What
   changes is the CARD: it names its asker, wears its short id, carries
   the clock and draws the escalation rung. Every one of these rules
   needs `.tos-card--ask`, a class the renderer only emits for a relay
   ask on an ARMED lane — so a wall of SOP cards is untouched and a dark
   board is the board it was yesterday, element for element. */
/* THE ACCENT EDGE, WRITTEN TWICE — same arithmetic as the meta line
   below, and it caught this rule too. A board column paints
   `#tos .tos-col__drop .tos-card{ border:1px solid var(--line-soft) }`
   — specificity (1,2,0) — so a bare `.tos-card--ask` at (0,1,0), and
   even the skin-scoped twin at (0,2,0) in the floor-6 section below,
   LOSE to it from any position in the file. Measured in a browser
   2026-08-14 at 1280x800 and 375x812, house and dark: the ask card's
   left border was `1px solid rgb(28,28,34)` — the plain card's, byte
   for byte — while the approved floor-6 mockup draws
   `.jb-card.ask{border-left:3px solid var(--act)}`. The build was
   contradicting its own contract. The bare selector stays for a board
   rendered outside #tos; the #tos-qualified one is what wins.

   AND `.tos-card` IS PART OF IT. `#tos .tos-col__drop .tos-card--ask`
   is (1,2,0) — the SAME specificity as the rule it has to beat, so it
   is a tie decided by source order, and the loser is whichever sits
   higher in the file. This one does. Naming both classes the element
   already carries (`class="tos-card tos-card--ask"`, _tosCard) makes it
   (1,3,0) and settles it from any position. */
.tos-card--ask,
#tos .tos-col__drop .tos-card.tos-card--ask{ border-left:2px solid var(--accent); }
.tos-ask__id{ font-family:var(--mono); font-size:9.5px; color:var(--accent);
  letter-spacing:.06em; }
.tos-ask__id span{ color:var(--ink-mute); }
.tos-card--ask .tos-card__t{ margin-top:3px; }
/* THE ASK'S META LINE WRAPS. The base .tos-card__m is nowrap+hidden, which
   is right for a card whose meta is decoration and wrong for one whose
   meta carries a CLOCK: measured 2026-08-13, a high-priority ask with an
   owner, a due and a ₦ figure clipped its clock to 28 of 74px. Scoped to
   .tos-card--ask, so every non-relay card keeps its one-line behaviour
   exactly — a dark board is byte-identical.

   WRITTEN TWICE, AND #tos IS NOT OPTIONAL. The nowrap it has to beat is
   `#tos .tos-card__m` (the board-wide meta rule) — an ID selector, specificity (1,1,0),
   which a plain `.tos-card--ask .tos-card__m` at (0,2,0) LOSES to from
   any position in the file. This repo has been bitten by exactly that
   arithmetic before ("a @media block adds no specificity"; an unscoped
   override loses from anywhere). The bare selector stays for the board
   rendered outside #tos; the #tos-qualified one is what actually wins
   on the Task OS shell. */
.tos-card--ask .tos-card__m,
#tos .tos-card--ask .tos-card__m{ white-space:normal; overflow:visible; }
/* AND THE CLOCK KEEPS ITS BOX. `#tos .tos-card__m > *{display:inline}`
   (1,1,0) beat `.rl-clock{display:inline-block}` (0,1,0), so the Job
   Board clock computed `display:inline` and measured 74.2x16 while the
   Crew Room's and the wire's measured 74.2x18 — an inline box has no
   vertical padding box, so the pill lost 2px of height and its padding
   stopped reserving space. app.css says in its own comment that the
   clock, the ladder and the byline READ THE SAME in all three rooms;
   that sentence is only true with this line in it. (1,2,0) beats the
   star rule from anywhere. */
#tos .tos-card__m > .rl-clock{ display:inline-block; }
.tos-meter__legs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;
  font-family:var(--mono); font-size:10px; color:var(--ink-dim); }
.tos-meter__t{ width:100%; margin-top:10px; border-collapse:collapse;
  font-family:var(--mono); font-size:10px; }
.tos-meter__t th{ font-weight:500; color:var(--ink-mute); text-align:right;
  padding:3px 0; border-bottom:1px solid var(--line-soft); }
.tos-meter__t td{ text-align:right; padding:3px 0; color:var(--ink-dim); }
.tos-meter__t th:first-child,
.tos-meter__t td:first-child{ text-align:left; }
.tos-meter__src{ color:var(--ink); max-width:170px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* body + view container */
.tos-body{ flex:1; overflow:auto; padding:12px 14px 60px; }

/* task card / row */
.tos-card{ border:1px solid var(--line); border-radius:var(--r-squircle);
  background:var(--bg-card); padding:11px 13px; margin-bottom:8px; cursor:pointer;
  display:block; width:100%; text-align:left; }
.tos-card:hover{ background:var(--bg-elev); }
.tos-card__t{ font-size:13px; font-weight:600; line-height:1.35; }
.tos-card__m{ display:flex; align-items:center; gap:8px; margin-top:7px;
  font-size:10.5px; color:var(--ink-mute); font-family:var(--mono); flex-wrap:wrap; }
.tos-eon{ font-size:9px; padding:1px 6px; border-radius:var(--r-pill);
  background:var(--gemini-grad-crux); color:#0b0b0c; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; }
.tos-pri{ font-size:9px; padding:1px 6px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.05em; }
.tos-pri--high{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.tos-pri--normal{ background:color-mix(in srgb,var(--ink-mute) 16%,transparent); color:var(--ink-dim); }
.tos-vel--stuck{ color:var(--danger); }
.tos-vel--slow{ color:var(--warn); }
.tos-vel--fast{ color:var(--ok); }

/* section headers (My Work) */
.tos-sec{ font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-mute); font-family:var(--mono); margin:14px 0 8px; }

/* board columns */
.tos-board{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.tos-col{ flex:none; width:264px; }
.tos-col__h{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono);
  color:var(--ink-mute); margin-bottom:8px; }

/* empty + skeleton */
.tos-empty{ text-align:center; padding:34px 16px; color:var(--ink-mute); font-size:13px; }
.tos-empty__i{ font-size:26px; opacity:.45; margin-bottom:8px; }

/* board drag-to-transition */
.tos-col__drop{ min-height:60px; border-radius:var(--r-squircle); transition:background .15s; }
.tos-col--over{ background:color-mix(in srgb,var(--accent) 8%,transparent);
  outline:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); }
.tos-card--drag{ opacity:.45; }

/* My Work — Done today roll-up */
.tos-done{ margin-top:14px; }
.tos-done summary{ list-style:none; cursor:pointer; }
.tos-done summary::-webkit-details-marker{ display:none; }
.tos-done[open] summary{ color:var(--ink-dim); }

/* detail panel — SLA gauge + meta grid */
.tos-det__row{ display:flex; gap:14px; align-items:flex-start; }
.tos-sla{ flex:none; }
.tos-det__meta{ flex:1; min-width:0; }
.tos-assignee{ width:100%; background:transparent; border:none; cursor:pointer;
  padding:0; text-align:inherit; color:inherit; font:inherit; }
.tos-assignee:disabled{ cursor:default; }

/* subtasks checklist + progress */
.tos-prog{ height:4px; border-radius:var(--r-pill); background:var(--line-soft);
  overflow:hidden; margin-bottom:10px; }
.tos-prog__fill{ height:100%; border-radius:var(--r-pill); background:var(--accent);
  transition:width .4s var(--ease-emph-decel,ease); }
.tos-sub{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 2px;
  background:transparent; border:none; border-bottom:1px solid var(--line-soft);
  cursor:pointer; color:var(--ink); text-align:left; font-size:12.5px; }
.tos-sub:last-of-type{ border-bottom:none; }
.tos-sub__dot{ width:9px; height:9px; flex:none; border-radius:50%;
  border:1.5px solid var(--ink-mute); }
.tos-sub__dot--done{ background:var(--ok); border-color:var(--ok); }
.tos-sub__t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tos-sub__t--done{ color:var(--ink-mute); text-decoration:line-through; }
.tos-sub__s{ flex:none; font-family:var(--mono); font-size:10px; color:var(--ink-mute); }

/* dependencies */
.tos-dep{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; }
.tos-dep__k{ flex:none; font-family:var(--mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.06em; padding:1px 6px; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--ink-mute) 16%,transparent); color:var(--ink-dim); }
.tos-dep__k--blockedby{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.tos-dep__t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:transparent; border:none; color:var(--ink); cursor:pointer; text-align:left;
  font-size:12.5px; padding:0; }
.tos-dep__x{ flex:none; background:transparent; border:none; color:var(--ink-mute);
  font-size:10.5px; cursor:pointer; font-family:var(--mono); }
.tos-dep__x:hover{ color:var(--danger); }

/* per-task Ask EON drawer */
.tos-eonchat{ max-height:46vh; min-height:120px; overflow-y:auto; display:flex;
  flex-direction:column; gap:8px; padding:6px 2px 10px; }
.tos-bub{ max-width:86%; padding:9px 12px; border-radius:14px; font-size:13px;
  line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.tos-bub--me{ align-self:flex-end; background:var(--accent); color:var(--accent-text);
  border-bottom-right-radius:5px; }
.tos-bub--eon{ align-self:flex-start; background:var(--bg-elev); border:1px solid var(--line);
  border-bottom-left-radius:5px; }
.tos-bub--wait{ color:var(--ink-mute); font-style:italic; }
/* what EON looked up on its way to the answer (tool loop, 2026-08-07) */
.tos-toolpill{ align-self:flex-start; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; text-transform:lowercase; color:var(--ink-mute);
  border:1px solid var(--line-soft); border-radius:var(--r-pill);
  padding:2px 9px; }
.tos-eonchat__bar{ display:flex; gap:8px; align-items:center; }
.tos-eonchat__bar .csw-search{ flex:1; margin:0; }

@media(min-width:760px){
  .tos-col{ width:284px; }
}
@media (prefers-reduced-motion:reduce){
  .tos-card, .tos-stat, .tos-shell{ animation:none !important; }
  .tos-prog__fill, .tos-col__drop{ transition:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PEOPLE OS (pos-*) — production port of docs/people_os_design_v2.html.
   A tabbed HR umbrella + an Asana-grade Tasks tab on CRUX "quiet authority".
   Reuses the shared :root from app.css + cs.css (gemini gradient, motion,
   glass, radii). Adds ONLY the tokens the mockup introduced (4px spacing
   scale, the status-glyph monochrome ramp, desaturated department hues).
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* precise 4px spacing scale (Linear discipline) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  /* status-glyph monochrome ramp — status reads without a colored pill per card */
  --st-open:#6f6f78; --st-assigned:#8b8b85; --st-ack:#9aa6c4; --st-prog:#4796E3;
  --st-block:#ff4747; --st-review:#ffb347; --st-done:#4dd6a0;
  /* department hues — desaturated (~45% sat) so 6 can coexist calmly */
  --d-sales:#e0a35c; --d-cs:#7fb8d6; --d-inv:#9fcf8f; --d-log:#c79bd6; --d-mkt:#e08fa8; --d-ops:#c4bf8a;
}

/* keyframes — quiet, decel-led; nothing bounces except a verify celebrate */
@keyframes pos-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pos-riseSoft{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes pos-breathe{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes pos-pulseDot{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes pos-confetti{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.4) rotate(220deg)}}

/* ─── APP SHELL ─── full-screen fixed surface (matches .cs/.tos shells) */
.pos-shell{
  position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
  background:
    radial-gradient(130% 80% at 50% -25%, color-mix(in srgb,var(--g-violet) 6%, transparent) 0%, transparent 52%),
    var(--bg);
  color:var(--ink); font-size:14px; line-height:1.45;
}
.pos-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* surface header — title + role context + the live "today" line.
   Safe-area aware: on a notched iPhone the header starts BELOW the status
   bar (clock/battery), never under it. */
.pos-sh{padding:calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--s6) 0;border-bottom:1px solid var(--line-soft);flex:0 0 auto;}
.pos-sh__top{display:flex;align-items:center;gap:var(--s4);}
.pos-sh__back{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:var(--r-pill);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-3) var(--ease-emph);}
.pos-sh__back:hover{border-color:var(--line-strong);color:var(--ink);}
/* clean premium wordmark — app type system, small, left-aligned */
.pos-wordmark{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.01em;line-height:1;margin:0;color:var(--ink);white-space:nowrap;}
.pos-wordmark__os{margin-left:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:5px;padding:2px 5px;vertical-align:2px;}
.pos-sh__role{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);border-radius:99px;padding:4px 10px;}
.pos-sh__role .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.pos-sh__sp{flex:1;}
.pos-switch{display:flex;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px;flex:0 0 auto;}
.pos-switch button{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);padding:5px 10px;border:none;background:none;cursor:pointer;border-radius:99px;transition:all var(--dur-3) var(--ease-emph);}
.pos-switch button.on{background:var(--ink);color:var(--bg);}
.pos-sh__date{font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:.02em;}
.pos-iconbtn{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:var(--r-pill);font-size:14px;cursor:pointer;transition:border-color var(--dur-3);}
.pos-iconbtn:hover{border-color:var(--line-strong);color:var(--ink);}

/* live stat strip (UI-wave 2026-06-11) — Intelligence-style cells replace the
   pipe-separated sentence that jumbled on mobile. Number over label, hairline
   dividers via grid gap, graceful wrap at 390px. */
.pos-ribbon{padding:var(--s4) 0;}
.pos-sbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-md,12px);overflow:hidden;}
.pos-sbar__c{background:var(--bg-card);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.pos-sbar__v{font-size:18px;font-weight:600;line-height:1;color:var(--ink);white-space:nowrap;}
.pos-sbar__l{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-sbar__c--warn .pos-sbar__v{color:var(--warn);}
.pos-sbar__c--danger .pos-sbar__v{color:var(--danger);}
.pos-sbar__c--ok .pos-sbar__v{color:var(--ok);}
/* legacy aliases kept harmless (old ribbon markup is gone) */
.pos-rib__sep{display:none;}

/* tab bar — Asana view-tabs, Linear underline discipline */
.pos-tabbar{display:flex;align-items:center;gap:2px;padding:0 var(--s6);border-bottom:1px solid var(--line-soft);flex:0 0 auto;overflow-x:auto;}
.pos-tab{color:var(--ink-mute);padding:11px 12px 13px;font-size:13.5px;font-weight:500;position:relative;display:flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;font-family:var(--body);white-space:nowrap;transition:color var(--dur-3) var(--ease-emph);}
.pos-tab:hover{color:var(--ink-dim);}
.pos-tab.on{color:var(--ink);font-weight:600;}
.pos-tab.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:99px 99px 0 0;background:var(--accent);}
.pos-tab svg{width:15px;height:15px;opacity:.8;}
.pos-tab.on svg{opacity:1;}
.pos-tab[disabled]{opacity:.55;cursor:default;}
.pos-tab .pos-tabnum{font-family:var(--mono);font-size:10px;color:var(--ink-mute);}
.pos-tab .soon{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--ink-faint);border:1px solid var(--line-soft);border-radius:4px;padding:1px 4px;}

.pos-surface{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;}

/* ═══ OVERVIEW (owner) ═══ */
.pos-ov{padding:var(--s6);display:grid;grid-template-columns:1fr 332px;gap:var(--s5);align-items:start;}
/* .pos-team had ZERO matching rules anywhere while the renderer emits it
   — the only tab container with no gutter, so the first card painted its
   20px corner radius at x=0. */
.pos-team{ padding:var(--s6); }
.pos-ov__main{display:flex;flex-direction:column;gap:var(--s5);min-width:0;}
.pos-ov__side{display:flex;flex-direction:column;gap:var(--s4);}

.pos-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-card) 96%, transparent),var(--bg-card));border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);animation:pos-riseSoft var(--dur-m) var(--ease-emph-decel) both;}
.pos-panel__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:var(--s4);}
.pos-panel__t{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);font-family:var(--mono);}
.pos-panel__act{font-size:11.5px;color:var(--ink-mute);border:none;background:none;cursor:pointer;font-family:var(--body);transition:color var(--dur-3);}
.pos-panel__act:hover{color:var(--ink-dim);}

/* team pulse row — 4 figures, mono numerals, no tile chrome */
.pos-pulse{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.pos-pulse__c{background:var(--bg-card);padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:6px;position:relative;}
.pos-pulse__l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);}
.pos-pulse__v{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:-.02em;}
.pos-pulse__v small{font-family:var(--mono);font-size:13px;color:var(--ink-mute);letter-spacing:0;}
.pos-pulse__d{font-size:11px;display:inline-flex;align-items:center;gap:4px;}
.pos-pulse__d.up{color:var(--ok);} .pos-pulse__d.down{color:var(--danger);} .pos-pulse__d.flat{color:var(--ink-mute);}

/* leaderboard — rank · person · dept · bar · pts */
.pos-lb{display:flex;flex-direction:column;}
.pos-lb__row{display:grid;grid-template-columns:24px 1fr 92px 56px;align-items:center;gap:var(--s3);padding:10px 6px;border-top:1px solid var(--line-soft);width:100%;border-left:none;border-right:none;border-bottom:none;background:none;text-align:left;cursor:pointer;font-family:var(--body);color:var(--ink);transition:background var(--dur-3) var(--ease-emph);}
.pos-lb__row:first-child{border-top:none;}
.pos-lb__row:hover{background:color-mix(in srgb,var(--bg-card-2) 60%,transparent);}
.pos-lb__rank{font-family:var(--mono);font-size:12px;color:var(--ink-mute);text-align:center;}
.pos-lb__row--lead .pos-lb__rank{color:var(--accent);font-weight:600;}
.pos-lb__who{display:flex;align-items:center;gap:10px;min-width:0;}
.pos-lb__nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-lb__rl{font-size:10px;color:var(--ink-mute);font-family:var(--mono);margin-top:1px;}
.pos-lb__bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;}
.pos-lb__bar i{display:block;height:100%;border-radius:99px;background:var(--ink-faint);}
.pos-lb__row--lead .pos-lb__bar i{background:var(--gemini-grad-crux);background-size:200% 100%;animation:pos-breathe 7s var(--ease-emph) infinite alternate;}
.pos-lb__pts{font-family:var(--mono);font-size:14px;text-align:right;color:var(--ink);}
.pos-lb__star{font-size:10px;color:var(--warn);margin-left:4px;}

/* Reps tab (UI-wave 2026-06-11) — stacked rep card. The old 5-col grid
   squeezed the meta into ~150px at 390px and wrapped character-by-character.
   Now: identity line + chip line + full-width bar. */
.pos-rep2{padding:12px 6px;border-top:1px solid var(--line-soft);}
.pos-rep2:first-child{border-top:none;}
.pos-rep2__top{display:flex;align-items:center;gap:10px;min-width:0;}
.pos-rep2__rank{flex:0 0 18px;text-align:center;font-size:12px;color:var(--ink-mute);}
.pos-rep2--lead .pos-rep2__rank{color:var(--accent);font-weight:600;}
.pos-rep2__name{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-rep2__rev{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--ink);}
.pos-rep2--lead .pos-rep2__rev{color:var(--accent);}
.pos-rep2__chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0 28px;}
.pos-rep2__chip{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--ink-dim);background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:99px;padding:2px 8px;white-space:nowrap;}
.pos-rep2__bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:9px 0 0 28px;}
.pos-rep2__bar i{display:block;height:100%;border-radius:99px;background:var(--ink-faint);}
.pos-rep2--lead .pos-rep2__bar i{background:var(--gemini-grad-crux);background-size:200% 100%;animation:pos-breathe 7s var(--ease-emph) infinite alternate;}
.pos-repdays{display:inline-flex;gap:4px;}
.pos-repday{font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink-soft);background:none;border:1px solid var(--line-soft);border-radius:999px;padding:7px 13px;min-height:32px;cursor:pointer;}
.pos-repday.on{color:var(--ink);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);}
.pos-repmap{font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink);background:none;border:1px solid var(--accent);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;}
.pos-repmap:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);}
.pos-rep-unmap{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:1px 4px;margin-left:6px;vertical-align:middle;}

/* department reliability strip */
.pos-dept{display:flex;flex-direction:column;gap:1px;}
.pos-dept__r{display:grid;grid-template-columns:120px 1fr 46px;align-items:center;gap:var(--s3);padding:9px 6px;border-top:1px solid var(--line-soft);}
.pos-dept__r:first-child{border-top:none;}
.pos-dept__n{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;min-width:0;}
.pos-dept__n span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-dept__dot{width:8px;height:8px;border-radius:3px;flex:0 0 auto;}
.pos-dept__track{height:8px;border-radius:99px;background:var(--line);overflow:hidden;}
.pos-dept__track i{display:block;height:100%;border-radius:99px;}
.pos-dept__v{font-family:var(--mono);font-size:12px;text-align:right;}

/* bonus pool + pay-equity */
.pos-pool__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s3);gap:10px;}
.pos-pool__amt{font-family:var(--display);font-size:28px;letter-spacing:-.02em;}
.pos-pool__amt .cur{font-family:var(--mono);font-size:15px;color:var(--ink-mute);}
.pos-pool__cap{font-size:11px;color:var(--ink-mute);text-align:right;}
.pos-pool__bar{display:flex;height:14px;border-radius:99px;overflow:hidden;border:1px solid var(--line);}
.pos-pool__seg{height:100%;}
.pos-pool__legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:var(--s3);}
.pos-pool__li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim);}
.pos-pool__li .sw{width:9px;height:9px;border-radius:3px;}
.pos-pool__li .pc{font-family:var(--mono);color:var(--ink-mute);margin-left:4px;}
.pos-equity{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:var(--s3);}
.pos-equity__ring{width:46px;height:46px;flex:0 0 auto;position:relative;}
.pos-equity__ring svg{transform:rotate(-90deg);}
.pos-equity__c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;}
.pos-equity__t{font-size:12px;color:var(--ink-dim);line-height:1.4;}
.pos-equity__t b{color:var(--ink);}
.pos-ring__bg{fill:none;stroke:var(--line);}

/* integrity / retention flags */
.pos-flag{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft);}
.pos-flag:first-child{border-top:none;padding-top:0;}
.pos-flag__ic{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.pos-flag__ic.warn{background:var(--warn-soft);color:var(--warn);}
.pos-flag__ic.danger{background:var(--danger-soft);color:var(--danger);}
.pos-flag__ic.ok{background:var(--ok-soft);color:var(--ok);}
.pos-flag__b{flex:1;min-width:0;}
.pos-flag__t{font-size:12.5px;font-weight:500;line-height:1.35;}
.pos-flag__m{font-size:11px;color:var(--ink-mute);margin-top:2px;}

/* ═══ OVERVIEW (staff self) ═══ */
.pos-self{padding:var(--s6);max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s5);width:100%;}
.pos-self__hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;align-items:center;gap:var(--s6);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-card) 96%,transparent),var(--bg-card));animation:pos-riseSoft var(--dur-m) var(--ease-emph-decel) both;}
.pos-self__hero::before{content:'';position:absolute;inset:0;opacity:.09;background:var(--gemini-grad-crux);background-size:300% 300%;animation:pos-breathe 10s var(--ease-emph) infinite alternate;pointer-events:none;}
.pos-ring{width:128px;height:128px;flex:0 0 auto;position:relative;z-index:1;}
.pos-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.pos-ring__fg{fill:none;stroke:url(#cswGrad);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset var(--dur-xl) var(--ease-emph-decel);}
.pos-ring__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pos-ring__pts{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:-.02em;}
.pos-ring__tot{font-family:var(--mono);font-size:10px;color:var(--ink-mute);margin-top:3px;}
.pos-self__meta{flex:1;min-width:0;z-index:1;}
.pos-self__nm{font-family:var(--display);font-size:24px;letter-spacing:-.015em;}
.pos-self__rl{font-size:12px;color:var(--ink-mute);font-family:var(--mono);margin-top:3px;letter-spacing:.03em;}
.pos-self__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pos-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim);border:1px solid var(--line);border-radius:99px;padding:5px 11px;}
.pos-chip b{color:var(--ink);}
.pos-chip--lvl{color:#fff;border:none;background:var(--gemini-grad);background-size:200% 200%;animation:pos-breathe 8s var(--ease-emph) infinite alternate;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;}
.pos-chip--streak{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.pos-chip--streak b{color:var(--accent);}
.pos-self__next{font-size:11.5px;color:var(--ink-mute);margin-top:12px;}
.pos-self__next b{color:var(--ink-dim);}
.pos-self__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}

.pos-receipt{display:flex;flex-direction:column;}
.pos-receipt__r{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--s3);padding:9px 0;border-top:1px solid var(--line-soft);font-size:12.5px;}
.pos-receipt__r:first-child{border-top:none;}
.pos-receipt__t{color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-receipt__stars{color:var(--warn);font-size:11px;letter-spacing:1px;}
.pos-receipt__pts{font-family:var(--mono);font-size:13px;color:var(--ok);}
.pos-pb{display:flex;align-items:center;gap:var(--s4);}
.pos-pb__big{font-family:var(--display);font-size:46px;letter-spacing:-.02em;line-height:1;}
.pos-pb__lbl{font-size:12px;color:var(--ink-dim);line-height:1.4;}
.pos-pb__lbl b{color:var(--ink);}
.pos-mytasks{display:flex;flex-direction:column;gap:var(--s2);}
.pos-mytask{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);transition:border-color var(--dur-3) var(--ease-emph);cursor:pointer;width:100%;text-align:left;font-family:var(--body);color:var(--ink);}
.pos-mytask:hover{border-color:var(--line-strong);}
.pos-mytask__st{width:14px;height:14px;flex:0 0 auto;line-height:0;}
.pos-mytask__t{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-mytask__due{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);}
.pos-mytask__due.over{color:var(--danger);}
.pos-mytask__pts{font-family:var(--mono);font-size:11px;color:var(--accent);}

/* ═══ TASKS — toolbar ═══ */
.pos-tk{flex:1;min-height:0;display:flex;flex-direction:column;}
.pos-tkbar{display:flex;align-items:center;gap:6px;padding:10px var(--s6);border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
.pos-seg{display:flex;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;}
.pos-seg button{display:flex;align-items:center;gap:7px;color:var(--ink-mute);padding:6px 12px;border:none;background:none;cursor:pointer;border-radius:7px;font-size:12.5px;font-weight:500;font-family:var(--body);transition:all var(--dur-3) var(--ease-emph);}
.pos-seg button svg{width:14px;height:14px;}
.pos-seg button.on{background:var(--bg-card-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.3);}
.pos-tkbar__sp{flex:1;}
.pos-tb{display:flex;align-items:center;gap:7px;color:var(--ink-dim);padding:6px 10px;border:none;background:none;cursor:pointer;border-radius:var(--r-sm);font-size:12.5px;font-weight:500;font-family:var(--body);transition:all var(--dur-3) var(--ease-emph);}
.pos-tb:hover{background:var(--bg-card);color:var(--ink);}
.pos-tb svg{width:14px;height:14px;color:var(--ink-mute);}
.pos-tb__c{font-family:var(--mono);font-size:10px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);padding:1px 6px;border-radius:99px;}
.pos-tb--new{background:var(--accent);color:var(--accent-text);font-weight:600;padding:7px 13px;box-shadow:0 2px 12px -5px color-mix(in srgb,var(--accent) 70%,transparent);}
.pos-tb--new svg{color:var(--accent-text);}
.pos-tb--new:hover{background:var(--posf-limehov,#c3f024);}
/* eon auto-allocate banner — EON is the PM here */
.pos-tkbar__eon{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-dim);padding:5px 11px 5px 9px;border-radius:99px;border:1px solid color-mix(in srgb,var(--g-violet) 32%,transparent);background:color-mix(in srgb,var(--g-violet) 9%,transparent);cursor:pointer;}
.pos-tkbar__eon .spark{width:14px;height:14px;color:var(--g-violet);}
.pos-tkbar__eon b{color:var(--ink);}

/* ═══ BOARD (centerpiece) ═══ */
.pos-board{flex:1;min-height:0;display:flex;gap:var(--s3);overflow-x:auto;overflow-y:hidden;padding:var(--s4) var(--s6) var(--s5);scroll-snap-type:x proximity;}
.pos-col{flex:0 0 288px;width:288px;display:flex;flex-direction:column;min-height:0;scroll-snap-align:start;}
.pos-col__head{display:flex;align-items:center;gap:9px;padding:2px 8px 12px;}
.pos-col__glyph{flex:0 0 auto;display:inline-flex;align-items:center;line-height:0;}
.pos-col__nm{font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;}
.pos-col__ct{font-family:var(--mono);font-size:11px;color:var(--ink-mute);}
.pos-col__sp{flex:1;}
.pos-col__btn{color:var(--ink-mute);font-size:15px;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all var(--dur-3);}
.pos-col__btn:hover{background:var(--bg-card);color:var(--ink);}
.pos-col__wip{font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ink-mute);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
.pos-col__wip.over{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);}
.pos-col__list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:9px;padding:2px 3px 8px;}
.pos-col__list::-webkit-scrollbar{width:7px;}

/* THE CARD — thin status rail on the left edge, quiet title, one meta line */
.pos-card{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);padding:12px 13px 11px 15px;text-align:left;width:100%;display:flex;flex-direction:column;gap:9px;cursor:pointer;font-family:var(--body);color:var(--ink);transition:border-color var(--dur-3) var(--ease-emph),box-shadow var(--dur-3) var(--ease-emph),transform var(--dur-3) var(--ease-emph);animation:pos-rise var(--dur-m) var(--ease-emph-decel) both;}
.pos-card::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:2.5px;border-radius:99px;background:var(--rail,var(--st-open));}
.pos-card:hover{border-color:var(--line-strong);box-shadow:0 6px 20px -10px rgba(0,0,0,.7);transform:translateY(-1px);}
.pos-card.sel{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);}
.pos-card.eon{border-color:color-mix(in srgb,var(--g-violet) 26%,transparent);}
.pos-card.eon::after{content:'';position:absolute;left:0;top:0;right:0;height:1.5px;background:var(--gemini-grad);opacity:.9;border-radius:14px 14px 0 0;}
.pos-card__top{display:flex;align-items:flex-start;gap:8px;}
.pos-card__src{flex:0 0 auto;margin-top:1px;line-height:0;}
.pos-card__src .spark{width:13px;height:13px;color:var(--g-violet);}
.pos-card__src .person{width:13px;height:13px;color:var(--ink-mute);}
.pos-card__title{flex:1;font-size:13px;line-height:1.34;color:var(--ink);font-weight:500;letter-spacing:-.004em;}
.pos-card.done .pos-card__title{color:var(--ink-mute);text-decoration:line-through;text-decoration-color:var(--line-strong);}
/* the EON rationale — one quiet italic line */
.pos-card__why{font-size:11px;color:var(--ink-mute);line-height:1.4;padding-left:21px;position:relative;}
.pos-card__why::before{content:'';position:absolute;left:8px;top:7px;width:6px;height:6px;border-left:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);}
.pos-card__why em{font-style:normal;color:var(--g-violet);}
.pos-card__meta{display:flex;align-items:center;gap:10px;}
.pos-card__assignee{display:flex;align-items:center;gap:7px;min-width:0;}
.pos-card__an{font-size:11.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-card__msp{flex:1;}
.pos-card__due{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:4px;}
.pos-card__due svg{width:11px;height:11px;}
.pos-card__due.over{color:var(--danger);}
.pos-card__due.soon{color:var(--warn);}
.pos-card__impact{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;}
/* blocked dependency — a real edge */
.pos-card__dep{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--posf-dngtx,#ffb3b3);background:color-mix(in srgb,var(--danger) 11%,transparent);border:1px solid color-mix(in srgb,var(--danger) 26%,transparent);border-radius:8px;padding:6px 9px;}
.pos-card__dep svg{width:12px;height:12px;flex:0 0 auto;}
.pos-card__dep b{color:#fff;}
/* handoff chain marker on card */
.pos-card__chain{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);letter-spacing:.02em;flex-wrap:wrap;}
.pos-card__chain .seg{color:var(--ink-dim);}
.pos-card__chain .now{color:var(--accent);}
.pos-card__chain svg{width:9px;height:9px;color:var(--ink-faint);}
/* tags */
.pos-card__tags{display:flex;flex-wrap:wrap;gap:5px;}
.pos-tag{font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);border:1px solid var(--line);border-radius:6px;padding:1px 6px;}
/* velocity dot */
.pos-vel{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.pos-vel--fast{background:var(--ok);box-shadow:0 0 7px color-mix(in srgb,var(--ok) 70%,transparent);}
.pos-vel--ok,.pos-vel--normal{background:var(--g-blue);}
.pos-vel--slow{background:var(--warn);}
.pos-vel--stall,.pos-vel--stuck{background:var(--danger);animation:pos-pulseDot 1.6s ease-in-out infinite;}
/* verify CTA on completed cards */
.pos-card__verify{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:8px;border:1px solid color-mix(in srgb,var(--warn) 36%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent);color:var(--warn);border-radius:9px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--body);transition:all var(--dur-3) var(--ease-emph);}
.pos-card__verify:hover{background:color-mix(in srgb,var(--warn) 16%,transparent);}
.pos-card__verify svg{width:13px;height:13px;}
/* verified ribbon */
.pos-card__done{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ok);}
.pos-card__done .stars{color:var(--warn);letter-spacing:1px;font-size:10px;}

.pos-col__add{margin:2px 3px 0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-md);border:1px dashed var(--line);background:none;color:var(--ink-mute);font-size:12px;width:calc(100% - 6px);cursor:pointer;font-family:var(--body);transition:all var(--dur-3) var(--ease-emph);}
.pos-col__add:hover{border-color:var(--line-strong);color:var(--ink-dim);background:var(--bg-card);}
.pos-col__empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:11.5px;font-style:italic;min-height:80px;}

/* avatar (mockup gradient-hash) */
.pos-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:9.5px;letter-spacing:.01em;}
.pos-av--sm{width:20px;height:20px;font-size:8.5px;}
.pos-av--lg{width:34px;height:34px;font-size:13px;}
.pos-av--ghost{background:transparent!important;border:1.5px dashed var(--line-strong);color:var(--ink-mute);font-weight:400;}

/* ═══ LIST (spreadsheet) ═══ */
.pos-listv{flex:1;min-height:0;overflow:auto;padding:0 var(--s6) var(--s6);}
.pos-lst{width:100%;min-width:920px;border-collapse:collapse;}
.pos-lst thead th{position:sticky;top:0;z-index:5;background:var(--bg-elev);text-align:left;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.pos-lst thead th.num{text-align:right;}
.pos-lst tbody tr{border-bottom:1px solid var(--line-soft);transition:background var(--dur-3) var(--ease-emph);cursor:pointer;}
.pos-lst tbody tr:hover{background:var(--bg-card);}
.pos-lst tbody tr.sel{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.pos-lst td{padding:11px 12px;font-size:12.5px;vertical-align:middle;}
.pos-lst__group td{background:color-mix(in srgb,var(--bg-card-2) 50%,transparent);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:8px 12px;border-bottom:1px solid var(--line);}
.pos-lst__group .gc{color:var(--ink-faint);}
.pos-lst__st{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-dim);}
.pos-lst__st svg{width:13px;height:13px;}
.pos-lst__title{display:flex;align-items:center;gap:8px;}
.pos-lst__title .spark{width:13px;height:13px;color:var(--g-violet);flex:0 0 auto;}
.pos-lst__title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;}
.pos-lst__pri{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;}
.pos-lst__assignee{display:flex;align-items:center;gap:8px;}
.pos-lst__assignee span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-lst .num{text-align:right;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;}
.pos-lst .impact{color:var(--accent);font-weight:600;}
.pos-lst .due-over{color:var(--danger);}
.pos-lst .due-soon{color:var(--warn);}
.pos-lst__dept{font-family:var(--mono);font-size:10px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px;}
.pos-lst__dept .dot{width:7px;height:7px;border-radius:2.5px;}

/* priority glyph (Linear: bars, not words) */
.pos-prig{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px;}
.pos-prig i{width:2.5px;background:var(--ink-faint);border-radius:1px;}
.pos-prig i:nth-child(1){height:4px;} .pos-prig i:nth-child(2){height:7px;} .pos-prig i:nth-child(3){height:10px;}
.pos-prig--urgent i{background:var(--danger);}
.pos-prig--high i:nth-child(1),.pos-prig--high i:nth-child(2),.pos-prig--high i:nth-child(3){background:var(--warn);}
.pos-prig--med i:nth-child(1),.pos-prig--med i:nth-child(2),.pos-prig--normal i:nth-child(1),.pos-prig--normal i:nth-child(2){background:var(--ink-dim);}
.pos-prig--low i:nth-child(1){background:var(--ink-mute);}

/* ═══ DETAIL PANE (right dock) ═══ */
.pos-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:48;opacity:0;pointer-events:none;transition:opacity var(--dur-4) var(--ease-emph);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.pos-scrim.on{opacity:1;pointer-events:auto;}
.pos-detail{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;z-index:49;background:var(--bg-elev);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-4) var(--ease-emph-decel);box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);}
.pos-detail.open{transform:none;}
.pos-detail__bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-soft);}
.pos-detail__crumb{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}
.pos-detail__bsp{flex:1;}
.pos-detail__ib{width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:7px;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;transition:all var(--dur-3);}
.pos-detail__ib:hover{background:var(--bg-card);color:var(--ink);}
.pos-detail__scroll{flex:1;overflow-y:auto;padding:18px 20px 28px;}
.pos-detail__eon{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:99px;background:var(--gemini-grad);background-size:180% 180%;animation:pos-breathe 8s var(--ease-emph) infinite alternate;margin-bottom:14px;}
.pos-detail__eon svg{width:11px;height:11px;}
.pos-detail__title{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.18;}
.pos-detail__why{margin-top:14px;padding:13px 14px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--g-violet) 24%,transparent);background:color-mix(in srgb,var(--g-violet) 7%,transparent);font-size:12.5px;line-height:1.5;color:var(--ink-dim);}
.pos-detail__why b{color:var(--ink);}
.pos-detail__why .src{font-family:var(--mono);font-size:10px;color:var(--g-violet);display:block;margin-top:7px;letter-spacing:.02em;}
.pos-detail__desc{margin-top:14px;font-size:12.5px;color:var(--ink-dim);line-height:1.55;}
.pos-detail__desc b{color:var(--ink);}

/* property grid */
.pos-props{margin-top:18px;display:flex;flex-direction:column;}
.pos-prop{display:grid;grid-template-columns:108px 1fr;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);}
.pos-prop:first-child{border-top:none;}
.pos-prop__k{font-size:11px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.02em;}
.pos-prop__v{font-size:12.5px;color:var(--ink-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pos-prop__v.ink{color:var(--ink);}
.pos-psel{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:none;cursor:pointer;border-radius:99px;padding:4px 10px 4px 8px;font-size:11.5px;color:var(--ink-dim);font-family:var(--body);transition:border-color var(--dur-3);}
.pos-psel:hover{border-color:var(--line-strong);}
.pos-psel svg{width:13px;height:13px;}
.pos-psel.impact{color:var(--accent);font-family:var(--mono);font-weight:600;border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);cursor:default;}

/* SLA meter */
.pos-sla{margin-top:18px;}
.pos-sla__h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.pos-sla__l{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.pos-sla__v{font-family:var(--mono);font-size:12px;color:var(--warn);}
.pos-sla__track{height:7px;border-radius:99px;background:var(--line);overflow:hidden;position:relative;}
.pos-sla__track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),var(--warn));}

/* handoff chain — cross-department stepper */
.pos-chain{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);}
.pos-chain__h{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px;}
.pos-chain__step{display:flex;gap:12px;position:relative;padding-bottom:16px;}
.pos-chain__step:last-child{padding-bottom:0;}
.pos-chain__rail{position:absolute;left:11px;top:24px;bottom:0;width:1.5px;background:var(--line);}
.pos-chain__step:last-child .pos-chain__rail{display:none;}
.pos-chain__node{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-elev);font-size:11px;color:#fff;z-index:1;}
.pos-chain__node.done{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok);}
.pos-chain__node.now{background:var(--accent);color:var(--accent-text);box-shadow:0 0 0 4px var(--accent-soft);}
.pos-chain__node.next{background:var(--bg-card);border-color:var(--line);color:var(--ink-mute);}
.pos-chain__b{flex:1;min-width:0;padding-top:1px;}
.pos-chain__dept{font-size:12px;font-weight:600;}
.pos-chain__det{font-size:11px;color:var(--ink-mute);margin-top:2px;}
.pos-chain__who{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--ink-dim);}

/* activity + comments in detail */
.pos-act{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);}
.pos-act__r{display:flex;gap:11px;padding:9px 0;}
.pos-act__dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);margin-top:6px;flex:0 0 auto;}
.pos-act__dot.eon{background:var(--g-violet);}
.pos-act__dot.pts{background:var(--accent);}
.pos-act__b{flex:1;font-size:12px;color:var(--ink-dim);line-height:1.4;}
.pos-act__b b{color:var(--ink);}
.pos-act__t{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:2px;}
.pos-act__pts{font-family:var(--mono);font-size:11px;color:var(--accent);}
.pos-cmt{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--line-soft);}
.pos-cmt:first-of-type{border-top:none;}
.pos-cmt__b{flex:1;min-width:0;}
.pos-cmt__who{font-size:11.5px;font-weight:600;color:var(--ink);}
.pos-cmt__txt{font-size:12px;color:var(--ink-dim);line-height:1.4;margin-top:2px;word-break:break-word;}
.pos-cmt__t{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);margin-top:3px;}
.pos-cmt-box{display:flex;gap:8px;margin-top:12px;}
.pos-cmt-box input{flex:1;min-width:0;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font-family:var(--body);font-size:12.5px;padding:8px 11px;}
.pos-cmt-box input:focus{outline:none;border-color:color-mix(in srgb,var(--g-violet) 45%,transparent);}
.pos-cmt-box button{flex:0 0 auto;background:var(--accent);color:var(--accent-text);border:none;border-radius:var(--r-sm);font-weight:600;font-size:12px;padding:0 13px;cursor:pointer;font-family:var(--body);}

/* detail footer action rail */
.pos-detail__foot{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;gap:10px;flex-wrap:wrap;background:var(--bg-elev);}
.pos-detail__foot button{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:none;cursor:pointer;border-radius:var(--r-md);font-size:13px;font-weight:600;font-family:var(--body);transition:all var(--dur-3) var(--ease-emph);}
.pos-detail__foot .ghost{border:1px solid var(--line);background:none;color:var(--ink-dim);}
.pos-detail__foot .ghost:hover{border-color:var(--line-strong);color:var(--ink);}
.pos-detail__foot .prime{background:var(--accent);color:var(--accent-text);box-shadow:0 2px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent);}
.pos-detail__foot .prime:hover{background:var(--posf-limehov,#c3f024);}
.pos-detail__foot .prime[disabled]{opacity:.6;cursor:default;}
.pos-detail__foot .verify{background:color-mix(in srgb,var(--warn) 90%,#000);color:var(--posf-onwarn,#1a1205);}

/* verify+rate sheet stars */
.pos-stars{font-size:30px;letter-spacing:6px;text-align:center;margin-bottom:8px;color:var(--warn);cursor:pointer;}
.pos-stars span{cursor:pointer;}

/* toast (verify celebrate) */
.pos-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:80;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:var(--r-pill);background:var(--bg-card-2);border:1px solid color-mix(in srgb,var(--g-violet) 40%,transparent);box-shadow:0 16px 40px -16px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:all var(--dur-4) var(--ease-spring,cubic-bezier(0.34,1.56,0.64,1));}
.pos-toast.on{opacity:1;transform:translateX(-50%);}
.pos-toast__ic{width:30px;height:30px;border-radius:50%;background:var(--gemini-grad);display:flex;align-items:center;justify-content:center;color:#fff;}
.pos-toast__t{font-size:13px;font-weight:600;}
.pos-toast__s{font-size:11px;color:var(--ink-mute);font-family:var(--mono);}

/* coming-soon stub */
.pos-soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 24px;color:var(--ink-mute);text-align:center;}
.pos-soon__i{font-size:34px;opacity:.4;}
.pos-soon__t{font-family:var(--display);font-size:18px;color:var(--ink-dim);}
.pos-soon__s{font-size:12.5px;max-width:340px;line-height:1.5;}

/* empty + skeleton */
.pos-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 24px;color:var(--ink-mute);font-size:13px;text-align:center;}
.pos-empty__i{font-size:26px;opacity:.45;}
.pos-skel{background:linear-gradient(90deg,var(--bg-card),var(--bg-card-2),var(--bg-card));background-size:200% 100%;animation:pos-breathe 1.4s linear infinite;border-radius:var(--r-lg);}

/* ─── MOBILE ─── */
@media (max-width:860px){
  /* keep the wordmark clear of the iOS status bar (clock) on notched phones */
  .pos-sh{padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 0;}
  .pos-wordmark{font-size:15px;}
  .pos-sh__date{display:none;}
  .pos-sh__top{ flex-wrap:wrap; row-gap:8px; }
  .pos-ribbon{gap:12px;padding:12px 0;}
  .pos-tabbar{padding:0 16px;}
  .pos-ov{grid-template-columns:1fr;padding:16px;gap:16px;}
  .pos-team{ padding:16px 16px calc(72px + var(--safe-bottom)); }
  .pos-self{padding:16px;}
  .pos-self__hero{flex-direction:column;text-align:center;gap:18px;padding:22px;}
  .pos-self__grid{grid-template-columns:1fr;}
  .pos-tkbar{padding:10px 16px;}
  .pos-tkbar__eon{order:5;width:100%;justify-content:center;}
  .pos-board{padding:14px 16px 90px;gap:12px;scroll-snap-type:x mandatory;}
  .pos-col{flex-basis:84vw;width:84vw;scroll-snap-align:center;}
  .pos-detail{width:100%;}
  .pos-listv{padding:0 0 24px;}
  .pos-lst{min-width:640px;}
}
@media (prefers-reduced-motion:reduce){
  .pos-card,.pos-panel,.pos-self__hero,.pos-shell{animation:none!important;}
  .pos-lb__row--lead .pos-lb__bar i,.pos-chip--lvl,.pos-self__hero::before,.pos-detail__eon{animation:none!important;}
}

/* ── Personal best (self-view) — 2026-06-09 ── */
.pos-pbstats{display:flex;gap:10px;margin-bottom:12px;}
.pos-pbstat{flex:1;display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--bg-elev);}
.pos-pbstat__v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;line-height:1;color:var(--ink);}
.pos-pbstat__l{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);}
.pos-pbbar{height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden;}
.pos-pbbar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);transition:width var(--dur-m,.4s) var(--ease-emph,ease);}
.pos-pbcap{margin-top:8px;font-size:12px;color:var(--ink-dim);line-height:1.4;}

/* ── Orphan task in the approval tray (no eligible assignee) ── */
.hr-fric--orphan{border-color:var(--warn);background:var(--warn-soft);}
.hr-fric__badge{margin-left:8px;padding:1px 8px;border-radius:var(--r-pill);background:var(--warn);color:var(--posf-onwarn,#1a1205);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;}

/* ── Ask EON (per-task help, in the detail pane) — 2026-06-09 ── */
.pos-ask{border-top:1px solid var(--line-soft);}
.pos-ask .pos-chain__h .spark{width:13px;height:13px;vertical-align:-2px;margin-right:3px;color:var(--accent);}
.pos-ask__hint{font-size:12px;color:var(--ink-dim);line-height:1.45;margin:4px 0 8px;}
#pos-ask-thread{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin-bottom:8px;}
.pos-askmsg{display:flex;flex-direction:column;gap:2px;}
.pos-askmsg__who{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}
.pos-askmsg__b{font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;padding:8px 11px;border-radius:var(--r-md);border:1px solid var(--line-soft);}
.pos-askmsg--me .pos-askmsg__b{background:var(--bg-elev);}
.pos-askmsg--eon .pos-askmsg__b{background:var(--accent-soft);border-color:transparent;}
.pos-askmsg--me{align-items:flex-end;}
.pos-askmsg--me .pos-askmsg__b{max-width:88%;}
.pos-ask__typing{color:var(--ink-mute);}
.pos-ask__meta{font-size:11px;color:var(--ink-mute);margin-top:6px;font-family:var(--mono);}

/* ═══ EXECUTION analytics (People OS tab, UI wave 2 2026-06-12) ═══
   The duplicate task list is gone — this tab now reads how the team
   executes: points output, ratings, department throughput, overdue
   aging. Mobile-first at 390px; panels reuse .pos-panel/.pos-pulse. */
.pos-exec{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5);max-width:1080px;margin:0 auto;width:100%;}
.pos-xbar{display:flex;align-items:center;gap:10px;}
.pos-xbar__sp{flex:1;}
.pos-xcta{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--accent-text);background:var(--accent);border:none;border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;box-shadow:0 2px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform var(--dur-3) var(--ease-emph);}
.pos-xcta:active{transform:scale(.96);}
.pos-xcta svg{width:15px;height:15px;}
/* daily points trend — bar strip */
.pos-xtr{display:flex;align-items:flex-end;gap:3px;height:84px;}
.pos-xtr__b{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--accent) 75%,transparent);}
.pos-xtr__b--zero{background:var(--line);}
.pos-xtr__cap{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);}
.pos-exec__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;}
/* star distribution */
.pos-xstar{display:grid;grid-template-columns:34px 1fr 30px;align-items:center;gap:var(--s3);padding:5px 0;}
.pos-xstar__l{font-family:var(--mono);font-size:11px;color:var(--ink-dim);white-space:nowrap;}
.pos-xstar__l .st{color:var(--warn);}
.pos-xstar__track{height:7px;border-radius:99px;background:var(--line);overflow:hidden;}
.pos-xstar__track i{display:block;height:100%;border-radius:99px;background:var(--warn);}
.pos-xstar__v{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ink-dim);}
.pos-xunrated{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-mute);line-height:1.45;}
.pos-xunrated.warn{color:var(--warn);}
/* department performance rows */
.pos-xdept{display:flex;flex-direction:column;}
.pos-xdept__r{padding:10px 0;border-top:1px solid var(--line-soft);}
.pos-xdept__r:first-child{border-top:none;padding-top:0;}
.pos-xdept__top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.pos-xdept__n{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;min-width:0;}
.pos-xdept__chips{display:inline-flex;gap:5px;flex-wrap:wrap;}
.pos-xdept__chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--ink-dim);background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:99px;padding:2px 7px;white-space:nowrap;}
.pos-xdept__chip.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
.pos-xdept__chip.ok{color:var(--ok);}
.pos-xdept__bar{display:grid;grid-template-columns:1fr 40px;align-items:center;gap:var(--s3);margin-top:8px;}
.pos-xdept__rate{font-family:var(--mono);font-size:11.5px;text-align:right;}
/* overdue aging */
.pos-xage__buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.pos-xage__bucket{background:var(--bg-card);padding:12px;display:flex;flex-direction:column;gap:4px;}
.pos-xage__bv{font-size:22px;line-height:1;color:var(--ink);}
.pos-xage__bucket.warn .pos-xage__bv{color:var(--warn);}
.pos-xage__bucket.crit .pos-xage__bv{color:var(--danger);}
.pos-xage__bl{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.pos-xage__list{display:flex;flex-direction:column;margin-top:var(--s3);}
.pos-xage__row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border:none;border-top:1px solid var(--line-soft);background:none;cursor:pointer;text-align:left;font-family:var(--body);color:var(--ink);transition:background var(--dur-3) var(--ease-emph);}
.pos-xage__row:hover{background:color-mix(in srgb,var(--bg-card-2) 60%,transparent);}
.pos-xage__t{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-xage__who{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim);white-space:nowrap;}
.pos-xage__age{font-family:var(--mono);font-size:10.5px;color:var(--danger);white-space:nowrap;}
@media (max-width:760px){
  .pos-exec{padding:16px;}
  .pos-exec__grid{grid-template-columns:1fr;}
  .pos-pulse{grid-template-columns:repeat(2,1fr);}
  .pos-xtr{height:64px;}
}

/* ═══ GOALS & OKRs tab (UI wave 2 2026-06-12, backend mig 262) ═══ */
.pos-goals{padding:var(--s6);max-width:880px;margin:0 auto;width:100%;display:flex;flex-direction:column;}
.pos-goal__sec{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);margin:var(--s5) 0 var(--s2);}
.pos-goal{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-card) 96%,transparent),var(--bg-card));cursor:pointer;font-family:var(--body);color:var(--ink);transition:border-color var(--dur-3) var(--ease-emph);animation:pos-riseSoft var(--dur-m) var(--ease-emph-decel) both;}
.pos-goal:hover{border-color:var(--line-strong);}
.pos-goal--closed{opacity:.62;}
.pos-goal__ring{width:52px;height:52px;flex:0 0 auto;position:relative;}
.pos-goal__ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.pos-goal__ring circle{transition:stroke-dashoffset var(--dur-xl) var(--ease-emph-decel);}
.pos-goal__pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.pos-goal__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.pos-goal__t{font-size:13.5px;font-weight:600;line-height:1.35;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.pos-goal__nums{font-size:14px;color:var(--ink);}
.pos-goal__nums .of{color:var(--ink-mute);font-size:12px;}
.pos-goal__meta{font-size:11px;color:var(--ink-mute);font-family:var(--mono);}
.pos-goal__live{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:99px;padding:2px 7px;}
.pos-goal__live i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pos-livepulse 1.8s ease-in-out infinite;}
@keyframes pos-livepulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.pos-goal__pace{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 7px;}
.pos-goal__pace.ok{color:var(--ok);background:var(--ok-soft);}
.pos-goal__pace.warn{color:var(--warn);background:var(--warn-soft);}
.pos-goal__closed{margin-top:var(--s5);}
.pos-goal__closed summary{list-style:none;}
.pos-goal__closed summary::-webkit-details-marker{display:none;}
.pos-goal__formrow{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.pos-goal__formrow .csw-search{margin:0;}
.pos-goal__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.pos-goal__acts .csw-mini{flex:1;min-width:110px;}
@media (max-width:760px){
  .pos-goals{padding:16px;}
}
@media (prefers-reduced-motion:reduce){
  .pos-goal,.pos-goal__live i{animation:none!important;}
}

/* ── Shift-request approval queue (Operations), PR3 ──────────── */
.pos-appr__row{padding:var(--s4) 0;border-top:1px solid var(--line-soft);}
.pos-appr__row:first-of-type{border-top:none;}
.pos-appr__meta b{display:block;font-size:13px;font-weight:600;color:var(--ink);}
.pos-appr__meta span{display:block;font-size:11.5px;color:var(--ink-mute);margin-top:2px;line-height:1.45;}
.pos-appr__warn{font-size:11px;color:var(--warn);background:var(--warn-soft);border-radius:7px;padding:5px 9px;margin:7px 0 0;}
.pos-appr__acts{display:flex;gap:8px;margin-top:9px;}
.pos-appr__ok,.pos-appr__no{font-size:12px;font-weight:600;border-radius:9px;padding:7px 14px;cursor:pointer;border:1px solid var(--line);font-family:var(--body);}
.pos-appr__ok{background:var(--accent);color:var(--accent-text);border-color:var(--accent);}
.pos-appr__no{background:transparent;color:var(--ink-dim);}
.pos-appr__ok:hover{filter:brightness(1.05);}
.pos-appr__no:hover{color:var(--ink);}

/* ════════════════════════════════════════════════════════════════════════
   PEOPLE OS motion layer v2 (vet 2026-07-05) — "fluid and animated to use".
   Additive only. Builds on pos-rise/pos-riseSoft: staggered panel cascade,
   tab press + indicator, bar grow-ins, row stagger, count-up pairing (JS
   eonAnimNums), skeleton shimmer. All gated by prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* Panels cascade top-to-bottom instead of popping as one block. */
#pos-surface>.pos-panel:nth-of-type(1),#pos-surface>*>.pos-panel:nth-of-type(1){animation-delay:.02s}
#pos-surface>.pos-panel:nth-of-type(2),#pos-surface>*>.pos-panel:nth-of-type(2){animation-delay:.07s}
#pos-surface>.pos-panel:nth-of-type(3),#pos-surface>*>.pos-panel:nth-of-type(3){animation-delay:.12s}
#pos-surface>.pos-panel:nth-of-type(4),#pos-surface>*>.pos-panel:nth-of-type(4){animation-delay:.17s}
#pos-surface>.pos-panel:nth-of-type(n+5),#pos-surface>*>.pos-panel:nth-of-type(n+5){animation-delay:.21s}
#pos-surface .pos-pulse,#pos-surface .pos-self__hero{animation:pos-riseSoft var(--dur-m) var(--ease-emph-decel) both;}

/* Leaderboard / task rows ripple in. */
.pos-lb__row,.pos-mytask,.pos-appr__row,.pos-goal{animation:pos-riseSoft .34s var(--ease-emph-decel) both;}
.pos-lb__row:nth-of-type(1),.pos-mytask:nth-of-type(1){animation-delay:.03s}
.pos-lb__row:nth-of-type(2),.pos-mytask:nth-of-type(2){animation-delay:.06s}
.pos-lb__row:nth-of-type(3),.pos-mytask:nth-of-type(3){animation-delay:.09s}
.pos-lb__row:nth-of-type(4),.pos-mytask:nth-of-type(4){animation-delay:.12s}
.pos-lb__row:nth-of-type(5),.pos-mytask:nth-of-type(5){animation-delay:.15s}
.pos-lb__row:nth-of-type(n+6),.pos-mytask:nth-of-type(n+6){animation-delay:.18s}

/* Leaderboard + rep bars GROW from the left (inline width is the target). */
.pos-lb__bar i,.pos-rep2__bar i{transform-origin:left center;animation:pos-growx .7s var(--ease-emph-decel) .15s both;}
@keyframes pos-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Tabs: tactile press + a sliding lime dot under the active tab. */
.pos-tab{position:relative;}
.pos-tab:active{transform:scale(.94);}
.pos-tab.on::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;border-radius:50%;
  background:var(--accent,#d4ff3a);transform:translateX(-50%);animation:pos-tabdot .3s var(--ease-emph) both;}
@keyframes pos-tabdot{from{opacity:0;transform:translateX(-50%) scale(0)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.pos-tabnum{transition:transform .2s var(--ease-emph);}
.pos-tab.on .pos-tabnum{transform:scale(1.12);}

/* Press feedback on the action surfaces. */
.pos-mytask:active,.pos-lb__row:active,.pos-card:active,.pos-panel__act:active,
.pos-card__verify:active,.pos-col__add:active,.pos-seg button:active{transform:scale(.98);}

/* Count-up pairing: eonAnimNums stamps data-eon-counted; nothing needed here
   beyond a soft settle on the big stat values. */
.pos-pulse__v{transition:opacity .2s ease;}

/* Skeleton shimmer for loading states. */
.pos-skel,.pos-loading{position:relative;overflow:hidden;color:transparent!important;border-radius:8px;
  background:color-mix(in srgb,var(--bg-card) 88%,#fff 4%);min-height:14px;}
.pos-skel::after,.pos-loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  background-size:200% 100%;animation:pos-shimmer 1.4s ease-in-out infinite;}
@keyframes pos-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .pos-lb__row,.pos-mytask,.pos-appr__row,.pos-goal,.pos-pulse,.pos-self__hero,
  .pos-lb__bar i,.pos-rep2__bar i,.pos-tab.on::after,.pos-skel::after,.pos-loading::after{animation:none!important;}
  .pos-panel{animation-delay:0s!important;}
  .pos-tab:active,.pos-mytask:active,.pos-lb__row:active,.pos-card:active{transform:none;}
}

/* ── Capture Wars panel (2026-07-05) ──────────────────────────────
   Rows reuse .pos-lb (bars grow in via the motion layer for free).
   Only the champ line + explainer footer are new. */
.pos-cw__champ{font-size:11px;color:var(--ink-mute);margin-top:8px;}
.pos-cw__champ b{color:var(--ink);}
.pos-cw__foot{font-size:10.5px;color:var(--ink-mute);margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}

/* ── CEO Command Center (2026-07-06) — leads-only mode of the Tasks page ── */
.cc-switch{display:inline-flex;margin-left:12px;background:rgba(255,255,255,.06);border-radius:999px;padding:2px;vertical-align:middle}
.cc-switch button{border:0;background:transparent;color:var(--muted,var(--posf-mut,#8b8b95));font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;cursor:pointer}
.cc-switch button.on{background:rgba(255,255,255,.14);color:#fff}
.cc-sec{margin:20px 0 8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--posf-tx2,#b9b9c2)}
.cc-sec__s{font-weight:400;text-transform:none;letter-spacing:0;color:var(--posf-dim,#6b6b75);margin-left:8px;font-size:12px}
.cc-card{background:var(--panel,var(--posf-panel,#141419));border:1px solid var(--line,var(--posf-line,#232329));border-left:3px solid var(--posf-rail,#3a3a44);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.cc-card--crit{border-left-color:#ff7a7a}
.cc-card--warn{border-left-color:#e3c14b}
.cc-card__t{font-weight:650;font-size:14px}
.cc-card__why{font-size:12.5px;color:var(--posf-tx2,#b9b9c2);margin-top:4px}
.cc-card__do{font-size:12.5px;color:var(--posf-mut,#8b8b95);margin-top:4px}
.cc-card__do span{color:var(--posf-lime,#c8ff4d);font-weight:600}
.cc-card__foot{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.cc-sp{flex:1}
.cc-chip{font-size:10.5px;border:1px solid var(--posf-line,#2a2a31);border-radius:999px;padding:1px 8px;color:var(--posf-mut,#8b8b95)}
.cc-chip--ngn{color:var(--posf-lime,#c8ff4d);border-color:var(--posf-limebd,#3a4a1d)}
.cc-btn{border:0;background:#fff;color:#000;font-size:12px;font-weight:650;padding:5px 12px;border-radius:999px;cursor:pointer}
.cc-btn:disabled{opacity:.55;cursor:default}
.cc-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cc-kpi{background:var(--panel,var(--posf-panel,#141419));border:1px solid var(--line,var(--posf-line,#232329));border-radius:12px;padding:10px 12px}
.cc-kpi--alert{border-color:var(--posf-alert,#5a2a2a)}
.cc-kpi__v{font-size:19px;font-weight:700}
.cc-kpi__l{font-size:11.5px;color:var(--posf-mut,#8b8b95);margin-top:2px}
.cc-line{font-size:12.5px;color:var(--posf-tx2,#b9b9c2);padding:6px 2px;border-bottom:1px dashed var(--posf-line,#232329)}
.cc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cc-table th{text-align:left;color:var(--posf-mut,#8b8b95);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--posf-line,#232329)}
.cc-table td{padding:6px 8px;border-bottom:1px solid #1c1c22}
.cc-depts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.cc-dept{border:1px solid var(--line,var(--posf-line,#232329));background:var(--panel,var(--posf-panel,#141419));border-radius:12px;padding:8px 12px;cursor:pointer;text-align:left}
.cc-dept--alert{border-color:var(--posf-alert,#5a2a2a)}
.cc-dept__n{display:block;font-size:13px;font-weight:650;color:#fff}
.cc-dept__m{display:block;font-size:11px;color:var(--posf-mut,#8b8b95);margin-top:2px}

/* ── People OS department pulse (2026-07-06) ── */
.pos-deptdd{position:relative;display:inline-block}
.pos-deptdd__car{margin-left:5px;font-size:10px;opacity:.7}
.pos-deptdd__menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:190px;background:var(--posf-menu,#17171c);border:1px solid var(--posf-line,#2a2a31);border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.pos-deptdd__menu.open{display:block}
.pos-deptdd__menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--posf-tx,#d9d9df);font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer}
.pos-deptdd__menu button:hover{background:rgba(255,255,255,.07)}
.pos-deptdd__menu button.on{background:rgba(255,255,255,.12);color:#fff}
.pos-dept{padding:22px 24px 40px}
.pos-dept__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pos-dept__head h2{margin:0;font-size:20px}
.pos-dept__win{display:inline-flex;background:rgba(255,255,255,.06);border-radius:999px;padding:2px}
.pos-dept__win button{border:0;background:transparent;color:var(--posf-mut,#8b8b95);font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;cursor:pointer}
.pos-dept__win button.on{background:rgba(255,255,255,.14);color:#fff}
.pos-dept__kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.pos-dk{background:var(--posf-panel,#141419);border:1px solid var(--posf-line,#232329);border-radius:14px;padding:13px 15px}
.pos-dk--alert{border-color:var(--posf-alert,#5a2a2a)}
.pos-dk__v{font-size:21px;font-weight:700}
.pos-dk__l{font-size:11.5px;color:var(--posf-mut,#8b8b95);margin-top:3px}
.pos-dk__s{font-size:11px;color:var(--posf-dim,#6b6b75);margin-top:2px}
.pos-dept__lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pos-dlist{background:var(--posf-panel,#141419);border:1px solid var(--posf-line,#232329);border-radius:14px;padding:12px 15px}
.pos-dlist__t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--posf-tx2,#b9b9c2);margin-bottom:8px}
.pos-dlist__r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--posf-tx,#d9d9df);padding:5px 0;border-bottom:1px dashed var(--posf-line,#232329)}
.pos-dlist__r:last-child{border-bottom:0}
.pos-dlist__v{color:var(--posf-mut,#8b8b95);text-align:right}
.pos-dlist__v em{font-style:normal;color:var(--posf-dim,#6b6b75);font-size:11px}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN FLOW remap — theme v2, 2026-07-08. People OS / Tasks on bone:
   status ramp + department hues re-tuned for light ground; the --posf-*
   tokens have NO Classic definition (fallbacks above carry the original
   dark values) — they exist only for this remap.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="flow"]{
  --st-open:#98938A; --st-assigned:#8A8681; --st-ack:#5E6E9E; --st-prog:#2749C9;
  --st-block:#C0201F; --st-review:#A66B00; --st-done:#2E7A50;
  --d-sales:#A9741F; --d-cs:#3E7A99; --d-inv:#4E8A3C; --d-log:#7A4E99; --d-mkt:#B04A6E; --d-ops:#857D33;
  --panel:rgba(19,18,17,.04); --muted:#6B675F;
  --posf-panel:rgba(19,18,17,.04); --posf-menu:#FBFAF8;
  --posf-line:rgba(19,18,17,.16); --posf-rail:rgba(19,18,17,.26);
  --posf-mut:#5A554E; --posf-tx:#131211; --posf-tx2:#403D38; --posf-dim:#7E7870;
  --posf-lime:#2E7A50; --posf-limehov:#256B45; --posf-limebd:rgba(46,122,80,.4);
  --posf-alert:rgba(192,32,31,.35); --posf-onwarn:#FFFFFF; --posf-dngtx:#C0201F;
  /* the EON green token (vet 2026-09-02): every use fell back to #3ddc84
     because nothing defined it — on the light flow ground that green
     is a 2.1:1 smear. Defined per theme; the dark value IS the house
     law. Lime stays the command layer's own accent; unifying the two
     greens is the operator's call, not a token's. */
  --eon-green:#1F7A45;
}

/* INK mode (round 2, 2026-07-08): dark grounds return; flow structure
   stays; EON green accent per the durable dark-surface rule. */
html[data-theme="flow"][data-flow="ink"]{
  --st-open:#6f6f78; --st-assigned:#8b8b85; --st-ack:#9aa6c4; --st-prog:#4796E3;
  --st-block:#ff4747; --st-review:#ffb347; --st-done:#4dd6a0;
  --d-sales:#e0a35c; --d-cs:#7fb8d6; --d-inv:#9fcf8f; --d-log:#c79bd6; --d-mkt:#e08fa8; --d-ops:#c4bf8a;
  --panel:#141419; --muted:#8b8b95;
  --posf-panel:#141419; --posf-menu:#17171c;
  --posf-line:#232329; --posf-rail:#3a3a44;
  --posf-mut:#8b8b95; --posf-tx:#d9d9df; --posf-tx2:#b9b9c2; --posf-dim:#6b6b75;
  --posf-lime:#c8ff4d; --posf-limehov:#c3f024; --posf-limebd:#3a4a1d;
  --posf-alert:#5a2a2a; --posf-onwarn:#1a1205; --posf-dngtx:#ffb3b3;
  --eon-green:#3ddc84;
}
/* the plain light theme (app.css data-theme="light") is the ground the
   token was written for — without this line every green fell back to
   #3ddc84 on near-white at 1.68:1 (Opus vet 2026-09-02, seat 2 #4) */
html[data-theme="light"]{ --eon-green:#1F7A45; }

/* ════════════════════════════════════════════════════════════════
   DESIGN FLOW — TASKS discipline layer (2026-07-14)
   Operator: "poorly designed with a lot of noise … minimalist and
   clean, important details only, handled things auto-disappear."
   Reference: DESIGN FLOW boards (editorial spacing, mono micro-
   labels, hairlines, ONE accent). EON GREEN is THE accent on EON
   dark surfaces (durable rule 2026-07-08); red = overdue/kill
   semantics only. FLAT LAW: no shadows, no panel gradients, square.
   Overrides the tos-* / cc-* foundation above — append-only layer.
   ════════════════════════════════════════════════════════════════ */

#tos, #tos *{ box-shadow:none !important; text-shadow:none !important; }
#tos .tos-shell{ max-width:100vw; }
/* bottom padding clears the Ask-EON orb (eon_ask.js): on a phone it is
   a 44px circle at bottom:14px + the safe inset. 44 + 14 + 18px of air
   = 76px, plus the same inset the orb adds itself — a flat 90px was
   2px SHORT in standalone (44 + 14 + 34 = 92) and the last row's right
   end sat under the orb (verifier, 2026-08-21). */
#tos .tos-body{ overflow-x:hidden;
  padding:0 16px calc(76px + env(safe-area-inset-bottom, 0px)); }
#tos .tos-body *{ min-width:0; }

/* topbar — quiet wordmark, hairline, square icon buttons */
/* The mode switch gets its OWN row (operator 2026-08-07: "top bar is
   over lapping"). .cc-switch is inline-flex and cannot shrink — at
   402px it rendered 248px wide inside a 194px .tos-grow and the
   66px of overflow sat on top of the sound and ＋ buttons. Wrapping
   the bar + flex-basis:100% gives it the full width (370px at 402),
   and overflow-x keeps it honest on any narrower phone. */
/* 2026-08-20 (operator IMG_9375, "poorly designed for mobile"): that
   wrapped flex row failed on his iPhone — the sticky bar's box stayed
   one row tall and the switch overflowed into the ₦ hero (Chromium
   wraps it fine; the WebKit trigger is a hypothesis, the fix is not).
   The switch is its own BLOCK row under the bar now: nothing wraps,
   nothing is sticky, every engine agrees. The modebar carries the
   hairline the bar used to. */
/* STATIC, with the notch pad on the bar itself (2026-08-21, the proof pass
   after #2523). The foundation rule makes the bar position:sticky; inside
   this fixed shell that was inert (the scroller is .tos-body, a SIBLING)
   in every engine but one: WebKit honours body{padding-top:var(--safe-top)}
   (app.css, the notch rule) as a sticky offset, so on an iPhone the bar
   rendered 59px BELOW its layout slot while the pulse strip stayed put
   — the hero under the mode switch in IMG_9375, reproduced in WebKit 26.5
   at 402x874 (bar 59-153 over pulse 94), Chromium unaffected. Static puts
   the bar back in its slot. The pad is REQUIRED, not decorative: the shell
   is position:fixed; inset:0, so under viewport-fit=cover it starts at y=0
   beneath the status bar and body's padding never reaches it. The bar reads
   the same --safe-top token body does (ONE source, app.css — never a second
   env() read), so the two cannot drift. */
#tos .tos-topbar{ position:static;
  padding:calc(14px + var(--safe-top, 0px)) 16px 10px; }
/* the hairline moves down to the modebar only when there IS one — the
   switch mounts for leads alone (bindTaskOS: if (ccLead) _ccMountSwitch),
   so a rep's bar keeps its own line; a flat border-bottom:0 left it
   flush on the pulse strip with no rule between (verifier, 2026-08-21) */
#tos .tos-topbar:has(+ .tos-modebar){ border-bottom:0; }
#tos .tos-modebar{ padding:0 16px 10px; border-bottom:1px solid var(--line-soft); }
#tos .tos-modebar .cc-switch{ display:flex; margin-left:0; max-width:100%;
  overflow-x:auto; scrollbar-width:none; }
#tos .tos-modebar .cc-switch::-webkit-scrollbar{ display:none; }
#tos .tos-modebar .cc-switch button{ flex:0 0 auto; white-space:nowrap; }
#tos .tos-title{ font-weight:800; font-size:19px; letter-spacing:-0.02em; }
#tos .tos-back, #tos .tos-iconbtn{ border-radius:0; border-color:transparent;
  color:var(--ink-mute); }
#tos .cc-switch{ background:transparent; border:1px solid var(--line-soft);
  border-radius:0; padding:0; }
#tos .cc-switch button{ border-radius:0; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:lowercase; font-weight:500; padding:5px 12px; }
#tos .cc-switch button.on{ background:var(--posf-lime,#c8ff4d); color:#0b0b0c; }

/* pulse strip — numbers on a hairline, not boxes */
/* scroll-snap OFF (2026-08-07): mandatory x-snap resolved to the
   first tile's snap START, which sits at the strip's 16px padding —
   so the browser parked scrollLeft at 16 on load and the first tile
   ("1 / MINE") was clipped by its own padding before anyone touched
   it. Six tiles need 661px in a 402px rail; it is a numbers rail,
   snapping bought nothing. */
#tos .tos-pulse{ gap:0; padding:12px 16px; scroll-snap-type:none; }
#tos .tos-stat{ background:transparent; border:0; border-left:1px solid var(--line-soft);
  border-radius:0; min-width:92px; padding:4px 14px; }
#tos .tos-pulse .tos-stat:first-child{ border-left:0; padding-left:0; }
#tos .tos-stat--alert{ background:transparent; }
#tos .tos-stat__v{ font-size:17px; }
#tos .tos-stat__l{ font-size:9px; letter-spacing:.08em; margin-top:3px; }

/* command hero — the one loud element on the page */
#tos .ccf-strip{ display:block; padding:20px 16px 16px; }
/* The hero is a small grid (2026-08-20): the number spans the row, the
   label sits left and "Read it to me" sits on the label's row at the
   right — its inline margin-left:auto did nothing inside a block. The
   number scales with the phone (fixed 54px clipped 360px screens). */
#tos .ccf-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:6px 12px; }
#tos .ccf-hero__n{ grid-column:1 / -1; font-size:clamp(40px, 12vw, 54px);
  font-weight:800; letter-spacing:-0.03em; line-height:.95;
  font-family:var(--sans, inherit); }
#tos .ccf-hero__l{ grid-column:1; margin-top:8px; font-family:var(--mono);
  font-size:10px; letter-spacing:.12em; text-transform:lowercase;
  color:var(--ink-mute); }
#tos .ccf-hero > .btn-ghost{ grid-column:2; justify-self:end; margin-left:0; }
/* phones: the button under the label — beside it, the 200px button
   squeezed "revenue · 7 days · mer · orders" onto two lines at 402px */
@media (max-width:480px){
  #tos .ccf-hero{ grid-template-columns:minmax(0,1fr); }
  #tos .ccf-hero > .btn-ghost{ grid-column:1; justify-self:start; }
  /* phones: six tiles need 661px in a 402px rail and scroll-snap is
     deliberately off here, so two of them — including the red "EON to
     approve" alert — rendered entirely off-screen with no way to reach
     them. Two rows of three. minmax(0,1fr) is the house primitive; the
     nth-child(3n+1) keeps the hairline rhythm the strip is built on
     (numbers on a hairline, not boxes) instead of deleting every rule.
     :not(.ccf-strip): the command hero's strip carries this class too
     (app.js gives it 'tos-pulse ccf-strip') with only TWO children, so
     the three-column grid left a third of the phone blank and squeezed
     the naira hero into a 123px column — 08-28 vet. The strip keeps its
     own display:block. */
  #tos .tos-pulse:not(.ccf-strip){ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:10px; overflow-x:visible; }
  #tos .tos-pulse .tos-stat:nth-child(3n+1){ border-left:0; padding-left:0; }
}
/* captions on THIS page — .a3-ctx was defined only under .mk-ads3
   (marketing), so "Do next — due in the next 48 hours" and "today
   18:01" rendered at 15px body size here (IMG_9375) */
#tos .a3-ctx{ font-size:12.5px; color:var(--ink-mute); }
/* brief rows — a grid: the title wraps in its column, the value keeps
   the right edge of the first line (was flex + wrap: any title over
   ~300px dropped the time to its own left-aligned line) */
#tos .brief-row{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:2px 12px; align-items:baseline; padding:8px 0;
  border-top:1px solid var(--line); font-size:13.5px; }
#tos .brief-row__l{ min-width:0; overflow-wrap:anywhere; }
#tos .brief-row__v{ text-align:right; white-space:nowrap; max-width:46vw;
  overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); }
/* money and times are short by construction; the one FREE-TEXT value
   (an approval's kind, e.g. "adviser bank instruction") wraps inside
   its 46vw column instead of losing its tail to an ellipsis */
#tos .brief-row__v--wrap{ white-space:normal; overflow:visible;
  text-overflow:clip; overflow-wrap:anywhere; }
#tos .ccf-hero__ngn{ color:var(--posf-lime,#c8ff4d); margin-left:10px; }
#tos .ccf-stats{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:16px; }
#tos .ccf-stat{ background:none; border:0; padding:0; font-family:var(--mono);
  font-size:10px; letter-spacing:.06em; text-transform:lowercase;
  color:var(--ink-mute); text-align:left; }
#tos .ccf-stat b{ color:var(--ink); font-weight:600; margin-right:5px; }
#tos .ccf-stat--warn b{ color:var(--danger); }
#tos .ccf-stat--live{ cursor:pointer; }
#tos .ccf-stat--live b{ color:var(--posf-lime,#c8ff4d); }

/* numbered lowercase sections — the marketing DESIGN FLOW rail */
#tos-body{ counter-reset:ccsec; }
#tos .cc-sec{ counter-increment:ccsec; font-family:var(--mono); font-size:10px;
  font-weight:500; letter-spacing:.16em; text-transform:lowercase;
  color:var(--ink-mute); margin:30px 0 2px; padding-bottom:8px;
  border-bottom:1px solid var(--line); }
#tos .cc-sec::before{ content:"0" counter(ccsec) "  "; color:var(--posf-lime,#c8ff4d); }
#tos .cc-sec__s{ text-transform:lowercase; letter-spacing:.04em; font-size:10px;
  color:var(--posf-dim,#6b6b75); }

/* decide queue — a numbered ledger, not cards */
#tos .ccf-queue{ counter-reset:ccq; }
#tos .ccf-queue .cc-card{ counter-increment:ccq; position:relative; padding-left:36px; }
#tos .ccf-queue .cc-card::before{ content:counter(ccq, decimal-leading-zero);
  position:absolute; left:2px; top:16px; font-family:var(--mono); font-size:10px;
  color:var(--posf-lime,#c8ff4d); }
#tos .ccf-queue .cc-card--crit::before{ color:var(--danger); }
#tos .cc-card{ background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  border-radius:0; padding:14px 2px 13px; margin-bottom:0; }
#tos .cc-card__t{ font-weight:500; font-size:13.5px; line-height:1.4; }
#tos .cc-card__why{ font-size:12px; line-height:1.5; }
#tos .cc-card__do span{ color:var(--posf-lime,#c8ff4d); font-family:var(--mono);
  font-size:10px; text-transform:lowercase; letter-spacing:.08em; }
#tos .cc-card__foot{ flex-wrap:wrap; margin-top:10px; }
/* phones: the DECIDE queue's numbered ledger. Its 36px counter indent
   leaves a 332px column, and a machine-generated ad name has no break
   opportunity — it runs off the screen mid-token with no ellipsis and no
   scroll. All three slots carry server free text (a.title / a.why /
   a.next_step in _ccActionCard). */
@media (max-width:560px){
  #tos .cc-card__t, #tos .cc-card__why, #tos .cc-card__do{ overflow-wrap:anywhere; }
}

/* bracket buttons — [ task it ] */
#tos .cc-btn{ background:transparent; color:var(--posf-lime,#c8ff4d); border:0;
  border-radius:0; font-family:var(--mono); font-size:11px; font-weight:500;
  padding:4px 2px; text-transform:lowercase; letter-spacing:.04em; }
#tos .cc-btn::before{ content:"[ "; color:var(--posf-dim,#6b6b75); }
#tos .cc-btn::after{ content:" ]"; color:var(--posf-dim,#6b6b75); }
#tos .cc-btn--ghost{ background:transparent; color:var(--ink-dim); border:0; }
#tos .ccf-link{ font-family:var(--mono); font-size:11px; color:var(--ink-dim);
  text-decoration:none; text-transform:lowercase; letter-spacing:.04em; }
#tos .ccf-link::before{ content:"[ "; color:var(--posf-dim,#6b6b75); }
#tos .ccf-link::after{ content:" ]"; color:var(--posf-dim,#6b6b75); }

/* quiet mono fragments */
#tos .ccf-ngn{ font-family:var(--mono); font-size:10.5px; color:var(--posf-lime,#c8ff4d); }
#tos .ccf-tag{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
#tos .ccf-quiet{ padding:22px 2px; color:var(--ink-mute); font-size:12.5px;
  font-family:var(--mono); }

/* watch lines + kpis + departments — flat rows */
#tos .cc-line{ font-size:12px; padding:10px 2px; border-bottom:1px solid var(--line-soft);
  border-bottom-style:solid; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* phones: nowrap+hidden on a row whose whole job is to deliver a ₦ figure.
   Four of ten watch rows painted their money past x=402, where the
   clipping ancestor is .tos-body{overflow-x:hidden} — no gesture reaches
   it and no ellipsis marks it. Let them wrap. */
@media (max-width:560px){
  #tos .cc-line{ white-space:normal; overflow:visible; text-overflow:clip;
    overflow-wrap:anywhere; line-height:1.45; }
}
#tos .cc-line b{ font-family:var(--mono); font-weight:600; }
#tos .cc-kpi{ background:transparent; border:0; border-top:1px solid var(--line-soft);
  border-radius:0; padding:10px 2px; }
#tos .cc-kpi--alert{ border-color:var(--line-soft); }
#tos .cc-kpi--alert .cc-kpi__v{ color:var(--danger); }
#tos .cc-depts{ margin-bottom:24px; gap:6px; }
#tos .cc-dept{ border-radius:0; background:transparent; border:1px solid var(--line-soft); }
#tos .cc-dept--alert{ border-color:color-mix(in srgb, var(--danger) 45%, transparent); }

/* task rows — hairline ledger; board columns keep bordered squares */
#tos .tos-card{ background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  border-radius:0; padding:12px 2px; margin-bottom:0; }
#tos .tos-card:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
#tos .tos-card__t{ font-weight:500; font-size:13.5px; }
#tos .tos-card__m{ display:block; margin-top:5px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
#tos .tos-card__m > *{ display:inline; }
#tos .tos-dotsep{ color:var(--posf-dim,#6b6b75); }
#tos .tos-col__drop .tos-card{ border:1px solid var(--line-soft); border-radius:0;
  background:var(--bg-card); padding:10px 12px; margin-bottom:6px; }
/* the board's meta line is the card's whole payload — name · velocity ·
   due · ₦. In a 238px lane, nowrap+hidden discarded up to 180px of it:
   13 of 25 cards clipped, 13 of 17 naira figures and 4 of 8 due chips
   painted entirely outside their own clip box. Scoped to the board so
   My Work / List / Department keep their one-line meta. */
#tos .tos-col__drop .tos-card__m{ white-space:normal; overflow:visible; }
#tos .tos-eon{ background:transparent; color:var(--posf-lime,#c8ff4d); border-radius:0;
  border:1px solid color-mix(in srgb, var(--posf-lime,#c8ff4d) 35%, transparent);
  padding:0 5px; }
#tos .tos-pri{ border-radius:0; }
#tos .tos-pri--high{ background:transparent; border:1px solid
  color-mix(in srgb, var(--danger) 40%, transparent); padding:0 5px; }
#tos .tos-cartfold summary{ cursor:pointer; list-style:none; }
#tos .tos-cartfold summary::-webkit-details-marker{ display:none; }
#tos .tos-cartfold summary::before{ content:"+ "; color:var(--posf-lime,#c8ff4d);
  font-family:var(--mono); }
#tos .tos-cartfold[open] summary::before{ content:"− "; }
#tos .tos-seg{ background:transparent; border:1px solid var(--line-soft);
  border-radius:0; padding:0; }
#tos .tos-seg button{ border-radius:0; text-transform:lowercase; letter-spacing:.06em; flex:none; }
#tos .tos-seg button.on{ background:var(--posf-lime,#c8ff4d); color:#0b0b0c; }
#tos .csw-card{ border-radius:0; background:transparent; border:1px solid var(--line-soft); }

/* ── People OS felt-polish (2026-07-26) ─────────────────────────────── */
/* Quiet repaint: re-rendering the SAME tab suppresses the entrance
   animations — panels must not "rise" on every refresh/action. */
.pos-surface--still .pos-panel,
.pos-surface--still .pos-goal{animation:none!important}
/* Aurora anchor #10 — People OS header band. Masked to fade before the
   ribbon so it never sits behind numbers (FLAT LAW). */
.pos-sh{position:relative;overflow:hidden}
.pos-heroband{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.32;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 55%,transparent 100%)}
.pos-sh__top,.pos-ribbon{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .pos-heroband{display:none} }

/* ── Obligations — the money's word (2026-07-27) ─────────────────────── */
.cc-oblig{margin-bottom:16px}
.cc-oblig__strip{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  padding:14px 14px 12px;background:var(--panel,rgba(127,127,127,.05));
  border:1px solid var(--line-soft,rgba(127,127,127,.15));border-radius:10px;margin-bottom:10px}
.cc-oblig__cell b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cc-oblig__cell span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute,#8a8a93)}
.cc-oblig__cell--out b{color:var(--warn,#e0a63f)}
.cc-oblig__cell--in b{color:var(--ok,#3ddc97)}
.cc-oblig__verdict{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--ink-dim,#b9b9c2);align-self:center}
.cc-oblig__verdict.is-red{color:var(--bad,#ff5c5c)}
.cc-oblig__ledger{display:flex;flex-direction:column}
.cc-oblig__row{display:grid;grid-template-columns:64px 1fr auto 110px auto;gap:10px;
  align-items:baseline;padding:8px 4px;border-bottom:1px solid var(--line-soft,rgba(127,127,127,.12));
  font-size:13px}
.cc-oblig__row.is-overdue .cc-oblig__d,.cc-oblig__row.is-overdue .cc-oblig__n{color:var(--bad,#ff5c5c)}
.cc-oblig__d{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute,#8a8a93)}
.cc-oblig__l i{display:block;font-style:normal;font-size:11px;color:var(--ink-mute,#8a8a93)}
.cc-oblig__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute,#8a8a93)}
.cc-oblig__n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.cc-oblig__col{padding:10px 4px;font-size:12.5px}
.cc-oblig__col i{display:block;font-style:normal;font-size:11px;color:var(--ink-mute,#8a8a93);margin-top:2px}
.cc-oblig__wall{padding:8px 10px;margin-top:6px;font-size:12px;border-left:2px solid var(--warn,#e0a63f);
  color:var(--ink-dim,#b9b9c2)}
/* tax parked (2026-07-29): a quiet note, not an alarm — nothing is wrong,
   the operator chose this. Flat 1px, no decoration (operator design law). */
.cc-oblig__park{padding:10px;margin-top:6px;border:1px solid var(--line,#2a2a30)}
.cc-oblig__park-t{font-size:12.5px;color:var(--ink,#e8e8ee)}
.cc-oblig__park-w{font-size:11.5px;color:var(--ink-mute,#8a8a93);margin-top:3px;line-height:1.45}
.cc-oblig__park-b{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-dim,#b9b9c2);background:none;
  border:1px solid var(--line,#2a2a30);padding:5px 9px;cursor:pointer}
.cc-oblig__park-b:hover{color:var(--ink,#e8e8ee)}
.cc-oblig__park-b:disabled{opacity:.5;cursor:default}
/* hand-curated commitments: settle/void taps + the add form */
.cc-oblig__acts{display:flex;gap:6px}
.cc-oblig__act{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute,#8a8a93);background:none;
  border:1px solid var(--line-soft,rgba(127,127,127,.25));border-radius:6px;
  padding:3px 8px;cursor:pointer}
.cc-oblig__act:hover{color:var(--ink,#e8e8ee);border-color:var(--ink-mute,#8a8a93)}
.cc-oblig__act--void:hover{color:var(--bad,#ff5c5c);border-color:var(--bad,#ff5c5c)}
.cc-oblig__addrow{padding:8px 4px 2px}
.cc-oblig__form{display:none}
.cc-oblig__form.is-open{display:flex;flex-wrap:wrap;gap:8px;padding:10px 4px;
  border-bottom:1px solid var(--line-soft,rgba(127,127,127,.12))}
.cc-oblig__form input,.cc-oblig__form select{font-size:12.5px;padding:6px 8px;
  background:var(--panel,rgba(127,127,127,.05));color:inherit;
  border:1px solid var(--line-soft,rgba(127,127,127,.25));border-radius:6px}
.cc-oblig__form input[name=oblig-label]{flex:1 1 240px}
/* phones: the 1fr label track resolved to 0px — greedy `auto` k/n/acts
   tracks ate the whole 362px content box and the blanket
   `#tos .tos-body *{min-width:0}` removed the automatic minimum that
   would have defended it, so the commitment label painted one word per
   line straight over its own kind tag. Re-cut to three tracks and give
   the label its own row. */
@media (max-width:560px){
  #tos .cc-oblig__row{ grid-template-columns:64px minmax(0,1fr) auto; row-gap:4px; }
  #tos .cc-oblig__l{ grid-column:2 / -1; overflow-wrap:anywhere; }
}

/* ── Decisions (proposal cards) — operator design law 2026-07-28:
   clear · minimalist · bold · quiet authority. Ghost rank numeral,
   loud title, one weighted control. Flat: 1px lines, no shadows,
   no gradients (EON FLAT LAW). ── */
.ccp-queue{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
/* flex-wrap so the note drawer can sit INSIDE the card on its own full
   row (2026-07-29). It has to live in .ccp, not beside it — every decide
   path removes .closest('.ccp'), and a sibling drawer would be orphaned
   the moment a card is answered. */
.ccp{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  background:var(--panel,#141419);border:1px solid var(--line,#232329);
  border-radius:10px;padding:16px 18px}
.ccp__n{font:700 34px/1 ui-monospace,Menlo,monospace;
  color:transparent;-webkit-text-stroke:1px var(--posf-dim,#4a5a50);
  min-width:34px;text-align:center;user-select:none}
.ccp__body{flex:1;min-width:0}
.ccp__t{font-weight:700;font-size:15.5px;line-height:1.35;
  color:var(--ink,#e8f0ea);letter-spacing:-.01em}
.ccp__why{color:var(--mut,#93a69a);font-size:13.5px;line-height:1.5;
  margin-top:4px;max-width:62ch}
.ccp__meta{font:500 11.5px ui-monospace,Menlo,monospace;
  color:var(--posf-dim,#5f7268);margin-top:8px;letter-spacing:.02em}
.ccp__meta b{color:var(--eon-green,#3ddc84);font-weight:700}
.ccp__class{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;
  border:1px solid var(--line,#232329);border-radius:3px;padding:1px 6px}
.ccp__act{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.ccp-yes{font:700 13px/1 inherit;letter-spacing:.06em;cursor:pointer;
  background:var(--eon-green,#3ddc84);color:#0b0f0d;border:none;
  border-radius:6px;padding:10px 22px}
.ccp-yes:hover{filter:brightness(1.08)}
.ccp-no{font:600 12px/1 inherit;cursor:pointer;background:transparent;
  color:var(--mut,#93a69a);border:1px solid var(--line,#232329);
  border-radius:6px;padding:8px 22px}
.ccp-no:hover{color:var(--ink,#e8f0ea);border-color:var(--posf-dim,#5f7268)}
.ccp-yes:disabled,.ccp-no:disabled{opacity:.5;cursor:default}
/* multi-select (2026-07-29): the tick sits ahead of the rank numeral so a
   column of them reads as one list to run down. 20px box — thumb-sized on
   the phone, which is where he answers these. */
.ccp__pick{display:flex;align-items:center;padding-top:6px;cursor:pointer}
.ccp__cb{width:20px;height:20px;accent-color:var(--eon-green,#3ddc84);cursor:pointer}
/* phones: the column of decision buttons took 171.3px of a 370px card,
   leaving .ccp__body 105px — the ad name then had no break opportunity
   and painted 77px past the screen edge, over the buttons. The card
   already carries flex-wrap:wrap and .ccp-drawer/.ccp__consq already use
   flex-basis:100%, so a full-width action row is the pattern it was
   built for. */
@media (max-width:560px){
  #tos .ccp__act{ flex:1 1 100%; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
  #tos .ccp__t, #tos .ccp__why{ overflow-wrap:anywhere; }
}
/* The action bar only exists while something is ticked (hidden attr). */
.ccp-bulk{display:flex;align-items:center;gap:8px;margin-top:10px;
  padding:10px 12px;background:var(--panel,#141419);
  border:1px solid var(--line,#232329);border-radius:10px}
.ccp-bulk[hidden]{display:none}
.ccp-bulk__n{font:600 12px ui-monospace,Menlo,monospace;
  color:var(--mut,#93a69a);letter-spacing:.02em}
.ccp-bulk__b{font:600 12px/1 inherit;cursor:pointer;background:transparent;
  color:var(--mut,#93a69a);border:1px solid var(--line,#232329);
  border-radius:6px;padding:8px 14px}
.ccp-bulk__b:hover{color:var(--ink,#e8f0ea);border-color:var(--posf-dim,#5f7268)}
.ccp-bulk__b--yes{font-weight:700;background:var(--eon-green,#3ddc84);
  color:#0b0f0d;border-color:transparent}
.ccp-bulk__b--yes:hover{filter:brightness(1.08);color:#0b0f0d}
.ccp-bulk__b:disabled{opacity:.5;cursor:default}

/* ── the note drawer (2026-07-29) ──────────────────────────────
   A pencil next to YES/no. Tap it and a full-width row opens under the
   card: what he wants changed, and the door to send it to the build
   queue. Filled note = the icon lights. */
.ccp-note{display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;color:var(--mut,#93a69a);
  border:1px solid var(--line,#232329);border-radius:6px;padding:7px 10px}
.ccp-note:hover{color:var(--ink,#e8f0ea);border-color:var(--posf-dim,#5f7268)}
.ccp-note.on{color:var(--eon-green,#3ddc84);border-color:var(--eon-green,#3ddc84)}
.ccp-drawer{flex-basis:100%;width:100%;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line,#232329)}
.ccp-drawer[hidden]{display:none}
.ccp-drawer__l{display:block;font-size:12px;color:var(--mut,#93a69a);
  margin-bottom:6px}
.ccp-drawer__ta{width:100%;box-sizing:border-box;resize:vertical;
  font:inherit;font-size:13px;line-height:1.45;padding:9px 10px;
  color:var(--ink,#e8f0ea);background:var(--bg,#0b0f0d);
  border:1px solid var(--line,#232329);border-radius:6px}
.ccp-drawer__ta:focus{outline:none;border-color:var(--posf-dim,#5f7268)}
.ccp-drawer__row{display:flex;align-items:center;gap:8px;margin-top:8px}
.ccp-drawer__msg{font-size:11.5px;color:var(--mut,#93a69a)}
.ccp-drawer__b{font:600 12px/1 inherit;cursor:pointer;background:transparent;
  color:var(--mut,#93a69a);border:1px solid var(--line,#232329);
  border-radius:6px;padding:8px 14px}
.ccp-drawer__b:hover{color:var(--ink,#e8f0ea);border-color:var(--posf-dim,#5f7268)}
.ccp-drawer__b--go{font-weight:700;background:var(--eon-green,#3ddc84);
  color:#0b0f0d;border-color:transparent}
.ccp-drawer__b--go:hover{filter:brightness(1.08);color:#0b0f0d}
.ccp-drawer__b:disabled{opacity:.5;cursor:default}
.ccp-drawer__queued{font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--eon-green,#3ddc84)}

.ccp--auto{border-style:dashed}
.ccp__n--auto,.ccp__n--ok{-webkit-text-stroke:1px var(--eon-green,#3ddc84);font-size:22px;padding-top:4px}
/* phone (vet 2026-09-02): .ccp had no small-screen rule — the action
   column ("the work is done" + its hint) is the widest child, so on a
   390px screen it crushed the title to ~150px. Under 560px the row
   stacks: body first, actions as one full-width row of thumb targets. */
@media(max-width:560px){
  .ccp{flex-direction:column;gap:10px;padding:14px 14px}
  /* the ORDINAL goes; the two semantic glyphs stay (Opus vet, seat 2
     #6): "A" is the only row-level mark that EON acted alone, "✓" the
     only one on the built strip */
  .ccp__n:not(.ccp__n--auto):not(.ccp__n--ok){display:none}
  /* #tos .ccp__act already sets row + wrap (tasks.css, the older phone
     block, pinned by the containment suite) — only the two new
     declarations live here (seat 2 #12) */
  .ccp__act{width:100%;align-items:center}
  .ccp__act>button{flex:1 1 auto;min-height:44px}
  .ccp__act>.ccp-note{flex:0 0 auto;min-width:44px}
  .ccp-act__hint{flex-basis:100%;text-align:left}
}

/* ── The receipts ledger + the fold (redesign 2026-08-09; operator:
   autonomous growth · less noise · plain words · clear buttons ·
   animated). ONE motion system for the whole board: ledger rows
   settle in on a 28ms stagger, the week-rail draws once, folds open
   on a grid-row ease. FLAT LAW holds — hairline strokes, no glow,
   EON green on the dark. prefers-reduced-motion stills all of it. ── */
.ccp-queue>.ccp{animation:ccr-settle .4s ease both;
  animation-delay:calc(var(--i,0)*28ms)}
.ccr-card{background:var(--panel,#141419);border:1px solid var(--line,#232329);
  border-radius:10px;padding:12px 16px 10px}
.ccr-list{display:flex;flex-direction:column}
.ccr{display:flex;align-items:baseline;gap:10px;padding:7px 2px;flex-wrap:wrap;
  border-top:1px solid var(--line,#232329);
  animation:ccr-settle .4s ease both;animation-delay:calc(var(--i,0)*28ms)}
.ccr-list .ccr:first-child{border-top:none}
.ccr__dot{width:6px;height:6px;border-radius:50%;flex:none;align-self:center;
  background:var(--eon-green,#3ddc84)}
.ccr--fail .ccr__dot{background:transparent;border:1px solid var(--warn,#ffb347)}
.ccr__lane{flex:none;font:600 10.5px ui-monospace,Menlo,monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--eon-green,#3ddc84);
  border:1px solid var(--line,#232329);border-radius:3px;padding:2px 6px;
  white-space:nowrap}
.ccr--fail .ccr__lane{color:var(--warn,#ffb347)}
.ccr__what{flex:1;min-width:0;font-size:13px;line-height:1.45;
  color:var(--ink,#e8f0ea);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ccr__meta{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font:500 11px ui-monospace,Menlo,monospace;
  color:var(--posf-dim,#5f7268);letter-spacing:.02em;white-space:nowrap}
.ccr--fail .ccr__meta{color:var(--warn,#ffb347)}
@media(max-width:560px){.ccr{flex-wrap:wrap}.ccr__what{flex-basis:100%;order:3}}
@keyframes ccr-settle{from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}

/* the week-rail — seven ticks, one dot per move, newest on the right */
.ccr-rail{display:block;width:100%;height:auto;margin:0 0 8px}
.ccr-rail__line,.ccr-rail__tick{stroke:var(--line,#232329);stroke-width:1}
.ccr-rail__line{stroke-dasharray:680;stroke-dashoffset:680;
  animation:ccr-draw .9s ease forwards}
.ccr-rail__day{font:500 9px ui-monospace,Menlo,monospace;
  fill:var(--posf-dim,#5f7268);letter-spacing:.08em}
.ccr-rail__dot{fill:var(--eon-green,#3ddc84);opacity:0;
  animation:ccr-pop .3s ease forwards;
  animation-delay:calc(.35s + var(--i,0)*40ms)}
.ccr-rail__dot--fail{fill:none;stroke:var(--warn,#ffb347);stroke-width:1.2}
@keyframes ccr-draw{to{stroke-dashoffset:0}}
@keyframes ccr-pop{to{opacity:1}}

/* the fold — any log longer than the room collapses behind one honest
   button; grid-template-rows animates the open with no height math */
.tos-fold{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease}
.tos-fold.is-open{grid-template-rows:1fr}
.tos-fold__in{overflow:hidden;min-height:0}
.tos-fold__btn{display:block;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px dashed var(--line,#232329);
  border-radius:6px;color:var(--mut,#93a69a);
  font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.04em;
  padding:7px 10px;margin:6px 0}
.tos-fold__btn:hover{color:var(--ink,#e8f0ea);
  border-color:var(--posf-dim,#5f7268)}
.tos-fold__btn.is-open{border-style:solid}

/* built strip — the button says what tapping it does */
.ccp-yes--done{background:transparent;color:var(--eon-green,#3ddc84);
  border:1px solid var(--eon-green,#3ddc84)}
.ccp-yes--done:hover{background:var(--eon-green,#3ddc84);color:#0b0f0d;
  filter:none}
.ccp-act__hint{font:500 10px ui-monospace,Menlo,monospace;
  color:var(--posf-dim,#5f7268);letter-spacing:.03em;text-align:center}

/* ── ceiling 2026-09-02: the receipt tells its whole story ──────────
   naira + after-grade ride inside the what; a failed move carries its
   why on a full-width line; the see-it door and UNDO sit on the row;
   undone / blocked are their own outcome states, never "failed". */
.ccr__ngn{margin-left:8px;font:600 11px ui-monospace,Menlo,monospace;
  color:var(--eon-green,#3ddc84);letter-spacing:.02em;white-space:nowrap}
.ccr__grade{margin-left:8px;font:500 11px ui-monospace,Menlo,monospace;
  color:var(--mut,#93a69a);letter-spacing:.02em}
.ccr__why{flex-basis:100%;order:9;font-size:12px;line-height:1.45;
  color:var(--warn,#ffb347);padding:2px 0 2px 16px}
.ccr__door,.ccr__undo{flex:none;font:600 11px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.04em;cursor:pointer;background:transparent;
  color:var(--mut,#93a69a);border:1px solid var(--line,#232329);
  border-radius:5px;padding:5px 9px;min-height:28px}
.ccr__door:hover,.ccr__undo:hover{color:var(--ink,#e8f0ea);
  border-color:var(--posf-dim,#5f7268)}
.ccr__undo{color:var(--eon-green,#3ddc84);border-color:var(--eon-green,#3ddc84)}
.ccr--undoable{border-left:1px dashed var(--eon-green,#3ddc84);padding-left:8px}
.ccr--undone .ccr__dot{background:transparent;border:1px solid var(--mut,#93a69a)}
.ccr--undone .ccr__lane,.ccr--undone .ccr__meta{color:var(--mut,#93a69a)}
.ccr--blocked .ccr__dot{background:transparent;border:1px solid var(--posf-dim,#5f7268)}
.ccr--blocked .ccr__lane,.ccr--blocked .ccr__meta{color:var(--posf-dim,#5f7268)}
.ccr-rail__plus{font:600 9px ui-monospace,Menlo,monospace;
  fill:var(--mut,#93a69a);letter-spacing:.04em}
/* the phone tier of the rail: an HTML day row with real font size and
   thumb-sized cells; the SVG's labels scaled to ~4.6px at 360px */
.ccr-days{display:none}
@media(max-width:560px){
  .ccr-rail{display:none}
  .ccr-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 8px}
  .ccr-days__d{display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 0;border:1px solid var(--line,#232329);border-radius:6px;
    font:500 10px ui-monospace,Menlo,monospace;color:var(--posf-dim,#5f7268);
    letter-spacing:.06em}
  .ccr-days__d b{font-size:13px;color:var(--mut,#93a69a)}
  .ccr-days__d.is-on b{color:var(--eon-green,#3ddc84)}
  .ccr-days__d.has-fail{border-color:var(--warn,#ffb347)}
  .ccr__door,.ccr__undo{min-height:36px;padding:8px 12px}
}
/* the scoreboard line — the operator's own criterion, where he decides */
.ccr-score{padding:10px 12px;border:1px solid var(--line,#232329);
  border-radius:8px;background:var(--panel,#141419)}
.ccr-score__l{font:600 12.5px/1.5 ui-monospace,Menlo,monospace;
  color:var(--ink,#e8f0ea);letter-spacing:.01em}
.ccr-score.is-behind .ccr-score__l{color:var(--warn,#ffb347)}
.ccr-score__w{margin-top:4px;font:500 11.5px/1.45 ui-monospace,Menlo,monospace;
  color:var(--warn,#ffb347)}
/* trust per lane — small chips, armed lanes in the accent */
.ccr-lanes{display:flex;flex-wrap:wrap;gap:6px}
.ccr-lane{font:500 10.5px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.02em;
  color:var(--posf-dim,#5f7268);border:1px solid var(--line,#232329);
  border-radius:4px;padding:4px 8px}
.ccr-lane b{font-weight:700;color:var(--mut,#93a69a)}
.ccr-lane.is-armed{border-color:var(--eon-green,#3ddc84)}
.ccr-lane.is-armed b{color:var(--eon-green,#3ddc84)}
/* a watch row's door */
.cc-line__do{margin-left:8px;padding:3px 8px;font-size:11px}

@media (prefers-reduced-motion:reduce){
  .ccp-queue>.ccp,.ccr,.ccr-rail__dot{animation:none;opacity:1;transform:none}
  .ccr-rail__line{animation:none;stroke-dashoffset:0}
  .tos-fold{transition:none}
}

/* ── Ideas tab (p560) ─────────────────────────────────────────────────
   Decisions waiting on the operator, surfaced where he already looks.
   Deliberately plainer than a task card — these are not jobs, and they
   must not read like one. */
.tos-idea{
  display:block; padding:10px 12px; margin-top:6px; text-decoration:none;
  background:var(--bg-card); border:1px solid var(--line); border-radius:10px;
  transition:border-color .15s ease;
}
.tos-idea:hover{ border-color:var(--accent); }
.tos-idea-t{ font-size:13px; font-weight:600; line-height:1.35; color:var(--ink); }
.tos-idea-w{
  margin-top:4px; font-size:12px; line-height:1.5; color:var(--ink-mute);
}
.tos-idea-go{ margin-top:10px; }
.tos-idea-go a{
  font-size:11.5px; font-family:var(--mono); color:var(--accent);
  text-decoration:none;
}
.tos-idea-go a:hover{ text-decoration:underline; }

/* ════════════════════════════════════════════════════════════════
   DESIGN FLOW — IDEAS editorial layer (2026-07-31, feature_requests
   5071a0b4). Operator: "i want the idea section to be more pronounced
   ... use the folder in downloads for design reference". Grammar from
   the reference boards: huge lowercase mast word with a period; a
   numbered 001-index as structure; the card's HERO is its biggest
   NUMBER; bracketed micro-labels in tiny wide-tracked mono; ONE
   saturated accent block per card; ruthless negative space. Adapted
   onto EON's internal dark/green tokens — EON GREEN is THE accent on
   EON dark surfaces (durable rule 2026-07-08); the reference's
   white/red palette stays in the reference (CRUX yellow/black is
   customer-facing only). FLAT LAW holds: 1px lines, no shadows,
   square. Append-only layer over the tos-* / cc-* foundation above.
   The old .tos-idea rules above are retired by this layer (markup
   moved to .idm/.idc/.idr) — kept for fleet stragglers mid-deploy.
   ════════════════════════════════════════════════════════════════ */

/* the mast — 'ideas.' as a section, not a list heading */
.idm{ padding:26px 2px 6px; }
.idm-mast{ font-weight:800; font-size:clamp(44px, 11vw, 76px); line-height:.92;
  letter-spacing:-0.04em; text-transform:lowercase; color:var(--ink,#e8f0ea); }
.idm-dot{ color:var(--posf-lime,#c8ff4d); }
.idm-line{ margin-top:14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:lowercase; color:var(--ink-mute); }
.idm-count{ font-size:15px; font-weight:700; color:var(--posf-lime,#c8ff4d);
  letter-spacing:0; margin-right:6px; }
.idm-k{ margin-top:8px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--posf-dim,#6b6b75); }
/* 2026-08-02: the micro-index chips are TABS now — filter to a section
   so all 35+ waiting ideas are reachable, not the first eight. */
.idm-chip{ appearance:none; background:none; border:none; padding:2px 6px 2px 0;
  font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer;
  color:var(--posf-dim,#6b6b75); }
.idm-chip:hover{ color:var(--ink); }
.idm-chip.on{ color:var(--acc,#d4ff3a); }
.idm-morebtn{ appearance:none; background:none; border:1px solid var(--line);
  border-radius:6px; padding:7px 12px; cursor:pointer; font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; text-transform:lowercase;
  color:var(--ink-dim); }
.idm-morebtn:hover{ color:var(--ink); border-color:var(--ink-mute); }

/* numbered lowercase section heads — the same rail as the command view */
.idm-sec{ font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:lowercase; color:var(--ink-mute);
  margin:34px 0 2px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.idm-sec__s{ letter-spacing:.04em; color:var(--posf-dim,#6b6b75); margin-left:8px; }
.idm-fail,.idm-quiet{ padding:18px 2px; font-family:var(--mono); font-size:11px;
  color:var(--ink-mute); }
.idm-fail{ color:var(--warn,#e0a63f); }
/* The full-story sheet (2026-08-02, fr efbe9476): five labelled parts,
   plain words, rendered from the stored/generated detailed_brief. */
.story-txt{ font-size:13px; line-height:1.6; color:var(--ink,#e8e8ec); padding:6px 2px 20px; }
.story-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--posf-dim,#6b6b75); margin:18px 0 6px; padding-top:10px; border-top:1px solid var(--line); }
.story-h:first-child{ margin-top:2px; padding-top:0; border-top:none; }
.story-raw{ font-family:var(--mono); font-size:10.5px; line-height:1.5; color:var(--ink-mute);
  white-space:pre-wrap; word-break:break-word; overflow-x:auto; padding:10px; border:1px solid var(--line); }
.idm-more{ padding:12px 2px; }
.idm-more a{ font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-transform:lowercase; color:var(--ink-dim); text-decoration:none; }
.idm-more a:hover{ color:var(--ink); }
.idm-foot{ margin-top:30px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--posf-dim,#6b6b75); line-height:1.6; }

/* the idea card — 001-index + hero number + one calm claim */
.idc{ display:flex; gap:14px; padding:22px 2px 20px;
  border-bottom:1px solid var(--line-soft); }
.idc-ix{ flex:none; font-family:var(--mono); font-size:10px; padding-top:6px;
  color:var(--posf-lime,#c8ff4d); letter-spacing:.08em; }
.idc-main{ flex:1; min-width:0; }
/* ONE saturated accent block per card — the hero number rides it */
.idc-hero{ display:inline-flex; align-items:baseline; gap:10px;
  background:var(--posf-lime,#c8ff4d); color:#0b0f0d; padding:6px 12px 7px;
  margin-bottom:12px; }
.idc-hero__n{ font-weight:800; font-size:clamp(26px, 7vw, 40px); line-height:1;
  letter-spacing:-0.03em; }
.idc-hero__u{ font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; }
/* the hero's arithmetic — a money headline always shows its math
   (plain-words contract, operator 2026-08-01) */
.idc-hero__m{ margin:-2px 0 6px; font-family:var(--mono); font-size:10px;
  color:var(--mut,#93a69a); }
.idc-t{ font-weight:700; font-size:15.5px; line-height:1.35; letter-spacing:-.01em; }
.idc-why{ margin-top:5px; font-size:13px; line-height:1.5;
  color:var(--mut,#93a69a); max-width:62ch; }
/* bracketed micro-labels — [ merchandising ] [ filed 07-30 ] */
.idc-k{ margin-top:10px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--posf-dim,#6b6b75); }
.idc-act{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.idc-sp{ flex:1; }
.idc-see{ background:transparent; border:0; cursor:pointer; padding:4px 2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-transform:lowercase; color:var(--posf-lime,#c8ff4d); }
.idc-see::before{ content:"[ "; color:var(--posf-dim,#6b6b75); }
.idc-see::after{ content:" ]"; color:var(--posf-dim,#6b6b75); }
.idc-yes{ font:700 13px/1 inherit; letter-spacing:.06em; cursor:pointer;
  background:var(--eon-green,#3ddc84); color:#0b0f0d; border:none; padding:10px 18px; }
.idc-yes:hover{ filter:brightness(1.08); }
.idc-no{ font:600 12px/1 inherit; cursor:pointer; background:transparent;
  color:var(--mut,#93a69a); border:1px solid var(--line,#232329); padding:9px 16px; }
.idc-no:hover{ color:var(--ink,#e8f0ea); border-color:var(--posf-dim,#5f7268); }
.idc-yes:disabled,.idc-no:disabled{ opacity:.5; cursor:default; }
/* the plain-words line under the buttons — what each tap causes */
.idc-consq{ margin-top:10px; font-size:11.5px; line-height:1.5;
  color:var(--posf-dim,#6b6b75); max-width:70ch; }

/* plain rows for code ideas + gaps (no decide door here — they link
   out to the surface that carries the diff) */
.idr{ display:block; padding:13px 2px; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit; }
.idr:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.idr-t{ font-weight:500; font-size:13.5px; line-height:1.4; }
.idr-w{ margin-top:4px; font-size:12px; line-height:1.5; color:var(--ink-mute); }

/* the evidence sheet — 'see it' opens the rows an idea was built from */
.iev{ padding:4px 2px 30px; }
.iev-mast{ font-weight:800; font-size:clamp(30px, 8vw, 52px); line-height:.95;
  letter-spacing:-0.035em; text-transform:lowercase; }
.iev-title{ margin-top:12px; font-weight:700; font-size:14.5px; line-height:1.35; }
.iev-why{ margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--mut,#93a69a); }
.iev-facts{ margin-top:4px; }
.iev-fact{ display:flex; gap:12px; padding:8px 2px;
  border-bottom:1px solid var(--line-soft); font-size:12px; }
.iev-fact__k{ flex:none; width:38%; max-width:220px; font-family:var(--mono);
  font-size:10px; letter-spacing:.08em; text-transform:lowercase;
  color:var(--ink-mute); padding-top:2px; }
.iev-fact__v{ flex:1; min-width:0; line-height:1.5; word-break:break-word; }
.iev-sql{ display:block; margin-top:8px; padding:10px 12px; font-family:var(--mono);
  font-size:11px; line-height:1.5; color:var(--ink-dim); background:var(--bg,#0b0f0d);
  border:1px solid var(--line,#232329); white-space:pre-wrap; word-break:break-word; }
.iev-refused{ margin-top:8px; padding:10px 2px; font-family:var(--mono);
  font-size:11px; line-height:1.55; color:var(--warn,#e0a63f); }
/* wide tables scroll inside their own rail — the sheet never scrolls x */
.iev-tablewrap{ margin-top:8px; overflow-x:auto; border:1px solid var(--line-soft); }
.iev-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.iev-table th{ text-align:left; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; text-transform:lowercase; color:var(--ink-mute);
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.iev-table td{ padding:7px 10px; border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums; }
.iev-pager{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.iev-pageno{ font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:lowercase; color:var(--ink-mute); }

/* the Decisions board takes the same grammar (requirement A) — flat
   ledger rows, the 001-index in quiet lime mono, the YES block as the
   card's ONE saturated element, a bracketed see-it door, the
   plain-words consequence line. Scoped to #tos: the base .ccp rules
   above keep serving any other composition of the class. */
#tos .ccp{ background:transparent; border:0;
  border-bottom:1px solid var(--line-soft); border-radius:0; padding:18px 2px 16px; }
#tos .ccp__n{ font:500 10px/1.4 var(--mono); -webkit-text-stroke:0;
  color:var(--posf-lime,#c8ff4d); letter-spacing:.08em; min-width:28px;
  text-align:left; padding-top:5px; }
#tos .ccp__n--auto, #tos .ccp__n--ok{ -webkit-text-stroke:0; font-size:10px;
  padding-top:5px; }
#tos .ccp-yes, #tos .ccp-no, #tos .ccp-note, #tos .ccp-bulk,
#tos .ccp-bulk__b, #tos .ccp-drawer__ta, #tos .ccp-drawer__b{ border-radius:0; }
.ccp-see{ background:transparent; border:0; cursor:pointer; padding:6px 2px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-transform:lowercase; color:var(--posf-lime,#c8ff4d); }
.ccp-see::before{ content:"[ "; color:var(--posf-dim,#6b6b75); }
.ccp-see::after{ content:" ]"; color:var(--posf-dim,#6b6b75); }
.ccp__consq{ flex-basis:100%; width:100%; margin-top:8px; font-size:11.5px;
  line-height:1.5; color:var(--posf-dim,#6b6b75); max-width:70ch; }

/* System Audit ideas rail — same consequence line, quieter */
.sa-consq{ margin-top:4px; opacity:.85; }

/* ════════════════════════════════════════════════════════════════
   DESIGN FLOW — COMMAND editorial layer (2026-08-01)
   Completion of the operator's "rebuild the task ... section using
   design flow": the command view gets the mast word, and the last
   pre-grammar blocks (obligations strip, department chips, bulk
   bar, brief lens chips) join the flat hairline ledger the rest of
   the page already speaks. Append-only over the 07-14/07-31 layers;
   accent stays --posf-lime on ink; FLAT LAW throughout.
   ════════════════════════════════════════════════════════════════ */

/* the mast — quiet co-hero above the ledger; the ccf hero strip
   stays the one loud element */
#tos .ccm{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:6px 0 14px; }
#tos .ccm-mast{ font-weight:800; text-transform:lowercase;
  font-size:clamp(30px,7vw,44px); line-height:.92; letter-spacing:-0.04em; }
#tos .ccm-idx{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:lowercase; color:var(--posf-dim,#6b6b75); }

/* obligations — the strip drops its box and reads as a figure row */
#tos .cc-oblig__strip{ background:transparent; border:0; border-radius:0;
  padding:10px 0 12px; border-bottom:1px solid var(--line-soft,rgba(127,127,127,.15)); }
#tos .cc-oblig__cell b{ font-size:clamp(22px,4.5vw,30px); }
#tos .cc-oblig__cell span{ text-transform:lowercase; letter-spacing:.12em; }
#tos .cc-oblig__act, #tos .cc-oblig__park-b, #tos .cc-oblig__addrow,
#tos .cc-oblig__form input, #tos .cc-oblig__form select,
#tos .cc-oblig__form button{ border-radius:0; }

/* departments — chips become a hairline ledger */
#tos .cc-depts{ display:flex; flex-direction:column; gap:0; }
#tos .cc-dept{ border:0; border-bottom:1px solid var(--line-soft,rgba(127,127,127,.12));
  border-radius:0; background:transparent; padding:9px 2px;
  display:flex; align-items:baseline; gap:10px; }
#tos .cc-dept__n{ font-weight:600; }
#tos .cc-dept__m{ font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:lowercase; color:var(--posf-dim,#6b6b75); margin-left:auto; }
#tos .cc-dept--alert{ border-left:2px solid var(--danger,#ff5c5c); padding-left:8px; }

/* bulk bar — hairline rail, not a box */
#tos .ccp-bulk{ background:transparent; border:0;
  border-top:1px solid var(--line-soft,rgba(127,127,127,.15)); padding:10px 0; }

/* brief lens chips — mono lowercase brackets like every other control */
#tos .date-chips .chip{ border-radius:0; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:lowercase; background:transparent; }
#tos .date-chips .chip.chip-active{ background:var(--posf-lime,#c8ff4d); color:#0b0b0c; }
/* WS-A (2026-08-01): ribbon cells with a destination are buttons — the
   "to verify" count is the door to the Verify tab, not a dead stat. */
.pos-sbar__c--tap{cursor:pointer;border:0;text-align:left;font:inherit;color:inherit;appearance:none;-webkit-appearance:none;}
.pos-sbar__c--tap:active{opacity:.75;}
/* Waiting-on-you rows: a decision older than a day reads red. */
.pos-decide--old{color:var(--danger);font-weight:600;}
/* WS-B (2026-08-01): the Team directory — list rows + profile editor. */
.pos-team__q{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--ink);margin-bottom:12px;font:inherit;}
.pos-team__row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;}
.pos-team__row:last-child{border-bottom:0;}
.pos-team__b{display:flex;flex-direction:column;min-width:0;flex:1;}
.pos-team__n{font-weight:600;}
.pos-team__m{color:var(--ink-mute);font-size:12.5px;}
.pos-team__gap{color:var(--warn);font-size:11.5px;white-space:nowrap;}
.pos-team__sheet{display:flex;flex-direction:column;gap:10px;padding:14px 2px;}
.pos-team__f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-mute);}
.pos-team__f input{padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--ink);font:inherit;}
.pos-team__ro{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-mute);padding:6px 0;}
.pos-team__ro i{font-style:normal;font-size:11.5px;}
/* WS-D (2026-08-01): attendance status chips on the Team tab. */
.pos-att__chip{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--bg-card);color:var(--ink-mute);white-space:nowrap;}
.pos-att__chip--ok{color:var(--ok);}
.pos-att__chip--warn{color:var(--warn);}
.pos-att__chip--danger{color:var(--danger);}
/* WS-D2 (2026-08-02): the weekly rota grid — scrolls sideways, never the page. */
.pos-rota__wrap{overflow-x:auto;}
.pos-rota{border-collapse:collapse;font-size:11px;min-width:560px;}
.pos-rota th{color:var(--ink-mute);font-weight:600;padding:4px 6px;text-align:center;}
.pos-rota td{padding:2px;}
.pos-rota__n{font-weight:600;white-space:nowrap;padding-right:6px;}
.pos-rota__c{display:block;width:100%;min-width:58px;padding:5px 4px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--ink);text-align:center;line-height:1.25;cursor:pointer;font:inherit;font-size:10.5px;}
.pos-rota__off{color:var(--ink-mute);}
/* Their store shut and nobody gave them a new one — say it on the row
   rather than rostering them at a closed door (2026-09-04). Amber, not
   red: the house palette gives amber to a GAP and red to a breakage
   (CLAUDE.md §9, 2026-09-06), and a person waiting on a new store is a
   gap in the roster, not something broken. Same --warn token the rest of
   this file already uses. */
.pos-rota__gap{display:block;font-weight:500;font-size:10px;color:var(--warn,#ffb347);white-space:normal;max-width:96px;line-height:1.2;}

/* ── the alarms section (2026-08-02, "system audit says i have 13") ── */
.idm-line__s{ display:block; font-size:12px; color:var(--dim,#8a938e);
  margin-top:2px; letter-spacing:.02em; }
.idr-alarm{ border-left:3px solid var(--bad,#ff6d5e); cursor:default; }
.idr-foot{ display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; gap:10px; }
.idr-age{ font-size:11.5px; color:var(--dim,#8a938e);
  font-family:var(--mono,ui-monospace); }
.idm-ackbtn{ appearance:none; background:none;
  border:1px solid var(--line,#1b241f); color:var(--dim,#8a938e);
  border-radius:999px; padding:4px 10px; font:600 11px/1 var(--mono,ui-monospace);
  cursor:pointer; }
.idm-ackbtn:hover{ color:var(--ink,#e6efe9); border-color:var(--acc,#d4ff3a); }

/* Working Floor WS-B (2026-08-29): the last-mile arming meter. */
.pos-arm__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;padding:4px 0 8px;}
.pos-arm__c{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--bg-card);border-radius:8px;}
.pos-arm__c.short .pos-arm__v{color:var(--warn);}
.pos-arm__v{font-weight:700;}
.pos-arm__l{font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em;}
.pos-arm__vitals{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-mute);padding-bottom:4px;}
.pos-arm__sites{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;padding:6px 0;}
.pos-arm__pin{border:1px solid var(--border);background:none;color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:12.5px;}

/* Working Floor WS-E (2026-08-29): the Floor Board. Neutral zone. */
.pos-floor__row{display:grid;grid-template-columns:120px 56px 1fr;gap:10px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--border);}
.pos-floor__row:last-child{border-bottom:0;}
.pos-floor__site{font-weight:600;}
.pos-floor__n.ok{color:var(--ok);}
.pos-floor__n.warn{color:var(--warn);}
.pos-floor__n.danger{color:var(--danger);}
.pos-floor__m{color:var(--ink-mute);font-size:12.5px;}
.pos-floor__door{border:0;background:none;color:var(--ink-mute);text-decoration:underline;cursor:pointer;font:inherit;font-size:12.5px;padding:0;}
.pos-floor__hole{padding:9px 2px;border-bottom:1px solid var(--border);}
.pos-floor__hole:last-child{border-bottom:0;}
.pos-floor__hm{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.pos-floor__hm span{color:var(--ink-mute);font-size:12.5px;}
.pos-floor__asks{display:flex;gap:6px;flex-wrap:wrap;padding-top:6px;}

/* WS-G: the store's own letter on its Floor row. */
.pos-floor__grade{display:inline-block;margin-left:8px;min-width:18px;text-align:center;border:1px solid var(--border);border-radius:6px;font-size:11.5px;font-weight:700;padding:1px 4px;}
.pos-floor__grade--A{color:var(--ok);border-color:var(--ok);}
.pos-floor__grade--B{color:var(--warn);border-color:var(--warn);}
.pos-floor__grade--C{color:var(--danger);border-color:var(--danger);}

/* WS-H (2026-08-29): doors — org chips + coaching rows. Neutral zone. */
.pos-org__chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px;}
.pos-org__chip{border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12.5px;}
.pos-org__chip.lead{border-color:var(--ok);font-weight:600;}
/* WS-I (2026-08-29): power-hours chart. Neutral zone. */
.ph-chart{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:6px 0;}
.ph-col{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:20px;}
.ph-bar{width:14px;background:var(--ok);border-radius:3px 3px 0 0;}
.ph-h{font-size:10px;color:var(--ink-mute);}
.ph-n{font-size:10.5px;font-weight:700;}
.ph-n--empty{color:var(--danger);}

/* WS-K (2026-08-29): the clock-out pulse. Neutral zone. */
.sos-pulse{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:9000;}
.sos-pulse__card{background:var(--bg-card,#16211b);border-radius:14px 14px 0 0;padding:18px 16px 22px;width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px;}
.sos-pulse__row{display:flex;gap:8px;}
.sos-pulse__row button{flex:1;padding:12px 0;border-radius:10px;border:1px solid var(--border);background:none;color:var(--ink);font:inherit;font-size:15px;cursor:pointer;}
.sos-pulse__skip{border:0;background:none;color:var(--ink-mute);font:inherit;font-size:12.5px;cursor:pointer;padding:4px;}

/* ── THE MAIL DESK (2026-09-03) — classic cascade, every theme ──
   "show me the reply in tasks or a surfaced tab; I click or make
   changes to the draft and it is edited and sent." Sits ABOVE the
   house-floor markers on purpose: the desk is not a floor, and the
   floors' scoped sections below stay byte-identical. The mast keeps
   the ideas idiom (huge lowercase word, the period in the accent).
   One moment: the reply folds and leaves the desk when it is sent.
   Reduced motion: no rise, no fold, just the change. */
.mdk{ padding:26px 2px 6px; }
.mdk-mast{ font-weight:800; font-size:clamp(44px, 11vw, 76px); line-height:.92;
  letter-spacing:-0.04em; text-transform:lowercase; color:var(--ink); }
.mdk-dot{ color:var(--accent); }
.mdk-line{ margin-top:14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:lowercase; color:var(--ink-mute); }
.mdk-count{ font-size:15px; font-weight:700; color:var(--accent); letter-spacing:0;
  margin-right:6px; font-variant-numeric:tabular-nums; }
.mdk-line__s{ color:var(--ink-mute); }
.idm-mail{ margin-top:8px; }
.idm-mailgo{ color:var(--accent); }
.mdk-cards{ display:grid; gap:12px; margin-top:18px; }
.mdk-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md,8px);
  padding:16px 16px 14px; display:grid; gap:10px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(10px);
  animation:mdk-rise .55s var(--ease-emph,cubic-bezier(.2,.7,.2,1)) forwards;
  animation-delay:calc(var(--i,0) * 60ms); }
.mdk-row{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.mdk-who{ font-size:14px; font-weight:700; color:var(--ink); }
.mdk-who small{ font-weight:400; color:var(--ink-mute); margin-left:8px; font-family:var(--mono); font-size:10.5px; }
.mdk-chip{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:3px; padding:2px 7px; white-space:nowrap; }
.mdk-chip--hold{ color:var(--warn); border-color:var(--warn); }
.mdk-subj{ font-size:15px; font-weight:600; color:var(--ink); }
.mdk-want{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-dim); }
.mdk-lbl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.mdk-saved{ color:var(--accent); opacity:0; transition:opacity .25s; text-transform:none; letter-spacing:.04em; }
.mdk-saved.on{ opacity:1; }
.mdk-draft{ border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent);
  padding:11px 13px; border-radius:0 6px 6px 0; font-size:14px; line-height:1.5; white-space:pre-wrap;
  color:var(--ink); outline:none; transition:box-shadow .2s, border-color .3s; max-width:78ch; }
.mdk-draft:focus{ box-shadow:0 0 0 2px var(--accent); }
.mdk-card.is-edited .mdk-draft{ border-left-color:var(--warn); }
.mdk-acts{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mdk-btn{ font:inherit; font-size:13px; font-weight:650; padding:8px 14px; border-radius:6px;
  border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); cursor:pointer;
  transition:transform .12s, background .2s, opacity .2s; }
.mdk-btn:active{ transform:scale(.97); }
.mdk-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mdk-btn--go{ background:var(--accent); border-color:var(--accent); color:var(--accent-text,#0b0b0d); }
.mdk-btn--quiet{ border-color:var(--line); color:var(--ink-mute); }
.mdk-btn[disabled]{ opacity:.6; cursor:default; }
.mdk-gm{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-mute);
  text-decoration:underline; text-underline-offset:3px; }
.mdk-explain{ margin:0; font-size:11.5px; line-height:1.4; color:var(--ink-mute); }
/* the post — the reply folds and the card leaves; then quiet */
.mdk-card.is-posting{ animation:mdk-post .7s var(--ease-emph,cubic-bezier(.4,0,.2,1)) forwards; pointer-events:none; }
.mdk-card.is-posting .mdk-draft{ animation:mdk-fold .45s ease-in forwards; transform-origin:top; }
.mdk-card.is-leaving{ animation:mdk-leave .45s ease-in forwards; pointer-events:none; }
.mdk-empty{ margin-top:26px; padding:34px 16px; border:1px dashed var(--line); border-radius:var(--r-md,8px);
  color:var(--ink-mute); font-size:14px; line-height:1.5; display:grid; gap:10px; max-width:60ch; }
.mdk-empty b{ color:var(--ink); font-size:18px; font-weight:800; }
.mdk-empty__mark{ width:38px; height:26px; border:2px solid var(--accent); border-radius:3px; position:relative; }
.mdk-empty__mark::after{ content:""; position:absolute; left:5px; right:5px; top:5px; height:7px;
  border-top:2px solid var(--accent); transform:skewY(0); }
@keyframes mdk-rise{ to{ opacity:1; transform:none; } }
@keyframes mdk-fold{ 0%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(0); opacity:0 } }
@keyframes mdk-post{ 0%{ transform:none; opacity:1 } 55%{ transform:translateY(-6px); opacity:1 } 100%{ transform:translateY(-28px); opacity:0 } }
@keyframes mdk-leave{ to{ transform:translateX(-24px); opacity:0 } }
@media (prefers-reduced-motion: reduce){
  .mdk-card{ animation:none; opacity:1; transform:none; }
  .mdk-card.is-posting, .mdk-card.is-leaving, .mdk-card.is-posting .mdk-draft{ animation:none; opacity:0; transition:opacity .2s; }
}

/* ==========================================================
   HOUSE floor 6 — Job Board (WS-J, 2026-08-07)
   Approved mockup: docs/house/floors/6-job-board-tasks.html.
   HARD INVARIANT: every rule scoped [data-theme="house"] —
   Classic/Light/Flow render byte-identical with this section
   present. Keyframes hs- namespaced. Enforced by
   tests/test_house_working_floors_2026_08_07.py via the
   canonical parser in scripts/verify_house_floor.py.
   ========================================================== */

/* ── the load rail — who's carrying what, capacity as slots ── */
[data-theme="house"] .tos-hload{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md,8px); padding:12px 14px; margin-bottom:12px; display:grid; gap:9px; }
[data-theme="house"] .tos-hload__eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
[data-theme="house"] .tos-hload__row{ display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; }
[data-theme="house"] .tos-hload__who{ font-size:12.5px; font-weight:600; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-theme="house"] .tos-hload__rail{ display:flex; gap:4px; }
[data-theme="house"] .tos-hload__rail i{ height:10px; flex:1; max-width:34px; border-radius:2px; background:var(--bg-elev,#131316); border:1px solid var(--line-soft,#1c1c22); }
[data-theme="house"] .tos-hload__rail i.on{ background:color-mix(in srgb, var(--accent) 55%, transparent); border-color:transparent; }
[data-theme="house"] .tos-hload__rail i.hot{ background:color-mix(in srgb, var(--warn) 70%, transparent); border-color:transparent; }
[data-theme="house"] .tos-hload__n{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
[data-theme="house"] .tos-hload__n.full{ color:var(--warn); }

/* ── the stamp — verification is the floor's only ceremony ── */
[data-theme="house"] .tos-stamped{ animation:hs-jb-hit .3s ease .5s; }
[data-theme="house"] .tos-stampmark{
  position:absolute; right:8px; top:8px; z-index:2; pointer-events:none;
  font-family:var(--body); font-weight:800; font-size:13px; letter-spacing:.1em;
  color:var(--accent); border:2px solid var(--accent); border-radius:var(--r-sm,4px);
  padding:3px 8px 1px; transform:rotate(-8deg) scale(2.2); opacity:0;
  animation:hs-jb-slam .3s cubic-bezier(0.2, 1.5, 0.4, 1) .25s forwards;
}
[data-theme="house"] .tos-ptschip{
  display:inline-flex; margin-top:8px; font-family:var(--mono); font-size:10.5px;
  color:var(--accent-text,#0b0b0d); background:var(--accent); border-radius:999px;
  padding:3px 9px; font-weight:700; opacity:0; animation:hs-jb-pop .35s cubic-bezier(0.2, 1.6, 0.4, 1) .55s forwards;
}
@keyframes hs-jb-slam{ 0%{transform:rotate(-8deg) scale(2.2); opacity:0} 60%{transform:rotate(-8deg) scale(.96); opacity:1} 100%{transform:rotate(-8deg) scale(1); opacity:1} }
@keyframes hs-jb-hit{ 0%{transform:none} 35%{transform:scale(.97) rotate(-.5deg)} 100%{transform:none} }
@keyframes hs-jb-pop{ 0%{opacity:0; transform:scale(.6)} 100%{opacity:1; transform:scale(1)} }

/* ── the board keeps the house voice: mono lane headers ── */
[data-theme="house"] .tos-col__h{ font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; font-size:10px; }
[data-theme="house"] .tos-card{ position:relative; overflow:visible; }

/* ── the relay's meter + the ask's face, in the house voice ──
   (rooms build 2026-08-13; amended mockup:
   docs/house/floors/6-job-board-tasks.html §the meter / the card)
   The BASE rules for both live above this section's marker, in the
   classic cascade every theme reads — the relay is not a house
   feature. What is house here is the SIGNAGE: the panel's label and
   the ask's short id speak the building's display voice, the way
   every other floor's headings do. Treatment only; take these away
   and the meter and the card are still whole. */
[data-theme="house"] .tos-meter__lbl b{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 116;
  font-size:12px; letter-spacing:.05em; }
[data-theme="house"] .tos-meter__v{ font-weight:500; font-size:19px; }
[data-theme="house"] .tos-ask__id{ letter-spacing:.1em; text-transform:uppercase; }
/* THE MOCKUP'S THREE PIXELS, AND #tos IS NOT OPTIONAL HERE EITHER.
   (0,2,0) loses to `#tos .tos-col__drop .tos-card` (1,2,0); this is
   (1,3,0), which beats it and ties the base rule above — a tie this
   one wins on source order, which is the whole reason the house layer
   sits below the classic cascade. Both selectors carry
   [data-theme="house"], so the floor stays scoped. */
[data-theme="house"] .tos-card--ask,
[data-theme="house"] #tos .tos-col__drop .tos-card--ask{ border-left-width:3px; }

/* ==========================================================
   HOUSE floor 2 — The Roster (WS-R, 2026-08-07)
   Approved mockup: docs/house/floors/2-roster-people-os.html.
   Same scoping law as floor 6 above.
   ========================================================== */

/* ── attendance strip — four honest cells ── */
[data-theme="house"] .pos-hatt{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft,#1c1c22); border:1px solid var(--line-soft,#1c1c22); border-radius:var(--r-md,8px); overflow:hidden; margin-bottom:14px; }
[data-theme="house"] .pos-hatt div{ background:var(--bg-card); padding:10px 12px; }
[data-theme="house"] .pos-hatt b{ font-family:var(--mono); font-size:20px; font-weight:500; display:block; font-variant-numeric:tabular-nums; color:var(--ink); }
[data-theme="house"] .pos-hatt span{ font-size:11px; color:var(--ink-mute); letter-spacing:.04em; }
[data-theme="house"] .pos-hatt .late b{ color:var(--warn); }
[data-theme="house"] .pos-hatt .miss b{ color:var(--danger); }

/* ── the drawer — people are files you pull ── */
[data-theme="house"] .pos-panel--drawer{ display:flex; flex-direction:column; }
[data-theme="house"] .pos-file{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md,8px); margin-top:-6px; position:relative; }
[data-theme="house"] .pos-file:first-of-type{ margin-top:0; }
[data-theme="house"] .pos-file__tab{ display:flex; align-items:center; gap:10px; padding:11px 14px; width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--ink); }
/* THE DRAWER'S TABS ARE ONE ROW EACH (mobile containment PR-2,
   2026-08-26). A DESIGN CHANGE, not just containment: a long name now
   ELLIPSISES instead of wrapping. Measured in WebKit at 402/390/375 on
   the roster's six-file drawer — six ragged tabs (109 / 80.7 x4 / 91.6 =
   523.3px at 402, worse as the phone narrows: 573.3px at 375 with two
   chips painting past the edge) become six uniform 47.4px rows = 284.3px
   at EVERY width, nothing past the edge.

   The ladder was climbed, not guessed: `min-width:0` alone moves 492.9 ->
   475.5 and never ellipsises; `overflow-wrap:anywhere` measures WORSE
   (523.3px, four lines). Only the flex pair below lands it, and neither
   half ships alone — either one leaves the other text wrapping and the
   tab keeps its second line.

   2:1 because the name is the thing you are looking for and the role is
   the thing that confirms it. The adjacent sibling in the second rule is
   deliberate: a bare `> span` also matches .pos-file__chip, which
   measured a clipped "NO EMAIL +2". */
[data-theme="house"] .pos-file__tab b{ font-weight:700; font-size:13.5px;
  min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
[data-theme="house"] .pos-file__tab > b + span{ min-width:0; flex:1 1 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* AND THE CHIP MUST YIELD. Caught by the floor-2 design verifier, which
   measured what the first cut of this rule actually shipped: the status
   chip is nowrap with no bound, so "no salary on record" took 170.5px of
   a 326px row and "Amarachi Chidinma Anyiam" was left 51.7px — rendering
   "Ama...". The 2:1 split was working correctly; it was dividing what the
   chip had already eaten. Capping the chip and giving the name an 8ch
   basis takes the worst name from 51.7px to 119.2px at 402 (107.2 at
   375) — about sixteen characters instead of three. The cost lands on
   the chip instead, which is a status label from a known vocabulary and
   survives losing its tail; a person's name is the identity you are
   scanning for and does not.
   08-28: the content fix (posShortName renders "Chidera A.", the floor-2
   mockup's own pattern) made the 2:1 ratio the next defect — the name box
   kept two thirds of the row for text that no longer needs it while the
   role starved at 27.5px ("Pr..."). flex:0 1 auto lets the short name hug
   its content and hands the slack to the role, the fact that tells two
   same-named people apart. */
[data-theme="house"] .pos-file__tab .pos-file__chip{ max-width:34%;
  overflow:hidden; text-overflow:ellipsis; }

/* The dept dot (mockup .ro-tab .dept): 8px of department color where the
   avatar sat -- the panel heading names the department, the dot keeps the
   scan; ~26px returns to the name and role. */
[data-theme="house"] .pos-file__dot{ width:8px; height:8px; border-radius:50%;
  flex:none; }

[data-theme="house"] .pos-file__tab > span{ color:var(--ink-mute); font-size:12px; }
[data-theme="house"] .pos-file__chip{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--ink-dim); white-space:nowrap; }
[data-theme="house"] .pos-file__chip.lime{ background:var(--accent); color:var(--accent-text,#0b0b0d); border-color:var(--accent); font-weight:700; }
[data-theme="house"] .pos-file__chip.warn{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
[data-theme="house"] .pos-file__chip.bad{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
[data-theme="house"] .pos-file__face{ display:none; padding:0 14px 14px; }
[data-theme="house"] .pos-file.out{ border-color:var(--line-strong,#3a3a44); }
[data-theme="house"] .pos-file.out .pos-file__face{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ [data-theme="house"] .pos-file.out .pos-file__face{ grid-template-columns:1fr; } }
[data-theme="house"] .pos-file__cell{ border-top:1px solid var(--line-soft,#1c1c22); padding-top:10px; }
[data-theme="house"] .pos-file__cell h6{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin:0 0 7px; }
[data-theme="house"] .pos-file__kv{ font-size:13px; color:var(--ink-dim); }
[data-theme="house"] .pos-file__kv b{ font-family:var(--mono); font-weight:500; color:var(--ink); }
[data-theme="house"] .pos-file__warn{ color:var(--warn); }
[data-theme="house"] .pos-file__more{ background:none; border:1px solid var(--line); border-radius:var(--r-sm,6px); color:var(--ink-dim); font-size:12px; font-weight:600; padding:6px 10px; cursor:pointer; }
[data-theme="house"] .pos-file__more:hover{ border-color:var(--accent); color:var(--accent); }

/* ── the wall — the room's standing language ── */
[data-theme="house"] .pos-wall{ border-left:2px solid var(--accent); padding:2px 0 2px 12px; display:grid; gap:8px; }
[data-theme="house"] .pos-wall p{ color:var(--ink-mute); font-size:12.5px; max-width:60ch; margin:0; }

/* reduced motion: the stamp lands settled — no slam, no pop.
   (This block deliberately sits at the end of the two house sections;
   the file's pre-existing reduced-motion blocks are untouched.) */
@media (prefers-reduced-motion:reduce){
  [data-theme="house"] .tos-stampmark{ animation:none; transform:rotate(-8deg) scale(1); opacity:1; }
  [data-theme="house"] .tos-ptschip{ animation:none; opacity:1; }
  [data-theme="house"] .tos-stamped{ animation:none; }
}