/* ============================================================================
   Qaboom design system — Direction A: "Indigo Enterprise"
   ----------------------------------------------------------------------------
   Tailwind config (base.html) holds the color palette. This file holds the
   design tokens as CSS variables + the reusable component classes that give
   every page a consistent rhythm.
   ============================================================================ */

:root {
  /* ── Brand (indigo) ── */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;   /* primary action */
  --brand-700: #4338ca;   /* primary hover / gradient end */
  --brand-900: #312e81;

  /* ── Neutral text ramp (slate) ──
     Four legible tiers plus one explicitly decorative tier. Every tier that
     carries meaning clears WCAG AA (4.5:1 on --card); --decor is the only
     value below it and must never be used for text. Ratios are against #fff. */
  --ink:       #0f172a;   /* page titles            16.1:1 */
  --ink-2:     #334155;   /* body strong            10.4:1 */
  --muted:     #475569;   /* secondary text          7.4:1 */
  --faint:     #5c6a80;   /* tertiary text, labels — the AA floor.
                             5.07:1 on --c-bg, 5.49:1 on --c-panel. Was #64748b,
                             which cleared 4.5:1 on white but only reached 4.40:1
                             on the page ground, where much of this text sits. */
  --decor:     #94a3b8;   /* NON-TEXT ONLY           2.6:1 — icons, rules */
  --border:    #e5e7eb;
  --card:      #ffffff;

  /* ── Semantic ── */
  --pass:      #059669;
  --fail:      #dc2626;
  --critical:  #991b1b;
  --warn:      #d97706;

  /* ── Type scale ──
     Four sizes, not nine. The old set (10/11/12/14/16/18/20/24/30px) put 80%
     of the interface into 12px and 14px and made section headings 16px — only
     1.14x over body — so nothing read as more important than anything else.

       display  28px  page H1                    1.56x over title
       title    18px  card / section H2          1.29x over body
       body     14px  body, table cells, controls
       meta     12px  secondary text and labels  (body/meta is 1.17x)

     Below body the step is deliberately tight: 12px is the floor for readable
     secondary text in a dense table, and weight, case and colour carry the
     distinction there instead of size. */
  --fs-display: 1.75rem;   /* 28px — page H1 / 800 */
  --fs-metric:  1.5rem;    /* 24px — metric readouts, between title and display */
  --fs-title:   1.125rem;  /* 18px — card + section H2 / 700 */
  --fs-body:    0.875rem;  /* 14px — body / 400-500 */
  --fs-meta:    0.75rem;   /* 12px — secondary text, uppercase labels / 700 */

  /* ── Marketing type ramp ──
     A second, deliberately larger scale for the public pages. The app ramp
     tops out at 28px because it is read at desk distance, a hundred rows at a
     time; a landing page is read once, at arm's length, by someone deciding
     whether to care. Same family, same colours, same radii — only the scale
     and rhythm change, so a visitor who signs up recognises the product.

       mk-h1    48px  hero headline (fluid from 32)
       mk-h2    30px  section headings (fluid from 24)
       mk-lede  18px  hero subhead — the same step as --fs-title
       mk-body  16px  marketing body copy
       mk-price 32px  plan prices */
  --mk-fs-h1:    clamp(2rem, 5.2vw, 3rem);
  --mk-fs-h1-sm: clamp(1.75rem, 4vw, 2.25rem);
  --mk-fs-h2:    clamp(1.5rem, 2.7vw, 1.875rem);
  --mk-fs-lede:  1.125rem;
  --mk-fs-body:  1rem;
  --mk-fs-price: 2rem;

  /* ── Spacing rhythm ── */
  --pad-card:   1.25rem;  /* 20px — standard card padding */
  --gap:        1rem;     /* grid gap between cards */
  --gap-lg:     1.25rem;  /* gap between major content blocks */
  --radius:     0.75rem;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(49,46,129,.08);
}

/* ── Typography helpers ──
   .qb-display carries size only, so it can sit on the dark auth panel;
   .qb-page-title is the same step plus the page-title colour. */
.qb-display, .qb-page-title {
  font-size: var(--fs-display); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
}
.qb-page-title { color: var(--ink); }
.qb-section-title { font-size: var(--fs-title); font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0; }

/* ── Card primitives ── */
.qb-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* ── Buttons ── */
.qb-btn-primary {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .625rem 1rem; border-radius: var(--c-radius-sm);
  background: var(--brand-600); color: #fff;
  font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-sm); border: none; cursor: pointer; transition: background .15s;
}
.qb-btn-primary:hover { background: var(--brand-700); }
.qb-btn-secondary {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: var(--c-radius-sm);
  background: #fff; color: var(--ink-2);
  font-size: var(--fs-body); font-weight: 500; text-decoration: none;
  border: 1px solid var(--border); cursor: pointer; transition: background .15s;
}
.qb-btn-secondary:hover { background: #f8fafc; }

/* ── Sidebar nav links ── */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-radius: var(--c-radius-sm);
  color: var(--nav-idle);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: var(--nav-hover); }
.sidebar-link.active {
  background: rgba(99,102,241,.16);
  color: #fff;
  border-left-color: #818cf8;
}
.sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Status badges live in the canon layer below — the pill-and-shadow version
   they replaced was removed rather than left to be overridden. */

/* ── Progress bar shimmer ──
   The fill is full-width and scaled on the X axis, so progress animates on the
   compositor via transform instead of reflowing every in-flight row on each
   frame. JS sets --progress (0..1) rather than a width. */
