/* Instamart Review Engine — light, Swiggy-orange product theme.
   Governing idea: no number is ever naked. Every figure renders as a
   typographic fraction with its denominator, and every fraction is a door
   into the raw reviews underneath it.

   Colour system: two-tone orange. --accent (bright Swiggy orange) is for
   large fills and decorative surfaces, always paired with dark text on top —
   at small sizes/thin strokes it does not clear 3:1 against white. Anything
   that IS the contrast-bearing layer (links, icons, focus rings, tab
   underlines, ticks, bars) uses --accent-strong, a deepened orange verified
   at ~5:1 against white. Every text colour below (--ink, --ink-soft, --muted,
   --accent-strong, --hot, --cool, --violet) was checked against --bg/--bg-panel
   and clears WCAG AA (4.5:1 for text, 3:1 for graphical/large). */

:root {
  --bg:        #FFFFFF;
  --bg-rail:   #FCF9F6;
  --bg-panel:  #FFFFFF;
  --bg-muted:  #F6F3EF;
  --rule:      #E6E1D9;
  --rule-soft: #EFEBE4;

  --ink:       #221B15;   /* primary text — ~16.5:1 on white */
  --ink-soft:  #4A4038;   /* subheadings/deck — ~9.4:1 on white */
  --muted:     #5C5347;   /* captions/labels/notes — ~6.1:1 on white */

  --accent:       #FC8019; /* Swiggy orange: fills + decorative surfaces only */
  --accent-strong: #B34500; /* text/icons/focus/bars — ~5.6:1 on white, ~5.0:1 on the tint */
  --accent-tint:  #FFF1E6; /* wash for badges, active-tab bg, hover bg */
  --accent-tint-2: #FFE2CC;

  --hot:      #D92D20;  /* severity 3 / danger — ~4.8:1 on white */
  --hot-tint: #FDECEA;
  --cool:      #0E7C4A; /* positive / validated — ~5.3:1 on white */
  --cool-tint: #E7F6EE;
  --violet:      #6941C6; /* inference / provisional — ~6.6:1 on white */
  --violet-tint: #F2EDFC;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --rail-w: 15.5rem;
  --shadow: 0 1.5rem 3rem -1rem rgb(30 20 10 / 0.14);
  --focus:  0 0 0 3px var(--accent-tint-2);
}

* { box-sizing: border-box; }

/* `display` declarations below would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background:
    radial-gradient(1400px 650px at 88% -12%, var(--accent-tint) 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* A visible, high-contrast ring on every focusable element. Nothing in this
   file ever sets `outline: none` without this replacing it — the two spots
   that used to do that (the search input, the evidence fraction) simply rely
   on this rule now. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 2px;
}

.grain { display: none; }

/* ------------------------------------------------------------------ rail */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 3;
  display: flex; flex-direction: column; gap: 2rem;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--rule);
  background: var(--bg-rail);
  /* Four views plus the meta block can exceed a short viewport; scroll the
   * rail rather than clipping the last nav item off the bottom. */
  overflow-y: auto;
}

.rail__mark { display: flex; gap: .8rem; align-items: flex-start; }
.rail__glyph { color: var(--accent-strong); font-size: 1.6rem; line-height: 1; }
.rail__lockup { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }

/* Brand wordmark. --accent is a fill colour — as text it clears neither 4.5:1
   nor 3:1 on this rail — so it stays a fill with dark ink on top, which is the
   rule set out at the top of this file. */
.rail__brand {
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1; color: var(--ink);
  background: var(--accent); border-radius: 4px; padding: .3rem .45rem;
}
.rail__name {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}

.rail__nav { display: flex; flex-direction: column; gap: .15rem; }

.rail__link {
  appearance: none; background: none; border: 0; border-left: 3px solid transparent;
  color: var(--ink-soft); font-family: var(--sans); font-size: .95rem; font-weight: 500;
  text-align: left; padding: .6rem .7rem; cursor: pointer; border-radius: 0 4px 4px 0;
  transition: color .18s, border-color .18s, background .18s;
}
.rail__link:hover { color: var(--ink); background: var(--bg-muted); }
.rail__link.is-active {
  color: var(--accent-strong); border-left-color: var(--accent);
  background: var(--accent-tint); font-weight: 600;
}

