/* CC CORE STYLESHEET — lifted verbatim out of the first <style> block in
   index.html, 2026-08-23 (lane-split 3, slab 2). 105,087 bytes, not one rule
   changed and not one reordered.

   IT HOLDS :root, so it must load before every style of OUR OWN — the 32 remaining
   inline blocks all read var(--amber), var(--sp-10) and the rest from here. The
   <link> sits exactly where the block sat: fourth stylesheet node, behind the two
   Google Fonts links and Tabler icons, and ahead of every block we wrote. A link
   and a style block cascade in document order, so moving this anywhere else in the
   head silently changes which rule wins. Leave it where it is.

   Safe to externalise because the block contains no url() and no @import — checked
   before cutting. A relative url() would have re-resolved against /assets/ and
   broken every reference in it.

   A <link> in the head is render-blocking, so there is no flash of unstyled page.
   Bump the ?v= on every edit; Pages caches hard.

   HOW THIS WAS PROVEN A NO-OP, and the first attempt that was not good enough.
   First try hashed 22 computed properties across 22 selectors plus 17 :root tokens
   into one number and compared builds. That oracle is RACY: a dozen modules inject
   <style> at runtime (ccr-style, cc-lanes-style, day-style, cc-mobile-audit and
   the rest), so a probe fired before they land measures a different page than one
   fired after, and the same build returned two different hashes. A hash that moves
   on its own proves nothing.
   The real check: serve the pre-split page beside the post-split one on the SAME
   origin, settle both 2000ms, and diff FIELD BY FIELD rather than by hash. Result
   was 0 selector differences and 0 token differences. If you touch this file, redo
   it that way - settle first, diff fields, never trust a single hash. */


:root {
  --bg:#090b0d; --surface:#0f1316; --raised:#161b20; --overlay:#1d2429;
  --border:#252c33; --border-hi:#2e3740;
  --text:#dde4eb; --text-dim:#8a9aa8; --text-xs:#566470;
  --amber:#c8922a; --amber-dim:#9c7021;
  --amber-glow:rgba(200,146,42,0.15); --amber-soft:rgba(200,146,42,0.08);
  --green:#2ea043; --green-bg:rgba(46,160,67,0.12);
  --yellow:#d29922; --yellow-bg:rgba(210,153,34,0.12);
  --red:#e5534b; --red-bg:rgba(229,83,75,0.12);
  --blue:#4493d4; --blue-bg:rgba(68,147,212,0.12);
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px;
  --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px;
  --mono:'JetBrains Mono',monospace; --sans:'Lexend','Mukta',sans-serif; --display:'Lexend','Mukta',sans-serif; --brandmark:'Oswald',sans-serif;

  /* ─── AUDIT 2026-05-24: added opacity + z-index + transition tokens ─── */
  /* Amber opacity scale (replaces inline rgba) */
  --amber-ghost:rgba(200,146,42,0.04);
  /* --amber-soft already defined above: 0.08 */
  /* --amber-glow already defined above: 0.15 */
  --amber-medium:rgba(200,146,42,0.25);
  --amber-strong:rgba(200,146,42,0.4);

  /* Black overlay scale */
  --black-25:rgba(0,0,0,0.25);
  --black-40:rgba(0,0,0,0.4);
  --black-55:rgba(0,0,0,0.55);
  --black-70:rgba(0,0,0,0.7);

  /* White overlay scale */
  --white-04:rgba(255,255,255,0.04);

  /* Z-index scale */
  --z-base:1;
  --z-raised:10;
  --z-sticky:100;
  --z-popover:500;
  --z-modal:1000;
  --z-toast:2000;
  --z-critical:9999;

  /* Transition tokens */
  --tr-fast:0.12s ease;
  --tr-base:0.25s ease;
  --tr-slow:0.5s ease;
}
[data-theme="light"] {
  --bg:#f0f2f4; --surface:#ffffff; --raised:#f6f8fa; --overlay:#eaecef;
  --border:#d0d7de; --border-hi:#bbc3cc;
  --text:#1c2128; --text-dim:#57606a; --text-xs:#8c959f;
  --amber:#a06c10; --amber-dim:#7a5010;
  --amber-glow:rgba(160,108,16,0.12); --amber-soft:rgba(160,108,16,0.06);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
/* === OPERATOR scroll cap — body-flex restructure (bus #1801, replaces sticky chrome) === */
html, body { height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }
body { display:flex; flex-direction:column; overflow:hidden; }

.cc-header { background:var(--surface); border-bottom:1px solid var(--border); padding:0 var(--sp-24); height:52px; display:flex; align-items:center; gap:var(--sp-16); flex-shrink:0; }
.cc-sigil { display:flex; align-items:center; gap:var(--sp-10); flex-shrink:0; text-decoration:none; }
.cc-sigil__mark { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:4px; background:radial-gradient(ellipse at center,rgba(200,146,42,0.55) 0%,rgba(160,110,20,0.25) 55%,transparent 100%); border:1px solid rgba(200,146,42,0.6); padding:2px; box-shadow:0 0 8px rgba(200,146,42,0.3),inset 0 0 6px rgba(200,146,42,0.15); }
.cc-sigil__mark img { width:100%; height:100%; object-fit:contain; display:block; }
.cc-sigil__wordmark { font-family:var(--brandmark); font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); line-height:1; }
.cc-sigil__wordmark span { display:block; font-size:9px; font-weight:500; letter-spacing:0.2em; color:var(--text-xs); margin-top:2px; }
.cc-header__sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.cc-header__diag { display:flex; align-items:center; gap:var(--sp-8); flex:1; overflow:hidden; }
/* THE STATUS LIGHT STARTS AT UNKNOWN, NEVER AT GREEN.
   Alessio 2026-08-26: "not a pretty sink button that glows green it needs to
   actually sink and it's actually function be hooked up to things be connected."
   Proven on the served face 2026-08-27: this dot computed rgb(46,160,67) with a
   glow while the board held no session, could not read one row, and Last sync
   still read a dash. It was green because the STYLESHEET said green - no event
   ever set it. The colour is data-state now and only an observed event moves it.
   State set: Microsoft Fluent 2 presence badge - available / busy / away /
   offline / UNKNOWN. Unknown is the state this control never had, and it is the
   one it is in most of the time it used to claim to be live. */
.cc-diag-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--text-xs); box-shadow:none; border:0; padding:0; cursor:pointer; transition:transform 0.12s; }
/* NO COLOUR TRANSITION. A background that fades takes 200ms of animation frames,
   and a BACKGROUNDED TAB serves none - so the light can sit frozen on the colour
   it was leaving. Caught measuring this on 2026-08-27: every state read red on a
   hidden tab while data-state was already correct. A status light that can lag
   its own state is the bug this whole change exists to kill, so the colour snaps. */
.cc-diag-dot[data-state="live"]     { background:var(--green);  box-shadow:0 0 5px var(--green); }
.cc-diag-dot[data-state="degraded"] { background:var(--yellow); box-shadow:0 0 5px var(--yellow); }
.cc-diag-dot[data-state="down"]     { background:var(--red);    box-shadow:0 0 5px var(--red); }
.cc-diag-dot[data-state="syncing"]  { background:var(--amber);  box-shadow:0 0 5px var(--amber); }
.cc-diag-dot:hover { transform:scale(1.2); }
.cc-diag-dot:active { transform:scale(0.9); }
.cc-subnav { background:var(--surface); border-bottom:1px solid var(--border); padding:0 var(--sp-24); display:flex; align-items:flex-end; gap:6px; min-height:34px; flex-wrap:wrap; flex-shrink:0; }
.cc-subnav .cc-subtab { font-family:var(--display); font-size:10px; padding:5px 12px; border:1px solid var(--border); border-radius:3px 3px 0 0; border-bottom:0; background:var(--raised); color:var(--text-dim); cursor:pointer; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; margin-bottom:-1px; }
.cc-subnav .cc-subtab.active { background:var(--amber); color:#000; border-color:var(--amber); }
.cc-subnav .cc-subtab:hover:not(.active) { color:var(--amber); border-color:var(--amber); }
.cc-subnav__hint { font-family:var(--mono); font-size:10px; color:var(--text-xs); padding:8px 0; }
/* ─── Drag-reorder tabs ─── */
.cc-nav__tab[draggable="true"],.cc-subtab[draggable="true"]{cursor:grab;}
.cc-nav__tab[draggable="true"]:active,.cc-subtab[draggable="true"]:active{cursor:grabbing;}
.cc-drag-src{opacity:.3!important;transition:opacity .1s;}
.cc-drag-over{box-shadow:inset 0 0 0 2px var(--amber)!important;}
.cc-subtabs { display:flex; gap:var(--sp-6); padding:var(--sp-6) 0 var(--sp-8); border-bottom:1px solid var(--border); margin-bottom:var(--sp-8); flex-wrap:wrap; }
.cc-subtab { font-family:var(--display); font-size:10px; padding:5px 12px; border:1px solid var(--border); border-radius:3px; background:var(--raised); color:var(--text-dim); cursor:pointer; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.cc-subtab.active { background:var(--amber); color:#000; border-color:var(--amber); }
.cc-subtab:hover:not(.active) { color:var(--amber); border-color:var(--amber); }
.cc-subpane { display:none; }
.cc-subpane.active { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.cc-subpane.active > * { flex:1; min-height:0; }
/* ═══ Alessio LOCKED (repeated 2026-06-04): every message / text field ALWAYS fills its column
   or row — everywhere, and even after cc-mic.js wraps the field in a .cc-mic-wrap span (which
   was quietly shrinking new flex-row composes). Global so every lane + any new component inherits
   it; row composes wrap so a full-width field drops its Send button below, like the Interns bus. ═══ */
.cc-mic-wrap { display:block !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
.cc-lane textarea, .cc-mic-wrap > textarea, .cc-mic-wrap > input,
.cc-lane input[type="text"], .cc-lane input[type="search"] { width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
.rnd-bus__compose, .ah4-send-row, .cc-chat-compose, .cc-bus-chat__compose, .cc-ses-chat__row, .in-mvp-bus__compose { flex-wrap:wrap !important; }
/* PHILOSOPHY subpane override — its 15+ children (cards, headers, lists, hrs)
   were getting squashed to ~50px each by the global `> * { flex:1 }` rule,
   stacking the Shuhari header on top of the Growing-With-You prose and
   chopping every section to a single line. Long-form content panes must
   render at natural height and scroll, not flex-distribute height. */
.cc-subpane[data-subtab="philosophy"].active { overflow-y:auto; overflow-x:hidden; }
.cc-subpane[data-subtab="philosophy"].active > * { flex:0 0 auto; min-height:auto; }
/* EVOLUTION subpane — same long-form override (Alessio direct, 2026-05-31).
   Without it the global > * { flex:1 } rule was splitting the height between the
   .fe-grid (radar + ledger) and the timeline card, cutting both off. */
.cc-subpane[data-subtab="evolution"].active { overflow-y:auto; overflow-x:hidden; }
.cc-subpane[data-subtab="evolution"].active > * { flex:0 0 auto; min-height:auto; }

/* ─── Operator indicators — small centred pills ─────────────────── */
.cc-op-indicators { display:flex; justify-content:center; gap:var(--sp-10); padding:14px 0 var(--sp-6); flex-wrap:wrap; }
.cc-op-pill { display:flex; flex-direction:column; align-items:center; padding:8px 18px; border:1px solid var(--border); border-radius:6px; background:var(--surface); text-decoration:none; color:inherit; min-width:72px; transition:border-color 0.12s,box-shadow 0.12s; }
.cc-op-pill:hover { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber-glow); }
.cc-op-pill__val { font-family:var(--mono); font-size:20px; font-weight:500; color:var(--amber); line-height:1; }
.cc-op-pill__lab { font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-xs); margin-top:5px; }

/* ─── Dashboard · GridStack widget grid ─────────────────────────── */
.cc-lane[data-lane="dashboard"] { isolation:isolate; }
#dash-grid.grid-stack { background:transparent; min-height:260px; }
#dash-grid .grid-stack-item-content {
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:var(--sp-12) 14px; color:var(--text); overflow:auto;
  display:flex; flex-direction:column; gap:var(--sp-8); transition:border-color var(--tr-fast);
  box-sizing:border-box;
}
#dash-grid .grid-stack-item-content:hover { border-color:var(--border-hi); }
#dash-grid.dash-edit .grid-stack-item-content { border-color:var(--amber-dim); }
#dash-grid.dash-edit .w-head { cursor:move; background:linear-gradient(180deg, var(--amber-soft) 0%, transparent 100%); margin:-12px -14px 8px; padding:8px 14px; border-bottom:1px dashed var(--amber-dim); }
#dash-grid.dash-edit .grid-stack-item-content::before {
  content:"⠿ drag header · resize corner ⤡";
  position:absolute; top:5px; right:8px;
  font-size:9px; color:var(--amber); opacity:0.65; pointer-events:none;
  font-family:var(--mono); letter-spacing:0.06em; z-index:2;
}
/* Faint snap-grid overlay — visible in edit mode only */
#dash-grid.dash-edit {
  background-image:
    linear-gradient(to right,  var(--amber-glow) 1px, transparent 1px),
    linear-gradient(to bottom, var(--amber-glow) 1px, transparent 1px);
  background-size: calc((100% - 8px) / 12) 68px;
  background-position: 0 0;
  background-color: transparent;
}
/* Edit button active state */
body.dash-edit-on #edit-btn { background:var(--amber); color:#000; }
/* Widget chrome */
.w-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); padding-bottom:var(--sp-8); border-bottom:1px solid var(--border); flex-shrink:0; }
.w-title { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dim); flex:1; min-width:0; }
.w-tag   { font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); padding:2px 6px; border-radius:3px; flex-shrink:0; }
.w-body  { flex:1; overflow:auto; font-size:12px; color:var(--text-dim); min-height:0; }
.w-empty { color:var(--text-xs); font-style:italic; text-align:center; padding:var(--sp-20) var(--sp-8); font-size:11px; line-height:1.6; }
/* ─── DASHBOARD — layout standard: nav | product | bus (Alessio 2026-07-27) ─── */
.cc-lane[data-lane="dashboard"] { overflow-y:auto; -webkit-overflow-scrolling:touch; }
[data-lane="dashboard"] .dash-3col { display:grid; grid-template-columns:1.2fr 2.6fr 1.6fr; gap:10px; height:calc(100vh - 205px); min-height:420px; align-items:stretch; position:relative; }
[data-lane="dashboard"] .dash-col { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:10px; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
[data-lane="dashboard"] .dash-col__head { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:8px; flex-shrink:0; display:flex; align-items:baseline; gap:8px; }
[data-lane="dashboard"] .dash-col__count { font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-left:auto; }
[data-lane="dashboard"] .dash-col__body { flex:1 1 0%; min-height:0; overflow-y:auto; }
[data-lane="dashboard"] .dash-empty { font-family:var(--mono); font-size:11px; color:var(--text-xs); padding:14px 8px; text-align:center; line-height:1.6; }
/* TODAY strip — one line above his list: the date, and what the day holds.
   Added 2026-08-18 on his order that the dashboard show what is happening. */
[data-lane="dashboard"] .dash-today { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:8px 10px; margin-bottom:8px; border:1px solid var(--border); border-left:2px solid var(--amber); border-radius:4px; background:var(--raised); cursor:pointer; }
[data-lane="dashboard"] .dash-today:hover { border-color:var(--amber); }
[data-lane="dashboard"] .dash-today__day { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); }
[data-lane="dashboard"] .dash-today__bits { font-family:var(--mono); font-size:11px; color:var(--text-dim); }
[data-lane="dashboard"] .dash-today__late { color:var(--red); }
/* Fold-out cards: all folded by default, WHOLE header row folds */
[data-lane="dashboard"] .dash-card { border:1px solid var(--border); border-radius:4px; margin-bottom:6px; overflow:hidden; }
[data-lane="dashboard"] .dash-card.active { border-color:var(--amber); }
[data-lane="dashboard"] .dash-card__head { display:flex; align-items:center; gap:8px; padding:9px 10px; cursor:pointer; background:var(--raised); user-select:none; }
[data-lane="dashboard"] .dash-card__head:hover { background:var(--overlay); }
[data-lane="dashboard"] .dash-card__caret { font-size:10px; color:var(--text-xs); flex-shrink:0; }
[data-lane="dashboard"] .dash-card.active .dash-card__caret { color:var(--amber); }
[data-lane="dashboard"] .dash-card__title { flex:1; min-width:0; font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-lane="dashboard"] .dash-card.active .dash-card__title { color:var(--amber); }
[data-lane="dashboard"] .dash-card__count { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--amber); flex-shrink:0; }
[data-lane="dashboard"] .dash-card__body { padding:6px 8px 8px; }
/* Nav sub-items (tasks / stages / calendar views inside a folded-open card) */
[data-lane="dashboard"] .dash-sub { padding:5px 8px 5px 26px; font-size:11.5px; color:var(--text-dim); cursor:pointer; border-radius:3px; display:flex; align-items:center; gap:6px; text-transform:none; }
[data-lane="dashboard"] .dash-sub:hover { color:var(--amber); background:var(--raised); }
[data-lane="dashboard"] .dash-sub.on { color:var(--amber); }
[data-lane="dashboard"] .dash-sub__n { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--text-xs); }
/* Centre pane */
[data-lane="dashboard"] .dash-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--border); }
/* Work | Personal shelf switch — sits at the far end of the first toolbar row.
   Work is the default every time the board opens; personal is one tap away. */