.progress-wrap { margin-top: 5px; height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress-fill {
  height: 4px; border-radius: 999px; background: var(--brand-600);
  position: relative; overflow: hidden;
  width: 100%; transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.7s ease;
}
/* Shimmer also rides transform; `left` would animate layout. */
.progress-fill::after {
  content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: bar-shimmer 1.6s linear infinite;
}
@keyframes bar-shimmer {
  from { transform: translateX(-133%); }
  to   { transform: translateX(266%); }
}

/* ── Spinner ── */
.spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid #e2e8f0; border-top-color: var(--brand-600); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Override buttons (report page) ── */
.override-btns { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 2px; }
/* Manager override controls. 24px minimum: these sit inside a dense table row
   and were 21px tall, under the WCAG 2.2 AA target size. */
.ov-btn {
  font-size: var(--fs-meta); padding: .25rem .5rem; min-height: 24px;
  border-radius: var(--c-radius-sm); border: 1px solid var(--c-line-2);
  background: var(--c-panel); color: var(--ink-2);
  cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center;
}
.ov-btn:hover { background: var(--c-panel-2); border-color: var(--c-line-3); }
.ov-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Canon verdict colours. The pre-colorize pair was 3.58:1 and 4.41:1. */
.ov-approve.ov-active { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }  /* 5.21:1 */
.ov-flag.ov-active    { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }  /* 5.91:1 */
.ov-clear { color: #64748b; }

/* ── Timestamp links ── */
.ts-link { font-family: monospace; font-size: 0.85rem; color: var(--brand-700); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.ts-link:hover { color: var(--brand-600); }

/* Tailwind preflight is disabled, so padding adds to min-height. Without this,
   min-h-screen plus the mobile top bar's pt-14 makes every short page scroll by
   exactly the height of that bar. */
/* Tailwind preflight is disabled to keep browser defaults for headings, lists
   and form controls — but preflight is also where border-box comes from, and
   every Tailwind utility assumes it. Without it, `w-full` plus a component's own
   padding overflows its container: the dashboard's "View call history" button
   spilled 10px past its panel. Restore just this one piece of the reset. */
*, *::before, *::after { box-sizing: border-box; }

/* ── Wordmark ──
   Bottom of the shell on every page, never mid-viewport on a short one. */
.qb-watermark {
  margin-top: auto;
  padding-top: 3rem;
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--faint);
}

/* ── Global polish: fade-in for main content ── */
.qb-main-content {
  animation: qb-fade-in 0.15s ease-out;
}
@keyframes qb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Input focus ring (global) ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 1px var(--brand-500);
  outline: none;
}

/* ============================================================================
   Hardening primitives
   ============================================================================ */

/* ── Visually hidden, but still focusable and announced ──
   Used for the upload file input and for labels on dense filter controls.
   Never use Tailwind's `hidden` (display:none) on a form control: it drops the
   control out of the tab order AND breaks native constraint validation. */
.qb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link ── */
.qb-skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 60;
  padding: 0.625rem 1rem;
  border-radius: var(--c-radius-sm);
  background: var(--brand-600);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.qb-skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
main:focus { outline: none; }

/* ── Drop zone: the file input is visually hidden, so the zone itself has to
   show the focus state on its behalf. ── */
.qb-dropzone:focus-within {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* ── Off-canvas sidebar ──
   `visibility` (not just `transform`) is what actually removes the closed
   sidebar from the tab order and the accessibility tree. Delaying the
   visibility flip by the transform duration keeps the slide-out animation. */
@media (max-width: 1023.98px) {
  #sidebar {
    visibility: hidden;
    transition: transform 0.2s ease-in-out, visibility 0s linear 0.2s;
  }
  #sidebar.is-open {
    visibility: visible;
    transition: transform 0.2s ease-in-out, visibility 0s linear 0s;
  }
}

/* ── Inline field errors ── */
.qb-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: #b91c1c;
}
.qb-field-error svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 1px; }
.qb-field-error:empty { display: none; }

/* Tailwind preflight is disabled, so a <button> with no background of its own
   renders with the UA button face — a grey box. The mobile menu trigger and
   close control were doing exactly that on every phone-width page. */
.qb-icon-btn {
  background: none; border: none; padding: .25rem; margin: -.25rem;
  color: inherit; cursor: pointer; line-height: 0;
  border-radius: var(--c-radius-sm);
  min-width: 32px; min-height: 32px;
  align-items: center; justify-content: center;
}
/* display goes through :where() so it carries zero specificity. This file loads
   after tailwind.css, so a plain rule here beat `lg:hidden` and left the sidebar
   close button visible on desktop. */
:where(.qb-icon-btn) { display: inline-flex; }
.qb-icon-btn:hover { background: rgba(255,255,255,.08); }

/* ── Busy submit buttons ── */
button[aria-busy="true"] { opacity: 0.7; cursor: progress; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Long unbroken input (filenames, phrases, org names, pasted URLs) ──
   Applied where user text lands in a table cell or flex row that would
   otherwise be stretched past the viewport by a single long token. */
/* `anywhere` also shrinks min-content width, so a table column could collapse
   to a single character and render "Marcus Webb" as Marcu/s/Webb on a phone.
   `break-word` breaks an unbreakable string (a filename, a long email) only
   when it genuinely does not fit, and never offers a person's name as a break
   point when a space is available. */
.qb-break { overflow-wrap: break-word; word-break: normal; min-width: 0; }

/* ── Horizontal scroll affordance for wide tables ── */
.qb-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* ── Motion: honour the user's system preference for everything above ── */
@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #sidebar.is-open { transition: none; }
  .qb-main-content { animation: none; }
  .progress-fill { transition: none; }
  .progress-fill::after { animation: none; }
  .spinner { animation: spin 1.6s linear infinite; }
}

/* ============================================================================
   CANON LAYER — call-intelligence register (Gong / Chorus / Observe.ai bar)
   ----------------------------------------------------------------------------
   Replaces the rounded-card-plus-shadow stack on the report surface. The moves
   that carry it: 6px radius instead of 12, hairlines instead of elevation,
   tabular figures on everything numeric, and speaker colour used as data.
   Prefixed .rp- so it can be rolled onto the other surfaces one at a time.
   ============================================================================ */

:root {
  --c-bg:      #f5f6f8;   /* the page ground — the only one */
  --c-panel:   #ffffff;
  --c-panel-2: #fafbfc;
  --c-line:    #e4e7ec;
  --c-line-2:  #d0d5dd;
  --c-radius:     6px;
  --c-radius-sm:  4px;

  /* Speaker identity is information here, not ornament: the timeline, the
     transcript rail and the talk-ratio all key off the same two hues. */
  --spk-a:      #4338ca;
  --spk-a-soft: #e0e7ff;
  --spk-b:      #0f766e;
  --spk-b-soft: #ccfbf1;

  /* Values the build reuses and DESIGN.md now records, rather than literals
     scattered through component rules. */
  --c-radius-micro: 2px;      /* marks under 8px tall: bars, sparks, markers */
  --c-track:    var(--c-track);      /* meter / timeline groove */
  --c-line-3:   #b8c0cc;      /* control border on hover */
  --nav-idle:   #a5b0c7;      /* sidebar link at rest */
  --nav-hover:  #e6eaf3;      /* sidebar link hovered */
  --nav-mid:    #172554;      /* sidebar gradient midpoint */
  --busy:       #6d28d9;      /* analysing — the one status that is neither */
  --busy-soft:  #f5f3ff;      /* pending-neutral nor a verdict */
  --busy-line:  #ddd6fe;
  --show-1:     #1e2a52;      /* auth panel field */
  --show-2:     #241d52;
}

