/* ============================================================================
   TALQO DESIGN SYSTEM
   Slate · IBM Plex · v1
   Colour means data state and nothing else. Fills are quantities, dots are
   states, and nothing is filled where nothing was said.
   ========================================================================= */

/* TWO DELIVERY TRANSFORMS, VALUES UNTOUCHED (30 Aug 2026):
   1. IBM Plex is SELF-HOSTED — see fonts.css. The handoff file @imports Google
      Fonts; this product's CSP is font-src 'self', so that import would fail
      silently in production.
   2. The sheet's globals mount on #tq-app instead of :root/html/body. Loaded
      last and mounted on :root, its custom properties STOLE shared names
      (--accent, --ink, --line) from the old system and silently reskinned every
      screen still awaiting its rebuild — measured live before this was written.
      Scoped to #tq-app, the new system rules exactly the screens that have
      moved onto it and nothing else; custom properties inherit down the tq
      tree, so every rule below reads them unchanged.
   Every token VALUE and every rule below is the handoff stylesheet, verbatim. */

#tq-app{
  color-scheme:light;

  /* ---- ink ------------------------------------------------------------- */
  --ink:#12161C;          /* headings, primary figures                       */
  --ink-d:#0A0D12;        /* display numerals only                           */
  --ink2:#3A424C;         /* body copy, secondary figures                    */
  --ink3:#556069;         /* labels, captions — lowest that carries text     */
  --ink4:#838C97;         /* NEVER text. Rules, disabled marks, placeholders */
  --ink5:#A6AEB8;         /* dimmed axis labels on a light ground            */

  /* ---- surfaces -------------------------------------------------------- */
  --ground:#E8EAED;       /* app floor                                       */
  --ground2:#EEF0F2;      /* top of the floor's gradient                     */
  --card:#FFFFFF;         /* raised                                          */
  --sunken:#DFE2E6;       /* wells, footers, empty portions of a bar         */
  --desk:#D3D6DB;         /* outside the app frame                           */
  --topbg:rgba(232,234,237,.86);

  /* ---- rail ------------------------------------------------------------ */
  --rail:#1A1D22; --rail-2:#262A31;
  --rl1:#EDEFF2;                       /* rail primary text                  */
  --rl2:rgba(237,239,242,.80);
  --rl3:rgba(237,239,242,.62);         /* rail nav text                      */
  --rl4:rgba(237,239,242,.58);         /* rail captions — floor is .52       */
  --rline:rgba(255,255,255,.09);
  --rlip:rgba(255,255,255,.08);
  --rhov:rgba(255,255,255,.045);
  --rshade:rgba(0,0,0,.30);

  /* ---- lines ----------------------------------------------------------- */
  --line:rgba(4,10,24,.10);
  --line2:rgba(4,10,24,.17);
  --line3:rgba(4,10,24,.30);
  --grid:rgba(4,10,24,.06);            /* between table rows                 */
  --wash:rgba(4,10,24,.03);            /* future / out-of-scope regions      */
  --hover:rgba(4,10,24,.03);

  /* ---- action ---------------------------------------------------------- */
  /* graphite, not a hue — so green never means "click me"                   */
  --accent:#1F242B; --accent-h:#2C333C; --accent-t:rgba(31,36,43,.08);
  --on-acc:#F2F4F7;
  --acc-s1:rgba(12,16,22,.26); --acc-s2:rgba(12,16,22,.34);
  --acc-lip:rgba(255,255,255,.13);
  --brand:#8A3121;                     /* the one warm mark. Wordmark, active
                                          nav tick, hero rule. Nothing else. */
  --acc-glow:rgba(138,49,33,.26);
  --ok-glow:rgba(44,110,76,.18);

  /* ---- data state ------------------------------------------------------ */
  --said:#2C6E4C;    /* agreed / confirmed — a buyer said it out loud        */
  --held:#8A6A18;    /* not agreed / likely — the record holds it, no buyer  */
  --held2:#C0A249;   /* the lighter half of the "likely" hatch               */
  --clash:#A33A32;   /* contradicted — the buyer rejected the record         */
  --none:#9AA1AB;    /* not asked — an absence. Always drawn hollow.         */
  --said-t:#D8E5DE; --held-t:#EDE7D6; --clash-t:#F2E1DE; --none-t:#E3E5E9;
  --said-ink:#1B4A32; --held-ink:#6A5214;

  /* ---- elevation — one object floats, the rest are calm ---------------- */
  --e1:0 1px 2px rgba(20,28,48,.08);
  --e2:0 1px 2px rgba(20,28,48,.06), 0 4px 10px -3px rgba(20,28,48,.10);
  --e3:0 1px 2px rgba(20,28,48,.05), 0 7px 16px -5px rgba(20,28,48,.12),
       0 28px 52px -22px rgba(20,28,48,.22);
  --lip:inset 0 1px 0 rgba(255,255,255,.92);

  /* ---- type ------------------------------------------------------------ */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --disp:'IBM Plex Serif',Georgia,serif;
  --cap:.115em;          /* caps tracking — Plex capitals are wide           */
  --rad:8px; --rad-s:5px; --rad-xs:3px;
}