.rail__sub {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .03em; color: var(--muted); margin: .2rem 0 0 1.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail__link.is-active .rail__sub { color: var(--accent-strong); }
.rail__num {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  margin-right: .5rem; letter-spacing: .06em; font-weight: 600;
}
.rail__link.is-active .rail__num { color: var(--accent-strong); }

.rail__meta {
  margin-top: auto; font-family: var(--mono); font-size: .74rem;
  border-top: 1px solid var(--rule); padding-top: 1rem;
}
.rail__metaRow {
  display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0;
  color: var(--muted);
}
.rail__metaRow b { color: var(--ink); font-weight: 600; }
.rail__metaRow b.ok  { color: var(--cool); }
.rail__metaRow b.bad { color: var(--hot); }

.rail__foot {
  font-size: .78rem; line-height: 1.5; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: .9rem; margin: 0;
}
.rail__foot em { color: var(--accent-strong); font-style: normal; font-weight: 600; }

/* ----------------------------------------------------------------- stage */
.stage {
  position: relative; z-index: 1;
  margin-left: var(--rail-w); padding: 3.5rem 3rem 6rem;
  max-width: 78rem;
}

.masthead { margin-bottom: 2.25rem; }

/* Title row — the page action sits opposite the H1 rather than in a panel
   of its own, so the top of the page reads as one band. */
.masthead__row {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
}
.masthead__row .btn { flex: none; margin-top: .35rem; }

/* Eyebrow — smallest tier of the hierarchy, mono for the "data" texture. */
.kicker {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  font-weight: 600; text-transform: uppercase; color: var(--accent-strong);
  margin: 0 0 .7rem;
}

/* H1 — page title. */
h1 {
  font-family: var(--sans); font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.12; margin: 0; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
h1::after {
  content: ''; display: block; width: 3.5rem; height: 3px;
  background: var(--accent); margin-top: 1rem; border-radius: 2px;
}

/* Subheading — the deck paragraph under H1. */
.deck {
  max-width: 46rem; color: var(--ink-soft); font-size: 1.0625rem;
  line-height: 1.6; margin: 1.1rem 0 0;
}

.loading {
  font-family: var(--mono); font-size: .82rem; color: var(--muted);
}
.loading::after { content: ' ▚'; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* -------------------------------------------------------- corpus strip */
.strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--rule); background: var(--bg-panel);
  margin-bottom: 2rem; border-radius: 6px; overflow: hidden;
}
.strip__cell {
  flex: 1 1 8rem; padding: .9rem 1.1rem;
  border-right: 1px solid var(--rule); background: var(--bg-panel);
}
.strip__cell:last-child { border-right: 0; }
.strip__k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: block; font-weight: 600;
}
.strip__v {
  font-family: var(--sans); font-size: 1.375rem; font-weight: 700; color: var(--ink);
  margin-top: .3rem; display: block;
}
.strip__v small { font-family: var(--mono); font-size: .74rem; font-weight: 400; color: var(--muted); }

/* --------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--bg-panel); border-radius: 6px; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }

thead th {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rule);
  background: var(--bg-muted); white-space: nowrap;
}
tbody td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--bg-muted); }

.col-rank { width: 3rem; }
.col-num  { width: 11rem; }
.col-share, .col-sev, .col-trend { width: 7.5rem; }

.rank {
  font-family: var(--mono); font-size: .82rem; color: var(--muted); font-weight: 600;
}

.themecell { display: block; }
.themecell__name {
  font-size: 1.02rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font-family: var(--sans); font-weight: 600; text-align: left;
  border-bottom: 1px solid transparent; transition: border-color .18s, color .18s;
}
.themecell__name:hover { border-bottom-color: var(--accent-strong); color: var(--accent-strong); }
.themecell__id {
  display: block; font-family: var(--mono); font-size: .7rem;
  color: var(--muted); margin-top: .25rem;
}

/* --------------------------------------------- the fraction (signature) */
/* A metric is never a bare integer. Numerator over denominator, hairline
   between, so the denominator is impossible to lose. */
.frac {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--mono); line-height: 1.15; cursor: pointer;
  background: none; border: 0; padding: .15rem .3rem; margin: -.15rem -.3rem;
  border-radius: 4px; text-align: left;
  transition: background .15s;
}
.frac:hover { background: var(--accent-tint); }
.frac:hover .frac__n { color: var(--accent-strong); }
.frac__n { font-size: 1.05rem; color: var(--ink); font-weight: 700; transition: color .15s; }
.frac__d {
  font-size: .74rem; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: .12rem; margin-top: .12rem;
  min-width: 3.5rem;
}
.frac--static { cursor: default; }
.frac--static:hover { background: none; }
.frac--static:hover .frac__n { color: var(--ink); }

