/* Founder's Office Console — design system
 *
 * Restrained enterprise terminal, not a neon dashboard. Principles:
 *   1. Surfaces are neutral graphite. Colour is information, never decoration.
 *   2. Karat teal (#00BCC2, harvested from karat.com) appears only where it carries
 *      meaning: active state, live status, key figures, links. Roughly 4% of pixels.
 *   3. Numerics are monospaced and tabular so columns align and never jitter.
 *   4. Hairline borders and spacing do the separating work. No glows, no coloured
 *      drop shadows, no pulsing.
 *   5. Motion is functional: it shows that something arrived or changed, then stops.
 */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root {
  /* brand */
  --karat: #00BCC2;
  --karat-dim: #0E7E82;
  --karat-deep: #003E40;
  --karat-soft: rgba(0, 188, 194, .10);

  /* neutral surfaces */
  --bg: #0A0C0D;
  --s1: #101315;
  --s2: #15191C;
  --s3: #1B2023;
  --line: #21272B;
  --line-2: #2C3438;

  /* type */
  --t1: #E7EBEE;
  --t2: #97A2A9;
  --t3: #5F6B72;
  --t4: #414B51;

  /* semantic, deliberately desaturated */
  --pos: #55B37E;
  --neg: #CF5C5C;
  --warn: #C2933F;

  /* Aliases kept so the scripts' inline colour references resolve against the
     new palette instead of being edited in a dozen places. */
  --karat-teal: #0E7E82;
  --karat-teal-lt: #00BCC2;
  --karat-teal-700: #0E7E82;
  --text-hi: #E7EBEE;
  --text-mid: #97A2A9;
  --text-lo: #5F6B72;
  --bg-0: #0A0C0D;
  --bg-1: #101315;
  --bg-2: #15191C;
  --bg-3: #1B2023;
  --stroke: #21272B;
  --stroke-2: #2C3438;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r: 5px;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --gut: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: 'Satoshi', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.tnum, .score, .ct, .v, .n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: #3A454A; }
::selection { background: rgba(0, 188, 194, .25); }

/* ================================================================== topbar */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 18px;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
}
.top .logo { height: 21px; display: block; opacity: .92; }
.top .vr { width: 1px; height: 20px; background: var(--line-2); }
.brandline { display: flex; flex-direction: column; line-height: 1.2; }
.brandline b { font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; color: var(--t1); }
.brandline span {
  font-family: var(--mono); font-size: 9px; color: var(--t4);
  letter-spacing: .1em; text-transform: uppercase;
}
.top .spacer { flex: 1; }

.cmdtrigger {
  display: flex; align-items: center; gap: 9px;
  min-width: 320px; height: 30px; padding: 0 11px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--t3); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
  font-family: inherit; font-size: 12px;
}
.cmdtrigger:hover { border-color: var(--line-2); color: var(--t2); }
.sparkle { color: var(--karat); font-size: 9px; }
.kbd {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  padding: 2px 5px; border-radius: 3px; background: var(--s2);
  border: 1px solid var(--line-2); color: var(--t4);
}

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 25px; padding: 0 9px; border-radius: 3px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t3); white-space: nowrap;
}
.pill.ghost {
  cursor: pointer; font-family: inherit; text-transform: none;
  letter-spacing: 0; font-size: 11.5px;
}
.pill.ghost:hover { border-color: var(--line-2); color: var(--t1); }
.pill.live { color: var(--t2); border-color: var(--line-2); }
.pill.dead { color: var(--neg); border-color: rgba(207, 92, 92, .35); }
.dot { width: 5px; height: 5px; border-radius: 1px; background: var(--karat); }
.pill.dead .dot { background: var(--neg); }

/* ==================================================================== grid */
.grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--gut); padding: var(--gut) 18px 40px;
  align-items: start;
}
.w {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden;
  animation: rise .22s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* "hot" = this widget just took an update. A 1px top rule, not a glow. */
.w::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--karat); opacity: 0; transition: opacity .9s var(--ease);
  pointer-events: none; z-index: 2;
}
.w.hot::after { opacity: .85; transition: opacity .12s; }

.wh {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px; height: 34px; flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--s2);
}
.wh h2 {
  margin: 0; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t2);
}
.wh .meta {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--t4);
  letter-spacing: .04em;
}
.wb { padding: 11px 12px; }
.scroll { overflow-y: auto; }

/* work in progress: a determinate hairline, not a sweeping shimmer */
.w.shimmer .wh { box-shadow: inset 0 -1px 0 var(--karat-dim); }

.c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c12 { grid-column: span 12; }
.col { display: flex; flex-direction: column; gap: var(--gut); min-width: 0; }

/* ================================================================== stream */
.filters {
  display: flex; gap: 5px; flex-wrap: nowrap; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--s1); flex: none;
  overflow-x: auto; scrollbar-width: none;
}
.filters::-webkit-scrollbar { height: 0; }
.chip {
  font-size: 10.5px; padding: 3px 8px; border-radius: 3px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); color: var(--t3);
  transition: all .14s var(--ease); font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: #3A454A; color: var(--t1); }