.rp-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── Panels ── */
.rp-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.rp-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel-2);
  border-radius: var(--c-radius) var(--c-radius) 0 0;
}
.rp-panel-title {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

/* ── Verdict ── */
.rp-verdict {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem; border-radius: var(--c-radius-sm);
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent;
}
.rp-verdict--pass { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rp-verdict--fail { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.rp-verdict--crit { background: #7f1d1d; color: #fff;    border-color: #7f1d1d; }
.rp-verdict-dot { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }

/* ── Transport: the category's defining element ── */
.rp-transport {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  padding: .75rem .875rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.rp-transport-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.rp-play {
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--ink); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.rp-play:hover { background: #1e293b; }
.rp-play svg { width: 1rem; height: 1rem; }

/* ── Skip and speed ──
   Sized to the 44px pointer-target minimum via padding rather than a bigger
   visual box, so the control stays quiet next to the play button while still
   being comfortably hittable on a phone. */
.rp-controls { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.rp-skip {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--c-line); color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.rp-skip::after {                      /* invisible 44px target */
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%);
}
.rp-skip:hover { background: var(--c-bg); color: var(--ink); border-color: var(--c-line-strong, #d0d5dd); }
.rp-skip:active { transform: scale(.94); }
.rp-skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-skip svg { width: 1.125rem; height: 1.125rem; }

.rp-speed {
  flex-shrink: 0; min-width: 2.5rem; height: 1.75rem; padding: 0 .4375rem;
  border-radius: var(--c-radius-sm); border: 1px solid var(--c-line);
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s;
}
.rp-speed:hover { background: var(--c-bg); color: var(--ink); }
.rp-speed:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-speed.is-fast { color: var(--spk-a); border-color: var(--spk-a); }
.rp-time {
  font-size: var(--fs-meta); color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rp-time b { color: var(--ink); font-weight: 600; }

/* ── Timeline ── */
/* role=slider lives on .rp-track, not here: the evidence markers are focusable
   buttons and a slider may not contain focusable children (axe nested-interactive). */
.rp-timeline { position: relative; flex: 1; min-width: 0; cursor: pointer; padding: .75rem 0 .25rem; }
.rp-track {
  position: relative; height: 1.75rem; border-radius: var(--c-radius-sm);
  background: var(--c-track); overflow: hidden;
}
.rp-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-band { position: absolute; top: 0; height: 100%; }
/* Under the speaker bands, not over them: it reports loading, and must never
   compete with the content of the call for attention. */
.rp-buffered {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--c-line); z-index: 0;
}

/* ── Scrub preview ── */
/* `hidden` must win. A display value declared later beats the attribute's own
   `display:none`, which left the preview bubble stuck on screen at 0:00 from
   page load — visible in the first screenshot of this control. */
.rp-bubble[hidden] { display: none; }
.rp-bubble {
  position: absolute; bottom: calc(100% - .5rem); transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: var(--c-radius-sm);
  padding: .1875rem .375rem; font-size: var(--fs-meta); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
  z-index: 6; box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  display: flex; align-items: baseline; gap: .375rem; max-width: 18rem;
}
.rp-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: var(--ink);
}
.rp-bubble-l {
  font-weight: 400; opacity: .8; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 13rem;
}
.rp-timeline.is-scrubbing { cursor: grabbing; }
.rp-timeline.is-scrubbing .rp-playhead { background: var(--spk-a); }
.rp-timeline.is-scrubbing .rp-playhead::after { background: var(--spk-a); transform: scale(1.3); }

/*  Declared after the base `.rp-timeline { flex: 1 }` on purpose: same
    specificity, so the later rule wins, and placing this earlier in the file
    silently did nothing.

    On a phone the controls, clock and speed button consume nearly the whole
    row, leaving the timeline about 90px — narrower than a thumb, and useless
    for scrubbing a 94-minute call. Below this width it takes a row of its own. */
@media (max-width: 36rem) {
  .rp-transport-row { row-gap: .5rem; }
  .rp-controls { order: 1; }
  .rp-time     { order: 2; margin-left: auto; }
  .rp-speed    { order: 3; }
  .rp-timeline { order: 4; flex: 1 1 100%; padding-top: 1rem; }
}
.rp-band--a { background: var(--spk-a); opacity: .78; }
.rp-band--b { background: var(--spk-b); opacity: .78; }
.rp-playhead {
  position: absolute; top: .75rem; bottom: .25rem; width: 2px; margin-left: -1px;
  background: var(--ink); pointer-events: none; z-index: 3;
}
.rp-playhead::after {
  content: ''; position: absolute; top: -3px; left: -3px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--ink);
}

/* Evidence markers sit above the track and are the reason the timeline exists:
   every graded item and auto-fail phrase already carries a timestamp. */
.rp-markers { position: absolute; left: 0; right: 0; top: 0; height: .75rem; }
/* Markers are placed by timestamp so they cannot be spaced apart; each therefore
   carries its own 24px hit area centred on a 7px visual mark. */
.rp-marker {
  position: absolute; top: -7px; width: 24px; height: 24px; margin-left: -12px;
  padding: 0; border: none; background: none; cursor: pointer; z-index: 4;
  display: flex; align-items: flex-end; justify-content: center;
}
.rp-marker::before {
  content: ''; display: block; width: 7px; height: 7px; margin: 0 auto 1px;
  transform: rotate(45deg); border-radius: var(--c-radius-micro);
}
.rp-marker--miss::before { background: #dc2626; }
.rp-marker--crit::before { background: #7f1d1d; }
.rp-marker--ok::before   { background: #94a3b8; }
.rp-marker:hover::before, .rp-marker:focus-visible::before { transform: rotate(45deg) scale(1.45); }
.rp-marker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Marker positions come from timestamps, so on a narrow track they collide:
   two disclosures 30s apart on a 6-minute call sit 18px apart at 390px wide,
   and no target size can fix overlapping targets. Below the split breakpoint
   the markers become indicators. Nothing is lost — every marker's timestamp is
   also a >=24px button in the items table, doing exactly the same seek. */
@media (max-width: 1179.98px) {
  .rp-marker { pointer-events: none; }
} 

.rp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin-top: .5rem; }
.rp-legend-item {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--fs-meta); color: var(--muted);
}
.rp-swatch { width: .625rem; height: .625rem; border-radius: var(--c-radius-micro); flex-shrink: 0; }

/* ── Working column ── */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
@media (min-width: 1180px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .rp-rail { position: sticky; top: 7.5rem; }
}

/* ── Score summary ── */
.rp-score { display: flex; align-items: baseline; gap: .5rem; }
.rp-score-value {
  font-size: var(--fs-display); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.rp-score-of { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-meter { height: 4px; border-radius: 999px; background: var(--c-track); overflow: hidden; margin-top: .5rem; }
.rp-meter-fill { height: 100%; border-radius: 999px; transform-origin: left center; transition: transform .5s ease; }

/* ── Items table ── */
.rp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
/* Inside a scroll container, give the table a floor so narrow screens scroll
   it instead of crushing every column. Without this the scroller never
   engages: width:100% always "fits", however unreadable the result. */
.qb-scroll-x > .rp-table { min-width: 30rem; }
.rp-table th {
  text-align: left; padding: .5rem .875rem;
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  background: var(--c-panel-2); border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.rp-table td { padding: .625rem .875rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-row--miss { background: #fffbfb; }
.rp-row--miss td:first-child { box-shadow: inset 2px 0 0 #dc2626; }

.rp-status { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.rp-status--ok   { color: #047857; }
.rp-status--miss { color: #b91c1c; }
/* Third state: the grader did not return a verdict for this requirement. Not the
   same as "the agent did not say it", and a compliance reviewer must be able to
   tell those apart at a glance. */
.rp-status--unknown { color: var(--warn); }
.rp-row--unknown { background: #fffdf7; }
.rp-row--unknown td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
.rp-status svg { width: .875rem; height: .875rem; }

.rp-ts {
  font-variant-numeric: tabular-nums; font-size: var(--fs-meta); font-weight: 600;
  color: var(--spk-a); background: none; border: none; padding: .25rem .375rem;
  margin: -.25rem -.375rem; border-radius: var(--c-radius-sm); cursor: pointer;
  white-space: nowrap; min-height: 24px;
}
.rp-ts:hover { background: var(--spk-a-soft); }
/* Evidence is the proof for one finding, not a parallel column. Sitting it
   under the requirement gives it a real measure instead of whatever width was
   left over, and puts the claim and its citation in one place. */
.rp-quote { color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }
.rp-evidence {
  margin-top: .375rem;
  padding-left: .625rem;
  border-left: 1px solid var(--c-line-2);
  max-width: 58ch;                 /* ~65-75 characters at this size */
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.55;
}
/* Deliberately NO decorative quote marks. The grading schema returns evidence
   as "a brief quote from transcript IF covered, or a description of what was
   said/not said" — the prompt even specifies literal values like
   "Not mentioned — optional disclosure." Wrapping that in quotes would assert
   the agent said it. The rule and indent mark it as evidence without claiming
   it is verbatim; where the model does quote, its own marks show. */
.rp-req { font-weight: 500; color: var(--ink-2); max-width: 62ch; }
.rp-violation { color: var(--muted); font-size: var(--fs-meta); max-width: 42ch; }

/* ── Transcript rail ── */
.rp-transcript { max-height: min(62vh, 40rem); overflow-y: auto; padding: .25rem 0; }
.rp-line {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: .625rem;
  padding: .3125rem .875rem; border-left: 2px solid transparent;
  font-size: var(--fs-meta); line-height: 1.5;
}
.rp-line:hover { background: var(--c-panel-2); }
.rp-line.is-playing { background: #fffbeb; border-left-color: #d97706; }
.rp-line-ts {
  font-variant-numeric: tabular-nums; color: var(--faint); background: none;
  border: none; padding: .1875rem 0; cursor: pointer; text-align: left;
  font-size: var(--fs-meta); min-height: 24px;
}
.rp-line-ts:hover { color: var(--ink); text-decoration: underline; }
.rp-spk { font-weight: 700; }
.rp-spk--a { color: var(--spk-a); }
.rp-spk--b { color: var(--spk-b); }
.rp-line-text { color: var(--ink-2); }

/* ── Actions ── */
.rp-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rp-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .75rem; border-radius: var(--c-radius-sm);
  font-size: var(--fs-meta); font-weight: 600; text-decoration: none;
  background: var(--c-panel); color: var(--ink-2);
  border: 1px solid var(--c-line-2); cursor: pointer; min-height: 32px;
  transition: background .12s, border-color .12s;
}
.rp-btn:hover { background: var(--c-panel-2); border-color: var(--c-line-3); }
.rp-btn svg { width: .875rem; height: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .rp-meter-fill { transition: none; }
  .rp-marker:hover::before, .rp-marker:focus-visible::before { transform: rotate(45deg); }
}

/* ── Canon: filter toolbar ── */
.rp-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .625rem;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--c-radius); padding: .75rem .875rem;
}
.rp-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.rp-field-label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--faint);
  letter-spacing: .02em;
}
.rp-select, .rp-input {
  height: 32px; padding: 0 .5rem;
  font-size: var(--fs-meta); color: var(--ink-2);
  background: var(--c-panel); border: 1px solid var(--c-line-2);
  border-radius: var(--c-radius-sm);
}
.rp-select { padding-right: 1.5rem; }
.rp-select:focus, .rp-input:focus {
  border-color: var(--spk-a) !important;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, .15);
  outline: none;
}

/* ── Canon: status + verdict indicators ──
   Restyled from the pill-and-shadow badges into the flatter register. The class
   names are unchanged because the history poller writes them at runtime.
   Colour pairs are the AA-verified ones; only the shape changed. */
.status-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1875rem .5rem; border-radius: var(--c-radius-sm);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.status-pending      { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-transcribing { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.status-analyzing    { background: var(--busy-soft); color: var(--busy); border-color: var(--busy-line); }
.status-complete     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-error        { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.rp-verdict--sm { padding: .1875rem .5rem; font-size: var(--fs-meta); font-weight: 700; }
.rp-verdict--sm .rp-verdict-dot { width: .375rem; height: .375rem; }

/* ── Canon: data rows ── */
.rp-table--rows tbody tr { transition: background .1s; }
.rp-table--rows tbody tr:hover { background: var(--c-panel-2); }
.rp-table--rows tbody tr.is-clickable { cursor: pointer; }
.rp-table--rows td { padding: .5rem .875rem; }
.rp-link {
  color: var(--spk-a); font-weight: 500; text-decoration: none;
}
.rp-link:hover { text-decoration: underline; }
.rp-file { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Canon: summary strip ── */
.rp-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: var(--fs-meta); color: var(--muted);
  padding: 0 .125rem .5rem;
}
.rp-summary-count { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; }
.rp-dot { width: .4375rem; height: .4375rem; border-radius: 999px; flex-shrink: 0; }

/* ── Canon: empty state ── */
.rp-empty { padding: 4rem 1.5rem; text-align: center; }
.rp-empty-icon {
  width: 2.75rem; height: 2.75rem; margin: 0 auto .875rem;
  border-radius: var(--c-radius); background: var(--c-panel-2);
  border: 1px solid var(--c-line); color: var(--faint);
  display: flex; align-items: center; justify-content: center;
}
.rp-empty-icon svg { width: 1.25rem; height: 1.25rem; }

/* ── Canon: toast ── */
.rp-toast {
  position: fixed; left: 50%; top: 1rem; transform: translateX(-50%);
  display: none; align-items: center; gap: 1rem; z-index: 9999;
  background: var(--ink); color: #fff;
  padding: .625rem .875rem; border-radius: var(--c-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  font-size: var(--fs-body); font-weight: 500; white-space: nowrap;
}
.rp-toast a { color: #fff; font-weight: 600; text-decoration: underline; }
.rp-toast button {
  background: none; border: none; color: #fff; opacity: .65;
  cursor: pointer; padding: .25rem; line-height: 1; min-width: 24px; min-height: 24px;
}
.rp-toast button:hover { opacity: 1; }

/* ── Canon: metric strip ──
   One panel divided by hairlines rather than four floating cards with coloured
   top borders. Denser, and it reads as instrumentation instead of decoration. */
.rp-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--c-radius);
  overflow: hidden;
}
@media (min-width: 900px) { .rp-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-metric { padding: .875rem 1rem; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.rp-metric:nth-child(2n) { border-right: none; }
.rp-metric:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 900px) {
  .rp-metric { border-bottom: none; }
  .rp-metric:nth-child(2n) { border-right: 1px solid var(--c-line); }
  .rp-metric:last-child { border-right: none; }
}
.rp-metric-label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--faint);
  letter-spacing: .03em; text-transform: uppercase;
}
.rp-metric-value {
  font-size: var(--fs-metric); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .25rem;
}
.rp-metric-note { font-size: var(--fs-meta); color: var(--muted); margin-top: .125rem; }

/* ── Canon: activity rows ── */
.rp-activity { display: flex; align-items: center; gap: .75rem; padding: .5rem .875rem; border-bottom: 1px solid var(--c-line); }
.rp-activity:last-child { border-bottom: none; }
.rp-activity:hover { background: var(--c-panel-2); }
.rp-activity-main { min-width: 0; flex: 1; }
.rp-activity-name {
  font-size: var(--fs-body); font-weight: 500; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-activity-meta { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Canon: breakdown bars ── */
.rp-bar-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; align-items: baseline; }
.rp-bar-track { grid-column: 1 / -1; height: 6px; border-radius: var(--c-radius-micro); background: var(--c-track); overflow: hidden; }
.rp-bar-fill { height: 100%; border-radius: var(--c-radius-micro); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .rp-bar-fill { transition: none; } }

/* ── Canon: step cards for first-run ── */
.rp-step { border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: .875rem; background: var(--c-panel); }
.rp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; border-radius: 999px;
  background: var(--spk-a); color: #fff;
  font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Canon: dashboard columns ──
   The panels in a row are grid items, so they already stretch to equal height.
   Making each an internal flex column lets its footer action sit on the panel's
   bottom edge instead of floating wherever the content happened to end — which
   is what left the "View call history" button visibly out of line with its
   taller neighbour. */
/* No height:100% — that made every panel in a row match the tallest and
   left dead space under short content. Panels size to what they hold. */
.rp-col { display: flex; flex-direction: column; }
.rp-col-body { flex: 1; }
.rp-col-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--c-line); }

/* ── Canon: attention queue ── */
.rp-queue-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .875rem; border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}
.rp-queue-item:last-child { border-bottom: none; }
.rp-queue-item:hover { background: #fffbfb; }

/* ── Canon: agent performance ── */
.rp-agent-bar { height: 4px; border-radius: var(--c-radius-micro); background: var(--c-track); overflow: hidden; margin-top: .25rem; }
.rp-agent-fill { height: 100%; border-radius: var(--c-radius-micro); transform-origin: left center; transform: scaleX(var(--v, 0)); }

/* ── Canon: volume sparkline ──
   Real counts per day, bars scaled against the period's own peak. */
.rp-spark { display: flex; align-items: flex-end; gap: 2px; height: 2.5rem; }
.rp-spark-bar {
  flex: 1; min-width: 0; border-radius: var(--c-radius-micro) var(--c-radius-micro) 0 0;
  background: var(--spk-a); opacity: .28;
  min-height: 2px;
}
.rp-spark-bar[data-today="1"] { opacity: .85; }
.rp-spark-bar:hover { opacity: .7; }

/* ── Canon: inline editors ──
   The checklist keeps its plain add/edit/delete forms — a drag-and-drop builder
   is an explicit v1 non-goal — but they get a real surface instead of naked
   inputs floating under a <summary>. */
.rp-inline {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem;
  margin-top: .625rem; padding: .75rem;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.rp-disclosure {
  font-size: var(--fs-meta); font-weight: 600; color: var(--spk-a);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem 0; min-height: 24px;
}
.rp-disclosure::-webkit-details-marker { display: none; }
.rp-disclosure::before { content: '+'; font-weight: 700; }
details[open] > .rp-disclosure::before { content: '\2212'; }
.rp-disclosure:hover { text-decoration: underline; }

/* ── Canon: guidance / description, same citation treatment as report evidence ── */
.rp-note {
  margin-top: .3125rem; padding-left: .625rem;
  border-left: 1px solid var(--c-line-2);
  max-width: 58ch; color: var(--muted);
  font-size: var(--fs-meta); line-height: 1.55;
}

/* Native checkboxes render at 13px, under the 24px target minimum. */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 4px; accent-color: var(--spk-a); cursor: pointer;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  min-height: 24px; display: inline-flex; align-items: center;
}

/* ── Canon: required / optional ── */
.rp-tag {
  display: inline-block; padding: .0625rem .375rem; border-radius: var(--c-radius-micro);
  font-size: var(--fs-meta); font-weight: 600; border: 1px solid;
}
.rp-tag--req { background: var(--spk-a-soft); color: var(--spk-a); border-color: #c7d2fe; }
.rp-tag--opt { background: var(--c-panel-2); color: var(--faint); border-color: var(--c-line-2); }

/* ── Canon: code / phrase token ── */
.rp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-meta); background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-radius: var(--c-radius-sm);
  padding: .125rem .375rem; color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* ── Canon: destructive text action ── */
.rp-danger {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-meta); font-weight: 600; color: #b91c1c;
  padding: .25rem .375rem; margin: -.25rem -.375rem;
  border-radius: var(--c-radius-sm); min-height: 24px;
}
.rp-danger:hover { background: #fef2f2; color: #7f1d1d; }

/* ── Canon: flash messages ── */
.rp-flash {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .625rem .875rem; border-radius: var(--c-radius);
  border: 1px solid; font-size: var(--fs-body); font-weight: 500;
}
.rp-flash--ok  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.rp-flash--err { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ── Canon: upload ── */
.rp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.25rem 1.25rem; text-align: center;
  border: 1px dashed var(--c-line-2); border-radius: var(--c-radius);
  background: var(--c-panel-2); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rp-drop:hover { border-color: var(--spk-a); background: var(--spk-a-soft); }
.rp-drop:focus-within {
  border-color: var(--spk-a); background: var(--spk-a-soft);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, .18);
}
.rp-drop.is-armed { border-style: solid; border-color: var(--spk-a); background: var(--spk-a-soft); }
.rp-drop.is-invalid { border-color: #dc2626; background: #fef2f2; }
.rp-drop-icon { color: var(--faint); }
.rp-drop-icon svg { width: 1.75rem; height: 1.75rem; }

/* Pipeline: what happens after the button, so a first upload is not a mystery. */
.rp-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rp-pipe-step {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--fs-meta); color: var(--muted);
}
.rp-pipe-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; border-radius: 999px;
  background: var(--c-panel-2); border: 1px solid var(--c-line-2);
  font-size: var(--fs-meta); font-weight: 700; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rp-pipe-arrow { color: var(--decor); }

/* ── Canon: auth ──
   Full-bleed split. The left panel shows the product's own artifact rather than
   claim bullets — a compact, clearly-labelled sample of a graded call, built
   from the same components the real report uses. */
.rp-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 1024px) { .rp-auth { grid-template-columns: 1.05fr 1fr; } }

.rp-auth-show {
  display: none; position: relative; overflow: hidden;
  padding: 3rem; align-content: center;
  background: #0f172a;
  background-image:
    radial-gradient(120% 90% at 12% 0%, var(--show-1) 0%, transparent 55%),
    radial-gradient(90% 80% at 90% 100%, var(--show-2) 0%, transparent 60%);
}
@media (min-width: 1024px) { .rp-auth-show { display: grid; } }

.rp-auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--c-panel); }
.rp-auth-inner { width: 100%; max-width: 24rem; }

/* Sample artifact */
.rp-demo {
  background: var(--c-panel); border-radius: var(--c-radius);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px -12px rgba(2, 6, 23, .5);
  overflow: hidden; max-width: 30rem;
}
.rp-demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .625rem .75rem; border-bottom: 1px solid var(--c-line); background: var(--c-panel-2);
}
.rp-demo-track { position: relative; height: 1.25rem; border-radius: var(--c-radius-micro); background: var(--c-track); overflow: hidden; margin: .75rem; }
.rp-demo-band { position: absolute; top: 0; height: 100%; }
.rp-demo-row { display: flex; align-items: center; gap: .5rem; padding: .4375rem .75rem; border-top: 1px solid var(--c-line); font-size: var(--fs-meta); }

/* ═══════════════════════════════════════════════════════════════════════
   Marketing pages
   ═══════════════════════════════════════════════════════════════════════
   The app's canon is instrumentation: dense, hairline-ruled, 14px body,
   built for someone reading a hundred rows. A landing page is read once, at
   arm's length, by someone deciding whether to care — so the type scale
   steps up and the rhythm opens out.

   What does NOT change: the palette, the radii, the hairline-not-shadow
   rule. A prospect who signs up should recognise the product they were
   shown, and that recognition is worth more than a louder page. */

.mk-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.mk-narrow { max-width: 42rem; }
.mk-center { text-align: center; }

/* ── Header ── */
.mk-nav {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel);
  position: sticky; top: 0; z-index: 30;
}
.mk-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 3.75rem;
}
.mk-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--mk-fs-lede); font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.mk-brand--sm { font-size: var(--fs-body); }
.mk-brand-mark {
  width: .625rem; height: .625rem; border-radius: var(--c-radius-micro);
  background: var(--spk-a); flex-shrink: 0;
}
.mk-nav-links { display: flex; align-items: center; gap: 1.25rem; }
.mk-nav-links a {
  font-size: var(--fs-body); font-weight: 500; color: var(--muted);
  text-decoration: none;
}
.mk-nav-links a:hover { color: var(--ink); }
.mk-nav-cta { color: #fff !important; }
@media (max-width: 560px) {
  .mk-nav-links { gap: .875rem; }
  .mk-nav-links a:not(.mk-nav-cta) { display: none; }
}

/* ── Type scale, one step up from the app's ── */
.mk-eyebrow {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--spk-a); margin: 0 0 1rem;
}
.mk-h1 {
  font-size: var(--mk-fs-h1); line-height: 1.06;
  letter-spacing: -.033em; font-weight: 750; color: var(--ink);
  margin: 0 0 1.25rem; max-width: 20ch; text-wrap: balance;
}
.mk-h1--sm { font-size: var(--mk-fs-h1-sm); max-width: 24ch; }
.mk-h2 {
  font-size: var(--mk-fs-h2); line-height: 1.15;
  letter-spacing: -.022em; font-weight: 700; color: var(--ink);
  margin: 0 0 1rem; text-wrap: balance;
}
.mk-lede {
  font-size: var(--mk-fs-lede); line-height: 1.62; color: var(--muted);
  margin: 0 0 1.75rem; max-width: 46rem; text-wrap: pretty;
}
.mk-body {
  font-size: var(--mk-fs-body); line-height: 1.68; color: var(--muted);
  margin: 0 0 1rem; text-wrap: pretty;
}

/* ── Sections ── */
/* The section that follows brings its own top padding, so the hero's bottom
   is deliberately small — stacking both left a dead band in the same colour. */
.mk-hero { padding: 4.5rem 0 1rem; }
.mk-hero--short { padding: 3.25rem 0 .5rem; }
.mk-section { padding: 3.75rem 0; }
.mk-section--alt {
  background: var(--c-panel);
  border-block: 1px solid var(--c-line);
}
.mk-close { padding: 4rem 0 4.5rem; border-top: 1px solid var(--c-line); }

.mk-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.mk-cta { padding: .6875rem 1.375rem; font-size: var(--fs-body); }
.mk-fineprint { font-size: var(--fs-meta); color: var(--faint); margin: 1rem 0 0; }

/* ── Steps. Numbered because this genuinely is a sequence. ── */
.mk-steps {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.mk-step {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--c-radius); padding: 1.25rem;
}
.mk-section--alt .mk-step { background: var(--c-panel-2); }
.mk-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: var(--c-radius-sm);
  background: var(--spk-a-soft); color: var(--spk-a);
  font-size: var(--fs-meta); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-bottom: .75rem;
}
.mk-step-h {
  font-size: var(--fs-title); font-weight: 650; color: var(--ink);
  margin: 0 0 .375rem; letter-spacing: -.012em;
}
.mk-step-p { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); margin: 0; }

/* ── Feature grid ── */
.mk-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.mk-card {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--c-radius); padding: 1.25rem;
}
.mk-card-h {
  font-size: var(--fs-title); font-weight: 650; color: var(--ink);
  margin: 0 0 .5rem; letter-spacing: -.012em;
}
.mk-card-p { font-size: var(--fs-body); line-height: 1.62; color: var(--muted); margin: 0; }

/* ── Plans ── */
/* Explicit column counts, not auto-fit. With four plans, auto-fit at a 16rem
   minimum wrapped 3+1 and stranded the featured plan alone on a second row —
   the worst possible card to orphan. */
.mk-plans {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 620px)  { .mk-plans { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .mk-plans { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; } }
.mk-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--c-radius); padding: 1.5rem 1.125rem 1.125rem;
}
.mk-section--alt .mk-plan { background: var(--c-panel-2); }
.mk-plan--featured { border-color: var(--spk-a); box-shadow: 0 0 0 1px var(--spk-a); }
.mk-plan-tag {
  position: absolute; top: -.6875rem; left: 1.25rem;
  background: var(--spk-a); color: #fff;
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .1875rem .5rem;
  border-radius: var(--c-radius-sm);
}
.mk-plan-name {
  font-size: var(--fs-title); font-weight: 650; color: var(--ink); margin: 0 0 .375rem;
}
.mk-plan-price {
  font-size: var(--mk-fs-price); font-weight: 750; letter-spacing: -.028em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0 0 .5rem;
}
.mk-plan-per { font-size: var(--fs-body); font-weight: 400; color: var(--muted); margin-left: .25rem; }
.mk-plan-blurb { font-size: var(--fs-body); color: var(--muted); margin: 0 0 1rem; }
.mk-plan-features { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; }
.mk-plan-features li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--fs-body); color: var(--muted); margin-bottom: .5rem;
}
.mk-plan-features svg { width: .875rem; height: .875rem; margin-top: .25rem; flex-shrink: 0; color: var(--faint); }
.mk-plan-cta { width: 100%; justify-content: center; margin-top: auto; }
.mk-plans-note {
  font-size: var(--fs-body); color: var(--muted); margin: 1.5rem auto 0;
  max-width: 44rem; text-align: center; text-wrap: pretty;
}
.mk-plans-note a { color: var(--spk-a); }

