/* SAMS — "Ancient Cyberpunk" design system. Carved stone + gold-leaf + glowing inlaid circuitry.
   Replaces "The Dungeon Net". Awe, warmth, age — not cold neon. */
:root{
  /* — stone (warm) — */
  --abyss:#0B0907; --basalt-900:#15110C; --basalt-800:#1F1812; --basalt-700:#2C2318;
  --basalt-600:#3D3122; --sandstone:#5A4A33; --mortar:#080604;
  /* — metals — */
  --gold:#E8B65A; --gold-deep:#A87B2E; --bronze:#B07B43; --bronze-dark:#6E4A28;
  /* — energy-tech accents — */
  --aether:#34E3D4; --aether-bright:#7DF7EC; --aether-deep:#0E8A82;
  --solar:#FFC861; --ember:#FF8A3D; --research:#4fb0c6; --press:#9fb0c4; --signal:#C97B6A;
  /* — text (warm parchment) — */
  --text-hi:#F3E9D6; --text-mid:#B9A684; --text-dim:#7A6A4F;
  /* — status — */
  --ok:#5FD3A3; --warn:#FFC861; --error:#F5563D; --offline:#6E5C3F; --paused:#C9913F;
  /* — per-agent accents — */
  --ac-henry:#34E3D4; --ac-caretaker:#9FE3C0; --ac-go:#E8B65A; --ac-bull:#FF6B3D; --ac-atlas:#7FB2FF;
  /* — type — */
  --font-display:'Cinzel','Trajan Pro',serif;
  --font-body:'Exo 2',system-ui,sans-serif;
  --font-mono:'Chakra Petch',ui-monospace,monospace;
  /* — semantic aliases kept so existing CSS using --cyan/--accent/--henry still resolves — */
  --cyan:var(--aether); --magenta:var(--ember); --violet:var(--ac-atlas);
  --lime:var(--ok); --amber:var(--solar); --red:var(--error);
  --accent:var(--aether); --henry:var(--aether);
  --void:var(--abyss); --grout:var(--mortar);
  --stone-900:var(--basalt-900); --stone-800:var(--basalt-800);
  --stone-700:var(--basalt-700); --stone-600:var(--basalt-600);
  /* — viewport-scaled density: the one knob the whole console sizes off, so it FILLS at any zoom — */
  --u: clamp(11px, 0.62vw + 0.42vh, 20px);
  --gap: calc(var(--u) * 0.85);
  --radius: calc(var(--u) * 0.7);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* The app shell is a full-viewport flex column: topbar (flex:none) + the active view (flex:1). No magic
   pixel offsets, no page scrollbar — the view always fills exactly the height left under the topbar, at any zoom. */
body{
  background:radial-gradient(1300px 900px at 70% -10%, #1a130c 0%, var(--abyss) 62%) fixed, var(--abyss);
  color:var(--text-hi); font-family:var(--font-body); font-size:clamp(12px, 0.3vw + 9px, 16px); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  display:flex; flex-direction:column; height:100vh; width:100vw;
}
/* global dust/film veil — warm vignette + grain + drifting dust (replaces the cold CRT scanline) */
.veil{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(11,9,7,.55) 100%)}
.veil::after{content:"";position:absolute;inset:0;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.veil::before{content:"";position:absolute;inset:-20%;opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  animation:dustdrift 44s linear infinite}
@keyframes dustdrift{from{transform:translate(0,0)}to{transform:translate(6%,4%)}}
.dim{color:var(--text-dim)} .sm{font-size:11px} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- topbar (bronze rail · gold-leaf brand) ---- */
.topbar{position:sticky;top:0;z-index:20;flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:var(--u);padding:calc(var(--u)*0.62) calc(var(--u)*1.05);background:linear-gradient(180deg, rgba(31,24,18,.96), rgba(21,17,12,.86));
  border-bottom:1px solid var(--bronze-dark);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(232,182,90,.06), 0 8px 24px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:11px}
.logo{color:var(--gold);font-size:20px;
  text-shadow:0 1px 0 var(--gold-deep), 0 0 14px rgba(232,182,90,.5), 0 0 26px rgba(255,200,97,.25)}
.topbar h1{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.12em;margin:0;
  text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 0 var(--gold-deep), 0 0 14px rgba(232,182,90,.35)}
.topbar h1 .sub{color:var(--bronze);font-weight:500;font-size:12px;text-shadow:none}
.sysline{display:flex;align-items:center;gap:16px;font-size:12px;font-family:var(--font-mono)}
.sysline .stat b{color:var(--text-hi);font-weight:700}
.sysline .warn b{color:var(--solar)} .sysline .lime{color:var(--gold)} .sysline .lime b{color:var(--gold)}
.conn{color:var(--aether);text-shadow:0 0 8px var(--aether);transition:.3s}
.conn.off{color:var(--ember);text-shadow:0 0 8px var(--ember)}

/* boot veil base guard: the load moment belongs to the Pixel Keep theme layer — with the theme link
   removed (legacy fallback), the veil must never appear or block the page */
.bootveil{display:none}

/* cost guardrail tile — clickable treasury stat; breach flips it red, spike shows ▲ (app.js renderCostTile) */
.cost-tile{cursor:pointer;user-select:none}
.cost-tile:hover{filter:brightness(1.25)}
.cost-tile .cflag{margin-left:5px;font-weight:700}
.cost-tile.breach, .cost-tile.breach b{color:var(--red,#c84a3b)}
.cost-tile.breach .cflag{color:var(--red,#c84a3b);text-shadow:0 0 8px rgba(200,74,59,.5)}

/* ============================================================================
   THE 3-ZONE LAYOUT (CJ's sketch)
   - 2 columns: LEFT main (~68%) · RIGHT full-height SIDEBAR (~32%, clamp 320–420)
   - LEFT column = 2 rows: TOP rooms canvas (~70%) · BOTTOM monitor strip
   - sidebar spans BOTH rows
   - < 1024px → one column: rooms, strip, sidebar
   ============================================================================ */
.grid{display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(320px, 26vw, 460px); /* stage · console — fluid, NO hard cap */
  grid-template-rows:minmax(0, 1fr) auto;                         /* stage row (dominant) · status-card row */
  grid-template-areas:
    "map     sidebar"
    "strip   sidebar";
  gap:var(--gap);padding:var(--gap);
  flex:1;min-height:0;width:100%} /* full-bleed: fills the viewport under the topbar at ANY zoom (no max-width, no centering) */
.grid[hidden]{display:none}
@media(max-width:1024px){
  body{height:auto;width:auto;overflow:auto;display:block}
  .grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"map" "strip" "sidebar";height:auto}
}

/* ---- ZONE 1: the connected room network canvas (room.js draws here) — DOMINANT, ~70% of left height ---- */
.map{grid-area:map;position:relative;min-height:0;min-width:0;border-radius:14px;overflow:hidden;
  background:radial-gradient(130% 100% at 50% -10%, #1c140d 0%, var(--abyss) 62%), var(--abyss);
  border:1px solid var(--bronze-dark);
  box-shadow:inset 0 0 0 1px var(--mortar), inset 0 0 60px rgba(0,0,0,.5), 0 12px 36px rgba(0,0,0,.55)}
.map-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.map-hint{position:absolute;top:11px;left:14px;z-index:2;pointer-events:none;
  font-family:var(--font-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 1px 0 var(--gold-deep),0 0 10px rgba(232,182,90,.4);opacity:.85}
@media(max-width:1024px){.map{height:clamp(320px,52vh,560px)}}
.empty{color:var(--text-dim);font-family:var(--font-mono);padding:28px;text-align:center}

/* ---- ZONE B: STATUS CARDS — one carved band, full width of the left column. Head (title + rune switch)
   over an auto-fit cards grid that ALWAYS fills the width and NEVER scrolls. ---- */
.strip{grid-area:strip;display:flex;flex-direction:column;min-height:0;min-width:0;gap:calc(var(--u)*0.5);
  height:clamp(132px, 22vh, 248px);
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--basalt-700);
  border-radius:var(--radius);padding:calc(var(--u)*0.6) calc(var(--u)*0.7);
  box-shadow:inset 0 1px 0 rgba(232,182,90,.05),inset 0 0 0 1px var(--mortar)}
.strip-head{display:flex;align-items:center;gap:var(--u);flex:none}
.strip-h{font-family:var(--font-display);font-size:clamp(9px,0.62vw,12px);letter-spacing:.14em;color:var(--bronze);
  text-transform:uppercase;text-shadow:0 1px 0 var(--mortar);flex:none;margin:0}
@media(max-width:1024px){.strip{height:auto}}

/* a "rune switch" — two carved rune-keys; the active one is powered (gold for managers, lapis for agents).
   Reuses the topbar view-toggle's visual language for a consistent affordance vocabulary. */
.rune-switch{display:inline-flex;gap:4px;margin-left:auto;padding:3px;border-radius:calc(var(--u)*0.55);
  background:linear-gradient(180deg,var(--mortar),var(--basalt-900));border:1px solid var(--bronze-dark);
  box-shadow:inset 0 1px 0 rgba(232,182,90,.05),inset 0 0 0 1px var(--mortar)}
.rune-seg{cursor:pointer;font-family:var(--font-display);font-size:clamp(8.5px,0.6vw,11px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-mid);white-space:nowrap;
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border:1px solid var(--bronze-dark);
  border-radius:calc(var(--u)*0.42);padding:5px calc(var(--u)*0.7);transition:.18s}
.rune-seg:hover{color:var(--text-hi);border-color:color-mix(in srgb,var(--gold) 45%,var(--bronze-dark))}
.rune-seg.active{color:var(--abyss);background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-color:var(--gold);
  box-shadow:0 0 14px color-mix(in srgb,var(--gold) 42%,transparent),inset 0 1px 0 #FFF3D0;text-shadow:none}
.rune-seg[data-set="agents"].active{background:linear-gradient(180deg,var(--ac-atlas),#4f86d6);border-color:var(--ac-atlas);
  box-shadow:0 0 14px color-mix(in srgb,var(--ac-atlas) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}

/* STATUS CARDS GRID — repeat(auto-fit, minmax(0,1fr)): N cards always divide the width and fill it.
   No fixed/clamp-capped tiles, no scroll, all visible. One row for the current roster sizes. */
/* ZONE B viewport — shows ONE readable row of cards; the .rooms-track paginates between rows
   (row-pager in app.js: auto-cycles + clickable dots, snap-transition, never a slow scroll). */
.rooms{flex:1;min-height:0;min-width:0;position:relative;overflow-y:auto;overflow-x:hidden}
.rooms::-webkit-scrollbar{width:8px}
.rooms::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--bronze) 40%,transparent);border-radius:4px}
/* The strip now SCROLLS (overflow-y:auto on .rooms): the whole roster is ONE wrapping grid — no single-row
   clamp, no transform-pager (that was the bounce). Cards wrap to as many rows as the roster needs; you
   scroll to see the rest. Smaller min-width so more agents fit per row as the fleet grows. */
.rooms-track{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:calc(var(--u)*0.55);align-content:start;padding-bottom:2px}
@media (prefers-reduced-motion: reduce){.rooms-track{transition:none}}
.rooms .empty{align-self:center;text-align:center;width:100%}
/* row pager — one dot per row, bottom-right; active glows. Hidden when a single row fits. */
.rooms-pager{position:absolute;right:2px;bottom:2px;display:flex;gap:5px;z-index:4;padding:3px 6px;
  background:color-mix(in srgb,var(--ink,#0d0b14) 62%,transparent);border-radius:8px}
.rooms-pager[hidden]{display:none}
.rp-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--bronze,#9a7b3f);background:transparent;
  cursor:pointer;padding:0;transition:background .2s,transform .2s}
.rp-dot.active{background:var(--accent,var(--gold,#e8b65a));border-color:var(--accent,var(--gold,#e8b65a));transform:scale(1.18)}
.rp-dot:hover{background:color-mix(in srgb,var(--bronze) 60%,transparent)}

/* ---- agent status tile (a carved-stone chamber plaque in the rail) ---- */
.cell{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--solar) 7%, transparent), transparent 55%),
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--basalt-700), var(--basalt-800));
  border:1px solid var(--basalt-600);border-radius:var(--radius);padding:calc(var(--u)*0.62) calc(var(--u)*0.72);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(232,182,90,.07), inset 0 0 0 1px var(--mortar), 0 6px 18px rgba(0,0,0,.4);transition:.16s}
.cell::before{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  box-shadow:inset 0 0 34px color-mix(in srgb, var(--accent) 9%, transparent)}
.cell:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--bronze-dark));
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 20px color-mix(in srgb,var(--accent) 26%,transparent),0 8px 22px rgba(0,0,0,.5)}
.cell.offline{filter:saturate(.3) brightness(.78)}
/* selected = the tile whose agent is open in the Monitor tab (canvas-click or tile-click) */
.cell.selected{border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 22px color-mix(in srgb,var(--accent) 36%,transparent),0 8px 22px rgba(0,0,0,.55)}
.cell.selected::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:9px 0 0 9px;background:var(--accent);box-shadow:0 0 10px var(--accent);z-index:2}
.cell .top{display:flex;align-items:center;gap:calc(var(--u)*0.5);margin-bottom:calc(var(--u)*0.45);min-width:0}
.cell .id-wrap{min-width:0;flex:1}
.sprite{width:calc(var(--u)*2.1);height:calc(var(--u)*2.1);flex:none;display:grid;place-items:center;font-size:calc(var(--u)*1.15);border-radius:calc(var(--u)*0.5);
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--accent) 28%,transparent), var(--mortar));
  border:1px solid color-mix(in srgb,var(--bronze) 60%,var(--accent));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 32%,transparent), inset 0 1px 0 rgba(232,182,90,.18)}