#tq-app, #tq-app *{box-sizing:border-box}
/* html backdrop → #tq-app carries the desk itself (scoped mount) */
#tq-app{margin:0;min-height:100vh;background:var(--desk);color:var(--ink);
  font:400 14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}

/* ============================================================================
   1 · SHELL
   ========================================================================= */
.tq-frame{width:1480px;margin:0 auto;display:grid;grid-template-columns:224px 1fr;
  background:var(--ground);border-radius:10px;overflow:hidden;box-shadow:var(--e3)}
.tq-main{display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,var(--ground2) 0%,var(--ground) 340px)}
.tq-body{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0}
.tq-body.wide{grid-template-columns:1fr}
.tq-col{padding:20px 20px 26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.tq-side{background:var(--ground);border-left:1px solid var(--line);
  padding:20px 20px 22px;display:flex;flex-direction:column}

/* ---- rail ---------------------------------------------------------------- */
.tq-rail{background:var(--rail);display:flex;flex-direction:column;padding:20px 0 16px;
  box-shadow:inset -1px 0 0 var(--rshade)}
.tq-wm{font:400 20px/1 var(--disp);letter-spacing:-.014em;color:var(--rl1);
  padding:0 20px 22px;display:flex;align-items:center;gap:8px}
.tq-wm i{width:6px;height:6px;background:var(--brand);border-radius:1px;display:block;
  box-shadow:0 0 0 3px var(--acc-glow)}
.tq-nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.tq-navitem{display:flex;align-items:center;gap:9px;height:31px;padding:0 10px;
  border-radius:var(--rad-s);font-size:13px;color:var(--rl3);letter-spacing:-.002em;
  cursor:default;transition:background .12s,color .12s;position:relative}
.tq-navitem:hover{background:var(--rhov);color:var(--rl2)}
.tq-navitem.on{background:var(--rail-2);color:var(--rl1);font-weight:500;
  box-shadow:inset 0 1px 0 var(--rlip)}
.tq-navitem.on::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:2px;
  background:var(--brand);border-radius:0 2px 2px 0}
.tq-navitem b{margin-left:auto;font:500 10.5px/1 var(--sans);color:var(--rl4);
  font-variant-numeric:tabular-nums}
.tq-railsec{font:500 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rl4);padding:20px 20px 8px}
.tq-railfoot{margin:auto 10px 0;padding-top:13px;border-top:1px solid var(--rline);
  display:flex;align-items:center;gap:9px}
.tq-av{width:26px;height:26px;border-radius:50%;background:var(--rail-2);color:var(--rl1);
  display:grid;place-items:center;font:500 10px/1 var(--sans);letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px var(--rlip);flex:none}