.share { font-family: var(--mono); font-size: .92rem; font-weight: 600; }
.share__bar {
  display: block; height: 4px; background: var(--rule); margin-top: .35rem;
  max-width: 5rem; position: relative; overflow: hidden; border-radius: 2px;
}
.share__bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent-strong); }

/* Severity as three ticks — never colour alone (the number sits alongside). */
.sev { display: flex; gap: .2rem; align-items: center; }
.sev__t { width: .55rem; height: 1rem; background: var(--rule); border-radius: 1px; }
.sev__t.on { background: var(--accent-strong); }
.sev__t.on.hot { background: var(--hot); }
.sev__v { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-left: .35rem; font-weight: 600; }

.trend { font-family: var(--mono); font-size: .82rem; display: flex; gap: .35rem; align-items: baseline; font-weight: 600; }
.trend--up   { color: var(--hot); }
.trend--down { color: var(--cool); }
.trend--flat { color: var(--muted); }

.mix { display: flex; gap: 2px; height: 1.1rem; min-width: 6rem; border-radius: 2px; overflow: hidden; }
.mix i { display: block; }
.mix__legend {
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
  margin-top: .3rem; display: block;
}

/* --------------------------------------------------------------- panels */
.panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.25rem; margin-bottom: 1.25rem;
}
.panel {
  border: 1px solid var(--rule); background: var(--bg-panel); padding: 1.3rem 1.4rem;
  border-radius: 6px;
}
.panel--wide { margin-bottom: 1.25rem; }

/* H2 — panel/section titles. */
.panel__title {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); margin: 0 0 .5rem;
}
.panel__note { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.1rem; max-width: 40rem; }

/* Divider between the symptom findings and the root-cause block below them.
   A ruled eyebrow rather than another H2, so it reads as a subsection of the
   tab, not a second panel. */
.panel__subhead {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--accent-strong);
  margin: 1.6rem 0 1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
}

.criteria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0; border: 1px solid var(--rule); margin-bottom: 1.25rem; background: var(--bg-panel);
  border-radius: 6px; overflow: hidden;
}
.criteria__cell { padding: 1rem 1.2rem; border-right: 1px solid var(--rule); }
.criteria__cell:last-child { border-right: 0; }
.criteria__k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; display: block; margin-bottom: .4rem;
}
.criteria__v { font-size: .9375rem; color: var(--ink-soft); line-height: 1.55; }

/* time series */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 6rem; }
.spark__col {
  flex: 1 1 0; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
  min-width: 1.1rem;
}
.spark__col i {
  display: block; background: var(--accent-tint-2); transition: background .15s;
  min-height: 2px; border-radius: 1px 1px 0 0;
}
.spark__col:hover i { background: var(--accent-strong); }
.spark__x {
  display: flex; gap: 3px; margin-top: .45rem;
  font-family: var(--mono); font-size: .64rem; color: var(--muted);
}
.spark__x span { flex: 1 1 0; min-width: 1.1rem; text-align: center; }

/* split rows */
.split { display: flex; flex-direction: column; gap: .1rem; }
.split__row {
  display: grid; grid-template-columns: 6rem 1fr 5.5rem; gap: .8rem;
  align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--rule-soft);
}
.split__row:last-child { border-bottom: 0; }
.split__k { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); }
.split__bar { height: 6px; background: var(--rule); position: relative; border-radius: 3px; overflow: hidden; }
.split__bar i { position: absolute; inset: 0 auto 0 0; background: var(--cool); }
.split__sub {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--muted); margin: 1rem 0 .5rem;
}

/* ------------------------------------------------------------ questions */
.q {
  border: 1px solid var(--rule); background: var(--bg-panel); margin-bottom: 1.25rem;
  border-radius: 6px; overflow: hidden;
}
.q__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--rule);
}
.q__id {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--accent-strong); display: block; margin-bottom: .4rem;
}
.q__title { font-family: var(--sans); font-size: 1.25rem; margin: 0; font-weight: 600; color: var(--ink); }
.q__spec {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  margin-top: .6rem; line-height: 1.7;
}
.q__spec b { color: var(--ink-soft); font-weight: 600; }
.q__body { padding: 1.3rem 1.4rem; }