.sprite .spx{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent))}
.dhsp .spx{width:1.1em;height:1.1em;vertical-align:-0.18em;image-rendering:pixelated}
/* Room title prominent (The Castle, The Forge, WallStreet, The Port), manager name underneath (Henry,
   Hephaestus, Bill the Bull). Keeps the existing .name styling but slightly demoted vs the title. */
.cell .room-title{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(11px,0.82vw,16px);letter-spacing:.07em;text-transform:uppercase;color:var(--text-hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 8px color-mix(in srgb,var(--accent,var(--cyan)) 30%,transparent)}
.cell .name{font-size:clamp(9.5px,0.66vw,12.5px);color:var(--text-mid);font-family:var(--font-mono);
  text-transform:none;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;font-weight:500}
.cell .room{font-size:clamp(9px,0.62vw,12px);color:var(--text-dim);font-family:var(--font-mono);text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The Press — editorial "ink-on-newsprint" treatment (accent = --press, set per-room in app.js ACCENT).
   Strictly additive + press-scoped: only Press cards carry data-theme="press", so this never alters
   another room. A masthead double-rule under the room title + a serif byline read as a newspaper plate. */
.cell[data-theme="press"] .room-title{border-bottom:2px double color-mix(in srgb,var(--accent) 55%,transparent);
  padding-bottom:calc(var(--u)*0.22);letter-spacing:.13em}
.cell[data-theme="press"] .name{text-transform:uppercase;letter-spacing:.1em;color:var(--text-mid)}
.hub-badge{flex:none;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--abyss);
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-radius:5px;padding:1px 5px;text-transform:none;
  box-shadow:0 0 9px color-mix(in srgb,var(--gold) 45%,transparent)}
.managed{font-family:var(--font-mono);font-size:clamp(8px,0.55vw,10px);color:var(--ac-henry);opacity:.85;text-transform:none;letter-spacing:0;margin-top:1px}
.managed b{color:var(--text-mid);font-weight:600}
.dot{width:calc(var(--u)*0.5);height:calc(var(--u)*0.5);min-width:7px;min-height:7px;border-radius:50%;flex:none;margin-left:auto;align-self:flex-start;background:var(--c);
  box-shadow:0 0 4px var(--c),0 0 11px var(--c);transition:background .35s ease, box-shadow .35s ease}
.state{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:clamp(9px,0.6vw,11px);text-transform:uppercase;letter-spacing:.1em;
  padding:2px calc(var(--u)*0.45);border-radius:5px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.metrics{display:flex;flex-wrap:wrap;gap:3px calc(var(--u)*0.65);margin-top:calc(var(--u)*0.45);font-family:var(--font-mono);font-size:clamp(9.5px,0.62vw,12px)}
.metrics .m{color:var(--text-mid)} .metrics .m b{color:var(--text-hi);font-weight:600}
.spark{margin-top:auto;height:calc(var(--u)*1.3);width:100%;display:block;padding-top:calc(var(--u)*0.35)}
.event{margin-top:calc(var(--u)*0.45);font-size:clamp(10px,0.65vw,12px);color:var(--text-mid);
  padding:calc(var(--u)*0.3) calc(var(--u)*0.45);border-radius:calc(var(--u)*0.4);
  background:color-mix(in srgb,var(--accent) 7%,var(--basalt-900));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--basalt-700))}
/* the HUB (Atlas) card sits above the rest: a gold-leaf crown edge */
.cell.hub{box-shadow:inset 0 1px 0 rgba(232,182,90,.12),inset 0 0 0 1px var(--gold-deep),0 6px 18px rgba(0,0,0,.45)}
.cell.hub::before{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 34px color-mix(in srgb,var(--gold) 10%,transparent)}
/* STATUS CHANGE — the loudest signal: the inlay pulses + the card flashes its new status color (ties to Henry's notify) */
.cell.status-changed{animation:cardFlip 1.15s ease-out}
.cell.status-changed .dot{animation:dotFlip 1.15s ease-out}
@keyframes dotFlip{0%{transform:scale(1)}16%{transform:scale(2.2);box-shadow:0 0 7px var(--c),0 0 20px var(--c),0 0 34px var(--c)}100%{transform:scale(1)}}
@keyframes cardFlip{0%,100%{box-shadow:inset 0 1px 0 rgba(232,182,90,.07),inset 0 0 0 1px var(--mortar),0 6px 18px rgba(0,0,0,.4)}
  16%{box-shadow:inset 0 0 0 1px var(--sc),0 0 26px color-mix(in srgb,var(--sc) 55%,transparent),0 8px 22px rgba(0,0,0,.5)}}
@media (prefers-reduced-motion: reduce){.cell.status-changed,.cell.status-changed .dot{animation:none}}

/* ============================================================================
   ZONE 3: the TABBED SIDEBAR (full height, spans both left rows)
   ============================================================================ */
.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-height:0;height:100%;
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--basalt-700);
  border-radius:14px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(232,182,90,.05),inset 0 0 0 1px var(--mortar),0 12px 36px rgba(0,0,0,.5)}
@media(max-width:1024px){.sidebar{height:clamp(440px,70vh,720px)}}

/* tab strip across the top of the sidebar (data-driven from app.js TABS[]) */
.sidetabs{display:flex;gap:6px;padding:10px 10px 0;flex:none;flex-wrap:wrap;
  border-bottom:1px solid var(--basalt-700)}
.sidetab{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mid);background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));
  border:1px solid var(--bronze-dark);border-bottom:none;border-radius:9px 9px 0 0;padding:8px 13px;
  position:relative;top:1px;transition:.15s}