[data-lane="dashboard"] .dash-shelf { margin-left:auto; display:inline-flex; gap:4px; flex-shrink:0; }
[data-lane="dashboard"] .dash-num { font-family:var(--mono); font-size:26px; line-height:1.1; font-weight:700; color:var(--amber); }
[data-lane="dashboard"] .dash-num__lab { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-xs); }
[data-lane="dashboard"] .dash-btn { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:5px 11px; background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:3px; cursor:pointer; }
[data-lane="dashboard"] .dash-btn:hover { color:var(--amber); border-color:var(--amber); }
[data-lane="dashboard"] .dash-btn.primary { background:var(--amber); color:#000; border-color:var(--amber); }
[data-lane="dashboard"] .dash-btn:disabled { opacity:.6; cursor:wait; }
[data-lane="dashboard"] .dash-list { display:flex; flex-direction:column; gap:4px; }
[data-lane="dashboard"] .dash-item { border:1px solid var(--border); border-radius:4px; padding:8px 10px; cursor:pointer; background:var(--raised); }
[data-lane="dashboard"] .dash-item:hover { border-color:var(--border-hi); }
[data-lane="dashboard"] .dash-item.on { border-color:var(--amber); background:var(--amber-soft); }
[data-lane="dashboard"] .dash-item.late { border-left:2px solid #990000; }
[data-lane="dashboard"] .dash-item.failed { border-color:#990000; }
/* One-tap done. Big enough to hit on a phone (28px), never a tiny target. */
[data-lane="dashboard"] .dash-check { flex:0 0 auto; width:28px; height:28px; line-height:1; border:1px solid var(--border-hi); background:var(--bg); color:var(--text-xs); border-radius:4px; cursor:pointer; font-size:14px; padding:0; }
[data-lane="dashboard"] .dash-check:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-soft); }
[data-lane="dashboard"] .dash-check:active { background:var(--amber); color:#000; }
[data-lane="dashboard"] .dash-check:disabled { opacity:.45; cursor:default; }
[data-lane="dashboard"] .dash-item__row { display:flex; align-items:baseline; gap:8px; }
[data-lane="dashboard"] .dash-item__title { flex:1; min-width:0; font-size:12.5px; color:var(--text); }
[data-lane="dashboard"] .dash-item__pill { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; padding:1px 6px; border-radius:8px; color:var(--text-xs); border:1px solid var(--border); flex-shrink:0; }
[data-lane="dashboard"] .dash-item__pill.urgent { background:#990000; color:#fff; border-color:#990000; }
[data-lane="dashboard"] .dash-item__pill.high { color:var(--amber); border-color:var(--amber); }
[data-lane="dashboard"] .dash-item__meta { font-family:var(--mono); font-size:9.5px; color:var(--text-xs); margin-top:3px; }
[data-lane="dashboard"] .dash-item__body { font-size:12px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); max-height:260px; overflow-y:auto; }
[data-lane="dashboard"] .dash-item__acts { display:flex; gap:6px; margin-top:8px; }
[data-lane="dashboard"] .dash-stage { margin-bottom:12px; }
[data-lane="dashboard"] .dash-stage__head { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); display:flex; gap:8px; padding-bottom:5px; margin-bottom:5px; border-bottom:1px dashed var(--border); }
[data-lane="dashboard"] .dash-stage__n { margin-left:auto; font-family:var(--mono); color:var(--text-xs); }
/* Calendar */
[data-lane="dashboard"] .dash-cal__title { font-family:var(--display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); margin:0 6px; }
[data-lane="dashboard"] .dash-cal__dow { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
[data-lane="dashboard"] .dash-cal__dow div { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); text-align:center; }
[data-lane="dashboard"] .dash-cal { display:grid; gap:4px; }
[data-lane="dashboard"] .dash-cal.month { grid-template-columns:repeat(7,1fr); }
[data-lane="dashboard"] .dash-cal.week  { grid-template-columns:repeat(7,1fr); }
[data-lane="dashboard"] .dash-cal.day   { grid-template-columns:1fr; }
[data-lane="dashboard"] .dash-cal__day { border:1px solid var(--border); border-radius:4px; min-height:76px; padding:4px; display:flex; flex-direction:column; gap:2px; min-width:0; }
[data-lane="dashboard"] .dash-cal.week .dash-cal__day { min-height:200px; }
[data-lane="dashboard"] .dash-cal.day  .dash-cal__day { min-height:320px; }
[data-lane="dashboard"] .dash-cal__day.pad { opacity:.35; }
[data-lane="dashboard"] .dash-cal__day.today { border-color:var(--amber); }
[data-lane="dashboard"] .dash-cal__day.today .dash-cal__num { color:var(--amber); font-weight:700; }
[data-lane="dashboard"] .dash-cal__num { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
[data-lane="dashboard"] .dash-cal__chip { font-family:var(--mono); font-size:9px; border-radius:3px; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-lane="dashboard"] .dash-cal__chip.ev { background:var(--raised); color:var(--text-dim); border:1px solid var(--border); }
[data-lane="dashboard"] .dash-cal__chip.bk { background:rgba(200,146,42,.15); color:var(--amber); border:1px solid rgba(200,146,42,.4); }
[data-lane="dashboard"] .dash-cal__more { font-family:var(--mono); font-size:9px; color:var(--text-xs); }
[data-lane="dashboard"] .dash-msg { background:var(--raised); border:1px solid var(--border); border-radius:3px; padding:6px 10px; font-size:11.5px; line-height:1.45; color:var(--text); margin-bottom:6px; }
[data-lane="dashboard"] .dash-msg__head { font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-bottom:3px; }
[data-lane="dashboard"] .dash-msg__from { color:var(--amber); font-weight:700; }
[data-lane="dashboard"] .dash-msg__body { white-space:pre-wrap; word-break:break-word; max-height:180px; overflow-y:auto; }
@media (max-width:700px){
  [data-lane="dashboard"] .dash-3col { grid-template-columns:1fr; height:auto; min-height:0; }
  [data-lane="dashboard"] .dash-col { overflow:visible; }
  [data-lane="dashboard"] .dash-col__body { overflow-y:visible; }
  [data-lane="dashboard"] .dash-num { font-size:24px; }
}
/* Double-editable fields */
.w-title[contenteditable="true"] { outline:1px dashed var(--amber); border-radius:2px; cursor:text; padding:0 3px; }
.w-body[contenteditable="true"]  { outline:1px dashed var(--amber); border-radius:2px; cursor:text; padding:4px; white-space:pre-wrap; }
/* The five .cc-diag-pill rules are deleted with the three pills they painted
   (2026-08-18). Nothing on this page carries the class any more. */
.cc-diag-text { font-size:11px; color:var(--text-xs); white-space:nowrap; }
.cc-diag-text strong { color:var(--text-dim); font-weight:500; }
.cc-header__actions { display:flex; align-items:center; gap:var(--sp-8); flex-shrink:0; }
.cc-shortcuts { display:flex; align-items:center; gap:6px; flex-shrink:1; min-width:0; overflow-x:auto; max-width:42%; padding:0 6px; }
.cc-shortcuts::-webkit-scrollbar { height:4px; }
.cc-shortcuts__hint { font-family:var(--mono); font-size:10px; color:var(--text-xs); opacity:0.5; white-space:nowrap; }
.cc-shortcut { display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 8px; background:var(--raised); border:1px solid var(--border); border-radius:14px; color:var(--text); font-family:var(--display); font-size:10px; letter-spacing:.04em; cursor:pointer; transition:background .12s, border-color .12s; white-space:nowrap; flex-shrink:0; }
.cc-shortcut:hover { background:var(--surface); border-color:var(--amber); }
.cc-shortcut__label { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.cc-shortcut__x { color:var(--text-xs); padding:0 4px; border-radius:50%; line-height:1; font-size:12px; }
.cc-shortcut__x:hover { color:var(--red); }
.cc-shortcut--add { padding:3px 10px; border-style:dashed; }
.cc-shortcut--add.on { background:var(--amber); color:var(--bg); border-color:var(--amber); border-style:solid; }
/* While pin mode is on, highlight all clickable subtabs + section tabs so user knows what's targetable. */
body.cc-pin-mode #cc-subnav .cc-subtab,
body.cc-pin-mode #op-layers-mount .op-l-tab { outline:1px dashed var(--amber); outline-offset:1px; cursor:crosshair !important; }
body.cc-pin-mode #cc-subnav .cc-subtab:hover,
body.cc-pin-mode #op-layers-mount .op-l-tab:hover { background:rgba(200,146,42,0.18) !important; }
body.cc-pin-mode #op-pills-toggle { outline:none !important; cursor:pointer !important; }
.cc-hbtn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; border:1px solid transparent; background:transparent; color:var(--text-dim); cursor:pointer; transition:all 0.12s; }
.cc-hbtn:hover { background:var(--raised); border-color:var(--border); color:var(--text); }
.cc-hbtn.theme-toggle { font-size:14px; }
.cc-user-pill { display:flex; align-items:center; gap:var(--sp-6); padding:3px 10px 3px 4px; border-radius:20px; border:1px solid var(--border); background:var(--raised); cursor:pointer; transition:all 0.12s; }
.cc-user-pill:hover { border-color:var(--amber); }
.cc-user-pill__avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dim) 100%); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:10px; font-weight:700; color:#000; letter-spacing:0.05em; }
.cc-user-pill__name { font-size:12px; font-weight:500; color:var(--text); }
/* Boards menu (2026-08-03): the user pill is a dropdown — every command centre we
   built, one click, already signed in. Sign out lives at the bottom. */