.tq-who{font-size:12px;color:var(--rl2);line-height:1.25}
.tq-who span{display:block;font-size:10.5px;color:var(--rl4)}

/* ---- chrome -------------------------------------------------------------- */
.tq-top{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid var(--line);background:var(--topbg);
  backdrop-filter:saturate(150%) blur(14px);position:relative;z-index:3}
.tq-crumb{display:flex;align-items:baseline;gap:11px}
.tq-crumb b{font:500 14.5px/1 var(--sans);letter-spacing:-.012em}
.tq-crumb span{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.tq-tools{display:flex;gap:8px;align-items:center}

/* the page's question, with its controls inside the sentence */
.tq-ask{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:13px 22px;border-bottom:1px solid var(--line);background:var(--topbg)}
.tq-q{display:flex;align-items:center;gap:0;font:400 19px/1.3 var(--disp);
  letter-spacing:-.008em;flex-wrap:wrap}
.tq-sync{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink3);
  flex:none;white-space:nowrap}
.tq-sync i{width:6px;height:6px;border-radius:50%;background:var(--said);display:block;
  box-shadow:0 0 0 3px var(--ok-glow)}
.tq-filters{display:flex;align-items:center;gap:9px;padding:9px 22px;
  border-bottom:1px solid var(--line);font-size:11px;color:var(--ink3);flex-wrap:wrap}
.tq-fl{font:500 9.5px/1 var(--sans);letter-spacing:var(--cap);text-transform:uppercase;
  color:var(--ink3);margin-right:1px}
.tq-fsep{width:1px;height:15px;background:var(--line2);margin:0 3px}

/* ============================================================================
   2 · CONTROLS  —  a control must look like one before it looks quiet
   ========================================================================= */
.tq-btn{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;
  border-radius:var(--rad-s);font:400 12px/1 var(--sans);letter-spacing:-.002em;
  background:var(--card);color:var(--ink2);cursor:default;
  box-shadow:var(--e1),inset 0 0 0 1px var(--line);transition:box-shadow .12s}
.tq-btn:hover{box-shadow:var(--e2),inset 0 0 0 1px var(--line2)}
.tq-btn.pri{background:var(--accent);color:var(--on-acc);font-weight:500;
  box-shadow:0 1px 2px var(--acc-s1),0 5px 12px -4px var(--acc-s2),
             inset 0 1px 0 var(--acc-lip)}
.tq-btn.pri:hover{background:var(--accent-h)}
.tq-btn[disabled],.tq-btn.off{opacity:.45;box-shadow:inset 0 0 0 1px var(--line)}

/* every chevron sits in its own recessed well — that is what says "opens" */
.tq-ch{display:grid;place-items:center;width:17px;height:17px;border-radius:2.5px;flex:none;
  background:var(--sunken);color:var(--ink2);font-size:7.5px;
  box-shadow:inset 0 0 0 1px var(--line)}
.tq-btn .tq-ch{margin:0 -4px 0 2px}

.tq-select{display:inline-flex;align-items:center;gap:9px;margin-left:8px;
  background:var(--card);border-radius:var(--rad-s);padding:4px 6px 4px 11px;
  font:400 14px/1.35 var(--sans);letter-spacing:-.006em;color:var(--ink);cursor:default;
  box-shadow:var(--e1),inset 0 0 0 1px var(--line2);position:relative;top:-1px}
.tq-select:hover,.tq-select.open{box-shadow:var(--e2),inset 0 0 0 1px var(--line3)}
.tq-select .tq-ch{width:19px;height:19px;border-radius:3px;font-size:8px}
.tq-select.open .tq-ch{background:var(--rail);color:var(--rl1);box-shadow:none}

.tq-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border-radius:4px;padding:4px 5px 4px 9px;font-size:11.5px;color:var(--ink2);
  cursor:default;box-shadow:var(--e1),inset 0 0 0 1px var(--line2)}