.btn {
  appearance: none; background: var(--bg-panel); color: var(--accent-strong);
  border: 1.5px solid var(--accent-strong); font-family: var(--mono);
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem .9rem; cursor: pointer; white-space: nowrap; border-radius: 4px;
  transition: background .18s, color .18s;
}
.btn:hover:not(:disabled) { background: var(--accent-strong); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.narrative { font-size: 1rem; color: var(--ink); max-width: 44rem; line-height: 1.6; }
.narrative p { margin: 0 0 1rem; }

.finding {
  border-left: 3px solid var(--rule); padding: .1rem 0 .1rem 1.1rem;
  margin: 1.4rem 0;
}
.finding--symptom { border-left-color: var(--accent); }
.finding--cause   { border-left-color: var(--violet); }
.finding__tags {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem;
}
.tag {
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: .22rem .5rem; border: 1px solid var(--rule);
  color: var(--muted); border-radius: 3px; background: var(--bg-muted);
}
.tag--symptom { color: var(--accent-strong); border-color: var(--accent-tint-2); background: var(--accent-tint); }
.tag--cause   { color: var(--violet); border-color: #E1D5F7; background: var(--violet-tint); }
.tag--high    { color: var(--cool); border-color: #C7EAD8; background: var(--cool-tint); }
.tag--ext     { color: var(--hot); border-color: #F7CCC7; background: var(--hot-tint); }
.finding__claim { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 .7rem; color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chips__k {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-right: .3rem;
}
.chip {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; padding: .25rem .5rem;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-2); color: var(--accent-strong);
  cursor: pointer; transition: background .15s, color .15s; border-radius: 3px;
}
.chip:hover { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.chip--against {
  background: var(--cool-tint); border-color: #C7EAD8; color: var(--cool);
}
.chip--against:hover { background: var(--cool); color: #fff; border-color: var(--cool); }

.cause {
  border: 1px solid var(--rule); padding: .9rem 1.05rem; margin-bottom: .7rem;
  border-radius: 6px; background: var(--bg-panel);
}
.cause__how {
  font-size: .84rem; color: var(--muted); margin: .55rem 0 0;
  font-family: var(--mono); line-height: 1.5;
}

.job { border-left: 3px solid var(--cool); padding-left: 1.1rem; margin: 1.2rem 0; }
.job--provisional { border-left-color: var(--violet); border-left-style: dashed; }
.job__statement { font-size: 1.0625rem; font-style: italic; line-height: 1.55; margin: 0 0 .55rem; color: var(--ink); }

/* --------------------------------------------------------------- search */
.searchbar {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-bottom: 1.75rem;
}
.searchbar input[type=search] {
  flex: 1 1 22rem; background: var(--bg-panel); border: 1.5px solid var(--rule);
  color: var(--ink); font-family: var(--sans); font-size: .9375rem;
  padding: .7rem .9rem; border-radius: 4px;
}
.searchbar input[type=search]:focus { border-color: var(--accent-strong); }
.searchbar button {
  appearance: none; background: var(--bg-panel); color: var(--accent-strong);
  border: 1.5px solid var(--accent-strong); font-family: var(--mono);
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .7rem 1.1rem; cursor: pointer; border-radius: 4px; transition: background .18s, color .18s;
}
.searchbar button:hover { background: var(--accent-strong); color: #fff; }
.chk {
  font-family: var(--sans); font-size: .875rem; color: var(--ink-soft);
  display: flex; gap: .4rem; align-items: center;
}
.chk select {
  background: var(--bg-panel); border: 1.5px solid var(--rule); color: var(--ink);
  font-family: var(--sans); font-size: .875rem; padding: .35rem; border-radius: 4px;
}

/* ------------------------------------------------------------ verbatims */
.rev {
  border-top: 1px solid var(--rule-soft); padding: 1.05rem 0;
}
.rev:first-child { border-top: 0; }
.rev__meta {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline;
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  margin-bottom: .5rem;
}
.rev__src { color: var(--accent-strong); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.rev__id { color: var(--rule); }
.rev__lang { border: 1px solid var(--rule); padding: 0 .3rem; border-radius: 3px; }
.rev__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.rev__link {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.rev__link:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

.empty {
  font-family: var(--mono); font-size: .84rem; color: var(--muted);
  padding: 1.2rem 0; line-height: 1.6;
}
.err {
  font-family: var(--sans); font-size: .875rem; color: var(--hot); line-height: 1.55;
  border: 1px solid #F3B7B0; border-radius: 6px; padding: .9rem 1.1rem; background: var(--hot-tint);
}

/* ---------------------------------------------------- evidence drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(38rem, 92vw); z-index: 6;
  background: var(--bg-panel); border-left: 1px solid var(--rule);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: slidein .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes slidein { from { transform: translateX(100%); } }

.drawer__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.5rem 1.6rem 1rem; border-bottom: 1px solid var(--rule);
}
.drawer__kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--accent-strong); margin: 0 0 .35rem;
}
.drawer__title { margin: 0; font-family: var(--sans); font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.drawer__close {
  appearance: none; background: var(--bg-panel); border: 1.5px solid var(--rule);
  color: var(--ink-soft); width: 2.1rem; height: 2.1rem; cursor: pointer;
  font-size: .85rem; flex-shrink: 0; border-radius: 4px;
}
.drawer__close:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.drawer__denom {
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
  margin: 0; padding: .8rem 1.6rem; border-bottom: 1px solid var(--rule);
  background: var(--accent-tint);
}
.drawer__body { overflow-y: auto; padding: .5rem 1.6rem 3rem; flex: 1; }

.scrim {
  position: fixed; inset: 0; z-index: 5; background: rgb(30 20 10 / 0.32);
  backdrop-filter: blur(1.5px); animation: fade .26s;
}
@keyframes fade { from { opacity: 0; } }

/* ----------------------------------------------------------------- tabs */
.tabs {
  display: flex; flex-wrap: wrap; gap: .1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.tab {
  appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--muted); font-family: var(--sans); font-size: .875rem; font-weight: 600;
  padding: .65rem .9rem; cursor: pointer; margin-bottom: -1px; border-radius: 4px 4px 0 0;
  transition: color .18s, border-color .18s, background .18s;
}
.tab:hover { color: var(--ink); background: var(--bg-muted); }
.tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }

.tabpane { display: none; }
.tabpane.is-active { display: block; animation: fade .25s ease both; }

.masthead--sub { margin-bottom: 1.5rem; }
.masthead--sub h2 {
  font-family: var(--sans); font-size: 1.75rem; margin: .2rem 0 .4rem;
  font-weight: 700; color: var(--ink);
}

/* -------------------------------------------------------- live scrape */
/* The report is a dialog rather than a panel on the page: a scrape is a thing
   you do and then dismiss, and an empty box sitting under the masthead for the
   rest of the session is not worth the space. Shares the drawer's head, close
   button and scrim so there is one dismissable-surface idiom, not two. */
.modal {
  position: fixed; z-index: 6; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(34rem, 92vw); max-height: 82vh;
  background: var(--bg-panel); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: popin .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes popin {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.98); }
}
.modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--rule);
}
.modal__body { overflow-y: auto; padding: 1.2rem 1.5rem 1.5rem; }
.modal__body .panel__note { margin-bottom: 0; }
.scrape__report { margin-top: .9rem; }
.scrape__report:first-child { margin-top: 0; }
.scrape__line {
  font-family: var(--mono); font-size: .82rem; color: var(--ink);
  margin: 0 0 .6rem; font-weight: 600;
}

/* Filled rather than outlined: this is the one control on the page that
   changes data, so it should not look like the evidence chips. */
.btn--primary {
  background: var(--accent-strong); color: #fff; border-color: var(--accent-strong);
}
.btn--primary:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }

/* ---------------------------------------------------------- dashboard */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.card {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg-panel); padding: 1.25rem 1.35rem;
}
.card__label {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.card__value {
  font-family: var(--sans); font-size: 2.5rem; font-weight: 700;
  line-height: 1.1; color: var(--ink); letter-spacing: -.02em;
}
.card__sub { font-size: .9rem; color: var(--ink-soft); }
.card__notes {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .2rem;
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}

.charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}
.chartbox {
  margin: 0; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg-panel); padding: 1.3rem 1.4rem;
}
.chartbox figcaption { margin-bottom: 1rem; }
.chartbox .panel__note { margin-bottom: 0; }

/* Chart and legend side by side while there is room; the legend is the
   accessible fallback, so it never gets hidden to save space. */
.pie {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center;
}
.donut__total {
  font-family: var(--sans); font-size: 1.5rem; font-weight: 700;
  fill: var(--ink);
}
.donut__totalLabel {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--muted);
}

.legend {
  list-style: none; margin: 0; padding: 0; flex: 1 1 12rem;
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
}
.legend__row {
  display: grid; grid-template-columns: .9rem 1fr auto auto; gap: .55rem;
  align-items: baseline; padding: .3rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.legend__row:last-child { border-bottom: 0; }
.legend__swatch {
  width: .9rem; height: .9rem; border-radius: 3px; align-self: center;
}
.legend__label { font-size: .875rem; color: var(--ink); min-width: 0; }
.legend__value {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
}
.legend__pct {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--ink); min-width: 3.2rem; text-align: right;
}

/* --------------------------------------------------- discovery key themes */
/* Four headline cards above the tabs. Tinted rather than plain white so they
 * read as a summary layer distinct from the panels below, and sized so the
 * statement — not the number — is the thing the eye lands on. */
.section__label {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  font-weight: 600; text-transform: uppercase; color: var(--accent-strong);
  margin: 0 0 .9rem;
}

.themecards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-bottom: 1.1rem;
}
.themecard {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--accent-tint-2); border-radius: 8px;
  background: var(--accent-tint); padding: 1.15rem 1.2rem;
}
.themecard__rank {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; color: var(--accent-strong);
}
.themecard__name {
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.3; margin: 0; color: var(--ink);
}
.themecard__statement {
  font-size: .9375rem; line-height: 1.55; margin: 0; color: var(--ink-soft);
}
/* Pushes the evidence chip to the bottom so cards of unequal text length still
   line their controls up. */