.chip.on { background: var(--karat-soft); border-color: var(--karat-dim); color: var(--karat); }

.row {
  display: grid; grid-template-columns: 1fr 64px; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  cursor: pointer; position: relative;
  transition: background .14s var(--ease);
}
.row:hover { background: var(--s2); }
.row .bar { display: none; }
.row .t { font-size: 12.5px; color: var(--t1); line-height: 1.4; font-weight: 500; }
.row .sub {
  margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; color: var(--t4); letter-spacing: .03em;
}
.row .sub > * { margin-right: 9px; }
.acct {
  color: var(--t2); font-weight: 500; position: relative; padding-left: 10px;
  font-family: 'Satoshi', sans-serif; font-size: 10.5px; letter-spacing: 0;
}
/* segment identity: a 4px marker, not a coloured slab */
.acct::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 1px; background: var(--t4);
}
.seg-banking .acct::before { background: #4A90A4; }
.seg-insurance .acct::before { background: #6C6FA8; }
.seg-asset_mgmt .acct::before { background: #5B9E7B; }
.seg-payments .acct::before { background: #A8894A; }
.seg-fintech .acct::before { background: #7D7FB8; }
.seg-exchange .acct::before { background: #9A6FA8; }

.tag {
  font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 2px;
  letter-spacing: .04em; background: var(--s3); border: 1px solid var(--line-2);
  color: var(--t3); text-transform: uppercase;
}
.tag.t1 { border-color: var(--karat-dim); color: var(--karat); background: transparent; }
.row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.score { font-size: 12px; font-weight: 500; color: var(--t2); }
.scorebar { width: 48px; height: 2px; background: var(--s3); overflow: hidden; }
.scorebar i { display: block; height: 100%; background: var(--karat-dim); }

/* arrival: a brief left rule that fades. no flash, no glow. */
@keyframes arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.row.new { animation: arrive .22s var(--ease) both; }
.row.new::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--karat); animation: dim 2.4s var(--ease) forwards;
}
@keyframes dim { to { opacity: 0; } }

/* ================================================================ counters */
.ctr { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.ctr .cell { background: var(--s1); padding: 9px 10px; cursor: pointer; transition: background .14s; }
.ctr .cell:hover { background: var(--s2); }
.ctr .k {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--t4);
}
.ctr .v { font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--t1); }
.ctr .d { font-size: 10px; color: var(--t4); display: flex; align-items: center; gap: 5px; }
.up { color: var(--pos); } .down { color: var(--neg); }
.spark { display: block; margin-top: 2px; }

/* ================================================================ activity */
.act { display: flex; flex-direction: column; }
.act .it {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 8px;
  padding: 5px 12px; font-family: var(--mono); font-size: 10px;
  border-bottom: 1px solid var(--line); animation: arrive .2s var(--ease) both;
}
.act .ic { font-size: 9px; text-align: center; color: var(--t4); }
.act .run .ic { color: var(--karat); }
.act .ok .ic { color: var(--pos); }
.act .err .ic { color: var(--neg); }
.act .note { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act .stage { color: var(--t4); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

/* =================================================================== radar */
.radar .r { margin-bottom: 11px; cursor: pointer; }
.radar .rl { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; margin-bottom: 5px; }
.radar .rl b { font-weight: 500; color: var(--t1); }
.radar .rl .n { margin-left: auto; color: var(--t2); font-size: 11px; }
.radar .track { height: 3px; background: var(--s3); overflow: hidden; }
.radar .fill { height: 100%; background: var(--karat-dim); transition: width .5s var(--ease); }
.radar .accts {
  font-family: var(--mono); font-size: 9.5px; color: var(--t4); margin-top: 4px;
  letter-spacing: .02em;
}
.mom {
  font-family: var(--mono); font-size: 9px; padding: 1px 4px; border-radius: 2px;
  background: transparent; border: 1px solid var(--line-2); color: var(--t4);
}
.mom.up { color: var(--pos); border-color: rgba(85, 179, 126, .3); }

/* ==================================================================== heat */
.heat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); }
.cellh {
  position: relative; aspect-ratio: 1.6; padding: 6px 7px;
  background: var(--s1); cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background .14s var(--ease); overflow: hidden;
}
.cellh:hover { background: var(--s3); }
.cellh .n {
  font-family: 'Satoshi', sans-serif; font-size: 9.5px; font-weight: 500;
  line-height: 1.2; color: var(--t2);
}
.cellh .s { font-family: var(--mono); font-size: 13px; color: var(--t1); }
.cellh.t1 { box-shadow: inset 2px 0 0 var(--karat-dim); }
.cellh .glow { display: none; }
.cellh.pulse { background: var(--s3); }

/* ================================================================== hiring */
.hire .hrow {
  display: grid; grid-template-columns: 1fr auto 54px; gap: 9px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.hire .nm { font-size: 11.5px; color: var(--t2); }
.hire .ct { font-size: 13px; color: var(--t1); }
.hire .dl { font-family: var(--mono); font-size: 9.5px; color: var(--t4); }

/* ==================================================================== misc */
.ex { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.av {
  width: 26px; height: 26px; border-radius: 2px; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; background: var(--s3);
  border: 1px solid var(--line-2); color: var(--t2);
}
.ex .nm { font-size: 11.5px; font-weight: 500; color: var(--t1); }
.ex .ti { font-family: var(--mono); font-size: 9.5px; color: var(--t4); letter-spacing: .02em; }
.ex .hl { font-size: 10.5px; color: var(--t2); margin-top: 3px; }

.reg { display: flex; flex-direction: column; gap: 1px; }
.reg .it { padding: 8px 9px; background: var(--s2); border-left: 2px solid var(--warn); }
.reg .it.force { border-left-color: var(--line-2); }
.reg .nm { font-size: 11.5px; font-weight: 500; color: var(--t1); }
.reg .ju { font-family: var(--mono); font-size: 9.5px; color: var(--t4); margin-top: 2px; }
.reg .sm { font-size: 10.5px; color: var(--t2); margin-top: 4px; }

.theme { padding: 10px 0; border-bottom: 1px solid var(--line); }
.theme .tt { font-size: 12.5px; font-weight: 500; display: flex; gap: 9px; align-items: baseline; }
.theme .rk { font-family: var(--mono); color: var(--t4); font-size: 10px; }
.theme .nar { font-size: 11px; color: var(--t2); margin-top: 5px; line-height: 1.6; }

.empty { padding: 26px 14px; text-align: center; color: var(--t4); font-size: 11px; line-height: 1.6; }
.empty b { display: block; color: var(--t2); font-size: 12px; margin-bottom: 5px; font-weight: 500; }
.sk { height: 11px; background: var(--s2); margin: 7px 0; }

.btn {
  font-family: inherit; font-size: 11px; padding: 5px 10px; border-radius: 3px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); color: var(--t2); transition: all .14s;
}
.btn:hover { border-color: #3A454A; color: var(--t1); background: var(--s2); }
.btn.primary {
  background: var(--karat-dim); border-color: var(--karat-dim); color: #04191A;
  font-weight: 700; padding: 7px 14px;
}
.btn.primary:hover { background: var(--karat); border-color: var(--karat); }

/* ================================================================== panels */
.drawer, .agent, .fpanel {
  position: fixed; top: 0; bottom: 0; z-index: 85;
  background: var(--s1); display: flex; flex-direction: column;
  transition: transform .26s var(--ease);
}
.drawer { right: 0; width: 560px; max-width: 94vw; border-left: 1px solid var(--line-2);
  transform: translateX(101%); }
.drawer.open { transform: none; }
.agent { right: 0; width: 660px; max-width: 96vw; border-left: 1px solid var(--line-2);
  transform: translateX(101%); }
.agent.open { transform: none; }
.fpanel { left: 0; width: 440px; max-width: 96vw; border-right: 1px solid var(--line-2);
  transform: translateX(-101%); overflow: hidden; }
.fpanel.open { transform: none; }

.drawer .dh, .agent .dh, .fpanel .dh {
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--s2);
  display: flex; align-items: flex-start; gap: 10px; flex: none;
}
.drawer .dh h3, .agent .dh h3, .fpanel .dh h3 {
  margin: 3px 0 0; font-size: 14px; line-height: 1.35; font-weight: 700;
}
.kicker, .drawer .meta {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t4);
}
.drawer .db, .fpanel .db { padding: 14px 16px 30px; overflow-y: auto; flex: 1; }
.x {
  margin-left: auto; cursor: pointer; color: var(--t4); font-size: 15px; line-height: 1;
  background: none; border: 0; padding: 2px 4px;
}
.x:hover { color: var(--t1); }

.quote {
  background: var(--s2); border-left: 2px solid var(--karat-dim);
  padding: 9px 11px; margin: 9px 0; font-size: 11.8px; line-height: 1.6; color: var(--t1);
}
.ctx {
  font-size: 11px; line-height: 1.7; color: var(--t2); white-space: pre-wrap;
  max-height: 250px; overflow-y: auto; background: var(--bg);
  padding: 11px; border: 1px solid var(--line);
}
.ctx mark { background: rgba(0, 188, 194, .2); color: var(--t1); padding: 1px 0; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 11.5px; margin: 10px 0; }
.kv .k {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--t4); padding-top: 1px;
}
.sectitle {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--t4); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.scrim {
  position: fixed; inset: 0; background: rgba(6, 8, 9, .68); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .24s;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* ================================================================= analyst */
.agbody { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.agempty { padding: 14px 2px; }
.agtitle { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.agsub { font-size: 11.5px; color: var(--t2); line-height: 1.65; }
.agchips {
  display: flex; flex-direction: column; gap: 0; margin-top: 18px; align-items: stretch;
  border-top: 1px solid var(--line);
}
.agchips .chip {
  text-align: left; white-space: normal; padding: 9px 11px; font-size: 11.5px;
  line-height: 1.45; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--t2); background: transparent;
}
.agchips .chip:hover { background: var(--s2); color: var(--t1); }

.agmsg { font-size: 12.5px; line-height: 1.65; animation: rise .2s var(--ease) both; }
.agmsg.user {
  align-self: flex-end; max-width: 84%; background: var(--s3);
  border: 1px solid var(--line-2); border-left: 2px solid var(--karat-dim);
  padding: 9px 12px; border-radius: 3px; color: var(--t1);
}
.agmsg.bot { color: var(--t1); }
.agmsg.bot h4 { margin: 15px 0 6px; font-size: 12px; color: var(--t1); font-weight: 700; }
.agmsg.bot ul { margin: 7px 0; padding-left: 16px; }
.agmsg.bot li { margin: 4px 0; color: var(--t2); }
.agmsg.bot b { color: var(--t1); }
.agmsg.bot code {
  font-family: var(--mono); background: var(--s2); padding: 1px 4px;
  border-radius: 2px; font-size: 11px; color: var(--karat);
}
.agmsg.tools { display: flex; flex-direction: column; border: 1px solid var(--line); }
.tool {
  display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px;
  padding: 6px 10px; background: var(--s2); color: var(--t3);
  border-bottom: 1px solid var(--line);
}
.tool:last-child { border-bottom: 0; }
.tool b { color: var(--t1); font-weight: 500; }
.tool .targs { color: var(--t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tool .tres { color: var(--t4); font-size: 9.5px; }
.tool.done .tres { color: var(--pos); }
.tdot { width: 4px; height: 4px; border-radius: 1px; background: var(--karat); flex: none; }
.tool.done .tdot { background: var(--pos); }
.cursor {
  display: inline-block; width: 6px; height: 12px; background: var(--karat);
  vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.aginput {
  border-top: 1px solid var(--line); padding: 11px 13px; display: flex; gap: 9px;
  align-items: flex-end; background: var(--s2);
}
.aginput textarea {
  flex: 1; resize: none; background: var(--bg); border: 1px solid var(--line);
  border-radius: 3px; color: var(--t1); font-family: inherit; font-size: 12.5px;
  padding: 9px 11px; outline: none; line-height: 1.5;
}
.aginput textarea:focus { border-color: var(--karat-dim); }
.aginput textarea::placeholder { color: var(--t4); }

/* ================================================================== filters */
.flstat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-bottom: 4px;
}
.flstat > div { background: var(--s1); padding: 9px 10px; }
.flstat .k {
  display: block; font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--t4);
}
.flstat b { font-family: var(--mono); font-size: 17px; color: var(--t1); font-weight: 500; }
.flreasons { display: flex; flex-direction: column; gap: 1px; }
.flreasons .rr {
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px;
  padding: 4px 8px; background: var(--s2); color: var(--t3);
}
.flrow {
  display: flex; align-items: center; gap: 10px; font-size: 11.5px; padding: 7px 0;
  color: var(--t2); border-bottom: 1px solid var(--line);
}
.flrow > span { flex: 1; }
.flrow input[type=range] { width: 120px; accent-color: var(--karat-dim); }
.flrow input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--karat-dim); }
.flrow b { font-family: var(--mono); min-width: 34px; text-align: right; color: var(--t1); }
.flta {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  color: var(--t3); font-family: var(--mono); font-size: 10px; padding: 8px;
  resize: vertical; line-height: 1.6;
}
.flta:focus { outline: none; border-color: var(--karat-dim); color: var(--t2); }
.flchips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.flactions { display: flex; gap: 8px; margin: 18px 0 4px; }

/* =============================================================== responsive */
@media (max-width: 1279px) {
  .c6 { grid-column: span 12; } .c5, .c4 { grid-column: span 6; } .c3 { grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================== polling telemetry + ordering
 * The sweep is the product's heartbeat. Between kept documents nothing else on
 * screen moves, so these four hairlines answer "is it actually polling" without
 * the operator having to infer it from new cards appearing.
 */
.pollbar {
  flex: none; padding: 7px 12px 8px; border-bottom: 1px solid var(--line);
  background: var(--s1); display: flex; flex-direction: column; gap: 5px;
}
.pl { display: grid; grid-template-columns: 58px 1fr 38px 26px; align-items: center; gap: 8px; }
.pl-n {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t3);
}
.pl-track {
  height: 2px; background: var(--line-2); border-radius: 1px; overflow: hidden;
}
.pl-track i {
  display: block; height: 100%; background: var(--karat-dim);
  transition: width .45s var(--ease);
}
.pl-v { font-size: 9.5px; color: var(--t3); text-align: right; }
.pl-t { font-size: 9.5px; color: var(--t4); text-align: right; }
.pl-empty { font-family: var(--mono); font-size: 9.5px; color: var(--t4); }

.sortbtn {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; padding: 2px 7px; border-radius: 3px;
  background: transparent; border: 1px solid var(--line-2); color: var(--t3);
  transition: all .14s var(--ease);
}
.sortbtn:hover { border-color: #3A454A; color: var(--t1); }

/* ==================================================== the Karat angle
 * The analytical payload. It sits inside the card, indented under the headline,
 * because it is a reading of the story rather than another attribute of it.
 */
.angle {
  margin-top: 6px; padding: 6px 9px; border-radius: 3px;
  background: var(--s2); border-left: 2px solid var(--karat-dim);
}
.angle.none {
  background: transparent; border-left: 2px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; color: var(--t4);
  letter-spacing: .04em; padding: 3px 9px;
}
.angle.u-high { border-left-color: var(--karat); }
.angle.u-low { border-left-color: var(--line-2); }
.angle .al { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.angle .ab {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--karat);
}
.angle .ap { font-size: 10px; color: var(--t3); }
.angle .au {
  margin-left: auto; font-family: var(--mono); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--t4);
}
.angle .ai { font-size: 11.5px; line-height: 1.5; color: var(--t1); }
.angle .aop {
  font-size: 12px; line-height: 1.55; color: var(--t1); font-style: italic;
  padding: 7px 10px; background: var(--s2); border-radius: 3px;
}
.row .tag.srcs { border-color: var(--karat-dim); color: var(--karat); }
.row.unseen .bar { background: var(--karat); }

/* ============================================================ delta bar */
.deltabar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 var(--gut) 10px; padding: 8px 12px;
  background: var(--s2); border: 1px solid var(--karat-dim); border-radius: var(--r);
  font-size: 12px; color: var(--t1);
}
.deltabar[hidden] { display: none; }
.deltabar .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--karat); flex: none;
}
.deltabar .btn { margin-left: 0; }
.deltabar .btn:first-of-type { margin-left: auto; }

/* ================================================== brief, expanded form */
.exsum {
  font-size: 13px; line-height: 1.65; color: var(--t1);
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--s2); border-left: 2px solid var(--karat-dim); border-radius: 3px;
}
.sowhat {
  margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--karat);
}
.sec { margin-bottom: 14px; }
.blist { margin: 4px 0 12px 16px; padding: 0; font-size: 12px; line-height: 1.6; color: var(--t2); }
.blist li { margin-bottom: 4px; }
.draft {
  margin-bottom: 9px; padding: 9px 11px; background: var(--s2);
  border: 1px solid var(--line); border-radius: 3px;
}
.draft .dh { font-size: 12.5px; font-weight: 700; color: var(--t1); margin-bottom: 5px; }
.draft .db { font-size: 12px; line-height: 1.6; color: var(--t2); white-space: pre-wrap; }
.draft .dg {
  margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t4);
}
.warnbox {
  padding: 8px 11px; margin-bottom: 10px; border-radius: 3px;
  background: rgba(194, 147, 63, .10); border-left: 2px solid var(--warn);
  font-size: 11.5px; line-height: 1.55; color: var(--t2);
}
.claim { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.claim .cx { font-size: 12px; line-height: 1.55; color: var(--t1); margin-bottom: 5px; }

/* =========================================================== light mode
 * Same information architecture, inverted surfaces. Karat teal stays the single
 * accent, darkened to #00767A so it holds contrast on white; the neutral ramp is
 * rebuilt rather than filtered, so nothing turns muddy. Every legacy alias below
 * is redefined too, because the charts pass these names through inline styles.
 */
[data-theme="light"] {
  --karat: #00767A;
  --karat-dim: #009BA0;
  --karat-deep: #E2F4F5;
  --karat-soft: rgba(0, 118, 122, .09);

  --bg: #F4F6F7;
  --s1: #FFFFFF;
  --s2: #F7F9FA;
  --s3: #EDF1F3;
  --line: #E0E5E8;
  --line-2: #CDD5D9;

  --t1: #16201F;
  --t2: #4A575D;
  --t3: #6F7C83;
  --t4: #93A0A6;

  --pos: #2F7D52;
  --neg: #B33B3B;
  --warn: #9A6F1E;

  /* legacy aliases used from JavaScript inline styles and SVG strokes */
  --bg-0: #F4F6F7;
  --bg-1: #FFFFFF;
  --bg-2: #F7F9FA;
  --bg-3: #EDF1F3;
  --stroke: #E0E5E8;
  --stroke-2: #CDD5D9;
  --text-hi: #16201F;
  --text-mid: #4A575D;
  --text-lo: #6F7C83;
  --karat-teal: #00767A;
  --karat-teal-lt: #009BA0;
  --karat-teal-700: #005E61;
}
[data-theme="light"] body { background: var(--bg); color: var(--t1); }
[data-theme="light"] .top { background: #FFFFFF; }
/* The wordmark asset is white, so the light header needs the dark one. */
[data-theme="light"] .top .logo { filter: invert(1) brightness(.22); }
[data-theme="light"] .w { box-shadow: 0 1px 2px rgba(16, 32, 31, .05); }
[data-theme="light"] .angle { background: var(--karat-soft); }
[data-theme="light"] .warnbox { background: rgba(154, 111, 30, .10); }
[data-theme="light"] mark { background: rgba(0, 118, 122, .20); color: inherit; }

/* =========================================================== board layout
 * Four bands, each its own masonry grid, so dense packing can never pull a widget
 * across a band heading. Rows are 4px; the layout engine in intel.js gives every
 * widget a row span that matches its measured content height.
 */
.board { padding: 4px 18px 48px; }
.band { margin-top: 18px; }
.band:first-child { margin-top: 8px; }
.bandh {
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 2px 9px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bandh h1 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--t1);
}
.bandh span { font-size: 11.5px; color: var(--t3); }
.mgrid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 4px; grid-auto-flow: row dense;
  column-gap: var(--gut); row-gap: 12px; align-items: start;
}
.mgrid > .w { min-width: 0; transition: height .18s var(--ease); }
/* only scroll regions may give up height; everything else keeps its content size */
.mgrid > .w > :not(.scroll) { flex-shrink: 0; }
.mgrid .c3 { grid-column: span 3; } .mgrid .c4 { grid-column: span 4; }
.mgrid .c5 { grid-column: span 5; } .mgrid .c6 { grid-column: span 6; }
.mgrid .c8 { grid-column: span 8; } .mgrid .c12 { grid-column: span 12; }
.wfoot { border-top: 1px solid var(--line); flex: none; }