.tq-chip:hover{box-shadow:var(--e1),inset 0 0 0 1px var(--line3)}
.tq-chip b{font-weight:500;color:var(--ink)}
.tq-chip .tq-ch{width:16px;height:16px;border-radius:2.5px;font-size:7px}
.tq-chip.ghost{color:var(--ink2);background:transparent;box-shadow:none;padding:4px 10px;
  border:1px dashed var(--line3)}

.tq-menu{position:absolute;top:calc(100% + 7px);left:8px;min-width:216px;
  background:var(--card);border-radius:7px;padding:5px;z-index:20;
  box-shadow:var(--e3),inset 0 0 0 1px var(--line2);display:flex;flex-direction:column}
.tq-menu i{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 10px;border-radius:4px;font-style:normal;font:400 13px/1.3 var(--sans);
  color:var(--ink2);cursor:default;letter-spacing:-.004em}
.tq-menu i:hover{background:var(--hover)}
.tq-menu i.on{background:var(--sunken);color:var(--ink);font-weight:500}
.tq-menu i s{text-decoration:none;font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.tq-menu .sep{height:1px;background:var(--line);margin:5px 4px;display:block}
.tq-menuwrap{position:relative;display:inline-flex}

/* segmented control · tabs · toggle */
.tq-seg{display:inline-flex;background:var(--sunken);border-radius:var(--rad-s);padding:2px;
  box-shadow:inset 0 0 0 1px var(--line)}
.tq-seg i{font-style:normal;padding:5px 12px;border-radius:3px;font-size:12px;
  color:var(--ink2);cursor:default}
.tq-seg i.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:var(--e1)}
.tq-tabs{display:flex;gap:22px;padding:0 22px;box-shadow:inset 0 -1px 0 var(--line)}
.tq-tabs i{font-style:normal;padding:12px 0 11px;font-size:12.5px;color:var(--ink3);
  cursor:default;position:relative}
.tq-tabs i.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--brand)}
.tq-toggle{width:34px;height:19px;border-radius:99px;background:var(--sunken);display:block;
  position:relative;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.tq-toggle::after{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;
  border-radius:50%;background:var(--card);box-shadow:var(--e1)}
.tq-toggle.on{background:var(--said)}
.tq-toggle.on::after{left:auto;right:2px}
.tq-input{height:32px;border-radius:var(--rad-s);background:var(--card);border:0;
  padding:0 11px;font:400 13px/1 var(--sans);color:var(--ink);width:100%;
  box-shadow:inset 0 0 0 1px var(--line2)}
.tq-input::placeholder{color:var(--ink3)}
.tq-label{display:block;font:500 9.5px/1 var(--sans);letter-spacing:var(--cap);
  text-transform:uppercase;color:var(--ink3);margin-bottom:7px}

/* ============================================================================
   3 · SURFACES
   ========================================================================= */
.tq-card{background:var(--card);border-radius:var(--rad);overflow:hidden;flex:none;
  box-shadow:var(--e1),inset 0 0 0 1px var(--line)}
.tq-card.lead{box-shadow:var(--e3),var(--lip);position:relative}
.tq-card.lead::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand) 38%,rgba(138,49,33,.20) 100%)}
.tq-cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 18px 0}
.tq-cardhead h2{margin:0;font:500 13.5px/1 var(--sans);letter-spacing:-.008em}
.tq-sub{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.tq-in{padding:22px}
/* a definition or caveat belongs at the foot of the thing it qualifies */
.tq-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--sunken);padding:11px 18px;font-size:11.5px;color:var(--ink3);
  box-shadow:inset 0 1px 0 var(--line)}
.tq-foot b{font-weight:500;color:var(--ink)}
.tq-link{color:var(--ink);font-weight:400;flex:none;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line3)}
.tq-well{background:var(--sunken);border-radius:6px;padding:14px 15px;
  box-shadow:inset 0 1px 2px rgba(20,28,48,.06),inset 0 0 0 1px var(--line)}