.sidetab .stab-glyph{font-size:12px;line-height:1}
.sidetab:hover{color:var(--text-hi);border-color:color-mix(in srgb,var(--accent,var(--gold)) 45%,var(--bronze-dark))}
.sidetab.active{color:var(--accent,var(--gold));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,var(--gold)) 16%,var(--basalt-800)),var(--basalt-900));
  border-color:color-mix(in srgb,var(--accent,var(--gold)) 50%,var(--bronze-dark));
  box-shadow:0 -2px 14px color-mix(in srgb,var(--accent,var(--gold)) 22%,transparent);
  text-shadow:0 0 10px color-mix(in srgb,var(--accent,var(--gold)) 45%,transparent)}
.sidetab .stab-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1;
  min-width:15px;text-align:center;padding:2px 4px;border-radius:6px;color:var(--abyss);
  background:var(--accent,var(--gold));box-shadow:0 0 8px color-mix(in srgb,var(--accent,var(--gold)) 50%,transparent)}
.sidetab .stab-badge[hidden]{display:none}

/* the swappable panel host below the tabs */
.sidebody{flex:1;min-height:0;position:relative;display:flex}
.sidepanel{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.sidepanel[hidden]{display:none}
/* panels that scroll their content (monitor + tasks); atlas owns its own internal scroll.
   Diegetic: no exposed scrollbar rails — overflow is masked (faded) into the stone frame top & bottom. */
.monitor-host,.tasks-host,.forge-host,.tracker-host,.timeline-host,.cost-host,.argus-host{flex:1;min-height:0;overflow-y:auto;padding:calc(var(--u)*0.85);
  display:flex;flex-direction:column;gap:calc(var(--u)*0.75);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--u)*0.7), #000 calc(100% - var(--u)), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--u)*0.7), #000 calc(100% - var(--u)), transparent 100%)}
.monitor-host::-webkit-scrollbar,.tasks-host::-webkit-scrollbar,.forge-host::-webkit-scrollbar,
.tracker-host::-webkit-scrollbar,.timeline-host::-webkit-scrollbar,.cost-host::-webkit-scrollbar,.argus-host::-webkit-scrollbar{width:0;height:0;display:none}
.atlas-host{flex:1;min-height:0;display:flex;flex-direction:column}

/* shared section header inside sidepanels (reuses the old .ph look) */
.ph{font-family:var(--font-display);font-size:11px;letter-spacing:.14em;color:var(--bronze);margin-bottom:10px;text-transform:uppercase;
  text-shadow:0 1px 0 var(--mortar)}
.side-sec{display:flex;flex-direction:column;gap:8px}
.side-sec .ph{margin-bottom:4px}

/* MONITOR — system-health overview (default, nothing selected) */
.mon-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mon-stat{background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border:1px solid var(--basalt-600);
  border-radius:10px;padding:11px 12px;box-shadow:inset 0 1px 0 rgba(232,182,90,.06),inset 0 0 0 1px var(--mortar)}
.mon-stat .mv{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--text-hi);
  text-shadow:0 0 12px color-mix(in srgb,var(--accent,var(--aether)) 30%,transparent)}
.mon-stat .ml{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.mon-stat.span2{grid-column:1 / -1}
.mon-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);text-align:center;padding:6px 0 2px}

/* MONITOR — selected-agent detail header */
.mon-head{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.mon-head .mon-spr{width:42px;height:42px;flex:none;display:grid;place-items:center;font-size:24px;border-radius:10px;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--accent) 28%,transparent), var(--mortar));
  border:1px solid color-mix(in srgb,var(--bronze) 60%,var(--accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 32%,transparent)}
.mon-head .mon-spr img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent))}
.mon-head h2{font-family:var(--font-display);letter-spacing:.06em;margin:0;text-transform:uppercase;font-size:16px;color:var(--accent)}
.mon-head .mon-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
.mon-back{font-family:var(--font-mono);font-size:10.5px;color:var(--text-mid);cursor:pointer;background:none;border:none;
  padding:0;align-self:flex-start;transition:.15s}
.mon-back:hover{color:var(--accent)}

/* TASKS — reserved 24/7 placeholders + working-now rows. Rows are carved insets with a leading energy pip
   (no side-stripe). */
.task-placeholder{border:1px dashed color-mix(in srgb,var(--bronze) 50%,var(--basalt-600));border-radius:var(--radius);
  padding:calc(var(--u)*0.85);text-align:center;background:color-mix(in srgb,var(--bronze) 6%,transparent)}
.task-placeholder .tp-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);border:1px solid var(--bronze-dark);border-radius:5px;padding:2px 7px;margin-bottom:8px}
.task-placeholder .tp-txt{font-size:clamp(11px,0.72vw,13px);color:var(--text-mid);line-height:1.5}
.work-row{display:flex;align-items:center;gap:calc(var(--u)*0.5);font-family:var(--font-mono);font-size:clamp(11px,0.72vw,13px);
  padding:calc(var(--u)*0.38) calc(var(--u)*0.5);border-radius:calc(var(--u)*0.42);
  background:color-mix(in srgb,var(--accent,var(--aether)) 6%,var(--basalt-900));
  border:1px solid color-mix(in srgb,var(--accent,var(--aether)) 22%,var(--basalt-700))}
.work-row .wr-name{color:var(--text-hi)}
.work-row .wr-state{margin-left:auto;color:var(--accent,var(--aether));font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}
/* TREASURY — now lives in the Monitor panel (overview); compact gold ledger */
.treasury .big{font-family:var(--font-mono);font-size:clamp(18px,1.4vw,26px);color:var(--gold);
  text-shadow:0 1px 0 var(--gold-deep),0 0 14px rgba(232,182,90,.4)}
.tbar{display:flex;align-items:center;gap:8px;margin-top:7px;font-family:var(--font-mono);font-size:clamp(10px,0.68vw,12px)}
.tbar .lab{width:62px;color:var(--text-mid);text-transform:capitalize} .tbar .track{flex:1;height:6px;background:var(--mortar);border-radius:4px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--basalt-700)}
.tbar .fill{height:100%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.alerts,.comms{display:flex;flex-direction:column;gap:calc(var(--u)*0.45)}
/* ALERTS — now in the Tasks panel. A carved inset tinted by severity + a glowing status pip (no side-stripe). */
.alert{display:flex;gap:calc(var(--u)*0.5);align-items:baseline;font-size:clamp(11px,0.72vw,13px);
  padding:calc(var(--u)*0.4) calc(var(--u)*0.55);border-radius:calc(var(--u)*0.42);
  background:color-mix(in srgb,var(--c) 9%,var(--basalt-900));border:1px solid color-mix(in srgb,var(--c) 30%,var(--basalt-700))}
.alert::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;align-self:center;
  background:var(--c);box-shadow:0 0 4px var(--c),0 0 10px var(--c)}
.alert .who{font-family:var(--font-mono);color:var(--text-hi)} .alert .txt{color:var(--text-mid)} .alert .when{margin-left:auto;color:var(--text-dim);font-size:10px;font-family:var(--font-mono);white-space:nowrap}
.commrow{font-family:var(--font-mono);font-size:clamp(10.5px,0.7vw,12.5px);color:var(--text-mid);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:calc(var(--u)*0.38) calc(var(--u)*0.5);border-radius:calc(var(--u)*0.42);
  background:color-mix(in srgb,var(--accent) 5%,var(--basalt-900));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--basalt-700))}
.commrow .cw{color:var(--text-hi)}
.commrow .ctype{color:var(--accent);text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;
  padding:1px 5px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.commrow .ctext{color:var(--text-mid)}
.commrow .cwhen{margin-left:auto;color:var(--text-dim);font-size:10px;white-space:nowrap}
/* fleet intent bus lanes (Tasks tab) — reuses .commrow rows under small lane headers */
.intent-bus{display:flex;flex-direction:column;gap:5px}
.intent-bus .ib-lh{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);margin:4px 0 1px}
.intent-bus .ib-lh:first-child{margin-top:0}

/* ---- TRACKER tab (the vault TASKS.md board) — accent-tinted rows, body over a dim meta line ---- */
.task-lane{display:flex;flex-direction:column;gap:5px}
.task-row{padding:calc(var(--u)*0.4) calc(var(--u)*0.52);border-radius:calc(var(--u)*0.42);
  background:color-mix(in srgb,var(--accent) 5%,var(--basalt-900));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--basalt-700));
  border-left:2px solid var(--accent)}
.task-row .tr-body{color:var(--text-hi);font-size:clamp(11px,0.72vw,13px);line-height:1.35}
.task-row.task-done .tr-body{color:var(--text-mid)}
.task-row .tr-meta{font-family:var(--font-mono);margin-top:2px}
.task-row .tr-id{color:var(--accent)}

/* ---- command controls (Run / Pause / Message / Talk-to-Henry) — now live in the Monitor panel ---- */
.ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.cbtn{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--accent);cursor:pointer;
  background:linear-gradient(180deg,var(--stone-800),var(--stone-900));
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--stone-600));border-radius:7px;padding:6px 12px;
  box-shadow:inset 0 0 0 1px var(--grout);transition:.16s}
.cbtn:hover{border-color:var(--accent);color:var(--text-hi);
  box-shadow:inset 0 0 0 1px var(--grout),0 0 16px color-mix(in srgb,var(--accent) 40%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-1px)}
.cbtn:active{transform:translateY(0)}
.cbtn:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:inset 0 0 0 1px var(--grout)}
.ctoast{font-family:var(--font-mono);font-size:11px;color:var(--ok);text-shadow:0 0 8px color-mix(in srgb,var(--ok) 50%,transparent);margin-left:2px}
.ctoast.bad{color:var(--ember);text-shadow:0 0 8px color-mix(in srgb,var(--ember) 50%,transparent)}

