/* ═══════════════════════════════════════════════════════════════════════════════
   TQ SCREEN ADDITIONS                                                30 Aug 2026
   ═══════════════════════════════════════════════════════════════════════════════
   talqo.css is the handoff stylesheet and stays byte-faithful — nothing is added
   to it. The few rules a live screen needs that the handoff file does not carry
   live here instead, tqx- prefixed so they can never collide with the system or
   the old layer. Loaded after talqo.css; may specialise it, never redefine a
   token.

   THE TIER MARKS (Option A, the ruled default): every green in the product says
   which tier it is. Solid = the buyer said the figure; hatched segment / half
   dot = the rep named it and the buyer said yes. Same hatch grammar the system
   already uses for 'likely', in the agreed colour.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* the assented slice of the agreed segment — green hatch, same 3px rhythm as .likely */
.tq-bar .tqx-assented { background: repeating-linear-gradient(-45deg, var(--said) 0 3px, var(--said-t) 3px 6px); }

/* the half dot — a specimen of the assented mark for legends and chips */
.tqx-halfdot { width: 7px; height: 7px; display: block; flex: none; border-radius: 50%;
  background: linear-gradient(90deg, var(--said) 50%, var(--said-t) 50%);
  box-shadow: inset 0 0 0 1px var(--said); }

/* the tier line sits tighter under the main keys — it qualifies them */
.tqx-tiers { margin-top: 8px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--grid); }

/* hero plumbing: the sub-sentence under the display figure, and the bar block */
.tqx-herosub { margin: 10px 4px 0 0; max-width: 46ch; }
.tqx-herosub b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.tqx-barwrap { margin-top: 18px; }

/* stat-rail tones — data state only, never decoration */
.tqx-held  { color: var(--held-ink); }
.tqx-clash { color: var(--clash); }
.tqx-none  { color: var(--ink3); }
.tqx-plain { color: var(--ink); }

/* the gap drill: three figures side by side inside the exhibit well */
.tqx-gapcols { display: flex; gap: 26px; margin: 10px 0 2px; flex-wrap: wrap; }
.tqx-gapcols .tq-label { margin-bottom: 4px; }
.tqx-gapdeal { margin-top: 12px; }
.tqx-gapband + .tqx-gapband { box-shadow: inset 0 1px 0 var(--line); }

/* the evidence rail's "why this counts" facts */
.tqx-facts { display: flex; flex-direction: column; }
.tqx-fact { display: flex; align-items: baseline; gap: 9px; padding: 7px 0;
  box-shadow: inset 0 -1px 0 var(--grid); font-size: 11.5px; color: var(--ink2); }
.tqx-fact:last-child { box-shadow: none; }
.tqx-factmark { margin-left: auto; color: var(--ink3); font-size: 10.5px; }

/* the period selector is a REAL <select> dressed as the system's control — the
   native element keeps keyboard and assistive behaviour, the well says "opens" */
.tqx-period select { appearance: none; -webkit-appearance: none; border: 0;
  background: transparent; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.tqx-period select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ FULL-BLEED SHELL — Chad's ruling, 31 Aug 2026 ═══════════════════════════
   "The artboard frame was the deck's paper, not the product." The deck's
   1480px card (talqo.css .tq-frame — kept byte-faithful there, overridden
   here) becomes an app shell: rail pinned to the left edge at 100dvh, main
   column filling the remaining width, the deck's 1480 demoted to a CONTENT
   max-width centred inside the main column, ground colour edge to edge, no
   card border/shadow, the shell growing with content and scrolling in the
   main column — never a grey moat, never a bottom edge.
   Guarded live by scripts/verify-shell-fullbleed.js (bounding box === the
   viewport at 375/1280/1440/1920) and in CI by test/shell-fullbleed.test.js. */
#tq-app { min-height: 100dvh; background: var(--desk); padding: 0;
  display: flex; flex-direction: column; }
#tq-app .tq-frame { width: 100%; margin: 0; border-radius: 0; box-shadow: none;
  flex: 1; min-height: 0;
  /* visible would re-open deck §9 (no sideways scroll, ever); hidden would
     make the frame a sticky container and un-pin the rail. clip does neither. */
  overflow: clip; }
/* The band is sticky and of fixed height, and the rail beneath it gives up
   exactly that height — so a superadmin page is never scrollable by phantom
   pixels, the rail footer is never clipped, and the amber claim can never
   scroll away while impersonating (it exists to be unmissable). Its content
   takes the same 1480 gutters as the other chrome bars. */