.themecard__foot { margin-top: auto; padding-top: .35rem; }
.themecard .chip { background: var(--bg-panel); }

/* ------------------------------------------------------- ranked top-5 list */
/* One row shape for pain points, themes and segments so the three lists on the
 * Findings page can be compared by eye rather than re-read. */
.ranked { border-bottom: 1px solid var(--rule-soft); padding: .9rem 0; }
.ranked:last-child { border-bottom: 0; }

.ranked__head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.ranked__name {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
  text-align: left; flex: 1 1 14rem;
}
.ranked__name:hover { color: var(--accent-strong); }
/* Findings is read-only: the name is a label, not a control. */
.ranked__name--static { cursor: default; }
.ranked__name--static:hover { color: var(--ink); }
.ranked__parent {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; font-weight: 600;
  text-transform: uppercase; color: var(--muted);
}

.ranked__ev { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.ranked__quote {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem;
  text-align: left; padding: .4rem .5rem; color: inherit; border-radius: 4px;
  transition: background .15s;
}
.ranked__quote:hover { background: var(--bg-muted); }

/* ------------------------------------------------- open codes / pain points */
/* One code per row: facet chip, the code itself, then the reviewer's words.
 * The whole row is the click target because the quote is the thing you want to
 * follow, and a row-sized target beats hunting for a link. */
.codes { display: flex; flex-direction: column; gap: .1rem; }

.code {
  display: grid; grid-template-columns: 5.5rem minmax(9rem, 18rem) 1fr;
  gap: .75rem; align-items: baseline; text-align: left;
  appearance: none; background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rule-soft);
  padding: .55rem .5rem; color: inherit; border-radius: 4px;
  transition: background .15s;
}
.code:hover { background: var(--bg-muted); }
.code:last-child { border-bottom: 0; }