.cc-user-menu, .cc-hwrap { position:relative; }
.cc-user-pill__caret { font-size:8px; color:var(--text-dim); margin-left:1px; transition:transform 0.15s; }
.cc-user-menu.is-open .cc-user-pill__caret { transform:rotate(180deg); }
.cc-user-menu.is-open .cc-user-pill { border-color:var(--amber); }
.cc-hwrap.is-open > .cc-hbtn { background:var(--raised); border-color:var(--amber); color:var(--text); }
.cc-boards, .cc-hmenu { position:absolute; top:calc(100% + 6px); right:0; z-index:var(--z-popover); min-width:262px;
  background:var(--raised); border:1px solid var(--border-hi); border-radius:8px;
  box-shadow:0 12px 36px var(--black-55); padding:var(--sp-4); display:none; }
.cc-user-menu.is-open .cc-boards, .cc-hwrap.is-open .cc-hmenu { display:block; }
/* slider lives in a row of its own — a range input is not a menu item */
.cc-hmenu__row { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-10); }
.cc-hmenu__lbl { font-family:var(--sans); font-size:12.5px; color:var(--text); white-space:nowrap; }
.cc-hmenu__row input[type=range] { flex:1; height:4px; accent-color:var(--amber); cursor:pointer; min-width:0; }
/* voice picker: a real dropdown, wide enough to read a name on a phone */
.cc-hmenu__row select { flex:1; min-width:0; background:var(--surface); color:var(--text);
  border:1px solid var(--border-hi); border-radius:5px; padding:var(--sp-6) var(--sp-8);
  font-family:var(--sans); font-size:12.5px; cursor:pointer; }
.cc-hmenu__row select:focus { outline:1px solid var(--amber); }
.cc-hmenu__row.is-off { opacity:0.4; pointer-events:none; }
.cc-boards__hd { font-family:var(--display); font-size:8.5px; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--text-xs); padding:var(--sp-8) var(--sp-10) var(--sp-4); }
.cc-boards__item { display:flex; align-items:center; gap:var(--sp-8); width:100%; text-align:left;
  background:transparent; border:0; border-radius:5px; padding:var(--sp-8) var(--sp-10); cursor:pointer;
  color:var(--text); font-family:var(--sans); font-size:12.5px; line-height:1.3; }
.cc-boards__item:hover { background:var(--amber-soft); color:var(--amber); }
.cc-boards__item .ico { font-size:10px; color:var(--text-xs); width:12px; flex-shrink:0; }
.cc-boards__item:hover .ico { color:var(--amber); }
.cc-boards__note { margin-left:auto; padding-left:var(--sp-8); font-family:var(--mono); font-size:8px;
  color:var(--text-xs); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.cc-boards__sep { height:1px; background:var(--border); margin:var(--sp-4) var(--sp-4); }
.cc-boards__item--out:hover { background:var(--red-bg); color:var(--red); }
.cc-boards__item--out:hover .ico { color:var(--red); }
.cc-boards__item.is-busy { opacity:0.55; pointer-events:none; }
/* never let a long list run off a short screen */
.cc-boards, .cc-hmenu { max-height:calc(100vh - 70px); overflow-y:auto; }
/* edit-mode lit state: the id now sits on the row's icon, so light the whole row */
body.dash-edit-on .cc-boards__item:has(#edit-btn) { background:var(--amber); color:#000; }
body.dash-edit-on .cc-boards__item:has(#edit-btn) .ico { color:#000; }
/* Phone: break out to a full-width sheet. NOTE the explicit top — once this is
   position:fixed, `top:calc(100% + 6px)` would resolve against the VIEWPORT, not the
   pill, and drop the whole menu below the fold where it cannot be seen or scrolled to. */
@media (max-width:560px){
  .cc-boards, .cc-hmenu { position:fixed; top:53px; left:var(--sp-8); right:var(--sp-8); min-width:0; }
}

.cc-nav { background:var(--surface); border-bottom:1px solid var(--border); padding:0 var(--sp-24); display:flex; align-items:flex-end; gap:0; overflow-x:auto; scrollbar-width:none; flex-shrink:0; min-height:39px; }
.cc-nav::-webkit-scrollbar { display:none; }
.cc-nav__tab { font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); padding:var(--sp-10) var(--sp-16); border-bottom:2px solid transparent; cursor:pointer; transition:all 0.12s; white-space:nowrap; user-select:none; display:flex; align-items:center; gap:var(--sp-6); background:none; border-left:none; border-right:none; border-top:none; }
.cc-nav__tab:hover { color:var(--text); }
.cc-nav__tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.cc-nav__tab .badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:14px; padding:0 4px; border-radius:7px; font-size:9px; font-weight:700; font-family:var(--mono); background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-glow); }
.cc-nav__tab.active .badge { background:var(--amber); color:#000; border-color:var(--amber); }

.cc-body { padding:var(--sp-20) var(--sp-24); display:flex; flex-direction:column; gap:var(--sp-16); flex:1; min-height:0; overflow:hidden; }
.cc-lane { display:flex; flex-direction:column; gap:var(--sp-10); min-width:0; flex:1; min-height:0; overflow:hidden; }
/* Operator lane top gap. 2026-05-16 this collapsed cc-body's top padding so the gap below
   #op-string-pills matched the 6px above it. Alessio reversed that 2026-08-10: the bus block
   read as jammed against the sub-tab row, and command.azcustomknives.com (which never had this
   pull) is the look he wants. Back to cc-body's normal top padding on every breakpoint. */
.cc-lane[data-lane="operator"] { margin-top:0; }
/* Symmetric breathing room around the project-filter row — match its existing
   6px padding-top with a 6px padding-bottom so the gap below the filter
   chips equals the gap above them. Standard "cap" under the header stack so
   the look is consistent on every sub-tab where the pill row appears.
   Alessio 2026-05-31. */
#op-string-pills { padding-bottom:6px; }
/* DASHBOARD / SHOP / FORGE lanes own their internal scroll (their content doesn't have built-in overflow like OPERATOR subpanes do). */
.cc-lane[data-lane="dashboard"],
.cc-lane[data-lane="shop"],
.cc-lane[data-lane="work"],
.cc-lane[data-lane="print3d"],
.cc-lane[data-lane="forge"],
.cc-lane[data-lane="comms"] { overflow-y:auto; }
.cc-lane__head { display:none; } /* policy: lane title redundant with active main tab + subtabs — hidden on ALL lanes */
.cc-lane__bracket { font-family:var(--mono); font-size:10px; font-weight:500; color:var(--amber); opacity:0.6; flex-shrink:0; }
.cc-lane__title { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); flex:1; }
.cc-lane__count { font-family:var(--mono); font-size:10px; color:var(--text-xs); }

.cc-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:var(--sp-12); transition:border-color 0.12s; position:relative; overflow:hidden; }
.cc-card:hover { border-color:var(--border-hi); }
.cc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background 0.12s; }
.cc-card.amber::before  { background:var(--amber); }
.cc-card.green::before  { background:var(--green); }
.cc-card.red::before    { background:var(--red); }
.cc-card.yellow::before { background:var(--yellow); }
.cc-card.blue::before   { background:var(--blue); }
.cc-card__label { font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-xs); margin-bottom:var(--sp-6); }
.cc-card__title { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--text); line-height:1.35; margin-bottom:var(--sp-4); word-wrap:break-word; }
.cc-card__sub { font-size:12px; color:var(--text-dim); line-height:1.4; }
.cc-card__meta { display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); flex-wrap:wrap; }
.cc-card__time { font-family:var(--mono); font-size:10px; color:var(--text-xs); }
.cc-card__tag { display:inline-flex; align-items:center; padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.04em; }
.cc-card__tag.amber  { background:var(--amber-soft);  color:var(--amber); }
.cc-card__tag.green  { background:var(--green-bg);    color:var(--green); }
.cc-card__tag.red    { background:var(--red-bg);      color:var(--red); }
.cc-card__tag.yellow { background:var(--yellow-bg);   color:var(--yellow); }
.cc-card__tag.blue   { background:var(--blue-bg);     color:var(--blue); }
.cc-card__tag.muted  { background:var(--raised);      color:var(--text-xs); border:1px solid var(--border); }

.cc-stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-8); margin-bottom:var(--sp-10); }
.cc-stat { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:var(--sp-10) var(--sp-12); transition:border-color 0.12s, box-shadow 0.12s; }
a.cc-stat { text-decoration:none; color:inherit; cursor:pointer; display:block; }
a.cc-stat:hover { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber-glow); }
a.cc-stat:hover .cc-stat__lab { color:var(--amber); }
.cc-stat__val { font-family:var(--mono); font-size:20px; font-weight:500; color:var(--text); line-height:1; margin-bottom:3px; }
.cc-stat__val.amber { color:var(--amber); }
.cc-stat__val.green { color:var(--green); }
.cc-stat__val.red   { color:var(--red); }
.cc-stat__lab { font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-xs); }

.cc-msg { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:var(--sp-10) var(--sp-12); transition:border-color 0.12s; }
.cc-msg:hover { border-color:var(--border-hi); }
.cc-msg__header { display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.cc-msg__from { font-size:12px; font-weight:600; color:var(--text); flex:1; }
.cc-msg__time { font-family:var(--mono); font-size:10px; color:var(--text-xs); }
.cc-msg__body { font-size:12px; color:var(--text-dim); line-height:1.45; word-wrap:break-word; }
.cc-msg__body strong { color:var(--text); }
.cc-msg__channel { display:inline-flex; align-items:center; gap:3px; margin-top:var(--sp-6); font-family:var(--mono); font-size:10px; color:var(--text-xs); }
.cc-msg__channel.bus { color:var(--amber); }
.cc-msg__channel.email { color:var(--blue); }
.cc-msg__channel.slack { color:var(--green); }
.cc-msg__channel.telegram { color:#4493d4; }
.cc-msg__channel.chat { color:var(--amber); }
.cc-msg.unread { border-left:2px solid var(--amber); }
.cc-msg.unread .cc-msg__from { color:var(--amber); }
.cc-msg.bus-msg { cursor:pointer; }
.cc-msg.bus-msg:hover { border-color:var(--amber); }
.cc-msg.expanded { border-color:var(--amber); }
.cc-msg .cc-card__expand { display:none; }
.cc-msg.expanded .cc-card__expand { display:block; margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); }

.cc-bar { height:3px; background:var(--raised); border-radius:2px; overflow:hidden; margin-top:var(--sp-8); }
.cc-bar__fill { height:100%; border-radius:2px; background:var(--amber); transition:width 0.3s; }
.cc-bar__fill.green { background:var(--green); }
.cc-bar__fill.blue  { background:var(--blue); }

.cc-divider { display:flex; align-items:center; gap:var(--sp-8); font-family:var(--mono); font-size:9px; color:var(--text-xs); letter-spacing:0.1em; margin:var(--sp-4) 0; }
.cc-divider::before, .cc-divider::after { content:''; flex:1; height:1px; background:var(--border); }

.cc-stub { background:var(--surface); border:1px dashed var(--border); border-radius:4px; padding:var(--sp-16); color:var(--text-xs); font-size:12px; text-align:center; }
.cc-stub strong { color:var(--text-dim); display:block; margin-bottom:4px; font-weight:600; }

@media (max-width:1100px) { .cc-body { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) {
  .cc-body { grid-template-columns:1fr; padding:var(--sp-16); gap:var(--sp-20); }
  .cc-lane { border:1px solid var(--border); border-radius:6px; padding:var(--sp-12); background:var(--surface); }
  .cc-lane[data-lane="operator"] { margin-top:0; }
  .cc-header { padding:0 var(--sp-16); }
  .cc-nav { padding:0 var(--sp-16); }
  .cc-header__diag { display:none; }
}
@media (max-width:480px) {
  .cc-header { padding:0 var(--sp-12); height:48px; }
  .cc-sigil__wordmark { display:none; }
  .cc-header__sep { display:none; }
  .cc-body { padding:var(--sp-10); gap:var(--sp-12); }
  .cc-lane[data-lane="operator"] { margin-top:0; }
  .cc-nav { padding:0 var(--sp-8); top:48px; min-height:33px; }
  .cc-nav__tab { padding:var(--sp-8) var(--sp-10); font-size:10px; }
  .cc-subnav { padding:0 var(--sp-8); top:81px; }
  /* sticky positioning retired — body-flex handles chrome stacking, bus #1801 */
  .cc-stat__val { font-size:16px; }
  /* The old rule here hid every header button but the last on a phone, which is why
     the header "didn't come through" on a narrow screen. Voice and Tools are now
     dropdowns, so five controls fit and nothing has to be hidden. */
  .cc-header__actions { gap:var(--sp-4); }
  .cc-user-pill__name { display:none; }
}

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hi); }
/* Firefox ignores every -webkit- rule above, so without this line the board
   wore two pale system scrollbars on a black page. Token-driven: the light
   theme picks up its own border colour with no second rule. */
html { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

/* Bus chat surface */
.cc-card.bus-card { cursor:pointer; }
.cc-card.bus-card:hover { border-color:var(--amber); }
.cc-card.expanded { border-color:var(--amber); }
.cc-card__expand { display:none; margin-top:var(--sp-10); padding-top:var(--sp-10); border-top:1px solid var(--border); }
.cc-card.expanded .cc-card__expand { display:block; }
.cc-card__body-full { font-family:var(--mono); font-size:11px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:360px; overflow-y:auto; padding:var(--sp-8) var(--sp-10); background:var(--bg); border-radius:3px; border:1px solid var(--border); }
.cc-card__actions { display:flex; gap:var(--sp-6); margin-top:var(--sp-10); flex-wrap:wrap; }
.cc-card__btn { font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px; border-radius:3px; border:1px solid var(--border); background:var(--raised); color:var(--text-dim); cursor:pointer; transition:all 0.12s; }
.cc-card__btn:hover { color:var(--amber); border-color:var(--amber); }
.cc-card__btn:disabled { opacity:0.5; pointer-events:none; }
.cc-card__btn.primary { background:var(--amber); color:#000; border-color:var(--amber); }
.cc-card__btn.primary:hover { background:var(--amber-dim); border-color:var(--amber-dim); }
.cc-card__reply { margin-top:var(--sp-10); display:flex; flex-direction:column; gap:var(--sp-6); }
.cc-card__reply-input { width:100%; min-height:64px; max-height:220px; resize:vertical; font-family:var(--mono); font-size:11px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:var(--sp-6) var(--sp-8); line-height:1.45; }
.cc-card__reply-input:focus { outline:none; border-color:var(--amber); }
.cc-card__reply-meta { font-size:10px; color:var(--text-xs); font-family:var(--mono); }
.cc-thread { margin-top:var(--sp-10); display:flex; flex-direction:column; gap:var(--sp-6); }
.cc-thread__head { font-family:var(--display); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-xs); }
.cc-thread__msg { background:var(--raised); border:1px solid var(--border); border-left:2px solid var(--amber-dim); border-radius:3px; padding:var(--sp-6) var(--sp-10); }
.cc-thread__msg.parent { border-left-color:var(--blue); }
.cc-thread__from { font-family:var(--mono); font-size:10px; color:var(--text-dim); margin-bottom:3px; }
.cc-thread__from strong { color:var(--text); }
.cc-thread__body { font-family:var(--mono); font-size:11px; color:var(--text); line-height:1.45; white-space:pre-wrap; word-break:break-word; max-height:160px; overflow-y:auto; }

/* Compose modal */
.cc-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--sp-16); }
.cc-modal[hidden] { display:none; }
.cc-modal__backdrop { position:absolute; inset:0; background:var(--black-55); backdrop-filter:blur(2px); }
.cc-modal__panel { position:relative; width:100%; max-width:520px; background:var(--surface); border:1px solid var(--amber); border-radius:6px; box-shadow:0 10px 40px var(--black-40),0 0 24px var(--amber-glow); display:flex; flex-direction:column; max-height:calc(100vh - 32px); }
.cc-modal__head { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-12) var(--sp-16); border-bottom:1px solid var(--border); font-family:var(--display); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text); }
.cc-modal__close { background:none; border:none; color:var(--text-dim); font-size:22px; line-height:1; cursor:pointer; padding:0 var(--sp-6); }
.cc-modal__close:hover { color:var(--amber); }
.cc-modal__body { padding:var(--sp-16); display:flex; flex-direction:column; gap:var(--sp-8); overflow-y:auto; }
.cc-modal__label { font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-xs); margin-top:var(--sp-4); }
.cc-modal__field { font-family:var(--mono); font-size:12px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:var(--sp-8) var(--sp-10); }
.cc-modal__field:focus { outline:none; border-color:var(--amber); }
.cc-modal__textarea { min-height:140px; max-height:320px; resize:vertical; line-height:1.5; white-space:pre-wrap; }
.cc-modal__foot { display:flex; justify-content:flex-end; gap:var(--sp-6); padding:var(--sp-12) var(--sp-16); border-top:1px solid var(--border); }
@media (max-width:480px) { .cc-modal__panel { max-width:none; } }

/* Sessions cards */
.cc-session { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:var(--sp-10) var(--sp-12); transition:border-color 0.12s; }
.cc-session:hover { border-color:var(--border-hi); }
.cc-session__header { display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.cc-session__id { font-family:var(--mono); font-size:10px; color:var(--amber); font-weight:500; }
.cc-session__device { font-size:11px; font-weight:600; color:var(--text); flex:1; }
.cc-session__status { font-family:var(--mono); font-size:10px; }
.cc-session__status.active  { color:var(--green); }
.cc-session__status.idle    { color:var(--yellow); }
.cc-session__status.closed  { color:var(--text-xs); }
.cc-session__model { font-size:11px; color:var(--text-dim); margin-bottom:var(--sp-4); }
.cc-session__model span { color:var(--text); font-weight:500; }
.cc-session__meta { display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.cc-session__stat { font-family:var(--mono); font-size:10px; color:var(--text-xs); }
.cc-session__stat strong { color:var(--text-dim); }
.cc-session.session-card { cursor:pointer; }
.cc-session.session-card:hover { border-color:var(--amber); }
.cc-session.expanded { border-color:var(--amber); }
.cc-session__expand { display:none; margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.cc-session.expanded .cc-session__expand { display:block; }
.cc-session__intent { font-family:var(--mono); font-size:11px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow-y:auto; padding:var(--sp-8) var(--sp-10); background:var(--bg); border-radius:3px; border:1px solid var(--border); }
.cc-session__detail-grid { display:grid; grid-template-columns:auto 1fr; gap:4px var(--sp-10); margin-top:var(--sp-8); font-family:var(--mono); font-size:10px; }
.cc-session__detail-grid dt { color:var(--text-xs); }
.cc-session__detail-grid dd { color:var(--text); }

/* Chat panel — alessio ↔ forge instance, realtime threaded */
.cc-chat { background:var(--surface); border:1px solid var(--amber-glow); border-radius:6px; padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-8); margin-bottom:var(--sp-10); }
.cc-chat__head { display:flex; align-items:center; gap:var(--sp-8); padding-bottom:var(--sp-8); border-bottom:1px solid var(--border); }
.cc-chat__title { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); flex:1; }
.cc-chat__target { font-family:var(--mono); font-size:11px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:3px 6px; }
.cc-chat__target:focus { outline:none; border-color:var(--amber); }
.cc-chat__feed { display:flex; flex-direction:column; gap:var(--sp-6); max-height:340px; min-height:140px; overflow-y:auto; padding-right:var(--sp-6); }
.cc-chat__msg { padding:var(--sp-6) var(--sp-10); border-radius:6px; max-width:88%; }
.cc-chat__msg.me { align-self:flex-end; background:var(--amber-soft); border:1px solid var(--amber-glow); color:var(--text); }
.cc-chat__msg.them { align-self:flex-start; background:var(--raised); border:1px solid var(--border); color:var(--text); }
.cc-chat__msg__from { font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-bottom:3px; letter-spacing:0.08em; text-transform:uppercase; }
.cc-chat__msg__body { font-size:12px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.cc-chat__msg__meta { font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-top:4px; display:flex; gap:6px; }
.cc-chat__compose { display:flex; flex-direction:column; gap:var(--sp-6); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.cc-chat__compose textarea { width:100%; min-height:48px; max-height:160px; resize:vertical; font-family:var(--mono); font-size:12px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:var(--sp-6) var(--sp-8); line-height:1.45; }
.cc-chat__compose textarea:focus { outline:none; border-color:var(--amber); }
.cc-chat__compose-bar { display:flex; gap:var(--sp-6); justify-content:space-between; align-items:center; }
.cc-chat__hint { font-family:var(--mono); font-size:9px; color:var(--text-xs); }

/* ─── Comms — modern chat 2026 (web-search informed: rounded bubbles,
     avatars, status ticks, group consecutive, date dividers, depth) ─ */

/* Peer rail — vertical contact list, telegram/messenger style */
.cc-chat-app { display:grid; grid-template-columns: 220px 1fr; gap:0; height:560px; max-height:65vh;
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
.cc-chat-rail { display:flex; flex-direction:column; background:var(--raised); border-right:1px solid var(--border);
  overflow-y:auto; padding:var(--sp-8) var(--sp-6); gap:var(--sp-2); }
.cc-chat-rail__title { font-family:var(--display); font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-xs); padding:var(--sp-6) var(--sp-8) var(--sp-8); }
.cc-chat-peer { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-10); border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--text-dim); cursor:pointer; transition:background var(--tr-fast), color var(--tr-fast); text-align:left; }
.cc-chat-peer:hover { background:rgba(200,146,42,0.06); color:var(--text); }
.cc-chat-peer.active { background:rgba(200,146,42,0.12); color:var(--text); border-color:var(--amber-glow); }
.cc-chat-peer__avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--amber) 0%, var(--amber-dim) 100%);
  color:#000; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:0.04em; }
