/* === Audit utility classes (extracted from inline styles) === */
    /* .panel-h1 used to wrap an <h1> for each app panel; now applied to <h2>
       so the document has one <h1>. The class name is preserved to avoid CSS
       churn — it's purely a sizing token now. tabindex="-1" allows JS to focus
       the heading after a panel switch for screen-reader announcements. */
    .panel-h1 {
      font-size: 28px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 20px;
    }
    .panel-h1:focus { outline: none; }
    .cfg-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-600);
    }
    .flex-row-8 { display: flex; align-items: center; gap: 8px; }
    .inline-flex-8 { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
    .input-sm {
      width: 60px;
      padding: 5px 8px;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
    }
    .input-sm--text {
      width: 200px;
      padding: 5px 10px;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
    }
    .table-fixed { table-layout: fixed; }
    .bid-rules-cell { padding: 6px 8px; }
    .bid-rules-row { border-bottom: 1px solid var(--gray-100); }
    /* Used in bullet lists where the default 16px gap is too loose. */
    .tight-li { margin-bottom: 2px; }
    .small-input-text {
      width: 200px;
      padding: 6px 10px;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      font-size: 14px;
      font-family: inherit;
    }

    /* Audit-specific overrides */
    body { background: var(--off-white); }
    .nav-inner { max-width: 1280px; }
    .nav-links { gap: 24px; }
    /* color-accessible-pairs: nav bg is #1A1E2E = rgb(26,30,46). --accent-500 gives
       4.27:1 on that surface — fails AA for 14px text. --accent-text (#E06535)
       gives 4.79:1. */
    .nav-links a.active { color: var(--accent-text) !important; font-weight: 600; }

    /* MAIN LAYOUT */
    .page-wrap {
      padding: 0;
    }

    /* Dashboard section anchor scroll-margin — common.css only covers section[id].
       Audit dashboard uses .dash-section divs with the sticky .dash-anchor-nav
       (top:64, h≈48) over them, so anchor-link clicks land section titles behind
       the bar. 64 (nav) + 48 (anchor bar) + 16 (breathing) = 128px. */
    .dash-section[id] { scroll-margin-top: 128px; }

    /* UPLOAD SECTION */
    .upload-section {
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--gray-100);
      padding: 48px;
      text-align: center;
      margin-bottom: 32px;
    }
    .main-content:has(.upload-section:only-child),
    .main-content:has(.upload-section + footer) {
      min-height: calc(100vh - 64px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .upload-section h1 {
      font-size: 28px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 8px;
    }
    .upload-section p {
      color: var(--gray-600);
      font-size: 16px;
      margin-bottom: 24px;
    }
    .upload-area {
      border: 2px dashed var(--accent-500);
      border-radius: 12px;
      padding: 40px;
      cursor: pointer;
      transition: all 0.2s;
      max-width: 600px;
      margin: 0 auto;
    }
    .upload-area:hover, .upload-area.dragover {
      border-color: var(--accent-500);
      background: var(--accent-50);
    }
    .upload-area svg { color: var(--accent-500); margin-bottom: 12px; }
    .upload-title { margin-bottom: 4px; font-size: 16px; }
    .upload-sub { font-size: 14px; margin-bottom: 16px; }
    .btn-primary { padding: 12px 24px; font-size: 14px; }

    .brand-input-wrap {
      max-width: 500px;
      margin: 0 auto 24px;
      text-align: left;
    }
    .brand-input-wrap label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-600);
      margin-bottom: 6px;
    }
    .brand-input-wrap input {
      width: 100%;
      padding: 8px 12px;
      height: 36px;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      font-size: 14px;
      font-family: var(--font-body);
      outline: none;
      transition: border-color 0.2s;
    }
    .brand-input-wrap input:focus { border-color: var(--accent-500); }
    .brand-input-wrap .hint {
      font-size: 14px;
      color: var(--gray-400);
      margin-top: 4px;
    }

    /* ANALYZING OVERLAY (size overrides) */
    .analyzing-overlay {
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--gray-100);
      padding: 48px;
      margin-bottom: 32px;
    }
    .analyzing-spinner { width: 40px; height: 40px; margin-bottom: 20px; }
    .analyzing-steps { max-width: 300px; margin: 20px auto 0; text-align: left; }
    .analyzing-step { padding: 6px 0; font-size: 14px; }
    .analyzing-step.active { color: var(--accent-500); font-weight: 600; }

    /* DASHBOARD */
    .dashboard { display: none; }
    .dashboard.active { display: block; }

    /* HEADLINE FINDING CARD — the single proof moment (Derek flag).
       Red number + copy line + sub. Sits above the KPI grid so it's the
       first thing the eye lands on after the dashboard activates. */
    .headline-finding {
      background: linear-gradient(135deg, #1A1E2E 0%, #232841 100%);
      border-radius: 10px;
      padding: 20px 24px;
      position: relative;
      overflow: hidden;
    }
    .headline-finding::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(239,68,68,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .headline-finding-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.5);
      margin-bottom: 8px;
    }
    .headline-finding-body {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      line-height: 1.2;
      margin-bottom: 6px;
    }
    .headline-finding-number {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 700;
      color: var(--red-500);
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1;
      letter-spacing: -0.03em;
    }
    .headline-finding-copy {
      font-family: var(--font-display);
      font-size: clamp(1rem, 2vw, 1.3rem);
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      letter-spacing: -0.01em;
    }
    .headline-finding-sub {
      font-size: 13px;
      /* color-accessible-pairs: 0.45 opacity = 4.49:1 on --off-white (rgb(10,14,26)) —
         just under WCAG AA 4.5:1 for normal text (13px). Bumped to 0.52 → 5.65:1. */
      color: rgba(255,255,255,0.52);
      font-variant-numeric: tabular-nums;
    }
    /* P0.4 — drill-down link from headline card to keyword bucket detail.
       color-accessible-pairs: --accent-500 (#D85A30) on --off-white = 4.97:1,
       but the headline card gradient center is ~#1A1E2E where it lands at 4.27:1
       (fails 4.5:1 AA for 13px text). Using --accent-text (#E06535) = 5.65:1
       on the darkest part of the gradient. Underline on hover for color-not-only. */
    .headline-finding-link {
      display: inline-block;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-text);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: opacity 0.15s ease;
    }
    .headline-finding-link:hover {
      opacity: 0.8;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .headline-finding-link:focus-visible {
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* KPI CARDS — 9 cards (3×3 desktop). Uses repeat(3) so the 9th card
       (TACOS) fills the third column of the bottom row without orphan styling.
       At 1024px tablet: drop to 3-col still works cleanly (cards are compact
       enough). At 768px mobile: 2-col (the standard dashboard density). */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    .kpi-card {
      background: var(--white);
      border-radius: 10px;
      border: 1px solid var(--gray-100);
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    .kpi-label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--gray-400);
      margin-bottom: 6px;
    }
    .kpi-value {
      font-size: 24px;
      font-weight: 600;
      color: var(--gray-900);
      /* Applying number-tabular guideline: prevents layout shift as digits update.
         common.css sets this via the .kpi-value selector; explicit here so any
         future rule that resets font-* on .kpi-card children doesn't silently drop it. */
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1;
    }
    .kpi-sub {
      font-size: 14px;
      color: var(--gray-400);
      margin-top: 2px;
    }
    /* KPI sparkline slot — 60×20 inline SVG, bottom of card. margin-top:auto
       pushes it to the card bottom so sparklines align across cards in a row. */
    .kpi-sparkline {
      margin-top: auto;
      padding-top: 10px;
      opacity: 0.8;
      display: flex;
      align-items: flex-end;
    }

    /* SECTION CARDS */
    .dash-section {
      background: var(--white);
      border-radius: 10px;
      border: 1px solid var(--gray-100);
      margin-bottom: 24px;
      /* Must stay `visible` (not hidden) so sticky table headers inside a
         section can pin to the viewport — an overflow:hidden/clip ancestor
         hijacks position:sticky and the header ends up stuck behind the nav.
         Collapse clipping is handled by .dash-section-content; the collapsed
         card re-enables hidden below for clean rounded-corner clipping. */
      overflow: visible;
    }
    .dash-section.collapsed { overflow: hidden; }
    .dash-section-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--gray-50);
    }
    .dash-section-header h2 {
      font-size: 16px;
      font-weight: 700;
      color: var(--gray-900);
    }
    .dash-section-header p {
      font-size: 14px;
      color: var(--gray-400);
      margin-top: 2px;
    }

    /* TABLES */
    /* Global resize handle — applies to ALL tables */
    thead th .col-resize-handle {
      position: absolute; right: 0; top: 0; width: 8px; height: 100%;
      cursor: col-resize; z-index: 3;
      background: transparent;
      border-right: 3px solid #E2E0DC;
    }
    thead th .col-resize-handle:hover { border-right-color: var(--accent-500); }
    /* overflow-x:auto makes this wrapper a scroll container so a widened
       table can exceed the card width instead of the fixed-layout engine
       shrinking peer columns to keep sum == 100%. overflow-y stays visible
       so column-filter dropdowns (position:fixed) are not clipped.
       (Per CSS spec, overflow-y resolves to auto when overflow-x is auto;
       acceptable here because .dash-section thead th is position:relative,
       not sticky, so no sticky-in-scroll-container issue arises.) */
    .table-wrap { overflow-x: auto; overflow-y: visible; }
    .table-wrap td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    thead th {
      /* Applying weight-hierarchy + color-accessible-pairs: header labels must
         read as chrome/metadata, not as data rows. --gray-400 (#6B7082) on
         --gray-50 (#EEECE8) = 3.8:1 — above 3:1 (large-text AA) and visually
         distinct from tbody td which uses --gray-800 on --white. The 2px accent
         bottom-border reinforces the header/data boundary without relying on
         color alone. position:relative is required for the absolutely-positioned
         .col-resize-handle inside each th. */
      background: var(--gray-50);
      padding: 10px 14px;
      text-align: left;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gray-400);
      border-bottom: 2px solid var(--gray-100);
      white-space: nowrap;
      position: sticky;
      top: 64px;
      z-index: 10;
    }
    /* Numeric column headers right-align to match their data cells (number-tabular
       guideline: headers over right-aligned columns must themselves be right-aligned
       so the label sits directly above its column's values). */
    thead th.num { text-align: right; }
    /* Dashboard-section tables are short (2-12 rows) and stack vertically. A
       sticky thead here detached and floated over the rows as the page scrolled
       past the sticky anchor-nav, leaving the column-label row wedged between
       data rows. These small tables don't need a pinned header, so render it in
       normal flow (position:relative preserves the col-resize-handle's
       positioning context; only the long Strategy/search-term tables, which are
       internal-scroll boxes, keep a sticky header). */
    .dash-section thead th { position: relative; top: auto; }
    tbody td {
      padding: 8px 14px;
      font-size: 14px;
      border-bottom: 1px solid var(--gray-50);
      color: var(--gray-800);
    }
    tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
    tbody tr:hover { background: var(--gray-50); }
    tbody tr.total-row {
      font-weight: 700;
      background: var(--gray-50);
      border-top: 2px solid var(--gray-200);
    }
    tbody tr.total-row td { border-bottom: none; }

    /* STATUS BADGE (overrides common.css) */
    .badge { padding: 4px 12px; font-size: 12px; border-radius: 4px; font-weight: 500; }

    /* HEALTH TABLE SPECIFIC */
    .health-benchmark { color: var(--gray-400); font-size: 14px; }
    /* P0.3 — Est. Impact column. number-tabular applied via .num cell class
       (already in place). min-width keeps the column from collapsing on narrow
       viewports — the table-wrap handles horizontal scroll gracefully. */
    .health-impact {
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1;
      white-space: nowrap;
    }

    /* ASIN DETAIL DROPDOWN */
    .asin-detail { margin-top: 6px; }
    .asin-detail-toggle {
      font-size: 13px;
      /* color-accessible-pairs: --accent-500 on --gray-50 (row-hover bg) = 4.31:1,
         fails for 13px/500 text. --accent-text (#E06535) gives 4.83:1. */
      color: var(--accent-text);
      cursor: pointer;
      font-weight: 500;
      list-style: none;
    }
    .asin-detail-toggle::-webkit-details-marker { display: none; }
    .asin-detail-toggle::before { content: '▸ '; }
    .asin-detail[open] .asin-detail-toggle::before { content: '▾ '; }
    .asin-detail-list { padding: 6px 0 0 4px; }
    .asin-detail-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      padding: 2px 0;
      color: var(--gray-600);
    }
    .asin-rank {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gray-50);
      font-size: 11px;
      font-weight: 600;
      color: var(--gray-400);
    }
    .asin-id { font-family: monospace; font-size: 13px; }
    .asin-val { font-weight: 600; color: var(--gray-800); }

    /* BRANDED EDIT BUTTON */
    .branded-edit-btn {
      display: inline-block;
      margin-top: 6px;
      background: none;
      /* color-accessible-pairs: --accent-500 on --white (rgb(17,22,42)) = 4.08:1
         for 12px text. --accent-text (#E06535) gives 5.19:1. Border follows. */
      border: 1px dashed var(--accent-text);
      color: var(--accent-text);
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-family: var(--font-body);
    }
    .branded-edit-btn:hover { background: var(--accent-50); }

    /* BRAND INPUT IN DASHBOARD */
    .brand-dash-input {
      width: 100%;
      padding: 8px 12px;
      height: 36px;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      font-size: 14px;
      font-family: var(--font-body);
      outline: none;
      transition: border-color 0.2s;
    }
    .brand-dash-input:focus { border-color: var(--accent-500); }

    /* CAMPAIGN NAME COLUMN */
    .campaign-name {
      max-width: 350px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* PHASE SELECTOR */
    .phase-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      background: var(--accent-50);
      border-bottom: 1px solid var(--accent-100);
    }
    .phase-wrap label {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-600);
    }
    .phase-select {
      padding: 8px 12px;
      height: 36px;
      border: 1px solid var(--accent-100);
      border-radius: 6px;
      font-size: 14px;
      font-family: var(--font-body);
      /* color-accessible-pairs: browser default black (rgb(0,0,0)) on --white
         (rgb(17,22,42)) is only 1.17:1 — invisible. Explicitly set text color
         so the dark-theme cascade applies correctly. --gray-800 (#EEF1F8) gives
         15.85:1 on this surface, clearing AA by a large margin. */
      color: var(--gray-800);
      background: var(--white);
      cursor: pointer;
      outline: none;
    }
    /* <option> elements inherit color from <select> above. Setting color + bg
       on option gives the best cross-browser legibility where browsers honor it
       (Chromium/Edge/Firefox). Safari renders the OS-native picker regardless. */
    .phase-select option {
      color: var(--gray-800);
      background: var(--bg-2);
    }
    .phase-select:focus { border-color: var(--accent-500); }

    /* TWO-COLUMN LAYOUT */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    /* ERROR (size overrides) */
    .error-msg { padding: 16px 24px; margin-bottom: 24px; }

    /* Founder strip on /audit.html upload screen — cold landers see Alfred */
    .audit-founder-strip {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 28px auto 0;
      padding: 10px 18px 10px 10px;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: 999px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    }
    .audit-founder-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 18%;
      flex-shrink: 0;
      border: 2px solid var(--white);
      box-shadow: 0 0 0 1px var(--gray-100);
    }
    .audit-founder-meta { text-align: left; line-height: 1.3; }
    .audit-founder-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-900);
    }
    .audit-founder-sub {
      font-size: 12px;
      color: var(--gray-500);
    }
    .audit-founder-sub a {
      color: var(--accent, #D85A30);
      text-decoration: none;
      font-weight: 500;
    }
    .audit-founder-sub a:hover { text-decoration: underline; }

    /* "See a sample report" CTA — promoted from dashed whisper card to a solid
       secondary button. Visual weight should read near-equal to the upload zone,
       not disabled. Marcus + Tom flagged the dashed variant as "looks inert." */
    .audit-sample-cta {
      max-width: 600px;
      margin: 20px auto 0;
      padding: 14px 24px;
      background: var(--white);
      border: 2px solid var(--accent-500);
      border-radius: 10px;
      text-align: center;
      transition: background 0.15s, border-color 0.15s;
      cursor: pointer;
    }
    .audit-sample-cta:hover {
      background: var(--accent-50);
    }
    .audit-sample-cta-text {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--gray-800);
    }
    .audit-sample-cta-link {
      color: var(--accent-500);
      font-weight: 700;
      text-decoration: none;
    }
    .audit-sample-cta-link:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Sample-mode banner — visible while the demo report is showing */
    .audit-sample-banner {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 20px;
      background: linear-gradient(90deg, rgba(216, 90, 48, 0.95), rgba(216, 90, 48, 0.85));
      color: #FFFFFF;
      font-size: 13.5px;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    }
    .audit-sample-banner strong { font-weight: 700; }
    .audit-sample-banner-exit {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 999px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 600;
      transition: background 0.15s ease;
    }
    .audit-sample-banner-exit:hover { background: rgba(255, 255, 255, 0.28); }

    /* Responsive rules moved to audit-features.css (end of cascade) so they
       override panel-level rules like .main-content's 220px padding-left. */