/* ---- log-tail view (room overlay Controls tab — GET /ops/logs, 2026-08-31) ---- */
.logview{margin-top:8px;border:1px solid var(--stone-600);background:var(--stone-900);padding:8px 10px}
.lv-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lv-head .lv-t{color:var(--text-hi);font-size:12px;letter-spacing:.04em;margin-right:auto}
.lv-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin:8px 0 4px}
.lv-pre{max-height:240px;overflow:auto;margin:0;padding:8px 10px;background:var(--abyss);
  border:1px solid var(--stone-700);font-family:var(--font-mono);font-size:11px;line-height:1.5;
  color:var(--text-mid);white-space:pre-wrap;word-break:break-all;overscroll-behavior:contain}

/* ---- key/value table (used by the Monitor panel's agent detail) ---- */
.kv{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;font-family:var(--font-mono);font-size:11.5px;margin-top:6px}
.kv .k{color:var(--text-dim)} .kv .v{color:var(--text-hi);word-break:break-word}
.dhsp .spx{width:1.1em;height:1.1em;vertical-align:-0.18em;image-rendering:pixelated}

/* ============================================================================
   SCRYING LAB — the vault star-map view (scry.js). Same Dungeon Net language:
   matte stone chrome, neon emission, scanline (the canvas paints its own).
   ============================================================================ */
/* ---- topbar view toggle (◈ DUNGEON / ✦ SCRYING) ---- */
.viewtoggle{display:flex;gap:6px;align-items:center;margin-left:6px}
.vchip{font-family:var(--font-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  color:var(--text-mid);background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));
  border:1px solid var(--bronze-dark);border-radius:8px;padding:6px 12px;
  box-shadow:inset 0 1px 0 rgba(232,182,90,.06),inset 0 0 0 1px var(--mortar);transition:.16s}
.vchip:hover{color:var(--text-hi);border-color:color-mix(in srgb,var(--gold) 45%,var(--bronze-dark))}
.vchip.active{color:var(--abyss);background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-color:var(--gold);
  box-shadow:0 0 16px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 1px 0 #FFF3D0;text-shadow:none}
#vc-scry.active{color:var(--abyss);background:linear-gradient(180deg,var(--ac-atlas),#4f86d6);border-color:var(--ac-atlas);
  box-shadow:0 0 16px color-mix(in srgb,var(--ac-atlas) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
@media(max-width:680px){.viewtoggle .vchip{padding:6px 9px;letter-spacing:.08em}}

/* ---- the scrying section (full-bleed star field, sibling of .grid; flex-fills the viewport under the topbar) ---- */
.scry{position:relative;flex:1;min-height:0;margin:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, #14110d 0%, var(--abyss) 60%), var(--abyss)}
.scry[hidden]{display:none}
@media(max-width:1024px){.scry{min-height:calc(100vh - 64px)}}
.scry-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.scry-hint{position:absolute;top:12px;left:16px;z-index:3;pointer-events:none;
  font-family:var(--font-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac-atlas);text-shadow:0 0 8px color-mix(in srgb,var(--ac-atlas) 55%,transparent);opacity:.85}

/* ---- floating toolbar (top-right of the field) ---- */
.scry-toolbar{position:absolute;top:10px;right:14px;z-index:4;display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:11px;padding:7px 12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(31,24,18,.88),rgba(21,17,12,.84));border:1px solid var(--bronze-dark);
  box-shadow:inset 0 1px 0 rgba(232,182,90,.06),0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.scry-stat{color:var(--text-mid)} .scry-stat b{color:var(--text-hi);font-weight:700}
.scry-sp{flex:1}
.scry-btn{font-family:var(--font-mono);font-size:11px;color:var(--violet);cursor:pointer;
  background:linear-gradient(180deg,var(--stone-800),var(--stone-900));
  border:1px solid color-mix(in srgb,var(--violet) 40%,var(--stone-600));border-radius:7px;padding:5px 10px;
  box-shadow:inset 0 0 0 1px var(--grout);transition:.16s}
.scry-btn:hover{color:var(--text-hi);border-color:var(--violet);
  box-shadow:inset 0 0 0 1px var(--grout),0 0 14px color-mix(in srgb,var(--violet) 40%,transparent);transform:translateY(-1px)}

/* ---- hover tooltip (fixed-position, follows cursor) ---- */
.scry-tip{position:fixed;z-index:60;pointer-events:none;min-width:170px;max-width:280px;
  background:linear-gradient(180deg,rgba(31,24,18,.97),rgba(21,17,12,.97));border:1px solid var(--ac-atlas);
  border-radius:9px;padding:9px 11px;box-shadow:0 0 18px color-mix(in srgb,var(--ac-atlas) 30%,transparent),0 8px 24px rgba(0,0,0,.6)}
.scry-tip[hidden]{display:none}
.scry-tip .tt-name{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--text-hi);
  margin-bottom:6px;word-break:break-word;text-transform:uppercase}
.scry-tip .tt-row{display:flex;justify-content:space-between;gap:14px;font-family:var(--font-mono);font-size:11px;color:var(--text-hi)}
.scry-tip .tt-k{color:var(--text-dim)}

/* ---- detail panel (click a star) — slides in on the right ---- */
.scry-panel{position:absolute;top:64px;right:14px;z-index:5;width:min(320px,86vw);max-height:calc(100% - 80px);overflow:auto;
  background:linear-gradient(180deg,var(--stone-800),var(--stone-900));border:1px solid var(--accent,var(--violet));border-radius:14px;
  padding:18px;box-shadow:0 0 30px color-mix(in srgb,var(--accent,var(--violet)) 30%,transparent),0 10px 30px rgba(0,0,0,.55)}
.scry-panel[hidden]{display:none}
.scry-panel .sc-x{position:absolute;top:12px;right:14px;cursor:pointer;color:var(--text-dim);font-size:18px;
  background:none;border:none;line-height:1;padding:2px}
.scry-panel .sc-x:hover{color:var(--text-hi)}
.scry-panel .sc-star{font-size:26px;color:var(--accent,var(--violet));text-shadow:0 0 14px var(--accent,var(--violet));line-height:1}
.scry-panel h3{font-family:var(--font-display);font-size:15px;letter-spacing:.04em;margin:8px 0 4px;
  text-transform:uppercase;color:var(--text-hi);word-break:break-word}
.sc-kv{display:grid;grid-template-columns:78px 1fr;gap:4px 12px;font-family:var(--font-mono);font-size:11.5px;margin-top:10px}
.sc-kv .k{color:var(--text-dim)} .sc-kv .v{color:var(--text-hi);word-break:break-word}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sc-tag{font-family:var(--font-mono);font-size:10.5px;color:var(--accent,var(--violet));
  border:1px solid color-mix(in srgb,var(--accent,var(--violet)) 40%,transparent);
  background:color-mix(in srgb,var(--accent,var(--violet)) 10%,transparent);border-radius:5px;padding:2px 7px}
.sc-reveal{margin-top:14px;border-top:1px solid var(--stone-700);padding-top:11px}
.sc-rl{font-family:var(--font-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mid);margin-bottom:6px}
.sc-path{display:block;font-family:var(--font-mono);font-size:11px;color:var(--lime);word-break:break-all;
  background:var(--grout);border:1px solid var(--stone-700);border-radius:6px;padding:7px 9px;line-height:1.5}
.sc-note{margin-top:12px;font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);letter-spacing:.02em}
@media(max-width:680px){.scry-panel{top:auto;bottom:10px;right:10px;left:10px;width:auto;max-height:54%}
  .scry-toolbar{left:14px;right:14px;flex-wrap:wrap}}

/* hide the network view's chrome when scrying (belt-and-suspenders with [hidden]) */
body.view-scry .grid{display:none}

/* ==== TALK TO HENRY — chat dock (cyan = Henry's accent) ============================================= */
:root{ --henry:var(--cyan); }

/* topbar launcher */
.henry-launch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--henry);background:color-mix(in srgb,var(--henry) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--henry) 45%,var(--stone-600));border-radius:8px;
  padding:7px 12px;margin:0 10px;transition:.16s;text-shadow:0 0 8px color-mix(in srgb,var(--henry) 50%,transparent)}
.henry-launch:hover{background:color-mix(in srgb,var(--henry) 20%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--henry) 35%,transparent);transform:translateY(-1px)}
.henry-launch.active{background:color-mix(in srgb,var(--henry) 26%,transparent);
  box-shadow:inset 0 0 0 1px var(--henry),0 0 16px color-mix(in srgb,var(--henry) 35%,transparent)}
.henry-launch-float{position:fixed;right:18px;bottom:18px;z-index:60;margin:0}
@media(max-width:720px){.henry-launch .hl-txt{display:none} .henry-launch{padding:7px 10px}}

/* the dock */
.henry-dock{position:fixed;right:18px;bottom:18px;z-index:70;width:min(380px,calc(100vw - 36px));
  height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,var(--stone-800),var(--stone-900));
  border:1px solid color-mix(in srgb,var(--henry) 45%,var(--stone-700));border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--grout),0 0 30px color-mix(in srgb,var(--henry) 22%,transparent),0 18px 50px rgba(0,0,0,.6);
  animation:henry-pop .18s ease-out}
@keyframes henry-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.henry-dock[hidden]{display:none}

.henry-head{display:flex;align-items:center;gap:11px;padding:12px 13px;
  border-bottom:1px solid var(--stone-700);
  background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb,var(--henry) 16%,transparent), transparent 60%)}
.henry-spr{width:38px;height:38px;flex:none;display:grid;place-items:center;font-size:22px;border-radius:9px;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--henry) 30%,transparent), var(--grout));
  border:1px solid color-mix(in srgb,var(--henry) 50%,var(--stone-600));
  box-shadow:0 0 12px color-mix(in srgb,var(--henry) 35%,transparent)}