#tq-app { --tq-band-h: 42px; }
#tq-app .tq-viewas { width: 100%; margin: 0; border-radius: 0;
  position: sticky; top: 0; z-index: 6; min-height: var(--tq-band-h);
  padding-inline: max(20px, calc((100% - 1480px) / 2)); }
#tq-app .tq-viewas + .tq-frame { border-radius: 0; }
#tq-app .tq-viewas + .tq-frame .tq-rail { top: var(--tq-band-h);
  height: calc(100dvh - var(--tq-band-h)); }
/* A loading or error placeholder is a lone .tq-main inside the frame grid —
   without this it renders inside the 224px RAIL column, a message pinned to
   the left edge of a full-bleed shell. */
#tq-app .tq-frame > .tq-main:only-child { grid-column: 1 / -1; }
/* The rail holds the left edge at viewport height while the document scrolls —
   align-self:start so the grid does not stretch it into an unstickable track. */
#tq-app .tq-rail { position: sticky; top: 0; align-self: start;
  height: 100dvh; overflow-y: auto; z-index: 5; }
/* The deck's 1480 as CONTENT: chrome bars keep their ground and borders edge
   to edge and centre their content by growing their gutters; the body grid is
   simply capped and centred. 22px is each bar's own deck padding. */
#tq-app .tq-top, #tq-app .tq-ask, #tq-app .tq-filters {
  padding-inline: max(22px, calc((100% - 1480px) / 2)); }
#tq-app .tq-body { width: 100%; max-width: 1480px; margin-inline: auto; }
/* Below 1000px talqo.css already turns the rail into a horizontal strip —
   it keeps that shape, pinned to the top edge instead of the left.
   THE COLLAPSE MADE REAL (adversarial finding, 31 Aug 2026): talqo.css lays
   the RAIL down as a row but leaves .tq-nav a column inside it, so the
   "strip" measured 582px tall — and pinned, it left a phone 229px of
   content. The nav lies down with it: one compact row, items scrolling
   sideways, section labels and counts folded away, the footer reduced to
   the avatar. The band un-sticks here (a wrapped cockpit has no fixed
   height to offset the rail by). */
@media (max-width: 1000px) {
  #tq-app .tq-rail { height: auto; align-self: stretch; overflow-y: visible; }
  #tq-app .tq-rail .tq-nav { flex-direction: row; align-items: center; gap: 2px;
    padding: 0; flex: 1; min-width: 0; overflow-x: auto; }
  #tq-app .tq-rail .tq-railsec { display: none; }
  #tq-app .tq-rail .tq-navitem { flex: none; }
  #tq-app .tq-rail .tq-navitem b { display: none; }
  #tq-app .tq-wm { padding: 0 12px; }
  #tq-app .tq-railfoot { margin: 0 0 0 12px; border-top: 0; padding-top: 0; }
  #tq-app .tq-railfoot .tq-who { display: none; }
  #tq-app .tq-viewas { position: static; }
  #tq-app .tq-viewas + .tq-frame .tq-rail { top: 0; height: auto; }
}

/* ═══ THE SUPERADMIN BAND — Chad's production fix, 31 Aug 2026 ════════════════
   The tq shell hides the legacy top strip, so the band carries the two
   superadmin controls it orphaned: the company scope and the view-as
   switcher. Amber stays reserved for the ACTIVE claim ("this screen says it
   is someone it is not"); the resting cockpit is quiet chrome instead. */
#tq-app .tq-viewas-rest { background: var(--ground2); color: var(--ink2);
  box-shadow: inset 0 -1px 0 var(--line); }
#tq-app .tq-viewas-rest b { color: var(--ink); }
#tq-app .tq-viewas-rest .vd { background: var(--brand); box-shadow: 0 0 0 3px var(--acc-glow); }
#tq-app .tq-vctrls { margin-left: auto; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; }
#tq-app .tq-vctrls .tq-link { margin-left: 0; }
#tq-app .tq-vlab { display: flex; align-items: center; gap: 6px;
  font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; }
#tq-app .tq-vsel { font: 400 11.5px/1.3 var(--sans); letter-spacing: normal;
  /* 24px tall so the band computes exactly --tq-band-h and the rail offset
     never drifts by a font pixel */
  height: 24px; text-transform: none; padding: 3px 7px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--ground); color: var(--ink);
  max-width: 230px; cursor: pointer; }