/* ── FAQ ── */
.mk-faq {
  border-bottom: 1px solid var(--c-line);
  padding: .875rem 0;
}
.mk-faq summary {
  cursor: pointer; font-size: var(--mk-fs-body); font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: "+"; color: var(--faint); font-weight: 400; font-size: var(--fs-title);
  line-height: 1; flex-shrink: 0;
}
.mk-faq[open] summary::after { content: "−"; }
.mk-faq summary:focus-visible { outline: 2px solid var(--spk-a); outline-offset: 3px; border-radius: 2px; }
.mk-faq p {
  font-size: var(--mk-fs-body); line-height: 1.68; color: var(--muted);
  margin: .75rem 0 0; max-width: 46rem; text-wrap: pretty;
}

/* ── Footer ── */
.mk-footer { border-top: 1px solid var(--c-line); padding: 1.75rem 0; background: var(--c-panel); }
.mk-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.mk-footer-links { display: flex; gap: 1.25rem; }
.mk-footer-links a { font-size: var(--fs-body); color: var(--muted); text-decoration: none; }
.mk-footer-links a:hover { color: var(--ink); }

/* ── Sidebar plan & usage meter ──
   Occupies the band the nav previously left empty. Deliberately quiet: it is
   ambient information, not a call to action, until it turns amber. */