.code__facet {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--rule); padding: .14rem .4rem; justify-self: start; border-radius: 3px;
  background: var(--bg-muted);
}
.code__facet--friction { color: var(--hot); border-color: #F7CCC7; background: var(--hot-tint); }
.code__facet--topic { color: var(--ink-soft); }
.code__facet--goal { color: var(--cool); border-color: #C7EAD8; background: var(--cool-tint); }

.code__name { font-size: .9375rem; color: var(--ink); font-weight: 500; }
.code__quote {
  font-family: var(--sans); font-size: .9rem; font-style: italic;
  color: var(--ink-soft); line-height: 1.5;
}

.chip--static { cursor: default; }
.chip--static:hover { background: var(--accent-tint); color: var(--accent-strong); }

/* --------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  /* Three columns stop fitting well before the rail collapses. */
  .code { grid-template-columns: 5.5rem 1fr; }
  .code__quote { grid-column: 2; }
}

@media (max-width: 900px) {
  .rail {
    position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 1rem; border-right: 0;
    border-bottom: 1px solid var(--rule); padding: 1rem 1.25rem;
  }
  .rail__nav { flex-direction: row; flex-wrap: wrap; }
  .rail__link { border-left: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
  .rail__link.is-active { border-left: 0; border-bottom-color: var(--accent); }
  .rail__meta, .rail__foot { display: none; }
  .stage { margin-left: 0; padding: 2rem 1.25rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}