.henry-spr img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--henry) 55%,transparent))}
.henry-name{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--henry);
  text-shadow:0 0 10px color-mix(in srgb,var(--henry) 45%,transparent)}
.henry-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-transform:lowercase}
.henry-x{margin-left:auto;background:none;border:none;color:var(--text-dim);font-size:15px;cursor:pointer;
  padding:4px 6px;border-radius:6px;transition:.15s;line-height:1}
.henry-x:hover{color:var(--text-hi);background:var(--stone-700)}

.henry-log{flex:1;min-height:0;overflow-y:auto;padding:14px 13px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--u)*1.1), #000 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--u)*1.1), #000 100%)}
.henry-log::-webkit-scrollbar{width:0;display:none}

.henry-msg{display:flex;max-width:88%}
.henry-from-cj{align-self:flex-end;justify-content:flex-end}
.henry-from-henry{align-self:flex-start}
.henry-bubble{font-size:12.5px;line-height:1.5;padding:9px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
.henry-from-cj .henry-bubble{background:linear-gradient(180deg,var(--stone-700),var(--stone-800));
  border:1px solid var(--stone-600);color:var(--text-hi);border-bottom-right-radius:4px}
.henry-from-henry .henry-bubble{background:color-mix(in srgb,var(--henry) 12%,var(--stone-900));
  border:1px solid color-mix(in srgb,var(--henry) 38%,var(--stone-700));color:var(--text-hi);border-bottom-left-radius:4px;
  box-shadow:0 0 14px color-mix(in srgb,var(--henry) 14%,transparent)}

/* thinking dots */
.henry-dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.henry-dots i{width:6px;height:6px;border-radius:50%;background:var(--henry);opacity:.55;
  animation:henry-blink 1.1s infinite ease-in-out}
.henry-dots i:nth-child(2){animation-delay:.18s} .henry-dots i:nth-child(3){animation-delay:.36s}
@keyframes henry-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.henry-input{display:flex;gap:8px;padding:11px;border-top:1px solid var(--stone-700);background:var(--stone-900)}
.henry-input input{flex:1;min-width:0;background:var(--grout);border:1px solid var(--stone-600);border-radius:9px;
  padding:9px 11px;color:var(--text-hi);font-family:var(--font-body);font-size:12.5px;outline:none;transition:.15s}
.henry-input input:focus{border-color:color-mix(in srgb,var(--henry) 55%,var(--stone-600));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--henry) 35%,transparent),0 0 14px color-mix(in srgb,var(--henry) 22%,transparent)}
.henry-input input:disabled{opacity:.6}
.henry-input button{flex:none;width:40px;border:1px solid color-mix(in srgb,var(--henry) 45%,var(--stone-600));
  background:color-mix(in srgb,var(--henry) 16%,transparent);color:var(--henry);border-radius:9px;cursor:pointer;
  font-size:13px;transition:.15s}
.henry-input button:hover:not(:disabled){background:color-mix(in srgb,var(--henry) 28%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--henry) 30%,transparent)}
.henry-input button:disabled{opacity:.45;cursor:default}

/* proposal cards — the human gate. Henry proposes; CJ approves/rejects. Cyan-framed neon-on-stone. */
.henry-proposals{max-width:92%}
.henry-prop-tray{display:flex;flex-direction:column;gap:8px;width:100%}
.henry-prop{background:color-mix(in srgb,var(--henry) 9%,var(--stone-900));
  border:1px solid color-mix(in srgb,var(--henry) 42%,var(--stone-700));border-radius:11px;border-top-left-radius:4px;
  padding:10px 11px;box-shadow:0 0 16px color-mix(in srgb,var(--henry) 16%,transparent);
  animation:henry-pop .16s ease-out}
.henry-prop-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.henry-prop-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--henry);
  border:1px solid color-mix(in srgb,var(--henry) 45%,var(--stone-600));border-radius:5px;padding:1px 6px;
  text-transform:uppercase;flex:none}
.henry-prop-act{font-family:var(--font-mono);font-size:12px;color:var(--text-hi);font-weight:600;word-break:break-word}
.henry-prop-why{margin-top:5px;font-size:11px;line-height:1.45;color:var(--text-mid)}
.henry-prop-btns{display:flex;gap:7px;margin-top:9px}
.henry-prop-btns button{flex:1;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);transition:.15s}
.henry-prop-ok{border:1px solid color-mix(in srgb,var(--lime) 50%,var(--stone-600));
  background:color-mix(in srgb,var(--lime) 14%,transparent);color:var(--lime)}
.henry-prop-ok:hover:not(:disabled){background:color-mix(in srgb,var(--lime) 26%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--lime) 32%,transparent)}
.henry-prop-no{border:1px solid color-mix(in srgb,var(--red) 48%,var(--stone-600));
  background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.henry-prop-no:hover:not(:disabled){background:color-mix(in srgb,var(--red) 24%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--red) 30%,transparent)}
.henry-prop-btns button:disabled{opacity:.45;cursor:wait}
.henry-prop.settled{padding:8px 11px}
.henry-prop-done{font-family:var(--font-mono);font-size:11.5px;font-weight:600}
.henry-prop-done.ok{color:var(--lime)} .henry-prop-done.no{color:var(--text-dim)}

@media(max-width:480px){.henry-dock{right:8px;left:8px;bottom:8px;width:auto;height:min(70vh,520px)}}

/* ==== EMBEDDED MODE — when chat.js mounts the dock INSIDE the Atlas sidebar panel ===================
   The dock drops its fixed positioning / float chrome and becomes a full-height flex child of
   .atlas-host. The standalone head + the topbar launcher are hidden (the sidebar tab IS the launcher). */
.atlas-host .henry-dock{position:static;right:auto;bottom:auto;width:100%;height:100%;max-width:none;
  border:none;border-radius:0;box-shadow:none;animation:none;background:transparent}
.atlas-host .henry-dock[hidden]{display:flex} /* in-sidebar it's always visible; the tab governs show/hide */
.atlas-host .henry-head{display:none}         /* the sidebar tab provides the Atlas/Henry header */
.atlas-host .henry-log{padding-top:14px}
.atlas-host .henry-input{background:var(--basalt-900)}
body.atlas-embedded .henry-launch{display:none} /* no floating launcher when chat lives in the sidebar */

/* Sub-agents line under the manager name in the rooms strip — "● Caretaker", "● Driver, Rohan".
   Each pill is independently clickable (drills into the sub-agent's Monitor detail without leaving the strip). */
.cell .subagents{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);
  margin:2px 0 4px;padding-left:2px;line-height:1.4}
.cell .subagents .sub-pill{color:var(--text-mid);cursor:pointer;padding:1px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--accent,var(--cyan)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,var(--cyan)) 30%,var(--mortar));
  transition:background .15s,border-color .15s,color .15s}
.cell .subagents .sub-pill + .sub-pill{margin-left:3px}
.cell .subagents .sub-pill:hover{color:var(--text-hi);
  background:color-mix(in srgb,var(--accent,var(--cyan)) 28%,transparent);
  border-color:color-mix(in srgb,var(--accent,var(--cyan)) 55%,var(--mortar))}

/* ============================================================================================== *
 * ⚒ FORGE TAB — Driver+Rohan backlog, live runs, recent PRs, queue/repick/remove controls
 * ============================================================================================== */
/* Top: stat pills (pending/in-flight/merged/escalated/blocked) */
.fb-stats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-stat{font-family:var(--font-mono);font-size:11px;color:var(--text-mid);padding:3px 8px;border-radius:999px;
  background:var(--basalt-800);border:1px solid var(--basalt-600);box-shadow:inset 0 0 0 1px var(--mortar)}
.fb-stat b{color:var(--c,var(--text-hi));font-weight:700;margin-right:4px}
.fb-stat.dim{color:var(--text-dim)}.fb-stat.dim b{color:var(--text-dim)}

/* Trio summary: forge/driver/rohan current state */
.fb-agents{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.fa-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  padding:6px 9px;border-radius:8px;background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));
  border:1px solid var(--basalt-600);box-shadow:inset 0 1px 0 rgba(232,182,90,.05)}
.fa-name{font-family:var(--font-display);font-weight:700;color:var(--accent,var(--ember,#d97847));font-size:12px;letter-spacing:.06em}
.fa-state{font-family:var(--font-mono);font-size:10.5px;color:var(--text-mid);text-transform:lowercase;
  background:var(--basalt-900);padding:2px 7px;border-radius:6px;border:1px solid var(--basalt-700)}
.fa-dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ok));box-shadow:0 0 6px var(--c,var(--ok))}
.fa-task{grid-column:1 / -1;font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-pr{grid-column:1 / -1;font-family:var(--font-mono);font-size:11px;color:var(--aether);text-decoration:none}
.fa-pr:hover{text-decoration:underline}

/* Queue-a-task form */
.fb-form{padding:10px;border-radius:10px;background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));
  border:1px solid var(--basalt-600);box-shadow:inset 0 1px 0 rgba(232,182,90,.07)}
.fb-form-row{display:flex;gap:6px;margin-bottom:6px}
.fb-form-row .fb-in{flex:1;min-width:0}
.fb-in{font-family:var(--font-mono);font-size:11.5px;color:var(--text-hi);background:var(--basalt-900);
  border:1px solid var(--basalt-600);border-radius:7px;padding:6px 9px;outline:none}