.tq-aside{margin:-4px 4px -2px;font-size:11.5px;line-height:1.5;color:var(--ink3)}
.tq-aside b{font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
.tq-note{display:flex;align-items:flex-start;gap:8px;margin:-4px 4px 0;font-size:11.5px;
  color:var(--ink3)}
.tq-note i{width:2px;height:13px;background:var(--held);display:block;flex:none;
  margin-top:2px;border-radius:.5px}
.tq-empty{padding:15px 18px 18px}
.tq-empty p{margin:0;font-size:12px;line-height:1.6;color:var(--ink3)}
.tq-empty p+p{margin-top:8px;color:var(--ink3);font-size:11.5px}

/* ============================================================================
   4 · FIGURES  —  written out in full, Danish separators, no K and no M
   ========================================================================= */
.tq-n{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:500}
.tq-n .u{color:inherit;opacity:.9;font-weight:400;font-size:1em}   /* € and the rest
   take the colour of their own figure — never a fixed grey, or a red number
   ends up with grey affixes */
.tq-display{display:block;font:400 54px/.95 var(--disp);letter-spacing:-.020em;
  color:var(--ink-d)}
.tq-display .u{font-size:.50em;letter-spacing:0;color:inherit;opacity:.72;margin:0 .055em}
.tq-mid{display:block;font:400 30px/1 var(--disp);letter-spacing:-.020em}
.tq-mid .u{font-size:.58em;color:inherit;opacity:.88;margin:0 .05em}
.tq-stat{display:block;font:400 23px/1 var(--disp);letter-spacing:-.020em}
.tq-stat .u{font-size:.62em;color:inherit;opacity:1;margin:0 .05em}
.tq-nil{color:var(--ink3)}
.tq-delta{display:inline-flex;align-items:baseline;gap:4px;font-size:11.5px;
  font-variant-numeric:tabular-nums;font-weight:500}
.tq-delta.up{color:var(--said)} .tq-delta.dn{color:var(--clash)}
.tq-delta.flat{color:var(--ink3)}
.tq-delta em{font-style:normal;font-weight:400;color:var(--ink3);font-size:10.5px}

/* the stat rail: one card carrying four compound figures, one of them leading */
.tq-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:44px}
.tq-statrail{display:flex;flex:none;align-items:stretch}
.tq-statrail.even{flex:1;width:100%}
.tq-statrail.even .tq-s{flex:1;min-width:0;padding:0 16px}
.tq-statrail.even .tq-s:first-child{padding-left:0}
.tq-s{padding:0 22px;border-left:1px solid var(--line);min-width:140px}
.tq-s:first-child{border-left:0}
.tq-s .l{display:block;font:500 9.5px/1 var(--sans);letter-spacing:var(--cap);
  text-transform:uppercase;color:var(--ink3)}
.tq-s .v{display:block;margin-top:9px}
.tq-s .d{display:block;margin-top:7px;font-size:11px;color:var(--ink3);line-height:1.4}

/* NOTE: every modifier is namespaced (.tq-cap, not .cap) so this sheet can be
   dropped into an existing app without colliding with its own class names. */

/* ============================================================================
   5 · STATE MARKS  —  dot and caps. Hollow means nothing was said.
   ========================================================================= */
.tq-state{display:inline-flex;align-items:center;vertical-align:middle;gap:9px;flex:none;
  font-size:11px;color:var(--ink2);letter-spacing:-.001em;line-height:1}
.tq-state::before{content:'';width:7px;height:7px;flex:none;display:block;border-radius:50%}
.tq-state.tq-cap{text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;font-weight:500}
.tq-state.said::before{background:var(--said)}
.tq-state.held::before{background:var(--held)}
.tq-state.clash::before{background:var(--clash)}
.tq-state.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--none)}
/* secondary state — smaller dot, lighter text, so it cannot outweigh the primary */
.tq-state.sm{gap:7px;font-size:9.5px;color:var(--ink3);margin-top:6px}
.tq-state.sm::before{width:5px;height:5px}
/* the exception that must be findable: two rows in twelve */
.tq-flag{display:inline-flex;align-items:center;font:500 9.5px/1 var(--sans);
  letter-spacing:.06em;padding:5px 7px;border-radius:var(--rad-xs);text-transform:uppercase}