#tq-app .tq-vsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* nav items are buttons here, not mockup rows */
.tq-navitem { cursor: pointer; }
.tq-navitem:focus-visible { outline: 2px solid var(--rl1); outline-offset: -2px; }
.tq-btn, .tq-link, .tq-chip { cursor: pointer; }
.tq-btn:focus-visible, .tq-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
tr[data-deal]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* live findings, 30 Aug 2026 — measured on the first capture set */
/* 1 · the third stat clipped at the card edge: the rail may wrap and breathe less */
#tq-app .tq-hero { flex-wrap: wrap; }
#tq-app .tq-statrail .tq-s { padding: 0 16px; min-width: 118px; }
#tq-app .tq-statrail .tq-s:last-child { padding-right: 0; }
/* 2 · tq-link is a <button> on live screens; the mockups only ever used <a>. Strip
   the UA chrome so the link law (underline, ink, no box) holds for both elements. */
#tq-app button.tq-link { background: none; border: 0; padding: 0; font: inherit;
  color: var(--ink); font-weight: 400; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: var(--line3); cursor: pointer; }
/* 3 · four stats overflow the card edge on the manager view: the rail wraps too */
#tq-app .tq-statrail { flex-wrap: wrap; row-gap: 14px; }

/* filter chips that hold real controls - the select inherits the chip dress */
.tqx-ctl { position: relative; }
.tqx-ctl select { appearance: none; -webkit-appearance: none; border: 0;
  background: transparent; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.tqx-ctl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ THE SELECT OWNS ITS WELL — Chad's Wave 1 ruling, 31 Aug 2026 ═══════════
   THE DEFECT (Rough Edges audit, hit-area, 13 instances across 9 rooms): each
   well paints as ONE control with a chevron glued to its right edge, but the
   native <select> only occupied part of it — 107x36 inside a 152x44 well on
   the dashboard period control. A real mousedown on the chevron landed on the
   SPAN and never reached the select, and a select only opens on its OWN
   mousedown, so 42-56% of every dropdown was dead. Clicking the label merely
   FOCUSED the select, which is why it felt half-alive rather than broken.

   THE FIX, both halves as ruled. The select bleeds over the well's padding
   and under the chevron with a negative margin, then restores the text to
   exactly where it was with equal padding — so the hit box grows and nothing
   moves. The chevron then rides on top as decoration only.
     .tq-select : padding 4px 6px 4px 11px, gap 9, chevron 19
                  -> right bleed = 9 + 19 + 6 = 34
     .tq-chip   : padding 4px 5px 4px 9px,  gap 7, chevron 16
                  -> right bleed = 7 + 16 + 5 = 28
   pointer-events:none on the chevron is ON TOP of this, not instead of it:
   alone it would drop the click onto the label, which focuses but still does
   not open the list.
   A fixed bleed is not enough ON ITS OWN: a well can be WIDER than its own
   contents (the team room's rep picker is width:100% with space-between), and
   there the select stops short of the right edge again. That case is handled
   below by .tqx-wide rather than by growing every select — growth was tried on
   all of them and measured worse (96 dead points across six rooms).
   Guarded live by scripts/verify-hit-areas.js, which is what caught both the
   stretched well and, later, this very comment being closed in the wrong
   place — which silently voided every rule beneath it. */
#tq-app .tq-select, #tq-app .tq-chip.tqx-ctl { position: relative; }
#tq-app .tq-select > select {
  margin: -4px -34px -4px -11px; padding: 4px 34px 4px 11px;
  width: auto; align-self: stretch; box-sizing: content-box; }
#tq-app .tq-chip.tqx-ctl > select {
  margin: -4px -28px -4px -9px; padding: 4px 28px 4px 9px;
  width: auto; align-self: stretch; box-sizing: content-box; }
/* A well told to fill its row (the team room's rep picker is width:100% with
   space-between) is WIDER than its contents, so a bleed sized to the chevron
   leaves slack on the right that belongs to nobody. Such a well says so with
   .tqx-wide, and its select takes the slack. Applying growth to EVERY well
   instead was tried and measured: it collapses the geometry above and every
   point falls back to the label — 96 dead points across six rooms. */
/* A stretched well is laid out by flex, and flex kept handing width back to
   the chevron (measured: the select settled at 204px inside a 218px content
   box, however the bleed was tuned). So this one well stops negotiating: the
   select is taken out of flow and covers the whole well exactly, the chevron
   keeps its place on the right, and a min-height preserves the well's size now
   that its only in-flow child is a 16px glyph. */