.fb-in:focus{border-color:var(--ember,#d97847);box-shadow:0 0 0 1px color-mix(in srgb,var(--ember,#d97847) 30%,transparent)}
.fb-in-full{width:100%;display:block;margin-bottom:6px;box-sizing:border-box}
textarea.fb-in{resize:vertical;font-family:var(--font-mono);line-height:1.45;min-height:60px}
.fb-form-foot{display:flex;align-items:center;gap:10px}
.fbt-add{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:var(--text-hi);
  background:linear-gradient(180deg,var(--ember,#d97847),color-mix(in srgb,var(--ember,#d97847) 70%,#000));
  border:1px solid color-mix(in srgb,var(--ember,#d97847) 50%,var(--mortar));border-radius:7px;
  padding:7px 14px;cursor:pointer;text-transform:uppercase}
.fbt-add:hover{filter:brightness(1.12)}
.fbt-add:active{filter:brightness(0.9)}

/* Backlog rows */
.fb-row{padding:8px 10px;border-radius:8px;background:var(--basalt-800);
  border:1px solid var(--basalt-600);border-left:2px solid var(--oc,var(--dim));
  box-shadow:inset 0 0 0 1px var(--mortar)}
.fb-row + .fb-row{margin-top:6px}
.fb-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px}
.fb-glyph{color:var(--oc,var(--dim));font-family:var(--font-mono);font-size:13px;width:14px;text-align:center}
.fb-id{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--text-hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-repo{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);justify-self:end}
.fb-controls{display:flex;gap:4px;justify-self:end}
.fb-body{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);line-height:1.4;margin-top:4px;
  padding-left:22px}

/* Row buttons */
.fbt{font-family:var(--font-mono);font-size:10px;color:var(--text-mid);
  background:var(--basalt-900);border:1px solid var(--basalt-600);border-radius:5px;
  padding:3px 7px;cursor:pointer;text-transform:lowercase}
.fbt:hover{color:var(--text-hi);border-color:var(--ember,#d97847)}
.fbt-rem:hover{color:var(--red,#c84a3b);border-color:var(--red,#c84a3b)}
.fbt-prio{min-width:54px;text-align:center}

/* Pause/Resume control in the Forge header + paused banner */
.ph.fb-ph-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fbt-pause{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-mid);
  background:var(--basalt-900);border:1px solid var(--basalt-600);border-radius:6px;
  padding:3px 9px;cursor:pointer}
.fbt-pause:hover{color:var(--text-hi);border-color:var(--amber,#e1a23a)}
.fbt-pause.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 60%,var(--mortar))}
.fb-paused{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--amber,#e1a23a) 12%,var(--basalt-900));
  border:1px solid color-mix(in srgb,var(--amber,#e1a23a) 40%,var(--mortar));
  font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:var(--amber,#e1a23a);
  text-transform:uppercase;margin:4px 0}
.fb-paused .dim{font-family:var(--font-mono);text-transform:none;letter-spacing:0}

/* Waitlist promote button */
.fbt-promote{color:var(--violet,#7c5fb8) !important;border-color:color-mix(in srgb,var(--violet,#7c5fb8) 40%,var(--mortar)) !important}
.fbt-promote:hover{color:var(--text-hi) !important;border-color:var(--violet,#7c5fb8) !important;
  background:color-mix(in srgb,var(--violet,#7c5fb8) 18%,var(--basalt-900))}
.fbt-rem-wl:hover{color:var(--red,#c84a3b);border-color:var(--red,#c84a3b)}
.ph code{font-family:var(--font-mono);font-size:10px;background:var(--basalt-900);
  padding:1px 5px;border-radius:4px;border:1px solid var(--basalt-700);color:var(--violet,#7c5fb8)}

/* PR records list */
.fpr-list{display:flex;flex-direction:column;gap:4px}
.fpr-row{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:8px;
  padding:5px 9px;border-radius:6px;background:var(--basalt-800);border:1px solid var(--basalt-700);
  border-left:2px solid var(--oc,var(--dim));font-family:var(--font-mono);font-size:11px}
.fpr-glyph{color:var(--oc,var(--dim));text-align:center;width:12px}
.fpr-id{color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpr-link{color:var(--aether);text-decoration:none}
.fpr-link:hover{text-decoration:underline}
.fpr-cost{color:var(--text-dim);font-size:10.5px}
.fpr-when{color:var(--text-dim);font-size:10.5px}

/* MEDIC LEDGER — Henry's heal / escalation history (read-only) */
.mdc-list{display:flex;flex-direction:column;gap:8px}
.mdc-sweep{padding:8px 10px;border-radius:8px;background:var(--basalt-800);
  border:1px solid var(--basalt-700);border-left:2px solid var(--ok)}
.mdc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mdc-when{font-family:var(--font-mono);font-size:11px;color:var(--text-mid)}
.mdc-tags{display:flex;gap:6px;flex-wrap:wrap}
.mdc-tag{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:2px 7px;border-radius:999px;
  background:var(--basalt-900);border:1px solid var(--basalt-700)}
.mdc-tag b{font-weight:700;margin-right:3px}
.mdc-tag.on{color:var(--ok)}.mdc-tag.on b{color:var(--ok)}
.mdc-tag.esc{color:var(--amber,#e1a23a)}.mdc-tag.esc b{color:var(--amber,#e1a23a)}
.mdc-find{margin-top:6px;padding-left:8px;border-left:2px solid var(--basalt-700)}
.mdc-find.esc{border-left-color:var(--amber,#e1a23a)}
.mdc-find-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mdc-tgt{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-hi)}
.mdc-prob{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim)}
.mdc-act{font-family:var(--font-mono);font-size:10.5px;color:var(--text-mid);line-height:1.4;margin-top:2px}
.mdc-find.esc .mdc-act{color:var(--amber,#e1a23a)}

/* FORGE BURN — the fleet's SDK spend (read-only): today's total + per-agent split + priciest tasks */
.brn-total{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;background:var(--basalt-800);
  border:1px solid var(--basalt-700);border-left:2px solid var(--ember,#d97847)}
.brn-tot-lab{font-family:var(--font-mono);font-size:11px;color:var(--text-mid)}
.brn-tot-cost{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text-hi)}
.brn-agents{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.brn-agent{display:flex;align-items:baseline;gap:8px;padding:4px 8px;border-radius:6px;
  background:var(--basalt-900);border-left:2px solid var(--accent,var(--ember,#d97847))}
.brn-a-name{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-hi);flex:0 0 64px}
.brn-a-runs{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);flex:1}
.brn-a-cost{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--text-mid)}
.brn-tasks{margin-top:9px}
.brn-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:5px}
.brn-task{display:flex;align-items:baseline;gap:8px;padding:3px 8px;border-left:2px solid var(--basalt-700)}
.brn-t-id{font-family:var(--font-mono);font-size:11px;color:var(--text-mid);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brn-t-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);flex:0 0 auto}
.brn-t-cost{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-mid);flex:0 0 auto}

/* ============================================================================================== *
 * THESIS-HEALTH + NEWS BADGES — per-holding pills on the trading cards (Bill / Hakari).
 * Data: agent.positions (normalized by conductor/poller.mjs positionSummary / app.js normPosition).
 * ● intact (jade) · ◐ watch (solar) · ✕ broken (error red) · 📰 = fresh news on the holding.
 * ============================================================================================== */
.pos-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:calc(var(--u)*0.4)}
.pos-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);
  font-size:clamp(9px,0.6vw,11px);font-weight:600;color:var(--text-mid);white-space:nowrap;
  padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--pc,var(--text-dim)) 9%,var(--basalt-900));
  border:1px solid color-mix(in srgb,var(--pc,var(--text-dim)) 35%,var(--basalt-700))}
.pos-pill .pp-th{color:var(--pc,var(--text-dim));font-weight:700;
  text-shadow:0 0 6px color-mix(in srgb,var(--pc,var(--text-dim)) 55%,transparent)}
.pos-pill.broken{color:var(--text-hi);background:color-mix(in srgb,var(--error) 16%,var(--basalt-900))}
.pos-pill .pp-news{font-size:0.9em;letter-spacing:-0.02em}
.pos-pill.more{color:var(--text-dim);border-style:dashed}
/* Monitor detail — the full holdings list (one row per position: symbol · thesis · latest headline) */
.pos-list{display:flex;flex-direction:column;gap:4px}
.pos-row{display:flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:11px;
  padding:5px 9px;border-radius:6px;background:var(--basalt-800);border:1px solid var(--basalt-700);
  border-left:2px solid var(--pc,var(--text-dim))}
.pos-row .pr-sym{color:var(--text-hi);font-weight:700;flex:0 0 74px}
.pos-row .pr-sym .pp-th{color:var(--pc,var(--text-dim))}
.pos-row .pr-th{color:var(--pc,var(--text-dim));text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;flex:0 0 62px}
.pos-row .pr-news{color:var(--text-mid);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* THE SIGNAL — the Press's security sibling (accent --signal). Same masthead plate as the Press, plus a
   thin "redline" top rule so a security wire reads distinct from the general letter. Scoped to its cards. */
.cell[data-theme="press"][style*="--signal"]::after,
.cell[data-id="friedman"]::after,.cell[data-id="shannon"]::after,.cell[data-id="kerckhoffs"]::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--signal), transparent);opacity:.75}

/* ============================================================================================== *
 * RESPONSIVE POLISH — the audit's full-bleed lesson: the console must stay usable at CJ's ~80%
 * zoom (bigger CSS viewport — handled by the --u clamp) AND at phone widths (smaller one). The
 * <1024px one-column stack exists above; these tighten the chrome so nothing clips or overflows.
 * ============================================================================================== */
/* mid-width laptops / ~80% zoom on smaller panels: keep 2 columns but let the sidebar give ground.
   min-width-scoped: below 1025px the one-column stack owns the grid — this block sits LATER in the
   file, so an unscoped max-width here silently re-imposed the phantom second column on phones (the
   content squeezed into a sliver; found during the phase-10 mobile build). */
@media(max-width:1360px) and (min-width:1025px){
  .grid{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,400px)}
  .sidetab{padding:7px 10px;font-size:10px}
}
/* phone / narrow: wrap the topbar, shrink the stat line, compact the tab strip, loosen fixed columns */
@media(max-width:680px){
  .topbar{flex-wrap:wrap;row-gap:6px}
  .topbar h1 .sub{display:none}
  .sysline{flex-wrap:wrap;gap:10px;font-size:11px;width:100%;justify-content:flex-end}
  .sidetabs{gap:4px;padding:8px 8px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .sidetabs::-webkit-scrollbar{height:0;display:none}
  .sidetab{padding:6px 8px;font-size:9.5px;letter-spacing:.06em;flex:none}
  .kv{grid-template-columns:92px 1fr}
  .mon-overview{grid-template-columns:1fr 1fr;gap:8px}
  .rooms-track{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .pos-row .pr-th{flex-basis:52px}
  .fpr-row{grid-template-columns:auto 1fr auto;grid-auto-flow:dense}
  .fpr-cost,.fpr-when{grid-column:auto}
}
/* never let the page scroll sideways on the stacked layout */
@media(max-width:1024px){body{overflow-x:hidden}}

/* ============================================================================================== *
 * MOBILE SHELL (feature phase 10 · app-shell rebuild 2026-08-31) — the installed PWA experience.
 * ≤680px: the document is LOCKED (fixed shell, no page scroll, no rubber-band, no pan/zoom) so it
 * behaves like a native app, NOT a webpage in an app. A fixed compact topbar + ONE scrollable
 * surface + a fixed bottom tab bar; only the active surface scrolls, internally, chaining contained.
 * Desktop (>680px) is untouched — the bar stays hidden and no m-* class is ever applied.
 * ============================================================================================== */
.mnav{display:none}
.mfeed{display:none}
@media(max-width:680px){
  /* ---- LOCK THE DOCUMENT — this is what kills the "drag it around like Safari" feel ---- */
  html{height:100%;overflow:hidden;overscroll-behavior:none}
  body.mshell{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;margin:0;
    display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  /* text selection only where it's actually wanted (typing, reading chat) */
  body.mshell input,body.mshell textarea,body.mshell [contenteditable],
  body.mshell .henry-bubble,body.mshell .msg{-webkit-user-select:text;user-select:text}
  body.mshell img,body.mshell .spx{-webkit-user-drag:none;user-drag:none}

  /* ---- compact fixed app header (was a 111px wrapping block) ---- */
  body.mshell .topbar{flex:none;flex-wrap:nowrap;align-items:center;gap:10px;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 13px 8px}
  body.mshell .viewtoggle{display:none}
  body.mshell .topbar h1{font-size:14px}
  body.mshell .topbar h1 .sub{display:none}
  body.mshell .sysline{width:auto;flex:1 1 auto;min-width:0;flex-wrap:nowrap;
    justify-content:flex-end;gap:13px;font-size:11px}
  body.mshell .sysline .stat{display:none}                       /* hide online/alerts/clock text */
  body.mshell .sysline .stat.cost-tile{display:inline-flex;gap:2px}   /* keep the money glance */
  body.mshell .sysline .stat#s-silenced{display:inline-flex}         /* + the silenced chip */
  body.mshell .conn{display:none}
  /* the bell sits (in DOM order) between the cost tile and Configure — kept now that Configure is a
     small gear; it opens the notification panel from any tab */
  body.mshell .notif{width:32px;height:32px}
  body.mshell .notif .nbadge{top:-5px;right:-5px;border:2px solid var(--basalt-900)}
  /* Configure only rearranges the ROOMS map, so it appears ONLY on the Rooms tab — not on every page.
     Collapsed to a gear icon so the compact header breathes. */
  body.mshell .cfg-btn{display:none}
  body.m-rooms .cfg-btn{display:inline-flex;gap:0;padding:0;width:34px;height:34px;justify-content:center;font-size:0}
  body.m-rooms .cfg-btn::before{content:"\2699";font-size:15px;line-height:1}
  body.mshell #feedstrip{display:none !important}                /* redundant — the Feed tab owns it */

  /* ---- the surface area: grid = flex:1, one child shows per mode, scrolls INTERNALLY ---- */
  body.mshell .grid{flex:1 1 auto;min-height:0;width:100%;max-width:100%;
    display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden}
  body.mshell .grid>*{min-width:0;max-width:100%}
  body.mshell .mnav:not([hidden]){position:static;flex:none;z-index:1;display:flex;gap:6px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));
    border-top:2px solid var(--bronze-dark);box-shadow:0 -6px 20px rgba(0,0,0,.5)}

  /* mode routing — show exactly one surface, fill + scroll it internally */
  body.m-rooms .sidebar,body.m-rooms .mfeed{display:none}
  /* rooms = two self-scrolling regions (map + cards), NOT a page scroll */
  body.m-rooms .grid{overflow:hidden}
  /* the map renders the network LARGER than the box (room.js MOBILE_SCALE) and PANS by touch — no
     more smush. overscroll contained so a pan never drags the page. */
  body.m-rooms .map{flex:none;height:52vh;border-radius:0;margin:0;
    overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  body.m-rooms .map-canvas{position:static;inset:auto;max-width:none;max-height:none}
  body.m-rooms .strip{flex:1 1 auto;min-height:0;border-radius:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

  body.m-feed .map,body.m-feed .strip,body.m-feed .sidebar{display:none}
  body.m-feed .mfeed{display:block;flex:1 1 auto;min-height:0;width:100%;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 10px}

  body.m-tasks .map,body.m-tasks .strip,body.m-tasks .mfeed{display:none}
  body.m-atlas .map,body.m-atlas .strip,body.m-atlas .mfeed{display:none}
  body.m-atlas .sidetabs{display:none}                           /* Atlas is its own surface */

  /* the console (Tasks/Atlas) fills the surface; its panels scroll themselves. display:flex is scoped
     to the modes that SHOW it, so it never overrides the rooms/feed display:none (equal specificity). */
  body.mshell .sidebar{flex:1 1 auto;min-height:0;height:auto;width:100%;max-width:100%;
    flex-direction:column;min-width:0;border-radius:0;border-left:none;border-right:none}
  body.m-tasks .sidebar,body.m-atlas .sidebar{display:flex}
  body.mshell #sidebody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
  body.mshell .sidepanel:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  /* the console chip row = a proper contained horizontal scroll BAR (not a page drag): pan-x only,
     overscroll contained, momentum, snap, no scrollbar. This is the "moves like a webpage not a bar" fix. */
  body.mshell .sidetabs{flex:none;max-width:100%;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  body.mshell .sidetabs::-webkit-scrollbar{display:none;height:0;width:0}
  body.mshell .sidetab{flex:0 0 auto;scroll-snap-align:start}
  /* every vertical panel scroller contains its overscroll so a drag never chains into a page-like move */
  body.mshell .monitor-host,body.mshell .tasks-host,body.mshell .tracker-host,body.mshell .forge-host,
  body.mshell .timeline-host,body.mshell .cost-host,body.mshell .trends-host,body.mshell .argus-host,
  body.mshell .atlas-host,body.mshell .mfeed{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* ---- bottom tab bar ---- */
  .mtab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;background:none;border:2px solid transparent;border-radius:var(--radius);
    color:var(--text-dim);font-family:var(--font-display);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mtab .mt-glyph{font-size:17px;line-height:1}
  .mtab.active{color:var(--gold);border-color:var(--bronze-dark);
    background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800))}
  .mtab-badge{position:absolute;top:0;right:16%;min-width:15px;height:15px;border-radius:var(--radius);
    background:var(--solar);color:var(--abyss);font-family:var(--font-mono);font-size:9px;font-weight:700;
    display:grid;place-items:center;padding:0 3px}
  .mtab-badge[hidden]{display:none}

  /* feed surface rows */
  .mfeed .nrow{display:flex;align-items:center;gap:8px;padding:9px 10px;margin-bottom:6px;min-width:0;
    background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border:1px solid var(--basalt-600)}
  .mfeed .ntxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  .mfeed-issue{padding:10px;margin-bottom:10px;border:1px solid var(--bronze-dark);
    background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900))}
  .mfeed-issue .mfi-title{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--solar);margin-bottom:8px}
  .mfeed-issue .mfi-item{font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid);
    padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mfeed-issue .mfi-actions{display:flex;gap:8px;margin-top:10px;align-items:center}
}

/* ============================================================================================== *
 * WEEKLY FEED READER — the full-issue reader overlay (CJ 2026-08-31: "click the weekly feed to read
 * the full thing", desktop + mobile). GET /feed returns per-item bodies; this renders them readable
 * with live source links. Opened from the desktop strip and the mobile Feed tab.
 * ============================================================================================== */
.feedreader{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,3,.74);
  padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom))}
.fr-panel{display:flex;flex-direction:column;width:min(760px,100%);max-height:100%;
  background:linear-gradient(180deg,var(--basalt-800,#141B12),var(--basalt-900,#0E130D));
  border:2px solid var(--bronze-dark,#33482A);box-shadow:6px 6px 0 rgba(0,0,0,.5);border-radius:var(--radius,10px)}
.fr-head{display:flex;align-items:center;gap:10px;padding:12px 14px;flex:none;
  border-bottom:1px solid var(--basalt-600,#2B3C25)}
.fr-title{font-family:var(--font-display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--solar);flex:1;min-width:0}
.fr-x{cursor:pointer;border:2px solid var(--bronze-dark,#33482A);background:var(--basalt-700,#1D2919);
  color:var(--text-mid);border-radius:var(--radius,8px);width:32px;height:32px;font-size:14px;flex:none}
.fr-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 14px;min-height:0}
.fr-section{font-family:var(--font-display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bronze);margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--basalt-600,#2B3C25)}
.fr-section:first-child{margin-top:0}
.fr-item{padding:11px 0;border-bottom:1px solid rgba(43,60,37,.5)}
.fr-item-title{font-weight:700;color:var(--text-hi);font-size:13.5px;line-height:1.45;margin-bottom:7px}
.fr-item-body{display:flex;flex-direction:column;gap:6px}
.fr-line{font-family:var(--font-mono);font-size:12.5px;line-height:1.55;color:var(--text-mid)}
.fr-line a{color:var(--aether);text-decoration:underline;word-break:break-word}
.fr-foot{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--basalt-600,#2B3C25)}
.mfi-read{cursor:pointer}

/* ARGUS TAB — the Watchtower: per-surface uptime rows. Tiles reuse .mon-overview/.mon-stat, fleet
   pills reuse .fb-stats/.fb-stat, the alerts list reuses .alerts/.alert — only the rows are new. */
.agu-rows{display:flex;flex-direction:column;gap:6px}
.agu-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border:1px solid var(--basalt-600);
  border-left:3px solid var(--sc,var(--offline));font-family:var(--font-mono);font-size:11px;min-width:0}
.agu-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--sc,var(--offline));
  box-shadow:0 0 8px var(--sc,var(--offline))}
.agu-id{color:var(--text-hi);font-weight:700;white-space:nowrap}
.agu-st{color:var(--sc,var(--text-dim));text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}
.agu-meta{color:var(--text-dim);margin-left:auto;display:flex;gap:10px;white-space:nowrap;overflow:hidden}
.agu-pct{font-weight:700;color:var(--text-mid)}

/* ── ROOM DRILL-IN OVERLAY (feature layer, 2026-08-28): click a chamber → everything for that room
   in one panel over the map. Var-driven so the theme layer skins it automatically. ── */
.rovl-veil{position:absolute;inset:0;z-index:8;background:color-mix(in srgb,var(--abyss) 60%,transparent);backdrop-filter:blur(2px) saturate(.8)}
.rovl{position:absolute;inset:clamp(10px,3.5%,30px);z-index:9;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--basalt-600);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(232,182,90,.07),inset 0 0 0 1px var(--mortar),0 0 26px color-mix(in srgb,var(--accent,var(--gold)) 14%,transparent),0 18px 60px rgba(0,0,0,.65)}
.rovl-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--basalt-700);flex:none}
.rovl-title{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-hi);
  text-shadow:0 0 10px color-mix(in srgb,var(--accent,var(--gold)) 35%,transparent)}
.rovl-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-mid)}
.rovl-x{margin-left:auto;cursor:pointer;font-family:var(--font-mono);font-size:12px;color:var(--text-mid);
  border:1px solid var(--basalt-600);background:none;border-radius:calc(var(--radius)*0.5);padding:5px 11px}
.rovl-x:hover{color:var(--text-hi);border-color:var(--accent,var(--gold))}
.rovl-tabs{display:flex;gap:6px;padding:8px 14px 0;border-bottom:1px solid var(--basalt-700);flex:none}
.rovl-tab{cursor:pointer;font-family:var(--font-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid);
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border:1px solid var(--bronze-dark);border-bottom:none;
  border-radius:calc(var(--radius)*0.6) calc(var(--radius)*0.6) 0 0;padding:7px 13px}
.rovl-tab:hover{color:var(--text-hi)}
.rovl-tab[aria-selected="true"]{color:var(--abyss);background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-color:var(--gold);
  box-shadow:0 0 12px color-mix(in srgb,var(--gold) 35%,transparent)}
.rovl-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.rovl-body::-webkit-scrollbar{width:8px}
.rovl-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--bronze) 40%,transparent);border-radius:4px}
.rovl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rovl .cell{cursor:default}
.rovl .cell:hover{transform:none}
.rovl-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.rovl-hb{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid)}
.rovl-hb .lab{width:130px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-hi)}
.rovl-hb svg{flex:1;height:20px}
@media(max-width:1024px){.rovl{inset:6px}}

/* ── CONFIGURE mode (feature layer, 2026-08-28): the topbar button + the in-map toolbar/tray ── */
.cfg-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid);border:1px solid var(--bronze-dark);
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border-radius:calc(var(--radius)*0.6);padding:6px 12px}
.cfg-btn:hover{color:var(--text-hi);border-color:color-mix(in srgb,var(--gold) 45%,var(--bronze-dark))}
.cfg-btn.active{color:var(--abyss);background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-color:var(--gold);
  box-shadow:0 0 14px color-mix(in srgb,var(--gold) 42%,transparent)}
.cfgbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--gold-deep);
  border-radius:var(--radius);font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid);white-space:nowrap;
  box-shadow:0 0 18px color-mix(in srgb,var(--gold) 22%,transparent),0 8px 24px rgba(0,0,0,.5)}
.cfgbar .cfg-hint{font-family:var(--font-display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cfgtray{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;justify-content:center;max-width:80%;padding:7px 11px;
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--basalt-600);
  border-radius:var(--radius);font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}

/* ── WEEKLY FEED STRIP (feature layer, 2026-08-28): thin approval bar under the topbar, shown only
   while a staged Signal issue awaits CJ. Var-driven; the theme layer restyles it. ── */
.feedstrip{display:flex;align-items:center;gap:14px;padding:7px 14px;flex:none;border-bottom:1px solid var(--bronze-dark);
  background:linear-gradient(90deg,color-mix(in srgb,var(--solar) 8%,transparent),transparent 60%);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid)}
.feedstrip[hidden]{display:none}
.feedstrip .fs-title{font-family:var(--font-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--solar);flex:none}
.feedstrip .fs-items{display:flex;gap:16px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.feedstrip .fs-items span{overflow:hidden;text-overflow:ellipsis;max-width:34ch;flex:none}
.fs-btn{cursor:pointer;font-family:var(--font-mono);font-size:11.5px;border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 10%,transparent);border-radius:calc(var(--radius)*0.5);padding:4px 12px;font-weight:600;flex:none}
.fs-btn:hover{border-color:var(--ok)}
.fs-btn.ghost{border-color:var(--bronze-dark);color:var(--text-mid);background:none}
.fs-btn.ghost:hover{color:var(--text-hi)}

/* ── NOTIFICATION CENTER (feature layer, 2026-08-28): 0 pending = nothing; exactly 1 = the notification
   itself sits inline in the topbar; 2+ = the bell with a count badge opening the approve/decline panel. ── */
.notif{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--bronze-dark);border-radius:calc(var(--radius)*0.6);
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));color:var(--text-mid)}
.notif:hover{color:var(--text-hi);border-color:color-mix(in srgb,var(--gold) 45%,var(--bronze-dark))}
.notif[hidden],#notif-single[hidden]{display:none}
.nbadge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--solar);color:var(--abyss);
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px}
#notif-single{display:inline-flex;min-width:0}
.nrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--text-mid);min-width:0;
  border:1px solid var(--bronze-dark);border-radius:calc(var(--radius)*0.5);padding:4px 8px;
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800))}
.nrow .ntag{font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--amber);flex:none;
  border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);border-radius:3px;padding:1px 5px}