.cc-chat-peer__avatar.alt    { background:linear-gradient(135deg, var(--blue) 0%, #2c6fa0 100%); color:#fff; }
.cc-chat-peer__avatar.bcast  { background:linear-gradient(135deg, #555 0%, #333 100%); color:#fff; }
.cc-chat-peer__avatar .pdot  { position:absolute; right:-1px; bottom:-1px; width:var(--sp-10); height:var(--sp-10); border-radius:50%;
  border:2px solid var(--raised); }
.cc-chat-peer.active .cc-chat-peer__avatar .pdot { border-color:rgba(200,146,42,0.12); }
.cc-chat-peer__avatar .pdot.online    { background:var(--green); box-shadow:0 0 6px var(--green); }
.cc-chat-peer__avatar .pdot.idle      { background:var(--yellow); }
.cc-chat-peer__avatar .pdot.offline   { background:var(--text-xs); }
.cc-chat-peer__avatar .pdot.human     { background:var(--blue); box-shadow:0 0 6px var(--blue); }
.cc-chat-peer__avatar .pdot.broadcast { background:transparent; border:2px solid var(--text-xs); }
.cc-chat-peer__info { flex:1; min-width:0; }
.cc-chat-peer__name { font-size:13px; font-weight:600; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-chat-peer__last { font-size:11px; color:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cc-chat-peer__meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.cc-chat-peer__time { font-family:var(--mono); font-size:9px; color:var(--text-xs); }
.cc-chat-peer__pbadge { background:var(--amber); color:#000; padding:1px 6px; border-radius:9px; font-size:9px; font-weight:700; min-width:18px; text-align:center; }

/* Conversation pane */
.cc-chat-pane { display:flex; flex-direction:column; min-width:0; background:var(--bg); }
.cc-chat-pane__head { padding:var(--sp-10) 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--sp-10);
  background:var(--surface); }
.cc-chat-pane__head .cc-chat-peer__avatar { width:30px; height:30px; font-size:11px; }
.cc-chat-pane__head__title { font-size:13px; font-weight:600; color:var(--text); }
.cc-chat-pane__head__sub { font-size:11px; color:var(--text-xs); }

.cc-chat-feed { display:flex; flex-direction:column; gap:var(--sp-2); flex:1; overflow-y:auto; padding:14px 14px var(--sp-8);
  background:linear-gradient(180deg, var(--bg) 0%, rgba(13,17,23,0.65) 100%);
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.cc-chat-day { align-self:center; font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-xs); background:var(--raised); padding:3px var(--sp-10); border-radius:10px; margin:var(--sp-10) 0 var(--sp-6);
  border:1px solid var(--border); }

.cc-chat-row { display:flex; align-items:flex-end; gap:var(--sp-8); max-width:78%; margin-bottom:1px; }
.cc-chat-row.me { align-self:flex-end; flex-direction:row-reverse; }
.cc-chat-row.them { align-self:flex-start; }
.cc-chat-row__avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--amber) 0%, var(--amber-dim) 100%); color:#000;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:10px;
  visibility:hidden; }
.cc-chat-row__avatar.alt   { background:linear-gradient(135deg, var(--blue) 0%, #2c6fa0 100%); color:#fff; }
.cc-chat-row__avatar.bcast { background:linear-gradient(135deg, #555 0%, #333 100%); color:#fff; }
.cc-chat-row.first .cc-chat-row__avatar { visibility:visible; }

.cc-chat-bubble { padding:9px 13px; border-radius:18px; position:relative; word-break:break-word;
  background:var(--raised); border:1px solid var(--border); color:var(--text);
  box-shadow:0 1px 2px var(--black-25); }
.cc-chat-row.me .cc-chat-bubble { background:linear-gradient(135deg, var(--amber) 0%, #b88324 100%); color:#000; border-color:rgba(200,146,42,0.45); }
.cc-chat-row.them .cc-chat-bubble { background:var(--surface); }

/* Tail trim — first/last in a stack get tight corners on the avatar side */
.cc-chat-row.them.first .cc-chat-bubble { border-top-left-radius:6px; }
.cc-chat-row.them.last  .cc-chat-bubble { border-bottom-left-radius:6px; }
.cc-chat-row.me.first   .cc-chat-bubble { border-top-right-radius:6px; }
.cc-chat-row.me.last    .cc-chat-bubble { border-bottom-right-radius:6px; }

.cc-chat-bubble__from { display:none; font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-bottom:3px;
  letter-spacing:0.08em; text-transform:uppercase; }
.cc-chat-row.them.first .cc-chat-bubble__from { display:block; }
.cc-chat-bubble__body { font-size:13px; line-height:1.45; white-space:pre-wrap; }
.cc-chat-bubble__meta { display:flex; align-items:center; gap:5px; margin-top:3px; font-family:var(--mono); font-size:9px; color:var(--text-xs); justify-content:flex-end; }
.cc-chat-row.me .cc-chat-bubble__meta { color:rgba(0,0,0,0.55); }
.cc-chat-bubble__ticks { font-size:11px; line-height:1; }
.cc-chat-bubble__ticks.read { color:var(--blue); }
.cc-chat-row.me .cc-chat-bubble__ticks.read { color:#0a4570; }

.cc-chat-bubble__voice { position:absolute; top:-10px; right:8px; display:none; gap:2px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:2px 6px; box-shadow:0 2px 6px rgba(0,0,0,0.35); }
.cc-chat-bubble:hover .cc-chat-bubble__voice { display:inline-flex; }
.cc-chat-bubble__speak,
.cc-chat-bubble__stop { background:transparent; border:0; cursor:pointer; font-size:11px; padding:0 3px; color:var(--text); line-height:1; }
.cc-chat-bubble__speak:hover { color:var(--amber); }
.cc-chat-bubble__stop:hover  { color:var(--red); }

/* Read-selection control. Alessio 2026-08-24: "make it slimmer and sit it next
   to the text it reads instead of fixed to the top right corner in amber bold."
   Absolute + page coordinates, placed at the selection by _initClickToRead(), so
   it stays glued to the words while the page scrolls under it. Quiet chrome:
   no fill, no bold, amber only on hover. */
#cc-voice-read-stopwrap { position:absolute; top:0; left:0; z-index:var(--z-toast); display:flex; gap:var(--sp-4); }
#cc-voice-read-stopwrap button { background:var(--surface); color:var(--text-dim); border:1px solid var(--border); border-radius:3px; padding:2px 8px; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:0.02em; line-height:1.6; cursor:pointer; box-shadow:0 2px 6px var(--black-25); }
#cc-voice-read-stopwrap button:hover { color:var(--amber); border-color:var(--amber); }
#cc-voice-read-stopwrap button.stop { background:var(--surface); color:var(--text-dim); }
#cc-voice-read-stopwrap button.stop:hover { color:var(--red); border-color:var(--red); }

/* Compose dock */
.cc-chat-compose { display:flex; align-items:flex-end; gap:var(--sp-8); padding:var(--sp-10) var(--sp-12); border-top:1px solid var(--border);
  background:var(--surface); }
.cc-chat-compose textarea { flex:1; min-height:38px; max-height:140px; resize:none; font-family:var(--sans); font-size:13px;
  background:var(--raised); color:var(--text); border:1px solid var(--border); border-radius:18px;
  padding:9px 14px; line-height:1.4; transition:border-color 0.12s; }
.cc-chat-compose textarea:focus { outline:none; border-color:var(--amber); }
.cc-chat-compose-actions { display:flex; gap:var(--sp-6); align-items:center; }
.cc-chat-mic, .cc-chat-compose button[id="co-chat-send"] {
  width:40px; height:40px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; border:0;
}
.cc-chat-mic { background:var(--raised) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
.cc-chat-mic:hover { background:var(--overlay) !important; border-color:var(--amber) !important; }
.cc-chat-mic.listening {
  background:var(--red) !important; color:#fff !important; border-color:var(--red) !important;
  animation: cc-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes cc-mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,83,75,0.7); }
  50%     { box-shadow: 0 0 0 10px rgba(229,83,75,0); }
}
button[id="co-chat-send"] { background:var(--amber) !important; color:#000 !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; box-shadow:0 2px 8px rgba(200,146,42,0.4); }
button[id="co-chat-send"]:hover { background:var(--amber-dim) !important; }
.cc-chat-transcript { font-family:var(--mono); font-size:10px; color:var(--text-xs); padding:4px 12px 8px;
  background:var(--surface); border-top:1px solid var(--border); min-height:0; font-style:italic; }
.cc-chat-transcript:empty { display:none; }
.cc-chat-transcript.live { color:var(--red); font-style:normal; }

@media (max-width:800px) {
  .cc-chat-app { grid-template-columns: 1fr; height:auto; min-height:60vh; }
  .cc-chat-rail { display:none; }
  .cc-chat-rail.mobile-open { display:flex; position:fixed; inset:0; z-index:1000; }
}

#cc-voice-read-btn {
  position:fixed; top:60px; right:16px; z-index:var(--z-toast);
  background:var(--amber); color:#000; border:0; border-radius:4px;
  padding:var(--sp-6) var(--sp-12); font-family:var(--display); font-size:11px;
  font-weight:700; letter-spacing:0.1em; cursor:pointer; display:none;
  box-shadow:0 4px 12px var(--black-25);
}
#cc-voice-read-btn:hover { background:var(--amber-dim); }

/* ─── FORGE evolution lane (forge-evolution.js mounts into these IDs) ─── */
.fe-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-16); }
@media (min-width:980px){ .fe-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
.fe-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:var(--sp-16); position:relative; }
.fe-card::before, .fe-card::after { content:''; position:absolute; width:10px; height:10px; border-color:var(--amber); border-style:solid; opacity:0.55; }
.fe-card::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.fe-card::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.fe-card__head { display:flex; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-12); }
.fe-card__bracket { font-family:var(--mono); font-size:10px; color:var(--amber); opacity:0.6; }
.fe-card__title { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); }
.fe-card__hint  { font-family:var(--mono); font-size:10px; color:var(--text-xs); margin-left:auto; }

.fe-radar-wrap { position:relative; width:100%; height:440px; max-width:520px; margin:0 auto; }
.fe-radar-legend { display:flex; justify-content:center; gap:var(--sp-16); margin-top:var(--sp-10); flex-wrap:wrap; font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.fe-leg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:4px; }

.fe-slider-wrap { margin:var(--sp-16) auto 0; max-width:560px; padding:0 var(--sp-8); }
.fe-slider-wrap input[type=range]{ -webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; }
.fe-slider-wrap input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; background:var(--amber); border-radius:50%; cursor:pointer; box-shadow:0 0 6px rgba(200,146,42,0.6); }
.fe-slider-wrap input[type=range]::-moz-range-thumb{ width:16px; height:16px; background:var(--amber); border-radius:50%; border:0; cursor:pointer; }
#fe-slider-label { font-family:var(--display); font-size:14px; font-weight:700; color:var(--text); margin-top:var(--sp-8); text-align:center; letter-spacing:0.04em; }
#fe-slider-sub   { font-size:12px; color:var(--text-dim); margin-top:2px; text-align:center; line-height:1.5; }

#fe-ring-progress { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6); padding:var(--sp-10) var(--sp-12); border:1px solid var(--border); border-radius:4px; background:var(--raised); font-family:var(--mono); font-size:11px; color:var(--text-dim); }
.fe-rp-label { color:var(--text-xs); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; }
.fe-rp-val   { color:var(--text); font-weight:600; }
.fe-rp-sep   { color:var(--text-xs); margin:0 4px; }

.fe-metric-row { display:flex; align-items:center; margin-bottom:var(--sp-8); gap:var(--sp-10); }
.fe-metric-label { width:160px; font-size:12px; font-weight:600; color:var(--text-dim); flex-shrink:0; }
.fe-metric-track { flex:1; height:22px; background:var(--raised); border-radius:3px; position:relative; overflow:hidden; border:1px solid var(--border); }
.fe-metric-fill-prev { position:absolute; top:0; left:0; height:100%; background:#8b949e; opacity:0.18; border-radius:3px; }
.fe-metric-fill-now  { position:absolute; top:0; left:0; height:100%; border-radius:3px; transition:width 0.7s ease; box-shadow:0 0 8px var(--amber-medium); }
.fe-metric-score { width:50px; text-align:right; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--amber); flex-shrink:0; }
.fe-metric-max { color:var(--text-xs); font-weight:400; font-size:10px; }
.fe-ledger-legend { display:flex; gap:var(--sp-16); margin-top:var(--sp-10); padding-top:var(--sp-10); border-top:1px solid var(--border); flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--text-dim); }
.fe-legend-item { display:flex; align-items:center; gap:var(--sp-6); }
.fe-legend-prev { display:inline-block; width:18px; height:6px; background:#8b949e; opacity:0.4; border-radius:2px; }

.fe-timeline-wrap { overflow-x:auto; padding:var(--sp-8) 2px var(--sp-12); }
.fe-timeline-row { display:flex; gap:0; min-width:max-content; align-items:flex-start; }
.fe-timeline-node { display:flex; flex-direction:column; align-items:center; min-width:80px; padding:var(--sp-8) var(--sp-6); cursor:pointer; border-radius:4px; background:transparent; border:0; color:inherit; transition:background 0.18s; }
.fe-timeline-node:hover { background:var(--raised); }
.fe-timeline-node.active { background:var(--amber-soft); }
.fe-tl-dot { width:var(--sp-10); height:var(--sp-10); border-radius:50%; border:2px solid var(--text-dim); background:transparent; margin-bottom:var(--sp-6); flex-shrink:0; }
.fe-tl-ver { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text); }
.fe-tl-date { font-family:var(--mono); font-size:9px; color:var(--text-xs); margin-top:2px; }
.fe-tl-name { font-size:10px; color:var(--text-dim); margin-top:3px; max-width:90px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fe-timeline-node.active .fe-tl-ver { color:var(--amber); }
.fe-tl-line { width:18px; height:1px; background:var(--border); align-self:flex-start; margin-top:14px; flex-shrink:0; }

/* v1.0 NEXT card */
#fe-v1-card { background:linear-gradient(180deg, var(--amber-soft) 0%, transparent 100%); border:1px solid var(--amber); border-radius:6px; padding:var(--sp-16); position:relative; }
.fe-v1-head { display:flex; align-items:center; gap:var(--sp-10); margin-bottom:var(--sp-10); flex-wrap:wrap; }
.fe-v1-tag { font-family:var(--display); font-size:9px; font-weight:700; letter-spacing:0.18em; padding:2px 8px; background:var(--amber); color:#000; border-radius:2px; }
.fe-v1-ver { font-family:var(--display); font-size:18px; font-weight:700; color:var(--amber); letter-spacing:0.04em; }
.fe-v1-name { font-family:var(--display); font-size:14px; font-weight:600; color:var(--text); }
.fe-v1-anchor { font-family:var(--mono); font-size:11px; color:var(--text-xs); font-style:italic; margin-left:auto; }
.fe-v1-body { font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:var(--sp-12); }
.fe-v1-body em { color:var(--amber); font-style:normal; font-weight:600; }
.fe-v1-gates { display:flex; flex-direction:column; gap:var(--sp-6); }
.fe-v1-gate { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); background:var(--raised); border:1px solid var(--border); border-radius:4px; }
.fe-v1-gate.done { border-color:var(--green); background:var(--green-bg); }
.fe-v1-dot { width:var(--sp-10); height:var(--sp-10); border-radius:50%; border:2px solid var(--amber); background:transparent; flex-shrink:0; }
.fe-v1-dot.done { background:var(--green); border-color:var(--green); box-shadow:0 0 8px var(--green); }
.fe-v1-glabel { flex:1; font-size:13px; color:var(--text); font-weight:500; }
.fe-v1-gstatus { font-family:var(--mono); font-size:10px; color:var(--text-xs); text-transform:uppercase; letter-spacing:0.08em; }
.fe-v1-gate.done .fe-v1-gstatus { color:var(--green); }

/* Philosophy tab */
.fe-phil-grid { display:grid; gap:var(--sp-16); grid-template-columns:1fr; }
@media (min-width:780px){ .fe-phil-grid { grid-template-columns:repeat(3,1fr); } }
.fe-phil-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:var(--sp-16); position:relative; }
.fe-phil-head { display:flex; align-items:center; gap:var(--sp-12); margin-bottom:var(--sp-10); }
.fe-phil-glyph { font-size:36px; font-weight:800; line-height:1; }
.fe-phil-title { font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:0.06em; }
.fe-phil-sub { font-size:11px; color:var(--text-xs); font-family:var(--mono); margin-top:2px; }
.fe-phil-body { font-size:12px; color:var(--text-dim); line-height:1.65; margin-top:var(--sp-8); }
.fe-phil-body p { margin-bottom:var(--sp-8); }
.fe-phil-body em { color:var(--amber); font-style:normal; font-weight:600; }
.fe-phil-anchor { display:inline-block; margin-top:var(--sp-10); padding:4px 10px; border:1px solid var(--amber); border-radius:3px; font-family:var(--mono); font-size:10px; color:var(--amber); letter-spacing:0.06em; }
.fe-phil-divider { border:0; border-top:1px solid var(--border); margin:var(--sp-24) 0 var(--sp-16); }
.fe-phil-list { display:grid; gap:var(--sp-12); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.fe-phil-item { padding:var(--sp-12); background:var(--raised); border:1px solid var(--border); border-radius:4px; }
.fe-phil-item h4 { font-family:var(--display); font-size:12px; font-weight:700; color:var(--amber); letter-spacing:0.08em; margin-bottom:var(--sp-6); text-transform:uppercase; }
.fe-phil-item p  { font-size:12px; color:var(--text-dim); line-height:1.6; margin:0; }

/* ─── OPERATOR · one dyslexia-friendly font across Projects / Plans / Tasks ───
   Alessio 2026-07-27: "I need all of them to be unified with the same font,
   with the dyslexic font. Lexend."
   --display and --sans were already Lexend; only --mono (JetBrains Mono) broke
   the unity, and it was used in ~53 places across the operator panels. Rather
   than rewrite each one, re-point the variable inside the Operator lane so
   every panel inherits Lexend. Real code/pre keeps a monospace face, since
   code is meant to be read as code. Revert = delete this block. */
[data-lane="operator"] { --mono:'Lexend','Mukta',system-ui,sans-serif; }
[data-lane="operator"] code,
[data-lane="operator"] pre,
[data-lane="operator"] textarea { font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ─── OPERATOR · Layers + Tasks subtab styling (forge-operator.js) ─── */
.op-task-card { transition:border-color 0.12s; }
.op-task-card:hover { border-color:var(--amber); }

/* Inner section nav inside [ Layers ] subtab — Map / Matrix / Rules / Health */
.op-l-nav { display:flex; gap:var(--sp-6); margin-bottom:var(--sp-12); flex-wrap:wrap; padding-bottom:var(--sp-8); border-bottom:1px solid var(--border); }
.op-l-tab { font-family:var(--display); font-size:10px; font-weight:600; padding:5px 12px; letter-spacing:0.12em; text-transform:uppercase; background:var(--raised); color:var(--text-dim); border:1px solid var(--border); border-radius:3px; cursor:pointer; }
.op-l-tab.active { background:var(--amber); color:#000; border-color:var(--amber); }
.op-l-tab:hover:not(.active) { color:var(--amber); border-color:var(--amber); }
.op-l-section { display:none; }
.op-l-section.active { display:block; }

/* Section card — same look as fe-card but slimmer */
.op-l-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:var(--sp-12) var(--sp-16); position:relative; margin-bottom:var(--sp-12); }
.op-l-card::before, .op-l-card::after { content:''; position:absolute; width:8px; height:8px; border-color:var(--amber); border-style:solid; opacity:0.45; }
.op-l-card::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.op-l-card::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.op-l-card-head { display:flex; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-12); flex-wrap:wrap; }
.op-l-bracket { font-family:var(--mono); font-size:10px; color:var(--amber); opacity:0.6; }
.op-l-title { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); }
.op-l-hint  { font-family:var(--mono); font-size:10px; color:var(--text-xs); margin-left:auto; }

/* Map subtab — 5-layer stack */
.op-l-stack { display:flex; flex-direction:column; gap:var(--sp-8); }
.op-l-row { display:flex; gap:var(--sp-12); padding:var(--sp-10) var(--sp-12); background:var(--raised); border-radius:4px; }
.op-l-num { font-family:var(--display); font-size:24px; font-weight:800; line-height:1; flex-shrink:0; min-width:30px; }
.op-l-col { flex:1; min-width:0; }
.op-l-name { font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:0.04em; }
.op-l-desc { font-size:12px; color:var(--text-dim); margin:2px 0 6px; }
.op-l-meta { font-family:var(--mono); font-size:10px; color:var(--text-xs); margin-top:2px; }
.op-l-meta code { color:var(--text); background:var(--bg); padding:1px 5px; border-radius:2px; }
.op-l-key { color:var(--text-xs); margin-right:4px; }

/* 15-Surface inventory grid */
.op-l-surface-grid { display:grid; gap:var(--sp-12); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.op-l-surf-group { background:var(--raised); padding:var(--sp-10); border-radius:4px; border:1px solid var(--border); }
.op-l-surf-head { font-family:var(--display); font-size:11px; font-weight:700; color:var(--amber); letter-spacing:0.08em; margin-bottom:var(--sp-8); text-transform:uppercase; }
.op-l-surf-list { list-style:none; padding:0; margin:0; }
.op-l-surf-list li { font-family:var(--mono); font-size:10px; color:var(--text-dim); padding:3px 0; line-height:1.5; }
.op-l-surf-list code { color:var(--text); }

/* Matrix subtab */
.op-l-matrix-wrap { overflow-x:auto; max-height:520px; }
.op-l-matrix { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:10px; }
.op-l-matrix th, .op-l-matrix td { padding:4px 6px; border:1px solid var(--border); text-align:center; }
.op-l-matrix thead th { background:var(--raised); position:sticky; top:0; z-index:1; }
.op-l-matrix .op-l-mh-row { text-align:left; min-width:200px; }
.op-l-matrix .op-l-mh-col { font-size:9px; color:var(--amber); }
.op-l-matrix .op-l-mh-sub { font-size:8px; color:var(--text-xs); font-weight:400; }
.op-l-matrix .op-l-mr { text-align:left; color:var(--text-dim); white-space:nowrap; }
.op-l-matrix .op-l-mr code { color:var(--text); }
.op-l-matrix .op-l-mc { font-size:13px; cursor:default; }
.op-l-c { display:inline-block; }
.op-l-c.empty { color:var(--text-xs); }
.op-l-legend { display:flex; gap:var(--sp-12); margin-top:var(--sp-8); font-family:var(--mono); font-size:10px; color:var(--text-dim); }

/* Rules subtab */
.op-l-filters { display:flex; gap:var(--sp-6); flex-wrap:wrap; margin-bottom:var(--sp-12); align-items:center; }
.op-l-search { flex:1; min-width:200px; font-family:var(--mono); font-size:11px; padding:6px 10px; background:var(--raised); border:1px solid var(--border); border-radius:3px; color:var(--text); outline:none; }
.op-l-search:focus { border-color:var(--amber); }
.op-l-chip { font-family:var(--display); font-size:10px; font-weight:600; padding:5px 10px; letter-spacing:0.08em; text-transform:uppercase; background:var(--raised); color:var(--text-dim); border:1px solid var(--border); border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.op-l-chip.active { background:var(--amber); color:#000; border-color:var(--amber); }
.op-l-chip:hover:not(.active) { color:var(--amber); border-color:var(--amber); }
.op-l-cnt { font-family:var(--mono); font-size:9px; opacity:0.7; }
.op-l-rules-list { display:flex; flex-direction:column; gap:var(--sp-8); }
.op-rule-card { cursor:pointer; transition:border-color 0.12s; }
.op-rule-card:hover { border-color:var(--amber); }
.op-rule-full { display:none; margin-top:var(--sp-10); padding-top:var(--sp-10); border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--text); white-space:pre-wrap; word-break:break-word; max-height:360px; overflow-y:auto; padding:var(--sp-8) var(--sp-10); background:var(--bg); border-radius:3px; line-height:1.5; }
.op-rule-card.expanded .op-rule-full { display:block; }

/* Health subtab */
.op-l-health-grid { display:grid; gap:var(--sp-12); grid-template-columns:1fr; }
@media (min-width:980px){ .op-l-health-grid { grid-template-columns:1fr 1fr; } }
.op-l-progress { height:6px; background:var(--raised); border-radius:3px; overflow:hidden; margin-bottom:var(--sp-12); border:1px solid var(--border); }
.op-l-progress-fill { height:100%; background:linear-gradient(90deg, var(--amber), var(--green)); transition:width 0.6s ease; box-shadow:0 0 8px var(--amber-strong); }
.op-l-fixes { display:flex; flex-direction:column; gap:var(--sp-6); max-height:480px; overflow-y:auto; }
.op-l-fix { display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-10); background:var(--raised); border:1px solid var(--border); border-radius:3px; }
.op-l-fix.done { opacity:0.55; background:var(--green-bg); border-color:var(--green); }
.op-l-fix-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.op-l-fix-dot.done    { background:var(--green); box-shadow:0 0 6px var(--green); }
.op-l-fix-dot.urgent  { background:var(--red);   box-shadow:0 0 6px var(--red); }
.op-l-fix-dot.pending { background:var(--amber); }
.op-l-fix-title { flex:1; font-size:12px; color:var(--text); font-weight:500; }
.op-l-fix.done .op-l-fix-title { text-decoration:line-through; color:var(--text-dim); }
.op-l-audit-link { margin-top:var(--sp-12); padding-top:var(--sp-10); border-top:1px solid var(--border); font-family:var(--mono); font-size:10px; }
.op-l-audit-link a { color:var(--amber); text-decoration:none; }
.op-l-audit-link a:hover { text-decoration:underline; }
.op-l-audit-hint { color:var(--text-xs); margin-left:8px; }

/* Census */
.op-l-census { display:flex; flex-direction:column; gap:var(--sp-8); }
.op-l-cen-row { display:flex; align-items:center; gap:var(--sp-8); position:relative; padding:var(--sp-6) 0; }
.op-l-cen-bar { position:absolute; left:0; top:0; bottom:0; border-radius:2px; opacity:0.18; }
.op-l-cen-bar.enforced { background:var(--green); }
.op-l-cen-bar.honor    { background:var(--amber); }
.op-l-cen-bar.partial  { background:var(--blue); }
.op-l-cen-bar.notyet   { background:var(--red); }
.op-l-cen-label { flex:1; font-size:12px; color:var(--text); position:relative; padding-left:var(--sp-8); font-weight:500; }
.op-l-cen-val { font-family:var(--mono); font-size:11px; color:var(--amber); font-weight:700; position:relative; padding-right:var(--sp-8); }
.op-l-census-hint { font-size:11px; color:var(--text-dim); margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:1px solid var(--border); line-height:1.5; }
.op-l-census-hint strong { color:var(--text); }

/* ════════════════════════════════════════════════
   Overwatch — inline in the Overwatch tab
   (was separate overwatch.html loaded via iframe)
   ════════════════════════════════════════════════ */
.cc-lane[data-lane="overwatch"] { gap:0; overflow:hidden; }
.cc-lane[data-lane="overwatch"] .ow-shell { height:calc(100vh - 200px); min-height:520px; }
.ow-shell { display:grid; grid-template-columns:280px 1fr; flex:1; min-height:0; }
.ow-side  { background:var(--surface); border-right:1px solid var(--border-hi); padding:var(--sp-12) var(--sp-16); overflow:auto; }
.ow-main  { position:relative; background:var(--bg); overflow:hidden; }
.ow-grid  { position:absolute; inset:0; pointer-events:none;
            background-image:
              linear-gradient(to right,  rgba(150,170,190,.16) 1px, transparent 1px),
              linear-gradient(to bottom, rgba(150,170,190,.16) 1px, transparent 1px),
              linear-gradient(to right,  rgba(200,146,42,.28) 1px, transparent 1px),
              linear-gradient(to bottom, rgba(200,146,42,.28) 1px, transparent 1px);
            background-size: 50px 50px, 50px 50px, 200px 200px, 200px 200px;
            background-position: 0 0;
            transform-origin: 0 0; opacity:.4; }
.ow-group-lock { pointer-events:auto; cursor:pointer; background:transparent; border:0; padding:2px 8px 2px 0; font-size:16px; line-height:1; vertical-align:middle; opacity:0.85; transition:opacity .12s, transform .12s; }
.ow-group-lock:hover { opacity:1; transform:scale(1.15); }
.ow-group-lock.locked { opacity:1; }
#ow-cy    { position:absolute; inset:0; background:#1c232b; }
.ow-stats { display:flex; gap:var(--sp-8); flex-wrap:wrap; padding:var(--sp-10) var(--sp-16); border-bottom:1px solid var(--border-hi); background:var(--raised); font-family:var(--mono); font-size:13px; color:var(--text); }
.ow-stat  { padding:var(--sp-4) var(--sp-12); background:var(--surface); border:1px solid var(--border-hi); border-radius:3px; }
.ow-stat b { color:var(--amber); font-weight:600; }
.ow-side h3 { font-family:var(--display); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text); margin:var(--sp-12) 0 var(--sp-6); }
.ow-side h3:first-child { margin-top:0; }
.ow-side h3.tip-h3 { font-size:10px; color:var(--text-dim); border:0; margin-top:var(--sp-16); }
/* Active Project card — Overwatch side panel */
.ow-side .ow-proj { background:var(--surface); border:1px solid var(--amber-glow); border-left:2px solid var(--amber); border-radius:4px; padding:var(--sp-8) var(--sp-10); }
.ow-side .ow-proj__title { font-family:var(--display); font-size:12px; font-weight:700; color:var(--amber); letter-spacing:.06em; line-height:1.25; }
.ow-side .ow-proj__sub { font-size:10px; color:var(--text-dim); margin-top:3px; line-height:1.3; }
.ow-side .ow-proj__row { display:flex; gap:var(--sp-10); margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.ow-side .ow-proj__cell { display:flex; flex-direction:column; gap:var(--sp-2); }
.ow-side .ow-proj__cell b { font-family:var(--mono); font-size:13px; color:var(--text); font-weight:500; line-height:1; }
.ow-side .ow-proj__cell span { font-family:var(--display); font-size:8px; color:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; }
.ow-side .ow-proj-cat { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-8); }
.ow-side .ow-proj-tag { font-family:var(--mono); font-size:9px; padding:2px 6px; border-radius:3px; letter-spacing:.04em; }
.ow-side .ow-proj-tag.amber { background:var(--amber-soft); color:var(--amber); }
.ow-side .ow-proj-tag.green { background:var(--green-bg); color:var(--green); }
.ow-side .ow-proj-tag.blue  { background:var(--blue-bg); color:var(--blue); }
.ow-side .ow-proj-tag.muted { background:var(--raised); color:var(--text-xs); border:1px solid var(--border); }
.ow-side .ow-proj-crit { margin-top:var(--sp-10); padding-top:var(--sp-8); border-top:1px dashed var(--border); }
.ow-side .ow-proj-crit__label { font-family:var(--display); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-xs); }
.ow-side .ow-proj-crit__title { font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.35; }
.ow-side .ow-proj-crit__meta { font-family:var(--mono); font-size:9px; color:var(--green); margin-top:3px; letter-spacing:.04em; }
.ow-chip { display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-4) var(--sp-8); border:1px solid var(--border-hi); border-radius:3px; background:var(--raised); color:var(--text); font-family:var(--display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; margin:var(--sp-2) var(--sp-4) var(--sp-2) 0; user-select:none; transition:all .12s; }
.ow-chip:hover { color:var(--amber); border-color:var(--amber); }
.ow-chip.on   { background:var(--amber); color:#000; border-color:var(--amber); }
.ow-chip .dot { width:8px; height:8px; border-radius:50%; }
.ow-search { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:7px var(--sp-10); font-size:12px; font-family:var(--sans); margin-bottom:var(--sp-6); }
.ow-search:focus { outline:0; border-color:var(--amber); }
/* Schema sidebar — does_what search results (added 2026-05-16 per Alessio direct) */
.ow-q-results { display:flex; flex-direction:column; gap:3px; margin:4px 0 10px; max-height:300px; overflow-y:auto; }
.ow-q-results:empty { display:none; }
.ow-q-row { display:block; padding:5px 7px; background:var(--raised); border:1px solid var(--border); border-radius:3px; text-decoration:none; color:inherit; cursor:default; }
.ow-q-row[href] { cursor:pointer; }
.ow-q-row:hover { border-color:var(--amber); background:var(--overlay); }
.ow-q-row__what { font-family:var(--sans); font-size:11px; color:var(--text); line-height:1.3; margin-bottom:1px; }
.ow-q-row__path { font-family:var(--mono); font-size:9px; color:var(--text-xs); word-break:break-all; }
.ow-q-row--empty, .ow-q-row--err { font-family:var(--mono); font-size:10px; color:var(--text-xs); font-style:italic; text-align:center; padding:8px; }
.ow-side .cc-mic-wrap { display:block !important; width:100% !important; }
.ow-side .ow-search { margin-bottom:0; }
.ow-side .cc-mic-btn-uni { top:50% !important; bottom:auto !important; transform:translateY(-50%); }
.ow-side .layout-chip { cursor:pointer; user-select:none; margin:0 4px 4px 0; display:inline-block; }
.ow-side .layout-chip.on { background:var(--amber); color:#0b0d0f; border-color:var(--amber); }
/* ---- HTML CARD inside cytoscape node ---- */
.ow-card { width:200px; height:200px; padding:var(--sp-10) var(--sp-12); box-sizing:border-box; background:var(--surface); border:1px solid var(--border-hi); border-left:4px solid var(--border-hi); border-radius:4px; box-shadow:0 4px 12px var(--black-40); color:var(--text); font-family:var(--sans); display:flex; flex-direction:column; gap:var(--sp-6); cursor:grab; transition:box-shadow var(--tr-fast), border-color var(--tr-fast); }
.ow-card:hover { border-color:var(--amber); box-shadow:0 4px 16px var(--black-55), 0 0 0 1px var(--amber-glow); }
.ow-card:active { cursor:grabbing; }
.ow-card.kind-container { border-left-color:#c8922a; }
.ow-card.kind-account   { border-left-color:#4493d4; }
.ow-card.kind-app       { border-left-color:#a855f7; }
.ow-card.kind-file      { border-left-color:#566470; }
.ow-card .row1 { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-shrink:0; }
.ow-card .name { font-family:var(--display); font-size:12px; font-weight:700; color:var(--text); letter-spacing:.02em; line-height:1.2; flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.ow-card .pill { font-family:var(--display); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:10px; flex-shrink:0; font-weight:700; }
.ow-card .pill.active    { background:rgba(34,197,94,.18); color:#22c55e; border:1px solid rgba(34,197,94,.4); }
.ow-card .pill.straggler { background:rgba(245,158,11,.18); color:#f59e0b; border:1px solid rgba(245,158,11,.4); }
.ow-card .pill.dead      { background:rgba(239,68,68,.20); color:#ef4444; border:1px solid rgba(239,68,68,.4); }
.ow-card .pill.archived  { background:rgba(100,116,139,.18); color:#94a3b8; border:1px solid rgba(100,116,139,.4); }
.ow-card .pill.duplicate { background:rgba(168,85,247,.18); color:#a855f7; border:1px solid rgba(168,85,247,.4); }
.ow-card .row2 { display:flex; align-items:center; gap:var(--sp-8); font-family:var(--mono); font-size:10px; color:var(--text-dim); flex-shrink:0; }
.ow-card .kind-tag { padding:1px 6px; background:var(--raised); border:1px solid var(--border); border-radius:3px; font-family:var(--display); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.ow-card .row3 { display:flex; gap:var(--sp-12); font-family:var(--mono); font-size:10px; color:var(--text); flex-shrink:0; }
.ow-card .row3 b { color:var(--amber); font-weight:500; margin-right:var(--sp-6); font-family:var(--display); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.ow-card .notes { font-size:10px; color:var(--text-dim); line-height:1.4; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ow-detail-stack { position:absolute; top:var(--sp-12); right:var(--sp-12); display:grid; grid-template-columns:repeat(3, 200px); grid-auto-rows:200px; gap:var(--sp-12); z-index:50; pointer-events:none; place-content:start end; }
.ow-detail-stack > * { pointer-events:auto; }
.ow-detail { position:relative; width:200px; height:200px; padding:var(--sp-10) var(--sp-12); box-sizing:border-box; background:var(--surface); border:1px solid var(--border-hi); border-left:4px solid var(--border-hi); border-radius:4px; box-shadow:0 12px 32px var(--black-55); display:flex; flex-direction:column; gap:var(--sp-6); overflow:hidden; }
.ow-detail.kind-container { border-left-color:#c8922a; box-shadow:0 0 0 1px var(--amber-medium), 0 12px 32px var(--black-55); }
.ow-detail.kind-account   { border-left-color:#4493d4; box-shadow:0 0 0 1px rgba(68,147,212,.25),  0 12px 32px var(--black-55); }
.ow-detail.kind-app       { border-left-color:#a855f7; box-shadow:0 0 0 1px rgba(168,85,247,.25),  0 12px 32px var(--black-55); }
.ow-detail.kind-file      { border-left-color:#566470; box-shadow:0 0 0 1px rgba(86,100,112,.25),   0 12px 32px var(--black-55); }
.ow-detail h4 { font-family:var(--display); font-size:12px; letter-spacing:.05em; color:var(--text); margin:0; padding-right:18px; line-height:1.2; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ow-detail .kind { font-family:var(--mono); font-size:9px; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; }
.ow-detail .kv { display:grid; grid-template-columns:55px 1fr; gap:var(--sp-2) var(--sp-6); font-size:10px; flex:1; overflow:hidden; align-content:start; }
.ow-detail .kv b { font-family:var(--display); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); align-self:center; }
.ow-detail .kv span { font-family:var(--mono); color:var(--text); word-break:break-all; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ow-detail .open-btn { display:block; background:var(--amber); color:#000; border:0; border-radius:3px; padding:5px 6px; font-family:var(--display); font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; }
.ow-detail .open-btn:hover { background:var(--amber-dim); }
.ow-detail .close-x { position:absolute; top:3px; right:5px; width:18px; height:18px; background:transparent; color:var(--text-xs); border:0; cursor:pointer; font-size:16px; line-height:18px; }
.ow-detail .close-x:hover { color:var(--amber); }
.ow-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--amber); font-family:var(--display); font-size:11px; letter-spacing:.2em; text-transform:uppercase; pointer-events:none; }
.ow-loading img { width:48px; height:48px; margin-bottom:14px; animation:ow-spin 2.4s linear infinite; }
@keyframes ow-spin { to { transform:rotate(360deg); } }
/* ---- Container pin → nested files table ---- */
.ow-detail.has-files { grid-column:span 3; grid-row:span 2; width:628px; height:414px; }
.ow-detail .files-table { display:flex; flex-direction:column; flex:1; min-height:0; margin-top:6px; }
.ow-detail .files-search { width:100%; height:24px; padding:0 var(--sp-8); font-size:11px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:3px; margin-bottom:var(--sp-4); box-sizing:border-box; font-family:var(--sans); }
.ow-detail .files-search:focus { outline:0; border-color:var(--amber); }
.ow-detail .files-thead { display:grid; grid-template-columns:1fr 60px 80px 90px; gap:var(--sp-8); padding:5px var(--sp-8); font-family:var(--display); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--border); user-select:none; }
.ow-detail .files-thead > div { cursor:pointer; }
.ow-detail .files-thead > div:hover { color:var(--amber); }
.ow-detail .files-thead > div.sort-active { color:var(--amber); }
.ow-detail .files-tbody { flex:1; overflow-y:auto; font-family:var(--mono); font-size:10px; }
.ow-detail .files-row { display:grid; grid-template-columns:1fr 60px 80px 90px; gap:var(--sp-8); padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--white-04); cursor:pointer; align-items:center; }
.ow-detail .files-row:hover { background:rgba(200,146,42,0.10); }
.ow-detail .files-row .fname { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ow-detail .files-row .fmeta { color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ow-detail .files-empty { padding:24px 12px; text-align:center; color:var(--text-dim); font-size:11px; font-family:var(--display); letter-spacing:.06em; text-transform:uppercase; }
/* ---- Resize handle ---- */
.ow-resize-handle { position:absolute; right:2px; bottom:2px; width:14px; height:14px; cursor:nwse-resize; opacity:0.7; color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:10px; user-select:none; z-index:5; pointer-events:auto; line-height:1; transition:opacity .12s, color .12s; }
.ow-resize-handle:hover { opacity:1; color:var(--amber); }
.ow-card:hover .ow-resize-handle { color:var(--amber); }
.ow-card.is-resizing { box-shadow:0 0 0 2px var(--amber) !important; }
/* ---- Canvas-card inline file table ---- */
.cvf-wrap   { display:flex; flex-direction:column; margin-top:5px; flex:1; min-height:0; overflow:hidden; pointer-events:auto; }
.cvf-search { width:100%; height:22px; padding:0 7px; font-size:10px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:3px; margin-bottom:3px; box-sizing:border-box; font-family:var(--mono); pointer-events:auto; }
.cvf-search:focus { outline:0; border-color:var(--amber); }
.cvf-head { display:grid; grid-template-columns:1fr 55px 65px 75px; gap:var(--sp-4); padding:3px var(--sp-6); font-family:var(--display); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--border); user-select:none; pointer-events:auto; }
.cvf-th { cursor:pointer; pointer-events:auto; }
.cvf-th:hover,.cvf-th--on { color:var(--amber); }
.cvf-body { flex:1; overflow-y:auto; font-family:var(--mono); font-size:9px; }
.cvf-row  { display:grid; grid-template-columns:1fr 55px 65px 75px; gap:var(--sp-4); padding:3px var(--sp-6); border-bottom:1px solid var(--white-04); cursor:pointer; align-items:center; pointer-events:auto; }
.cvf-row:hover { background:rgba(200,146,42,0.10); }
.cvf-fname { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvf-fmeta { color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvf-empty { padding:12px; text-align:center; color:var(--text-dim); font-size:10px; }
/* ---- Draggable group background boxes (named views) ---- */
.ow-group-box { position:relative; box-sizing:border-box; border:3px solid; border-radius:10px; pointer-events:none; user-select:none; box-shadow: 0 0 28px rgba(0,0,0,0.35), inset 0 0 60px rgba(0,0,0,0.18); }
.ow-group-box__label { position:absolute; top:-16px; left:24px; padding:5px 18px; background:var(--raised); border:2px solid; border-radius:5px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* Map clickable rows */
.op-l-row.clickable { width:100%; cursor:pointer; border:0; text-align:left; transition:background 0.12s, transform 0.08s; }
.op-l-row.clickable:hover { background:var(--overlay); transform:translateX(2px); }
.op-l-arrow { font-size:18px; color:var(--text-dim); align-self:center; padding-left:var(--sp-8); }
.op-l-row.clickable:hover .op-l-arrow { color:var(--amber); }

/* Matrix cells become buttons */
.op-l-c { background:transparent; border:0; cursor:pointer; padding:2px 4px; border-radius:2px; transition:background 0.12s; }
.op-l-c:hover { background:var(--amber-soft); }
.op-l-c.empty { cursor:default; }
.op-l-c.empty:hover { background:transparent; }

/* Health fixes become buttons */
.op-l-fix { width:100%; text-align:left; border:1px solid var(--border); cursor:pointer; transition:border-color 0.12s; }
.op-l-fix:hover { border-color:var(--amber); }

/* Devices section */
.op-l-dev-picker { display:flex; gap:var(--sp-6); margin-bottom:var(--sp-12); flex-wrap:wrap; padding-bottom:var(--sp-8); border-bottom:1px solid var(--border); }
.op-l-dev-btn { font-family:var(--display); font-size:11px; font-weight:600; padding:var(--sp-6) 14px; letter-spacing:0.1em; text-transform:uppercase; background:var(--raised); color:var(--text-dim); border:1px solid var(--border); border-radius:3px; cursor:pointer; }
.op-l-dev-btn.active { background:var(--amber); color:#000; border-color:var(--amber); }
.op-l-dev-btn:hover:not(.active) { color:var(--amber); border-color:var(--amber); }
.op-l-dev-empty { padding:var(--sp-24); text-align:center; color:var(--text-xs); font-family:var(--mono); font-size:11px; }
.op-l-dev-group { margin-bottom:var(--sp-16); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.op-l-dev-head { display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-10) var(--sp-12); background:var(--raised); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.op-l-dev-layer { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); flex-shrink:0; }
.op-l-dev-surface { font-family:var(--mono); font-size:11px; color:var(--text-dim); flex:1; min-width:0; }
.op-l-dev-actions { display:flex; gap:var(--sp-6); flex-shrink:0; }
.op-l-dev-copy { font-family:var(--display); font-size:10px; font-weight:600; padding:5px 12px; background:var(--amber); color:#000; border:0; border-radius:3px; cursor:pointer; letter-spacing:0.08em; }
.op-l-dev-copy:hover { background:var(--amber-dim); }
.op-l-dev-open { font-family:var(--display); font-size:10px; font-weight:600; padding:5px 12px; background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:3px; cursor:pointer; text-decoration:none; letter-spacing:0.08em; display:inline-flex; align-items:center; }
.op-l-dev-open:hover { color:var(--amber); border-color:var(--amber); }
.op-l-dev-rules { display:flex; flex-direction:column; }
.op-l-dev-rule { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); background:transparent; border:0; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--tr-fast); text-align:left; }
.op-l-dev-rule:last-child { border-bottom:0; }
.op-l-dev-rule:hover { background:var(--amber-soft); }
.op-l-dev-rule-label { flex:1; font-size:12px; color:var(--text); }
.op-l-dev-rule-status { font-size:13px; flex-shrink:0; }

/* Limits section */
.op-l-limits-wrap { display:flex; flex-direction:column; gap:var(--sp-12); }
.op-l-limits-card { border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.op-l-limits-head { display:flex; align-items:baseline; gap:var(--sp-12); padding:var(--sp-10) var(--sp-12); background:var(--raised); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.op-l-limits-body { display:flex; flex-direction:column; }
.op-l-limits-item { display:flex; align-items:flex-start; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); background:transparent; border:0; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--tr-fast); text-align:left; width:100%; }
.op-l-limits-item:last-child { border-bottom:0; }
.op-l-limits-item:hover { background:var(--amber-soft); }
.op-l-limits-num { font-family:var(--mono); font-size:10px; color:var(--text-xs); flex-shrink:0; min-width:18px; padding-top:1px; }
.op-l-limits-text { font-size:12px; color:var(--text); flex:1; line-height:1.5; }
.op-l-limits-copy-hint { font-size:10px; color:var(--text-xs); flex-shrink:0; opacity:0; transition:opacity 0.15s; }
.op-l-limits-item:hover .op-l-limits-copy-hint { opacity:1; }
.op-l-limits-rule { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); background:transparent; border:0; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--tr-fast); text-align:left; width:100%; }
.op-l-limits-rule:last-child { border-bottom:0; }
.op-l-limits-rule:hover { background:var(--amber-soft); }
.op-l-limits-rule-sev { font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; flex-shrink:0; min-width:52px; }
.op-l-limits-rule-name { font-size:12px; color:var(--text); flex:1; }
.op-l-limits-rule-status { font-size:11px; color:var(--text-xs); flex-shrink:0; }
.op-l-limits-rule-vio { font-family:var(--mono); font-size:10px; color:var(--text-xs); flex-shrink:0; }
.op-l-limits-empty { padding:var(--sp-24); text-align:center; color:var(--text-xs); font-family:var(--mono); font-size:11px; }
.op-l-limits-pointer { font-family:var(--mono); font-size:11px; color:var(--text-dim); padding:var(--sp-12); line-height:1.6; }
.op-l-limits-pointer code { color:var(--amber); font-size:10px; }

/* MODAL — click-to-view system */
.op-modal { display:none; position:fixed; inset:0; z-index:var(--z-critical); }
.op-modal.open { display:block; }
.op-modal-backdrop { position:absolute; inset:0; background:var(--black-70); backdrop-filter:blur(2px); }
.op-modal-card { position:relative; max-width:780px; max-height:85vh; margin:5vh auto 0; background:var(--surface); border:1px solid var(--amber); border-radius:6px; padding:var(--sp-20); display:flex; flex-direction:column; box-shadow:0 12px 40px var(--black-55); }
.op-modal-card::before, .op-modal-card::after { content:''; position:absolute; width:12px; height:12px; border-color:var(--amber); border-style:solid; opacity:0.7; }
.op-modal-card::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.op-modal-card::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.op-modal-close { position:absolute; top:8px; right:10px; width:28px; height:28px; background:transparent; color:var(--text-dim); border:0; cursor:pointer; font-size:22px; line-height:1; padding:0; }
.op-modal-close:hover { color:var(--amber); }
.op-modal-head { display:flex; align-items:baseline; gap:var(--sp-10); margin-bottom:var(--sp-8); padding-right:var(--sp-24); flex-wrap:wrap; }
.op-modal-tag { font-family:var(--display); font-size:9px; font-weight:700; letter-spacing:0.18em; padding:2px 8px; background:var(--amber); color:#000; border-radius:2px; text-transform:uppercase; }
.op-modal-title { font-family:var(--display); font-size:16px; font-weight:700; color:var(--text); }
.op-modal-meta { display:flex; gap:var(--sp-12); font-family:var(--mono); font-size:10px; color:var(--text-dim); margin-bottom:var(--sp-12); flex-wrap:wrap; padding-bottom:var(--sp-10); border-bottom:1px solid var(--border); }
.op-modal-meta strong { color:var(--text); }
.op-modal-body { font-family:var(--mono); font-size:12px; color:var(--text); white-space:pre-wrap; word-break:break-word; line-height:1.5; padding:var(--sp-12); background:var(--bg); border:1px solid var(--border); border-radius:3px; flex:1; overflow-y:auto; min-height:120px; max-height:50vh; }
.op-modal-actions { display:flex; gap:var(--sp-8); margin-top:var(--sp-12); flex-wrap:wrap; }
.op-modal-btn { font-family:var(--display); font-size:11px; font-weight:600; padding:var(--sp-8) 14px; letter-spacing:0.1em; text-transform:uppercase; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:3px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:var(--sp-6); }
.op-modal-btn:hover { color:var(--amber); border-color:var(--amber); }
.op-modal-btn.primary { background:var(--amber); color:#000; border-color:var(--amber); }
.op-modal-btn.primary:hover { background:var(--amber-dim); border-color:var(--amber-dim); color:#000; }
.op-modal-toast { font-family:var(--mono); font-size:11px; color:var(--green); margin-top:var(--sp-8); opacity:0; transition:opacity 0.3s; min-height:14px; }

/* ─── Login gate overlay (merged from index.html 2026-05-11) ─── */
#login-gate { position:fixed; inset:0; z-index:var(--z-critical); background:var(--bg); display:none; flex-direction:column; }
#login-gate.show { display:flex; }
#login-gate .lg-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--sp-32) var(--sp-16); }
#login-gate .lg-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:var(--sp-32) var(--sp-24) var(--sp-24); box-shadow:0 20px 60px var(--black-55); text-align:center; }
#login-gate .lg-sigil { width:96px; height:96px; margin:0 auto var(--sp-16); display:flex; align-items:center; justify-content:center; border-radius:8px; background:radial-gradient(ellipse at center,rgba(200,146,42,0.55) 0%,rgba(160,110,20,0.25) 55%,transparent 100%); border:1px solid rgba(200,146,42,0.6); padding:6px; box-shadow:0 0 12px rgba(200,146,42,0.3),inset 0 0 8px rgba(200,146,42,0.15); }
#login-gate .lg-sigil img { width:100%; height:100%; object-fit:contain; }
#login-gate h1 { font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:.35em; margin:0 0 var(--sp-4); color:var(--amber); text-transform:uppercase; }
#login-gate .lg-sub { color:var(--text-xs); font-size:10px; letter-spacing:.25em; text-transform:uppercase; margin:0 0 var(--sp-24); font-family:var(--display); font-weight:500; }
#login-gate .lg-field { text-align:left; margin-bottom:var(--sp-12); }
#login-gate .lg-field label { display:block; font-family:var(--display); font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--sp-4); font-weight:600; }
#login-gate .lg-field input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:var(--sp-10) var(--sp-12); font-size:13px; font-family:var(--sans); transition:border-color .12s; }
#login-gate .lg-field input:focus { outline:0; border-color:var(--amber); }
#login-gate .lg-field input.lg-masked { -webkit-text-security:disc; -moz-text-security:disc; text-security:disc; letter-spacing:0.12em; }
#login-gate .lg-submit { width:100%; background:var(--amber); color:#000; border:0; border-radius:4px; padding:var(--sp-12) var(--sp-16); font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:background .12s; margin-top:var(--sp-8); }
#login-gate .lg-submit:hover { background:var(--amber-dim); }
#login-gate .lg-submit:disabled { opacity:.55; cursor:not-allowed; }
#login-gate .lg-error { margin-top:var(--sp-12); color:var(--red); font-size:12px; min-height:1.2em; }
#login-gate .lg-credit { padding:var(--sp-16); text-align:center; color:var(--text-xs); font-family:var(--display); font-size:9px; letter-spacing:.25em; text-transform:uppercase; opacity:.55; }