.tq-flag.over{background:var(--clash-t);color:var(--clash)}
.tq-flag.under{background:var(--held-t);color:var(--held-ink)}

/* legend key — a specimen of the mark, not an arbitrary square */
.tq-keys{display:flex;gap:26px;margin-top:13px;flex-wrap:wrap}
.tq-keys>span{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink3)}
.tq-keys i{width:7px;height:7px;display:block;flex:none;border-radius:50%}
.tq-keys .kl{text-decoration:none;text-transform:uppercase;letter-spacing:.07em;
  font-size:9.5px;font-weight:500;color:var(--ink3)}
.tq-keys b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.014em;font-size:13px}
.tq-keys em{font-style:normal;color:var(--ink3);font-variant-numeric:tabular-nums}

/* ============================================================================
   6 · BARS
   ========================================================================= */
.tq-bar{display:flex;gap:2px;height:15px}
.tq-bar i{display:block;height:100%}
.tq-bar .said{background:var(--said)}
.tq-bar .held{background:var(--held)}
.tq-bar .clash{background:var(--clash)}
.tq-bar .likely{background:repeating-linear-gradient(-45deg,var(--held) 0 3px,
  var(--held2) 3px 6px)}
.tq-bar .none{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line2)}
.tq-bar.thin{height:13px}
.tq-track{height:6px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.tq-track i{display:block;height:100%}
/* a target on a track is a tick, never a colour change */
.tq-gauge{position:relative;height:14px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--line)}
.tq-gauge i{position:absolute;left:0;top:0;bottom:0;display:block}
.tq-gauge u{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);
  display:block}

/* ============================================================================
   7 · TABLES
   ========================================================================= */
.tq-table{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:12px}
.tq-table th{font:500 9.5px/1 var(--sans);letter-spacing:var(--cap);text-transform:uppercase;
  color:var(--ink3);text-align:left;padding:0 0 9px;box-shadow:inset 0 -1px 0 var(--line)}
.tq-table th:first-child{padding-left:18px}
.tq-table th:last-child{padding-right:18px}
.tq-table td{height:44px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--grid);
  font-size:12.5px}
.tq-table td:first-child{padding-left:18px}
.tq-table td:last-child{padding-right:18px}
.tq-table tbody tr{transition:background .11s}
.tq-table tbody tr:hover{background:var(--hover)}
.tq-table tbody tr:last-child td{box-shadow:inset 0 -1px 0 var(--line)}
.tq-table .r{text-align:right}
.tq-table .pr{padding-right:24px}
.tq-table .k{font-weight:500;letter-spacing:-.005em}
.tq-table .k span{display:block;font:400 10.5px/1.3 var(--sans);color:var(--ink3);
  margin-top:1.5px;letter-spacing:0}
.tq-table .q{color:var(--ink2);font-size:12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding-right:14px}
.tq-table tr.zero td{opacity:.72}
.tq-table tfoot td{background:var(--sunken);height:41px;font-size:12.5px;
  box-shadow:inset 0 -1px 0 rgba(4,10,24,.055)}
.tq-table tfoot tr:last-child td{box-shadow:none}
.tq-table tfoot tr:hover{background:var(--sunken)}
.tq-group{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 18px 11px;box-shadow:inset 0 -1px 0 var(--line)}
.tq-group b{font:500 12.5px/1 var(--sans);letter-spacing:-.005em}
.tq-group b em{font-style:normal;font-weight:400;color:var(--ink3);margin-left:7px;
  font-size:11px}