@media (max-width: 1500px) {
  .mgrid .c3 { grid-column: span 4; } .mgrid .c5 { grid-column: span 6; }
  .mgrid .c6 { grid-column: span 8; } .mgrid .c4 { grid-column: span 4; }
}
@media (max-width: 1150px) {
  .mgrid .c3, .mgrid .c4, .mgrid .c5 { grid-column: span 6; }
  .mgrid .c6, .mgrid .c8 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .mgrid > .w { grid-column: span 12 !important; }
  .bandh { flex-direction: column; gap: 3px; }
}

/* polling strip: fourteen workers now, so two columns */
.pollbar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 4px; }
.pollbar .pl { grid-template-columns: 78px 1fr 34px 30px; gap: 6px; }
.pollbar .pl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================== shared small pieces */
.why {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line-2);
  font-size: 10.5px; color: var(--t2); background: var(--s2);
}
.why b { color: var(--t1); font-weight: 600; }
.up { color: var(--pos); } .down { color: var(--neg); } .flat { color: var(--t3); }
.foot { margin-top: 10px; font-size: 10.5px; line-height: 1.5; color: var(--t4); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-bottom: 1px solid var(--line); }
.kpi { background: var(--s1); padding: 10px 12px; }
.kpi b { display: block; font-size: 19px; font-weight: 600; color: var(--t1); }
.kpi span { font-size: 10.5px; color: var(--t3); line-height: 1.35; }
.sov-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.sov-head b { font-size: 22px; font-weight: 600; color: var(--karat); }
.sov-head span { font-size: 11px; line-height: 1.4; color: var(--t3); }

/* ============================================================ call list */
.ci { padding: 9px 12px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ci:hover { background: var(--s2); }
.ci-top { display: flex; align-items: center; gap: 7px; }
.ci-rank { width: 16px; font-size: 11px; color: var(--t4); }
.ci-name { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.ci-score { margin-left: auto; font-size: 12px; color: var(--karat); }
.ci-bar { height: 2px; background: var(--line); margin: 6px 0 7px 23px; border-radius: 1px; }
.ci-bar i { display: block; height: 100%; background: var(--karat-dim); border-radius: 1px; }
.ci-why { padding-left: 23px; }
.ci-open { margin: 3px 0 0 23px; font-size: 11px; line-height: 1.5; font-style: italic; color: var(--t2); }
.ci-prod { display: inline-block; margin-left: 4px; font-style: normal; font-size: 9.5px;
  font-family: var(--mono); color: var(--karat); text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================== risk watch */
.ri { padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ri:hover { background: var(--s2); }
.ri-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ri-name { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.ri-score { margin-left: auto; font-size: 11px; color: var(--t3); }
.ri-why { font-size: 11px; line-height: 1.45; color: var(--t3); padding-left: 2px; }
.ri-why b { color: var(--t2); font-weight: 600; margin-right: 4px; }
.lvl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--t3); }
.lvl-high { color: var(--neg); border-color: var(--neg); }
.lvl-watch { color: var(--warn); border-color: var(--warn); }

/* ===================================================== catalyst calendar */
.cal { display: flex; gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.cal-d { width: 38px; flex: none; text-align: center; border: 1px solid var(--line-2);
  border-radius: 3px; padding: 2px 0; }
.cal-d b { display: block; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--karat); }
.cal-d span { font-size: 14px; font-weight: 600; color: var(--t1); }
.cal-t { font-size: 12px; color: var(--t1); }
.cal-t .sub { font-size: 10.5px; color: var(--t4); margin-top: 2px; }
.fil { display: flex; gap: 8px; padding: 5px 0; font-size: 11.5px; color: var(--t2);
  text-decoration: none; border-bottom: 1px solid var(--line); }
.fil:hover { color: var(--karat); }
.fil-d { width: 44px; flex: none; color: var(--t4); font-size: 10.5px; }

/* ================================================== product demand map */
.pm { margin-bottom: 10px; }
.pm.dim { opacity: .55; }
.pm-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--t1); }
.pm-top em { font-style: normal; font-size: 10px; color: var(--karat); margin-left: 4px; }
.pm-bar { height: 5px; margin: 4px 0; background: var(--line); border-radius: 2px; }
.pm-bar i { display: block; height: 100%; background: var(--karat-dim); border-radius: 2px; }
.pm-acc { font-size: 10.5px; color: var(--t4); }
.pm-ex { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--line-2);
  font-size: 11px; line-height: 1.5; color: var(--t2); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pm-ex:hover { color: var(--t1); border-left-color: var(--karat-dim); }

/* ====================================================== competitor moves */
.cm { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; }
.cm:hover { background: var(--s2); }
.cm-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ent { font-size: 11px; font-weight: 700; color: var(--t1); }
.ent.self { color: var(--karat); }
.cm-d { margin-left: auto; font-size: 10px; color: var(--t4); font-family: var(--mono); }
.cm-t { font-size: 12px; line-height: 1.45; color: var(--t1); }
.cm-r { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--karat-dim);
  font-size: 11px; line-height: 1.5; color: var(--t2); }
.ev { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--t3); }
.ev-acquisition, .ev-funding { color: var(--karat); border-color: var(--karat-dim); }
.ev-customer, .ev-launch { color: var(--pos); border-color: var(--pos); }
.ev-layoff { color: var(--neg); border-color: var(--neg); }
.ev-partnership { color: var(--warn); border-color: var(--warn); }

/* ========================================================= share of voice */
.sov { display: grid; grid-template-columns: 96px 1fr 30px; gap: 8px; align-items: center;
  margin-bottom: 5px; font-size: 11.5px; color: var(--t2); }
.sov[data-acct] { cursor: pointer; }
.sov.self .sov-n { color: var(--karat); font-weight: 700; }
.sov-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sov-b { height: 7px; background: var(--line); border-radius: 2px; overflow: hidden; }
.sov-b i { display: block; height: 100%; background: var(--t4); border-radius: 2px; }
.sov.self .sov-b i { background: var(--karat); }
#wJd .sov-b i { background: var(--karat-dim); }
.sov-v { text-align: right; color: var(--t3); font-size: 11px; }
.mix { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11px; color: var(--t2); }
.mix .ev { flex: none; min-width: 78px; text-align: center; }

/* =========================================================== rival hiring */
.fnkey { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 9px; }
.fnkey .k, .sp-key .k { font-size: 10px; color: var(--t3); display: inline-flex; align-items: center; gap: 4px; }
.fnkey .k::before, .sp-key .k::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
/* colour only the bar segments and the legend swatches, never the legend text */
.rv-b i.fn-gotomarket, .fnkey .fn-gotomarket::before { background: var(--karat); }
.rv-b i.fn-engineering, .fnkey .fn-engineering::before { background: #6C7BD8; }
.rv-b i.fn-productdesign, .fnkey .fn-productdesign::before { background: var(--warn); }
.rv-b i.fn-other, .fnkey .fn-other::before { background: var(--t4); }
.rv { margin-bottom: 10px; }
.rv-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--t1); }
.rv-n em { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t4); margin-left: 4px; }
.rv.self .rv-n { color: var(--karat); font-weight: 700; }
.rv-v { color: var(--t2); }
.rv-b { display: flex; height: 7px; margin: 4px 0 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rv-b i { display: block; height: 100%; }
.rv-seg { font-size: 10.5px; color: var(--warn); line-height: 1.45; }
.rv-new { font-size: 10.5px; color: var(--t3); line-height: 1.45; }

/* ====================================================== adversary tracker */
.adv-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 4px 12px 12px; }
.gh, .nw { display: block; padding: 7px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; }
.gh:hover .gh-n, .nw:hover .nw-t { color: var(--karat); }
.gh-top { display: flex; justify-content: space-between; gap: 8px; }
.gh-n { font-size: 11.5px; font-weight: 600; color: var(--t1); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-s { font-size: 11px; color: var(--warn); flex: none; }
.gh-d { font-size: 11px; line-height: 1.45; color: var(--t3); margin-top: 2px; }
.gh-v { font-size: 10px; color: var(--karat); margin-top: 2px; }
.gh-v span { color: var(--t4); }
.nw-t { font-size: 12px; line-height: 1.45; color: var(--t1); }
.nw .sub { font-size: 10.5px; color: var(--t4); display: flex; gap: 4px; margin-top: 2px; }
@media (max-width: 1150px) { .adv-cols { grid-template-columns: 1fr; } }

/* ======================================================= developer pulse */
.pulse-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.wk { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: none; }
.wk i { display: block; width: 9px; background: var(--karat-dim); border-radius: 1px 1px 0 0; }
.hn { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; }
.hn:hover { background: var(--s2); }
.hn-s { width: 38px; flex: none; text-align: center; }
.hn-s b { display: block; font-size: 14px; color: var(--warn); }
.hn-s small { font-size: 9px; color: var(--t4); }
.hn-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hn-t { font-size: 12px; line-height: 1.45; color: var(--t1); }
.hn .sub { display: flex; flex-wrap: wrap; gap: 5px; font-size: 10.5px; color: var(--t4); }

/* ==================================================== engineering demand */
.dm { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.dm-l { display: flex; flex-direction: column; gap: 1px; }
.dm-n { font-size: 11px; color: var(--t3); }
.dm-v { font-size: 17px; font-weight: 600; color: var(--t1); }
.dm.lead .dm-v { font-size: 26px; color: var(--karat); }
.dm-c { font-size: 10.5px; color: var(--t4); }

/* ================================================== tech spend vs labour */
.sp-key { display: flex; gap: 12px; margin-bottom: 8px; }
.sp-key .tech::before { background: var(--karat); }
.sp-key .lab::before { background: #6C7BD8; }
.sp { padding: 6px 0 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sp-n { font-size: 12px; font-weight: 600; color: var(--t1); }
.sp-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; margin-top: 2px; }
.sp-l { font-size: 10.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.dbar { position: relative; height: 6px; background: var(--line); border-radius: 2px; }
.dbar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--t4); }
.dbar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.dbar i.tech { background: var(--karat); } .dbar i.lab { background: #6C7BD8; }
.db-na { font-size: 10px; color: var(--t4); }
[class^="pos-"] { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--t3); }
.pos-automating { color: var(--warn); border-color: var(--warn); }
.pos-adding-people { color: var(--pos); border-color: var(--pos); }
.pos-tech-spend-falling { color: var(--neg); border-color: var(--neg); }

/* ========================================================= AI in the JD */
.tools { margin-top: 8px; }
.quote { display: block; margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--karat-dim);
  background: var(--s2); font-size: 11.5px; line-height: 1.5; font-style: italic;
  color: var(--t1); text-decoration: none; border-radius: 0 3px 3px 0; }
.quote span { display: block; margin-top: 4px; font-style: normal; font-size: 10px; color: var(--t4); }

[data-theme="light"] .rv-b i.fn-engineering, [data-theme="light"] .fnkey .fn-engineering::before,
[data-theme="light"] .dbar i.lab, [data-theme="light"] .sp-key .lab::before { background: #4B5BC4; }
[data-theme="light"] .bandh h1 { color: var(--t1); }

/* Note: fixed-content bodies must NOT be flex:1. The layout engine measures their
   drawn height as their content height; a stretched or shrunk body lies about it,
   which clipped the heat board's last row in production. */

/* A fixed-content widget the layout had to grow: spread its content over the height
   instead of leaving an empty strip. Applied only after measurement, and removed
   before the next one, so it never feeds back into the size it responds to. */
/* The heat board is a six-column grid and must stay one: :not(.scroll) raises the
   specificity of the generic rule above any plain .heat rule, and it collapsed the
   board into a single column in production. So it is excluded explicitly. */
.w.stretched > .wb:not(.scroll):not(.heat) { flex: 1; display: flex; flex-direction: column; }
.w.stretched > #heatBody { flex: 1; grid-auto-rows: 1fr; align-content: stretch; }
.w.stretched > #heatBody .cellh { aspect-ratio: auto; }
.w.stretched #demandBody, .w.stretched #prodBody { justify-content: space-between; }
.w.stretched .ctr { align-content: stretch; }

.quiet { padding: 4px 12px 12px; }
.quiet .q { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--t2); }
.quiet .q.self span:first-child { color: var(--karat); font-weight: 700; }
.quiet .q em { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--t4);
  text-transform: uppercase; letter-spacing: .08em; }
.quiet .q .sub { font-size: 10.5px; color: var(--t4); }

/* shared read-only view: controls the server would refuse are not offered */
.ro [data-admin] { display: none !important; }
.ronote { display: none; margin: 12px 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--t2); background: var(--s2); border-left: 2px solid var(--line-2); border-radius: 0 3px 3px 0; }
.ro .ronote { display: block; }

/* ================================================================ phones
 * The header was a single non-wrapping row of eight controls, about 1,080px wide,
 * which gave the whole page a sideways scroll at phone width even though every
 * widget had already collapsed to one column.
 */
@media (max-width: 760px) {
  .top { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .top .vr, .top .spacer, #modePill, #lastPill { display: none; }
  .top .brandline span { display: none; }
  .cmdtrigger { order: 10; flex: 1 1 100%; min-width: 0; }
  .cmdtrigger .kbd { display: none; }
  .board { padding: 2px 10px 36px; }
  .deltabar { margin: 0 10px 10px; flex-wrap: wrap; }
  .kpis { grid-template-columns: 1fr; }
  .sov { grid-template-columns: 84px 1fr 28px; }
}
html, body { max-width: 100%; overflow-x: hidden; }