#tq-app .tq-chip.tqx-ctl.tqx-wide { padding: 4px 9px; min-height: 36px; }
#tq-app .tq-chip.tqx-ctl.tqx-wide > select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  box-sizing: border-box; margin: 0; padding: 4px 28px 4px 9px; }
#tq-app .tq-chip.tqx-ctl.tqx-wide > .tq-ch { margin-left: auto; position: relative; }
/* Decoration, never a target — the click belongs to the control beneath it. */
#tq-app .tq-ch { pointer-events: none; }
/* The focus ring now belongs to a box that fills the well, so it sits outside
   the well rather than cutting through the middle of it. */
#tq-app .tq-select > select:focus-visible,
#tq-app .tq-chip.tqx-ctl > select:focus-visible { outline-offset: 1px; }
/* the deals gap note rides the note strip, full width above the groups */
#tq-app .tq-note { margin: 2px 4px 0; }

/* ── batch 4 (30 Aug 2026): Analyse-call inputs + cadence rows ───────────── */
.tqx-drop { position: relative; display: block; padding: 34px 20px 30px; text-align: center;
  border: 1.5px dashed var(--line2); background: var(--sunken); cursor: pointer; }
.tqx-drop:hover { border-color: var(--ink3); }
.tqx-drop-line { display: block; font: 400 21px/1.2 var(--disp); color: var(--ink); }
.tqx-drop-sub  { display: block; margin-top: 7px; font-size: 12px; color: var(--ink3); }
.tqx-tx { display: block; width: 100%; min-height: 150px; margin-top: 6px; padding: 10px 12px;
  font: 400 12.5px/1.6 var(--sans); color: var(--ink); background: var(--card);
  border: 0; box-shadow: inset 0 0 0 1px var(--line2); resize: vertical; }
.tqx-tx:focus-visible, .tqx-inp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tqx-inp { display: block; width: 100%; height: 32px; padding: 0 11px;
  font: 400 12.5px/30px var(--sans); color: var(--ink); background: var(--card);
  border: 0; box-shadow: inset 0 0 0 1px var(--line2); }
.tqx-err { display: none; margin-top: 12px; padding: 9px 12px; font-size: 12.5px;
  color: var(--clash); box-shadow: inset 0 0 0 1px var(--clash); }
.tqx-err.show { display: block; }
.tqx-cadbody td { box-shadow: inset 0 -1px 0 var(--grid); }

/* ── batch 5: settings segmented control + admin adoption ─────────────────── */
.tqx-seg { appearance: none; border: 0; background: var(--card); color: var(--ink2);
  font: 500 11.5px/1 var(--sans); padding: 8px 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line2); }
.tqx-seg.on { background: var(--accent); color: var(--on-acc); }
.tqx-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the adopted legacy admin panel: its own page-head and tab row are replaced by
   the tq shell's question line and tab strip — hidden, never removed */
#tq-app #tab-admin { display: block !important; }
#tq-app #tab-admin > .page-head, #tq-app #tab-admin .adm-tabs { display: none; }

/* ── Phase 3 item 1: derive doors, receipt chips, the drawer ─────────────── */
.tq-keybtn { appearance: none; border: 0; background: transparent; padding: 2px 4px;
  margin: -2px -4px; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px; }
.tq-keybtn b { text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 3px; }
.tq-keybtn:hover b { text-decoration-color: var(--ink3); }
.tq-keybtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tqx-derive { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-start; justify-content: center; padding: 7vh 20px 20px;
  background: rgba(20, 22, 25, .38); overflow: auto; }
.tqx-derive > .tq-card { width: min(860px, 100%); }
.tqx-dq { font: italic 400 14.5px/1.5 var(--disp); }
.tqx-rcp { appearance: none; border: 0; cursor: pointer; font: 500 10.5px/1 var(--sans);
  color: var(--ink2); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line);
  padding: 3px 7px; white-space: nowrap; }
.tqx-rcp:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.tqx-rcp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tqx-well { margin-top: 10px; padding: 11px 13px; background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line); }

/* ── Phase 3 item 3: the gap queue's clickable strip cells ────────────────── */
.tqx-qcell { appearance: none; border: 0; background: transparent; font: inherit;
  color: inherit; text-align: left; cursor: pointer; }
.tqx-qcell.on { box-shadow: inset 0 -2px 0 var(--accent); }
.tqx-qcell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }