/*
  Merchant Rate Auditor — Customer Design System (UX-1)
  ------------------------------------------------------
  Shared, framework-free design foundation for every customer-facing page
  (login.html, index.html, statement-review.html). Pure CSS — no build
  step, no JS framework, matching the project's existing architecture.

  This file is presentation-only. It defines no IDs, no JavaScript hooks,
  and does not know about any specific page's markup contracts — those
  are documented and preserved in the pages themselves (see UX-0 audit).
  Class names below are new, additive, and namespaced loosely (mra-*)
  where there was any risk of colliding with an existing functional class
  (e.g. .panel, .btn, .status-text already carry JS/structural meaning in
  the existing pages and are restyled here by their EXISTING names so no
  markup has to change just to pick up the new look).
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  color-scheme: light;

  /* Surfaces — warm off-white app background, clean white content */
  --bg-app: #F7F6F2;
  --bg-app-alt: #F1EFE9;
  --surface: #FFFFFF;
  --surface-alt: #FAF9F6;
  --surface-sunken: #F3F2EE;

  /* Borders */
  --border: #E4E1D8;
  --border-strong: #D6D2C5;
  --border-soft: #EDEAE2;

  /* Text — deep navy/charcoal, never pure black */
  --ink: #161F2E;
  --ink-soft: #3E4A5C;
  --muted: #667085;
  /* Visual-readability-test fix (UX-1): the original #8A93A3 only cleared
     3.10:1 against --surface (white) — below the ~4.5:1 WCAG normal-text
     guideline these small metadata/label tiers actually need, since they
     display real information (e.g. "PROCESSOR"), not decoration.
     #6C7687 clears ~4.59:1 against white while staying lighter (less
     emphasized) than --muted, preserving the five-tier hierarchy. */
  --dim: #6C7687;
  --disabled: #B4BAC6;

  /* On the dark sidebar only */
  --sidebar-bg: #131C29;
  --sidebar-bg-active: #1C2838;
  --sidebar-text: #C7CEDA;
  --sidebar-text-active: #FFFFFF;
  --sidebar-text-dim: #6E7A8C;
  --sidebar-border: #24304480;

  /* Brand / accent — UX-1.1 vibrancy pass: the original #1E3A5F/#16293F
     navy read as dull/washed-out rather than "premium financial SaaS."
     A confident, modern blue-indigo carries the same restraint (still a
     single, deliberate brand hue — not a rainbow) with real energy for
     primary actions, the brand mark, focus rings, and links. Contrast
     verified: #2C4FE0 vs white text 6.36:1, #1F3AA8 vs white 9.42:1. */
  --brand: #2C4FE0;
  --brand-strong: #1F3AA8;
  --brand-tint: #E7ECFC;
  --accent: #2C4FE0;

  /* Premium visual-identity pass: a warm gold "signature" accent, added
     for the dark sidebar shell only (brand mark + selected-nav indicator
     below) — see the exact two rules that consume it. Deliberately NOT
     used to recolor .btn-primary or any functional/content-area element:
     doing so would either fail contrast as a light-on-white text/button
     color or sit too close to --amber (Estimated Opportunity) once made
     AA-safe, risking a semantic collision between "primary action" and
     "unverified dollar amount." --brand stays the one primary-action
     color across the authenticated product, unchanged, so every existing
     tested contrast/behavior is preserved. New tokens only — nothing
     existing is overridden by adding these. */
  --gold: #E8B84B;
  --gold-strong: #D6A233;
  --gold-ink: #1B1400;

  /* Semantic — financial meaning, not decoration */
  /* Visual-readability-test fix (UX-1): #9A6B18 only cleared 4.21:1
     against --amber-bg — just under the ~4.5:1 WCAG guideline for the
     "Needs Your Review" badge's own text-on-tint contrast. #8F6414
     clears ~4.72:1 against --amber-bg (and ~5.25:1 against plain white,
     where the same token is also used directly for Estimated
     Opportunity dollar figures). */
  --amber: #8F6414;
  --amber-bg: #FBF2E1;
  --amber-border: #E7C784;
  --green: #1E6B45;
  --green-bg: #E9F5EE;
  --green-border: #A9D9C0;
  --red: #B3402E;
  --red-bg: #FBEBE8;
  --red-border: #E7AFA4;
  --blue: #2A5B8C;
  --blue-bg: #EAF1F8;
  --blue-border: #B9CEE2;

  --focus: #2C4FE0;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape / elevation — restrained, not "AI-generated giant radius" */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(22, 31, 46, 0.06);
  --shadow-md: 0 2px 8px rgba(22, 31, 46, 0.08);
  --shadow-card: 0 1px 3px rgba(22, 31, 46, 0.06), 0 1px 2px rgba(22, 31, 46, 0.04);

  --sidebar-width: 240px;
  --content-max: 1080px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
.mra-root, .mra-root * { box-sizing: border-box; }
/* UX-1.3 overflow correction — this is the ACTUAL fix; the html/body rule
   below is now a secondary safety net, not the primary mechanism.
   Root cause: below the 960px breakpoint, .mra-sidebar is
   `position: fixed` (inset: 0 auto 0 0, width: 240px) and hidden off-
   canvas via `transform: translateX(-100%)`, landing its border box at
   x -240..0. Per the CSS Transforms spec, applying a `transform` to a
   position:fixed element does NOT remove its fixed positioning, but a
   `transform` (or `contain: layout`) on an ANCESTOR *does* make that
   ancestor the containing block for the fixed descendant's positioning
   AND overflow-clipping purposes. .mra-shell had no such property, so
   .mra-sidebar's containing block was the viewport itself — outside the
   reach of any ancestor's `overflow`, including a bare `overflow-x:
   hidden` on .mra-shell (which would have been a no-op for it). Several
   browsers still count that negative-x, viewport-relative geometry
   toward the document's horizontal scrollable region, producing the
   observed thin scrollbar that a page-level overflow:hidden alone did
   not reliably suppress. The actual fix: `contain: layout` on
   .mra-shell makes .mra-shell itself the sidebar's containing block
   (per spec, `contain: layout` establishes a containing block for fixed-
   positioned descendants, same as `transform` does, with no visual side
   effect) — the sidebar's off-canvas geometry is now genuinely CONTAINED
   inside .mra-shell, so .mra-shell's own `overflow-x: clip` can
   finally clip it, and .mra-shell is exactly viewport-width (no wider),
   so nothing it contains can ever push the document wider than the
   viewport. Above 960px .mra-sidebar switches to `position: sticky;
   transform: none`, so this mechanism cannot recur there regardless.
   (The actual .mra-shell declaration carrying this fix lives with the
   rest of its rules in the APPLICATION SHELL section below.) */
/* Kept as a deliberate, explained safety net (not the primary fix, and
   not masking an unfixed defect): it also covers login.html, which has
   no .mra-shell/.mra-sidebar at all, and guards against any other
   currently-undetected minor overflow source project-wide. Genuinely
   redundant for the sidebar mechanism now that .mra-shell contains it —
   left in place because removing a correct, harmless, documented global
   guard buys nothing and narrows the safety margin for a page this
   review did not exhaustively re-audit rule-by-rule. */
html, body { overflow-x: clip; }
.mra-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
.mra-root a { color: inherit; text-decoration: none; }
.mra-root button { font-family: inherit; cursor: pointer; }
.mra-root :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .mra-root * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
.mra-h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.mra-h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; color: var(--ink); }
.mra-h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.mra-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.mra-body-sm { font-size: 13px; line-height: 1.55; color: var(--muted); }
.mra-label {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim);
}
.mra-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.mra-figure { font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ============================================================
   4. BRAND LOCKUP
   ============================================================ */
.mra-brand { display: flex; align-items: center; gap: 10px; }
.mra-brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: -0.02em; font-family: var(--font-sans);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.mra-brand-name { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.mra-brand-name em { font-style: normal; color: var(--accent); }
.mra-brand-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--dim); margin-top: 1px; }
.mra-root[data-surface="dark"] .mra-brand-name,
.mra-sidebar .mra-brand-name { color: #fff; }
/* Dashboard V1: "MERCHANT FEE REVIEW" read as too faint/small in the
   narrow, dark sidebar rail specifically (9.5px mono at --sidebar-text-
   dim on --sidebar-bg) and added little the brand name/mark don't already
   convey — simplified away rather than boosted, per the brief's own
   "or simplify" option. Unaffected everywhere else: login.html's larger
   .auth-brand-side hero (not inside .mra-sidebar) keeps its own tag. */
.mra-sidebar .mra-brand-tag { display: none; }
/* Premium visual-identity pass: the brand monogram is the one place in
   the authenticated shell that carries the marketing site's gold
   signature — dark ink on warm gold, replacing the previous faint white
   tint square. Purely decorative (background/color only); no markup,
   size, or position changed, so nothing that depends on this element's
   box model is affected. */
.mra-sidebar .mra-brand-mark { background: var(--gold); color: var(--gold-ink); }

/* ============================================================
   5. APPLICATION SHELL (sidebar + topbar + content)
   ============================================================ */
/* position: relative + contain: layout + overflow-x: clip here are the
   UX-1.3 overflow fix — see the full explanation in the RESET/BASE
   section above. contain: layout makes .mra-shell the containing block
   for .mra-sidebar's fixed positioning (the actual root cause), and
   overflow-x: clip can then genuinely clip its off-canvas geometry
   (clip, unlike hidden, never creates a scroll container and never
   forces the paired axis to compute as auto — see the RESET/BASE note
   on why that distinction mattered for the earlier blinking defect). */
.mra-shell { display: flex; min-height: 100vh; position: relative; contain: layout; overflow-x: clip; }

.mra-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width);
  background: var(--sidebar-bg); color: var(--sidebar-text);
  padding: 22px 16px; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.2s ease;
  z-index: 60; overflow-x: hidden; overflow-y: auto;
}
.mra-sidebar.open { transform: translateX(0); }
/* Mobile/tablet drawer (< 960px) reachability of Sign Out:
   the base rule's `inset: 0 auto 0 0` sizes this fixed element to the
   INITIAL containing block — i.e. the large (browser-UI-retracted)
   viewport. .mra-sidebar-foot's `margin-top: auto` then glues Sign Out
   to that large-viewport bottom, which the mobile browser's bottom
   toolbar + a notched device's home indicator overlay — and because the
   drawer content is shorter than that large height, `overflow-y: auto`
   has nothing to scroll, so Sign Out just sits behind the chrome,
   unreachable.
   Fix: drive the drawer height off the DYNAMIC viewport (100dvh — the
   real currently-visible height, which shrinks when the toolbar shows),
   with a 100vh fallback for pre-dvh browsers; release the base inset's
   bottom:0 so `height` governs the box; and add the safe-area inset to
   the existing 22px bottom padding so the home indicator can't clip
   Sign Out. `overflow-y: auto` (base rule) is preserved, so if the
   drawer's own content ever exceeds the viewport it scrolls normally.
   Desktop (>= 960px, the block below) is a separate, non-overlapping
   media range and is untouched. */
@media (max-width: 959px) {
  .mra-sidebar {
    height: 100vh;
    height: 100dvh;
    bottom: auto;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 960px) {
  .mra-sidebar { position: sticky; top: 0; height: 100vh; transform: none; }
}

.mra-sidebar-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; padding: 0 6px; }
/* .mra-sidebar-close is a native <button>; the only global button rule
   is font-family + cursor, so without this reset the browser's default
   ButtonFace background + border render as a heavy white/grey square
   around the X on the dark navy sidebar. Reset it to a bare icon button
   (the X's own stroke is currentColor = --sidebar-text, clearly visible
   on navy); the subtle hover pill below and the global :focus-visible
   ring stay. 32x32 outer box is unchanged (box-sizing: border-box), so
   removing the border causes no layout shift. */
.mra-sidebar-close { display: none; color: var(--sidebar-text); width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: none; border: none; -webkit-appearance: none; appearance: none; }
.mra-sidebar-close:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 959px) { .mra-sidebar-close { display: flex; } }

.mra-scrim { display: none; position: fixed; inset: 0; background: rgba(15, 20, 30, 0.45); z-index: 55; }
.mra-scrim.show { display: block; }
@media (min-width: 960px) { .mra-scrim { display: none !important; } }

.mra-navlist { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mra-navlist a, .mra-navitem {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 500;
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text);
}
.mra-navlist a svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.mra-navlist a:hover { background: rgba(255,255,255,0.06); color: #fff; }
/* Premium visual-identity pass: a thin gold indicator bar marks the
   selected nav item ("selected navigation" signature), layered onto the
   existing active-state fill/text color via box-shadow so no padding,
   width, or layout is disturbed. */
.mra-navlist a.active { background: var(--sidebar-bg-active); color: var(--sidebar-text-active); box-shadow: inset 3px 0 0 var(--gold); }
.mra-navitem { color: var(--sidebar-text-dim); cursor: default; justify-content: space-between; }
.mra-navitem svg { width: 16px; height: 16px; flex: none; opacity: 0.55; }
.mra-navitem-label { display: flex; align-items: center; gap: 11px; }
.mra-soon-tag {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; color: var(--sidebar-text-dim);
  border: 1px solid var(--sidebar-border); padding: 1px 6px; border-radius: 3px; flex: none;
}
.mra-nav-group { margin-bottom: 20px; }
.mra-nav-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; color: var(--sidebar-text-dim); padding: 0 12px; margin-bottom: 8px; }
.mra-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sidebar-border); }
.mra-sidebar-foot a { display: flex; gap: 11px; font-size: 13px; font-weight: 500; color: var(--sidebar-text); padding: 9px 12px; border-radius: var(--radius-sm); }
.mra-sidebar-foot a:hover { background: rgba(255,255,255,0.06); color: #fff; }

.mra-main { flex: 1; min-width: 0; }
.mra-content { max-width: var(--content-max); margin: 0 auto; padding: 22px 18px 60px; }
@media (min-width: 640px) { .mra-content { padding: 28px 28px 64px; } }
@media (min-width: 960px) { .mra-content { padding: 34px 44px 70px; } }
/* Mobile bottom-content reachability: the document (not any nested
   element) is the vertical scroll container, so the page's max scroll
   position is documentHeight - layoutViewportHeight. On phones the
   browser's retractable bottom UI (Chrome/Safari iOS toolbar, ~56-90px)
   overlays the bottom of the layout viewport WITHOUT shrinking it, so
   the final ~90px of the document sits behind that UI even when scrolled
   fully. The base 60px .mra-content bottom padding did not clear it, so
   the closing disclaimer was cut off at 430x932. Extra bottom padding
   here (phones only) is the scoped fix; env(safe-area-inset-bottom)
   additionally clears a notched device's home indicator. Desktop and
   tablet (>=640px) are unaffected — their own rules above still win. */
@media (max-width: 639px) { .mra-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

.mra-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.mra-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mra-menu-btn {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border);
}
@media (min-width: 960px) { .mra-menu-btn { display: none; } }
.mra-page-title { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .mra-page-title { font-size: 25px; } }
.mra-page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mra-topbar-right { display: flex; align-items: center; gap: 14px; flex: none; }
.mra-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
  font-family: var(--font-sans); flex: none; border: 1px solid var(--blue-border);
}

/* ============================================================
   6. PANELS / CARDS
   ============================================================ */
.mra-root .panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-card);
}
.mra-root .panel + .panel { margin-top: 16px; }
.mra-root .section-gap { margin-bottom: 18px; }
.mra-root .panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.mra-root .panel-title { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.005em; }
.mra-root .panel-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--amber);
  border: 1px solid var(--amber-border); background: var(--amber-bg); padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.mra-root .panel-link { font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--font-sans); white-space: nowrap; }
.mra-root .panel-link-strong { color: var(--brand); }
.mra-root .panel-link:hover, .mra-root .panel-link-strong:hover { color: var(--brand-strong); text-decoration: underline; }

.mra-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .mra-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .mra-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Financial metric cards ---- */
.mra-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (min-width: 600px) { .mra-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mra-metrics { grid-template-columns: repeat(4, 1fr); } }
/* Dashboard V1: a 3-tile variant (Items Reviewed / Estimated Opportunity /
   Confirmed Savings, in the merged Statement Review summary) that stays
   at 3 columns instead of stretching to 4, so the row doesn't end with an
   awkward empty slot. */
@media (min-width: 600px) { .mra-metrics-3 { grid-template-columns: repeat(3, 1fr); } }
.mra-metric {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 18px; box-shadow: var(--shadow-card);
}
/* Nested-in-a-panel sizing (the merged Statement Review card already has
   its own panel padding/shadow) — same tokens, tighter footprint. */
.mra-metrics-sm .mra-metric { padding: 14px 16px; box-shadow: none; }
/* Semantic tinted surfaces — restrained: ONLY these two specific,
   financially-meaningful tiles get a background tint (est=amber,
   confirmed=green), reusing the existing semantic tokens directly. Every
   other metric tile (Items Reviewed, KPI strip, etc.) stays plain white —
   this is deliberately not "every card a saturated block of color." */
.mra-metric.est { background: var(--amber-bg); border-color: var(--amber-border); }
.mra-metric.confirmed { background: var(--green-bg); border-color: var(--green-border); }
.mra-metric-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--dim); margin-bottom: 8px; text-transform: uppercase; }
.mra-metric-value { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mra-metric-value.est { color: var(--amber); }
.mra-metric-value.confirmed { color: var(--green); }
.mra-metric-note { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* ============================================================
   7. BUTTONS — deliberate hierarchy, not "everything filled"
   ============================================================ */
.mra-root .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 600; line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
  font-family: var(--font-sans);
}
.mra-root .btn-primary { background: var(--brand); color: #fff; }
.mra-root .btn-primary:hover { background: var(--brand-strong); }
.mra-root .btn-line {
  background: var(--surface); border-color: var(--border-strong); color: var(--ink-soft);
}
.mra-root .btn-line:hover { background: var(--surface-alt); border-color: var(--dim); color: var(--ink); }
.mra-root .btn-text { background: transparent; color: var(--brand); padding: 10px 6px; }
.mra-root .btn-text:hover { text-decoration: underline; }
.mra-root .btn-danger { background: var(--surface); border-color: var(--red-border); color: var(--red); }
.mra-root .btn-danger:hover { background: var(--red-bg); }
.mra-root .btn-sm { padding: 8px 14px; font-size: 12px; min-height: 34px; }
.mra-root .btn-auto { width: auto; }
.mra-root button:disabled, .mra-root .btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* ============================================================
   8. FORM FIELDS
   ============================================================ */
.mra-root label, .mra-root .upload-row label, .mra-root .resolve-form label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.01em; display: block; margin-bottom: 6px;
}
.mra-root input[type="text"], .mra-root input[type="email"], .mra-root input[type="password"],
.mra-root input[type="date"], .mra-root input[type="number"], .mra-root input[type="file"],
.mra-root select, .mra-root textarea {
  width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; font-family: inherit;
}
.mra-root input:focus, .mra-root select:focus, .mra-root textarea:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint);
}
.mra-root textarea { resize: vertical; min-height: 64px; }
.mra-root input[type="date"] { color-scheme: light; }

/* ============================================================
   9. STATUS BADGES
   ============================================================ */
.mra-root .status-text {
  font-family: var(--font-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.01em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  min-height: 28px; box-sizing: border-box; width: fit-content; flex: none;
}
.mra-root .status-text.incorrect { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.mra-root .status-text.review,
.mra-root .status-text.avoidable,
.mra-root .status-text.negotiable { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.mra-root .status-text.expected { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.mra-root .status-text.verify { color: var(--muted); border-color: var(--border-strong); background: var(--surface-sunken); }

/* ============================================================
   10. ALERTS / MESSAGES
   ============================================================ */
.mra-alert { border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.mra-alert-error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.mra-alert-success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.mra-alert-info { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue); }
.mra-alert-pending { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--muted); }

.mra-root .upload-status { font-size: 12.5px; margin-top: 8px; min-height: 1px; }
.mra-root .upload-status.error { color: var(--red); }
.mra-root .upload-status.success { color: var(--green); }
.mra-root .upload-status.pending { color: var(--muted); }

/* ============================================================
   11. EMPTY STATES
   ============================================================ */
.mra-root .empty-state {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 44px 28px; text-align: center; max-width: 480px; margin: 24px auto; box-shadow: var(--shadow-card);
}
.mra-root .empty-state .es-icon {
  width: 42px; height: 42px; margin: 0 auto 18px; color: var(--brand);
  background: var(--brand-tint); border-radius: 50%; padding: 10px;
}
.mra-root .empty-state h2 { font-size: 19px; font-weight: 650; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.005em; }
.mra-root .empty-state p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
.mra-root .empty-state ul { text-align: left; font-size: 13px; color: var(--ink-soft); line-height: 1.85; margin: 0 0 20px 18px; }
.mra-root .empty-state .es-note { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.mra-root .empty-state .es-steps {
  display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 4px 0 20px;
  padding: 14px 16px; background: var(--surface-alt); border-radius: var(--radius-md); border: 1px solid var(--border-soft);
}
.mra-root .empty-state .es-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.mra-root .empty-state .es-step-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* ============================================================
   12. UPLOAD AREAS
   ============================================================ */
.mra-root .upload-form { display: flex; flex-direction: column; gap: 14px; }
.mra-root .upload-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .mra-root .upload-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mra-root .upload-row { grid-template-columns: repeat(4, 1fr); } }
.mra-root .selected-filename { font-size: 12px; color: var(--muted); margin-top: 6px; word-break: break-word; }
.mra-root .clear-file-btn { margin-top: 6px; }
.mra-root .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   13. STATEMENT / FINDING / EVIDENCE ROWS
   ============================================================ */
.mra-root .picker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.mra-root .picker label { margin-bottom: 0; }
.mra-root .ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
@media (min-width: 640px) { .mra-root .ds-grid { grid-template-columns: repeat(3, 1fr); } }
.mra-root .ds-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 5px; text-transform: uppercase; }
.mra-root .ds-val { font-size: 13.5px; color: var(--ink); line-height: 1.5; }

/* padding-left: 0 resets the browser-default <ul> indent so finding rows
   line up with the panel heading above them instead of sitting ~40px
   further right. */
.mra-root .findings { list-style: none; display: flex; flex-direction: column; padding-left: 0; margin: 0; }
.mra-root .finding-item { border-bottom: 1px solid var(--border-soft); }
.mra-root .finding-item:last-child { border-bottom: none; }
/* .finding-row is a <button> — the native-chrome reset (background/
   border/appearance) is what stops it rendering as a heavy grey box
   that reads like an input field. Row separation comes entirely from
   .finding-item's light hairline divider above, plus the hover surface. */
.mra-root .finding-row {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 12px; padding: 14px 2px; font-size: 13px; text-align: left; border-radius: var(--radius-sm);
  background: none; border: none; -webkit-appearance: none; appearance: none; color: inherit;
}
.mra-root .finding-row:hover { background: var(--surface-alt); }
.mra-root .finding-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 200px; }
.mra-root .finding-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mra-root .finding-right { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.mra-root .finding-val { font-family: var(--font-sans); font-weight: 650; color: var(--ink); }
.mra-root .finding-val.unquantified { color: var(--dim); font-style: italic; font-weight: 500; }
/* Disclosure indicator: a chevron (down when collapsed, flipped up when
   the row is open) — never a bare "+", which next to a dollar amount can
   read as "$500 plus". aria-expanded on the .finding-row button carries
   the accessible state; the icon span is aria-hidden. */
.mra-root .finding-chev { color: var(--dim); display: inline-flex; align-items: center; flex: none; transition: transform .18s ease; }
.mra-root .finding-item.open .finding-chev { transform: rotate(180deg); }
.mra-root .finding-detail { max-height: 0; overflow: hidden; transition: max-height .18s ease; }
/* Ceiling only — content shorter than this renders at its natural height.
   Raised for DOC-4B's "Documents Reviewed" block (a title + one-line
   disclaimer + N document rows) so a finding that also carries a
   resolution / adjustment history / action controls can never clip. */
.mra-root .finding-item.open .finding-detail { max-height: 1600px; }
.mra-root .finding-detail-inner { padding: 0 2px 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.mra-root .finding-detail-inner .fl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); margin: 10px 0 4px; }
.mra-root .finding-detail-inner .fl:first-child { margin-top: 0; }
.mra-root .finding-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mra-root .finding-error { color: var(--red); font-size: 12px; margin-top: 8px; }

.mra-root .resolve-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 12px; }
.mra-root .resolve-form .claimed-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.mra-root .resolve-form .actions { margin-top: 2px; }

.mra-root .recov-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.mra-root .recov-row:last-child { border-bottom: none; }
.mra-root .recov-name { font-weight: 600; color: var(--ink); }
.mra-root .recov-sub { font-size: 10.5px; color: var(--dim); font-family: var(--font-mono); margin-top: 2px; letter-spacing: 0.03em; text-transform: uppercase; }
.mra-root .recov-amt { text-align: right; font-weight: 650; color: var(--ink); flex: none; font-variant-numeric: tabular-nums; }

.mra-root .evidence-sub { font-size: 12px; color: var(--muted); }
.mra-root .evidence-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--border-soft);
}
.mra-root .evidence-row:last-child { border-bottom: none; }

/* ============================================================
   14. LOADING STATES
   ============================================================ */
.mra-root .loading-note { font-size: 13.5px; color: var(--muted); padding: 40px 0; text-align: center; }

/* ============================================================
   15. SAMPLE / DEMO TAGS (legacy dashboard states)
   ============================================================ */
.mra-root .sample-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; color: var(--amber);
  border: 1px solid var(--amber-border); background: var(--amber-bg); padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}

/* ============================================================
   16. UTILITY
   ============================================================ */
.mra-hide-desktop { }
@media (min-width: 960px) { .mra-hide-desktop { display: none !important; } }
.mra-hide-mobile { display: none !important; }
@media (min-width: 960px) { .mra-hide-mobile { display: initial !important; } }

/* Load-bearing regression fix, preserved verbatim from the prior design —
   never weaken: the [hidden] attribute must always win over any author
   display rule on the same element (Fix 07B, statement-review.html). */
[hidden] { display: none !important; }