.nrow.err .ntag{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.nrow.prop .ntag{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.nrow .ntxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.nrow .nwhen{color:var(--text-dim);flex:none}
.nbtn{cursor:pointer;border:1px solid var(--basalt-600);background:none;color:var(--text-mid);border-radius:3px;
  font-family:var(--font-mono);font-size:11px;padding:2px 7px;flex:none}
.nbtn:hover{color:var(--text-hi);border-color:var(--gold-deep)}
.nbtn.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.nbtn.no{color:var(--red,#F5563D);border-color:color-mix(in srgb,var(--red,#F5563D) 40%,transparent)}
.notif-panel{position:fixed;top:54px;right:14px;z-index:60;display:flex;flex-direction:column;gap:6px;
  min-width:340px;max-width:480px;max-height:62vh;overflow-y:auto;padding:10px 12px;
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--basalt-600);
  border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--mortar),0 14px 40px rgba(0,0,0,.6)}
.notif-panel .np-head{font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.notif-panel .nrow{display:flex}
.notif-panel .nrow .ntxt{max-width:none;flex:1;white-space:normal;overflow:visible}

/* ── COMMAND PALETTE (feature layer, 2026-08-28): press / or Ctrl+K anywhere ── */
.pal-veil{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--abyss) 55%,transparent);backdrop-filter:blur(2px)}
.pal{position:fixed;top:16vh;left:50%;transform:translateX(-50%);z-index:71;width:min(560px,92vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--basalt-800),var(--basalt-900));border:1px solid var(--gold-deep);border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--mortar),0 0 30px color-mix(in srgb,var(--gold) 18%,transparent),0 18px 60px rgba(0,0,0,.7)}
.pal input{background:var(--mortar);border:none;border-bottom:1px solid var(--basalt-700);outline:none;color:var(--text-hi);
  font-family:var(--font-mono);font-size:14px;padding:12px 14px}
.pal-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;padding:6px}
.pal-list::-webkit-scrollbar{width:8px}
.pal-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--bronze) 40%,transparent);border-radius:4px}
.pal-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:calc(var(--radius)*0.5);cursor:pointer;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-mid)}
.pal-row .pl{color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-row .ph2{margin-left:auto;color:var(--text-dim);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;flex:none}
.pal-row.sel{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--text-hi);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
.pal-empty{padding:14px;color:var(--text-dim);font-family:var(--font-mono);font-size:12px;text-align:center}
.pal-foot{display:flex;gap:14px;padding:7px 12px;border-top:1px solid var(--basalt-700);
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}