.qb-meter {
  display: block; margin: 0 .75rem .5rem; padding: .625rem .75rem;
  border-radius: var(--c-radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  text-decoration: none; transition: background .15s, border-color .15s;
}
.qb-meter:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.qb-meter:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.qb-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.qb-meter-plan {
  font-size: var(--fs-meta); font-weight: 600; color: #c7d2fe;
  letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qb-meter-pct {
  font-size: var(--fs-meta); font-weight: 700; color: #e0e7ff;
  font-variant-numeric: tabular-nums;
}
.qb-meter-pct.is-warn { color: #fcd34d; }
.qb-meter-pct.is-over { color: #fca5a5; }
.qb-meter-track {
  display: block; height: 4px; margin: .4375rem 0 .375rem;
  border-radius: var(--c-radius-micro);
  background: rgba(255,255,255,.14); overflow: hidden;
}
.qb-meter-fill {
  display: block; height: 100%; border-radius: var(--c-radius-micro);
  background: #818cf8; transform-origin: left center;
  transform: scaleX(var(--v, 0)); transition: transform .4s ease;
}
.qb-meter-fill.is-warn { background: #fcd34d; }
.qb-meter-fill.is-over { background: #f87171; }
.qb-meter-note {
  display: block; font-size: var(--fs-meta); color: #a5b4fc;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .qb-meter-fill { transition: none; } }

/* ── Marketing: hero layout with the product beside the pitch ──
   The report preview is the most persuasive thing on the page, so it gets
   equal weight with the headline rather than being buried below the fold.
   Stacks on narrow screens with the copy first — the pitch still has to land
   before the artifact makes sense. */
.mk-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) {
  .mk-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; }
  .mk-hero { padding-bottom: 2.5rem; }
}
.mk-hero-copy .mk-h1 { max-width: 16ch; }
.mk-hero-copy .mk-lede { font-size: var(--fs-body); line-height: 1.65; }
@media (min-width: 940px) { .mk-hero-copy .mk-lede { font-size: var(--mk-fs-lede); } }
.mk-shot-cap {
  font-size: var(--fs-meta); color: var(--faint); text-align: center;
  margin: .75rem 0 0;
}

/* ── The report preview ──
   Real rp-* classes inside; this is only the frame around them. */
.mk-shot {
  margin: 0; background: var(--c-panel);
  border: 1px solid var(--c-line-2); border-radius: var(--c-radius);
  overflow: hidden;
  /* The one earned shadow on this page: it lifts the artifact off the ground
     so it reads as a thing rather than another panel. */
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
}
.mk-shot-bar {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .875rem; background: var(--c-panel-2);
  border-bottom: 1px solid var(--c-line);
}
.mk-shot-dot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--decor); flex-shrink: 0;
}
.mk-shot-file {
  font-size: var(--fs-meta); color: var(--muted);
  font-variant-numeric: tabular-nums; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-shot-body { padding: .875rem; }
.mk-shot-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--c-line);
}
.mk-shot-agent { font-size: var(--fs-title); font-weight: 650; color: var(--ink); }
.mk-shot-meta { font-size: var(--fs-meta); color: var(--muted); margin-top: .125rem; }
.mk-shot-score-n {
  font-size: var(--fs-metric); font-weight: 700; color: #b45309;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.mk-shot-items { list-style: none; padding: 0; margin: 0; }
.mk-shot-item {
  display: grid; grid-template-columns: 5.25rem minmax(0,1fr) auto;
  gap: .625rem; align-items: start;
  padding: .75rem 0; border-bottom: 1px solid var(--c-line);
}
.mk-shot-item:last-child { border-bottom: none; padding-bottom: 0; }
.mk-shot-item--miss { background: #fffbfb; margin-inline: -.875rem; padding-inline: .875rem;
                      box-shadow: inset 2px 0 0 #dc2626; }
.mk-shot-req { font-size: var(--fs-body); font-weight: 500; color: var(--ink-2); }
.mk-shot-note { font-size: var(--fs-meta); color: var(--muted); margin-top: .25rem; font-style: italic; }
.mk-shot-dash { font-size: var(--fs-meta); color: var(--decor); }
@media (max-width: 420px) {
  .mk-shot-item { grid-template-columns: 1fr auto; }
  .mk-shot-item .rp-status { grid-column: 1 / -1; }
}

/* ── Deliverables ── */
.mk-deliverables {
  display: grid; gap: 1.25rem; margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.mk-deliv { display: flex; flex-direction: column; }
.mk-deliv-visual {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--c-radius); padding: .875rem;
  min-height: 8.5rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
}
.mk-deliv-h {
  font-size: var(--fs-title); font-weight: 650; color: var(--ink);
  margin: 0 0 .375rem; letter-spacing: -.012em;
}
.mk-deliv-p { font-size: var(--fs-body); line-height: 1.62; color: var(--muted); margin: 0; }

.mk-mini-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mk-mini-ts { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-mini-quote {
  font-size: var(--fs-body); color: var(--ink-2); margin: 0;
  border-left: 2px solid #fecaca; padding-left: .625rem; line-height: 1.5;
}
.mk-mini-note { font-size: var(--fs-meta); color: #b91c1c; margin: 0; font-weight: 600; }
.mk-mini-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-size: var(--fs-meta); color: var(--muted);
}
.mk-mini-bad  { color: #b91c1c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-mini-warn { color: #b45309; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-mini-bar {
  height: 4px; border-radius: var(--c-radius-micro);
  background: var(--c-track); overflow: hidden; margin-bottom: .25rem;
}
.mk-mini-bar span {
  display: block; height: 100%; background: #b91c1c;
  transform-origin: left center; transform: scaleX(var(--v, 0));
}

.mk-deliv-visual--doc { position: relative; gap: .4375rem; }
.mk-doc-line { height: 6px; border-radius: 2px; background: var(--c-line-2); width: 100%; }
.mk-doc-line--title { width: 45%; height: 9px; background: var(--decor); margin-bottom: .25rem; }
.mk-doc-line--gap { margin-top: .5rem; }
.mk-doc-tag {
  position: absolute; right: .75rem; bottom: .625rem;
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .06em;
  color: var(--faint); background: var(--c-panel);
  border: 1px solid var(--c-line-2); border-radius: var(--c-radius-sm);
  padding: .125rem .375rem;
}

/* Anchor targets sit under a sticky header. */
[id="how"], [id="proof"], [id="pricing"] { scroll-margin-top: 4.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Logo mark ──
   Inherits colour, so one file serves the indigo marketing header and the
   white-on-indigo sidebar. flex-shrink stops it collapsing next to a long
   org name in the sidebar. */
.qb-logo { flex-shrink: 0; display: block; color: var(--spk-a); }
/* Dark chrome — sidebar, mobile top bar — takes the surrounding text colour. */
.qb-logo--inherit { color: inherit; }

/* ── Checkbox ──
   Only used in the review queue's bulk-confirm. 18px rather than the browser
   default so it clears the WCAG 2.2 target size in a dense table row. */
.rp-check {
  width: 1.125rem; height: 1.125rem; flex-shrink: 0;
  accent-color: var(--spk-a); cursor: pointer; margin: 0;
}
.rp-check:focus-visible { outline: 2px solid var(--spk-a); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Product walkthrough (/tour)
   The report itself is styled by the rp-* canon above — this is only the
   narration layer over it.
   ══════════════════════════════════════════════════════════════════════════ */
.tour-frame { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.tour-intro { padding: 3rem 0 1.75rem; max-width: 42rem; }
.tour-eyebrow {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--spk-a); margin: 0 0 .625rem;
}
.tour-h1 {
  font-size: var(--mk-fs-h1-sm); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 .75rem; text-wrap: balance;
}
.tour-lede { color: var(--muted); font-size: var(--mk-fs-lede); line-height: 1.6; margin: 0; }
.tour-stage { padding-bottom: 5rem; }

/* The spotlight is a ring plus an outward shadow rather than a full-page mask:
   a mask would dim the report, and the report is the thing being demonstrated. */
.tour-spot {
  position: absolute; border-radius: var(--radius); pointer-events: none; z-index: 60;
  border: 2px solid var(--spk-a);
  box-shadow: 0 0 0 4px rgba(67, 56, 202, .16), 0 8px 28px rgba(15, 23, 42, .10);
  /* Only transform and opacity are animated. Transitioning top/left/width/
     height re-runs layout on every frame of the move; the ring is positioned at
     the origin and translated instead, so the browser can composite it. Size is
     set without a transition — it snaps while the position glides, which reads
     as deliberate rather than as a stretch. */
  top: 0; left: 0;
  transition: transform .22s ease, opacity .2s ease;
  will-change: transform;
}
.tour-card {
  position: absolute; z-index: 61; width: 22.5rem; max-width: calc(100vw - 2rem);
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1rem 1.125rem 0.875rem;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
}
.tour-narrator {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem;
  font-size: var(--fs-meta); font-weight: 600; color: #c7d2fe;
}
.tour-avatar {
  width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--spk-a);
  color: #fff; display: grid; place-items: center;
  font-size: var(--fs-meta); font-weight: 800; line-height: 1;
}
.tour-title { font-size: var(--mk-fs-body); font-weight: 700; margin: 0 0 .375rem; line-height: 1.3; }
.tour-body { font-size: .875rem; line-height: 1.55; color: #e2e8f0; margin: 0; }
/* Same trap as .rp-bubble, made twice in one day: a `display` declared here
   beats the `hidden` attribute's own `display:none`, so the closing call to
   action showed on every step. */
.tour-cta[hidden], .tour-ui[hidden] { display: none; }
.tour-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .875rem; }
.tour-secondary { color: #c7d2fe; font-size: var(--fs-meta); font-weight: 600; }
.tour-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .875rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12);
}
.tour-count { font-size: var(--fs-meta); color: #94a3b8; font-variant-numeric: tabular-nums; }
.tour-nav { display: flex; gap: .5rem; }
.tour-btn {
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff;
  border-radius: var(--c-radius-sm); padding: .3125rem .75rem;
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.tour-btn:hover { background: rgba(255,255,255,.10); }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-btn--go { background: var(--spk-a); border-color: var(--spk-a); }
.tour-btn--go:hover { background: #4f46e5; }
.tour-btn:focus-visible, .tour-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour-close {
  position: absolute; top: .5rem; right: .625rem; background: none; border: none;
  color: #94a3b8; font-size: 1.125rem; line-height: 1; cursor: pointer; padding: .25rem;
}
.tour-close:hover { color: #fff; }
.tour-static { max-width: 42rem; line-height: 1.6; color: var(--muted); }
.tour-static li { margin-bottom: .75rem; }
.tour-static b { color: var(--ink); display: block; }

@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* ══ Upload wizard ══════════════════════════════════════════════════════════
   Step one is a single target and nothing else. Everything the old form asked
   for up front is now asked after the files are in hand — and only for what
   the filenames could not answer. */
.up-step { animation: up-in .18s ease both; }
@keyframes up-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .up-step { animation: none; } }

.up-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 16rem; padding: 2rem 1.5rem; cursor: pointer;
  border: 2px dashed var(--c-line-strong, #d0d5dd); border-radius: var(--radius);
  background: var(--c-panel); color: var(--muted); text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.up-drop:hover, .up-drop:focus-within, .up-drop.is-over {
  border-color: var(--spk-a); background: var(--spk-a-soft, #eef2ff); color: var(--ink);
}
.up-drop svg { width: 2.25rem; height: 2.25rem; color: var(--spk-a); }
.up-drop-title { font-size: var(--fs-title); font-weight: 700; color: var(--ink); }
.up-drop-hint { font-size: var(--fs-body); color: var(--faint); }
.up-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

.up-count {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--spk-a); margin: 0 0 .5rem;
}
.up-q { font-size: var(--fs-title); font-weight: 700; color: var(--ink); margin: 0 0 .25rem; }
.up-lede { font-size: var(--fs-body); color: var(--muted); margin: 0 0 1rem; max-width: 42rem; }

.up-choices { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: .875rem; }
@media (min-width: 40rem) { .up-choices { grid-template-columns: 1fr 1fr; } }
.up-choice {
  text-align: left; padding: 1rem; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--c-line); background: var(--c-panel);
  display: flex; flex-direction: column; gap: .25rem;
  transition: border-color .15s, box-shadow .15s;
}
.up-choice:hover { border-color: var(--spk-a); box-shadow: var(--shadow-sm); }
.up-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.up-choice-t { font-weight: 700; color: var(--ink); font-size: var(--fs-body); }
.up-choice-d { font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }

.up-row {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel); padding: .875rem 1rem; margin-bottom: .625rem;
}
.up-row-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .625rem; }
.up-row-name {
  font-weight: 600; color: var(--ink); font-size: var(--fs-body);
  overflow-wrap: anywhere;
}
.up-row-known { font-size: var(--fs-meta); color: var(--pass, #059669); }
.up-row-known--none { color: var(--faint); }
.up-row-fields { display: grid; gap: .625rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .up-row-fields { grid-template-columns: repeat(5, 1fr); } }