.tq-group span{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* ============================================================================
   8 · EVIDENCE  —  the most distinctive object in the product
   ========================================================================= */
.tq-exhibit{background:var(--sunken);border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px rgba(20,28,48,.06)}
.tq-exhibit .eh{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;box-shadow:inset 0 -1px 0 var(--line)}
.tq-exhibit .tag{font:500 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);border:1px solid var(--line2);border-radius:2px;padding:4px 6px}
.tq-exhibit .meta{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3)}
.tq-exhibit .eb{padding:16px}
.tq-exhibit h4{margin:0;font:400 21px/1.25 var(--disp);letter-spacing:-.008em}
.tq-exhibit h4 em{font-style:normal;font-size:.62em;color:var(--ink3);font-family:var(--sans);
  font-weight:400;letter-spacing:0;margin-left:5px}
.tq-quote{margin:11px 0 0;font:400 17px/1.45 var(--disp);font-style:italic;color:var(--ink)}
/* the transcript is a script, not code — no monospace anywhere in this product */
.tq-passage{margin-top:16px;border-left:2px solid var(--line2);padding-left:15px}
.tq-passage .pl{font:500 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:2px}
.tq-passage table{margin-top:7px;table-layout:auto;width:100%;border-collapse:collapse}
.tq-passage td{padding:6px 0;font:400 13px/1.62 var(--sans);color:var(--ink2);
  vertical-align:baseline}
.tq-passage td.who{width:78px;font-weight:500;font-size:9.5px;line-height:21px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.tq-passage tr.hit td{background:var(--said-t);color:var(--said-ink);font-weight:450}
.tq-passage tr.hit td:first-child{border-radius:3px 0 0 3px;padding-left:9px;
  color:var(--said-ink)}
.tq-passage tr.hit td:last-child{border-radius:0 3px 3px 0;padding-right:9px}
.tq-exf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;box-shadow:inset 0 1px 0 var(--line);font-size:11.5px;color:var(--ink3)}
.tq-tm{font-variant-numeric:tabular-nums}

/* ============================================================================
   9 · CHART
   ========================================================================= */
.tq-chart{display:block;overflow:visible;width:100%}
.tq-chart text{font-family:var(--sans)}
.tq-chartkeys{display:flex;gap:22px;padding:14px 22px 0;flex-wrap:wrap;font-size:9.5px;
  color:var(--ink3);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.tq-chartkeys span{display:flex;align-items:center;gap:9px}
.tq-chartkeys i{width:7px;height:7px;display:block;flex:none;border-radius:50%}
.tq-chartkeys i.dash{width:16px;height:0;border-radius:0;border-top:1.5px dashed var(--ink2)}

/* ============================================================================
   9b · IMPERSONATION — view-as must be unmissable, and amber, because the
   screen is claiming to be someone it is not
   ========================================================================= */
.tq-viewas{width:1480px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:var(--held-t);color:var(--held-ink);padding:9px 20px;font-size:11.5px;
  border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 1px rgba(138,106,24,.25)}
.tq-viewas b{font-weight:600}
.tq-viewas .vd{width:7px;height:7px;border-radius:50%;background:var(--held);flex:none;display:block}
.tq-viewas .tq-link{margin-left:auto;color:var(--held-ink);text-decoration-color:rgba(138,106,24,.4)}
.tq-viewas+.tq-frame{border-radius:0 0 10px 10px}
.rm-y{color:var(--said);font-weight:500}
.rm-n{color:var(--ink4)}

/* ============================================================================
   10 · RESPONSIVE
   ========================================================================= */
@media(max-width:1520px){.tq-frame{width:100%}}
@media(max-width:1000px){
  .tq-frame{grid-template-columns:1fr}
  .tq-rail{flex-direction:row;align-items:center;overflow-x:auto;padding:10px}
  .tq-body{grid-template-columns:1fr}
  .tq-side{border-left:0;border-top:1px solid var(--line)}
  .tq-statrail{flex-wrap:wrap}
  .tq-hero{flex-direction:column;gap:20px}
}