/*
Copyright (c) 2026 Larato Limited. All rights reserved.
Author: Lucy Green
*/
/* ====== web/styles.css 23-03-2026 v12.3 ======================================
   Inside Track Tools — UI Styles (Design-compliant refresh)
   - Light (default) & Dark modes with warm neutrals, amethyst accents, GOLD CTAs
   - Tokenised, resilient, accessible; minimal specificity; theme-by-token swap
   ========================================================================== */

/* ----------------------------- CASCADE LAYERS ---------------------------- */
@layer tokens, base, components, utilities;

/* ================================ TOKENS ================================= */
/* ---- Reference palette (brand) ---- */
@layer tokens {
  :root {
    /* Advertise both schemes; LIGHT is default (dark only when [data-theme="dark"]) */
    color-scheme: light dark;

    /* Light neutrals */
    --c-bg: #FFF9F2;
    --c-card: #FFFFFF;
    --c-surface1: #FFFFFF;
    --c-border: #E5E2DD;
    --c-border-2: #E7E4DF;

    /* Copy */
    --c-text-1: #1E1B1B;
    --c-text-2: #4A4650;
    --c-heading: #151316;
    --c-muted: #706B75;

    /* Brand */
    --c-accent: #461E5C;
    /* amethyst */
    --c-accent-pressed: #72369D;
    /* pressed */
    --c-gold: #FFAD03;
    /* gold */
    --c-gold-pressed: #E79101;
    --c-gold-soft: #FFAD03;
    --c-teal: #28A2B5;
    /* teal */
    --c-teal-soft: #4EBDBE;

    /* States */
    --c-danger: #C43D4B;
    --c-ok: #1B8F5A;

    /* Dark palette */
    --d-bg: #1C1A21;
    --d-card: #25212A;
    --d-surface1: #201B23;
    --d-border: #37313D;
    --d-border-2: #3B3542;

    --d-text-1: #ECE9EF;
    --d-text-2: #BBB4C1;
    --d-heading: #F7F4FA;
    --d-muted: #A49EAA;

    --d-accent: #461E5C;
    --d-accent-pressed: #64234A;

    --d-gold: #FFAD03;
    /* matches brand gold */
    --d-gold-pressed: #E79101;
    --d-gold-soft: #FFAD03;

    --d-teal: #20C997;
    --d-teal-soft: #78E3C8;

    --d-danger: #E05B67;
    --d-ok: #29A06B;

    /* Dark main menu tile colours (exact spec) */
    --sales-card-bg-dark: #461E5C;
    --sales-card-bdr-dark: #64234A;
    --sales-card-fg-dark: #FFFFFF;
    --sales-card-title-dark: #FFFFFF;

    --mkt-card-bg-dark: #FFAD03;
    --mkt-card-bdr-dark: #A57234;
    --mkt-card-fg-dark: #000000;
    --mkt-card-title-dark: #000000;
  }

  /* ---- Semantic tokens (LIGHT default) ---- */
  :root {
    --bg: var(--c-bg);
    --card-bg: var(--c-card);
    --surface-1: var(--c-surface1);
    --border: var(--c-border);
    --border-2: var(--c-border-2);

    --text-1: var(--c-text-1);
    --text-2: var(--c-text-2);
    --heading: var(--c-heading);
    --muted: var(--c-muted);

    --accent: var(--c-accent);
    --accent-pressed: var(--c-accent-pressed);

    --brand-gold: var(--c-gold);
    --brand-gold-pressed: var(--c-gold-pressed);
    --brand-gold-soft: var(--c-gold-soft);

    --brand-teal: var(--c-teal);
    --brand-teal-soft: var(--c-teal-soft);

    --danger: var(--c-danger);
    --ok: var(--c-ok);

    --chip-bg: color-mix(in srgb, var(--brand-teal) 8%, var(--card-bg));
    --chip-fg: var(--text-1);
    --chip-bd: var(--border);

    /* NEW: global link colour token (mirrors accent) */
    --link-accent: var(--accent);

    /* Elevation & focus */
    --radius: 12px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 24px rgba(0, 0, 0, .06);
    --ring-outline: 3px solid color-mix(in srgb, var(--accent) 80%, white);
    --ring-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);

    /* Type & spacing */
    --fs-base: clamp(15px, calc(.28vw + 14px), 18px);
    --fs-h1: clamp(22px, calc(1.2vw + 18px), 30px);
    --fs-h2: clamp(18px, calc(.9vw + 14px), 22px);
    --fs-h3: clamp(16px, calc(.7vw + 12px), 18px);
    --fs-field: clamp(14px, calc(.26vw + 12px), 16px);
    --fs-output: clamp(14px, calc(.22vw + 12px), 16px);
    --fs-output-h3: clamp(15px, calc(.26vw + 13px), 18px);
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --gap: var(--s-6);
    --stage-max: 100vw;
    --header-h: 64px;
    --left-min: 480px;
    --right-min: 220px;
    --field-h: 44px;
    --chip-h: 44px;
    --logo-h: clamp(34px, 2.6vw, 44px);
    --radius-sm: 8px;
    --radius-lg: 16px;
    --pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);

    /* Tile semantics (neutral in light) */
    --tile-bg: var(--card-bg);
    --tile-border: var(--border);
    --tile-title: var(--heading);
    --tile-text: var(--text-1);
    --tile-muted: var(--text-2);

    /* Motion & z-index */
    --dur-1: 70ms;
    --dur-2: 150ms;
    --dur-3: 250ms;
    --dur-4: 400ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-decelerate: cubic-bezier(0, 0, .2, 1);
    --ease-accelerate: cubic-bezier(.4, 0, 1, 1);
    --z-header: 100;
    --z-toolbar: 40;
    --z-sticky: 10;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
  }

  /* ---- Explicit dark (no OS mirroring) ---- */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg: var(--d-bg);
    --card-bg: var(--d-card);
    --surface-1: var(--d-surface1);
    --border: var(--d-border);
    --border-2: var(--d-border-2);

    --text-1: var(--d-text-1);
    --text-2: var(--d-text-2);
    --heading: var(--d-heading);
    --muted: var(--d-muted);

    --accent: var(--d-accent);
    --accent-pressed: var(--d-accent-pressed);

    --brand-gold: var(--d-gold);
    --brand-gold-pressed: var(--d-gold-pressed);
    --brand-gold-soft: var(--d-gold-soft);

    --brand-teal: var(--d-teal);
    --brand-teal-soft: var(--d-teal-soft);

    --danger: var(--d-danger);
    --ok: var(--d-ok);
    --chip-bg: color-mix(in srgb, var(--brand-teal) 12%, transparent);
    --chip-fg: var(--text-1);
    --chip-bd: var(--border);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 30px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 36px rgba(0, 0, 0, .45);

    /* Keep link colour token aligned in dark */
    --link-accent: var(--accent);
  }
}

/* ================= Progressive enhancement & fallbacks ================== */

/* Baseline fallbacks (no color-mix support) — updated to new brand hexes */
:root {
  /* Accent #461E5C → ~80% towards white (approx) */
  --ring-outline: 3px solid #7A5590;
  --ring-shadow: 0 0 0 2px rgba(70, 30, 92, .35);

  /* Gold button glow from #FFC243 */
  --gold-glow: 0 8px 18px rgba(255, 194, 67, .28);

  /* Light-mode hover tints (new brand) */
  --hover-tint-accent-6: rgba(70, 30, 92, .06);
  /* 6% of accent */
  --hover-tint-gold-10: rgba(255, 194, 67, .10);
  /* 10% of gold */

  /* Teal pills from #28A2B5 */
  --pill-bg-teal-12: rgba(40, 162, 181, .12);
  --pill-bd-teal-32: rgba(40, 162, 181, .32);
}

:root[data-theme="dark"] {
  /* Dark accent #7A3DC2 → ~80% towards white (approx) */
  --ring-outline: 3px solid #9A68CF;
  --ring-shadow: 0 0 0 2px rgba(122, 61, 194, .35);

  /* Dark gold glow */
  --gold-glow: 0 8px 18px rgba(255, 194, 67, .28);

  /* Teal pills in dark */
  --pill-bg-teal-12: rgba(32, 201, 151, .18);
  --pill-bd-teal-32: rgba(32, 201, 151, .40);
}

/* Upgrade to exact mixes when supported */
@supports (color: color-mix(in srgb, white 50%, black)) {
  :root {
    --ring-outline: 3px solid color-mix(in srgb, var(--accent) 80%, white);
    --ring-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    --gold-glow: 0 8px 18px color-mix(in srgb, var(--brand-gold) 28%, transparent);
    --pill-bg-teal-12: color-mix(in srgb, var(--brand-teal) 12%, transparent);
    --pill-bd-teal-32: color-mix(in srgb, var(--brand-teal) 32%, transparent);
  }

  :root[data-theme="dark"] {
    --ring-outline: 3px solid color-mix(in srgb, var(--accent) 80%, white);
    --ring-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    --gold-glow: 0 8px 18px color-mix(in srgb, var(--brand-gold) 28%, transparent);
    --pill-bg-teal-12: color-mix(in srgb, var(--brand-teal) 18%, transparent);
    --pill-bd-teal-32: color-mix(in srgb, var(--brand-teal) 40%, transparent);
  }
}

/* =============================== BASE =================================== */
@layer base {
  * {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth
  }

  body {
    margin: 0;
    font: var(--fs-base)/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    background: var(--bg);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    margin: 0 0 var(--s-2);
    line-height: 1.2;
    font-weight: 500
  }

  h1 {
    font-size: var(--fs-h1)
  }

  h2 {
    font-size: var(--fs-h2)
  }

  h3 {
    font-size: var(--fs-h3)
  }

  :where(a, button, [role="button"], [tabindex]:not(input):not(select):not(textarea)):focus-visible {
    outline: var(--ring-outline);
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Forced-colors/HC support */
  @media (forced-colors:active) {
    :where(a, button, [role="button"], input, select, textarea) {
      outline: 1px solid CanvasText;
    }
  }
}

/* ============================ COMPONENTS ================================ */
@layer components {

  /* --- Header --- */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: var(--header-h);
    padding: 12px 24px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 1px rgba(16, 24, 40, .06);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto
  }

  .logo {
    height: var(--logo-h);
    width: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 0
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.1
  }

  .app-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(18px, calc(.6vw + 16px), 22px);
    font-weight: 600
  }

  .kicker {
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-2)
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap
  }

  .header-right>* {
    flex-shrink: 0
  }

  .app-header.topbar.compact {
    background: var(--header-bg);
    border-bottom-color: var(--header-border);
  }

  /* Generic chip */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--s-0) var(--s-2);
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-2) var(--ease-standard),
      box-shadow var(--dur-2) var(--ease-standard);
  }

  .chip svg {
    display: block;
  }

  .chip-amethyst {
    background: var(--brand-amethyst);
    color: #fff;
  }

  @media (hover:hover) {
    .chip-amethyst:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
  }

  .chip-amethyst:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  /* Dark mode tweak for contrast */
  :root[data-theme="dark"] .chip-amethyst {
    background: color-mix(in srgb, var(--brand-amethyst) 90%, black);
    color: #fff;
  }

  /* Badges */
  .badge,
  .model-note,
  .calltype-mini {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: var(--chip-h);
    /* 44px */
    padding: 0 16px;
    border-radius: 999px;
    background: #EEF0F4;
    border: 1px solid var(--border);
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
  }

  .badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
  }

  .badge.is-hidden {
    display: none
  }

  .calltype-mini .mini-label {
    font-weight: 500
  }

  .calltype-mini select {
    height: 36px;
    padding: 0 12px;
    line-height: 36px;
    border-radius: 8px;
    border: 1px solid #CFD7EB;
    background: #fff;
  }

  .calltype-mini .remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px
  }

  .calltype-mini .remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    /* increase tap size */
  }

  /* Narrow header tweaks */
  @media (max-width:480px) {
    .app-header {
      padding: 8px 12px
    }

    .header-right {
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  @media (max-width:420px) {
    .kicker {
      display: none
    }
  }

  /* --- Stage / Panels --- */
  .stage {
    width: 100%;
    max-width: var(--stage-max);
    margin-inline: auto
  }

  .layout {
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    align-items: start;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.65fr) minmax(var(--right-min), clamp(260px, 14vw, 300px));
  }

  .panel {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    min-width: 0;
  }

  .panel.left {
    grid-column: 1
  }

  .panel.middle {
    grid-column: 2
  }

  .panel.right {
    grid-column: 3;
    max-width: 300px
  }

  /* File buttons */
  .file-btn {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
  }

  .file-btn::file-selector-button {
    font: inherit;
    border: 1px solid transparent;
    background: var(--brand-gold);
    color: #111;
    /* readable on gold */
    border-radius: var(--radius, 10px);
    padding: var(--s-1) var(--s-2);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition:
      transform var(--dur-2) var(--ease-standard),
      box-shadow var(--dur-2) var(--ease-standard),
      background-color var(--dur-2) var(--ease-standard);
  }

  @media (hover:hover) {
    .file-btn:hover::file-selector-button {
      background: var(--brand-gold-pressed);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    }
  }

  .file-btn:active::file-selector-button {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  }

  .file-btn:focus-visible::file-selector-button {
    outline: var(--ring-outline);
    outline-offset: 2px;
    box-shadow: var(--ring-shadow);
  }

  :root[data-theme="dark"] .file-btn::file-selector-button {
    background: color-mix(in srgb, var(--brand-gold) 88%, black);
    color: #111;
  }

  /* Left column specifics */
  .panel.left {
    max-height: calc(100vh - var(--header-h) - var(--gap)*1.2);
    overflow: auto;
    scroll-snap-type: y proximity;
    background:
      linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
      linear-gradient(to bottom, rgba(0, 0, 0, .06), transparent) top/100% 10px no-repeat,
      linear-gradient(to top, rgba(0, 0, 0, .06), transparent) bottom/100% 10px no-repeat;
    background-attachment: local, scroll, scroll;
    counter-reset: section;
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0
  }

  .card {
    scroll-snap-align: start
  }

  .panel.left .card {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 0
  }

  .panel.left .card:first-of-type {
    margin-top: 0;
    padding-top: 0
  }

  .card>legend {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 var(--s-2)
  }

  .panel.left .card>legend {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 0 8px;
    background: linear-gradient(var(--card-bg), var(--card-bg));
    border-bottom: 1px solid var(--border);
  }

  .panel.left .card>legend::before {
    counter-increment: section;
    content: counter(section) ". ";
    color: var(--accent);
    font-weight: 600
  }

  /* Form grid & fields */
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 8px
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px
  }

  label {
    font-size: .95rem;
    font-weight: 500
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: var(--field-h);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-2);
    background: var(--surface-1);
    color: var(--text-1);
    font: var(--fs-field)/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    transition: border-color .15s, box-shadow .15s;
  }

  /* [BR-146] A checkbox is not a text field, and the rule above was written for text fields.
     `input` matches checkbox and radio too, so both inherit width:100% and a 44px min-height
     and every checkbox in the product painted at 44px. Three call sites had already noticed
     and each set width/height (pages/profile.css:246 and :636, styles.css:492); height loses
     to min-height by definition, so all three fixed the width half and left the height. The
     carve-out is here rather than in the rule above because that rule is load-bearing for
     every form in the product; this one touches only the two types that were never fields,
     and every one of those is currently wrong, so there is no correct behaviour to break.
     Both declarations are load-bearing: without min-height the box is 44px tall again,
     without width:auto #fbSample on ch-strategic is 436px wide. `padding` and `border-radius`
     are deliberately NOT reset: the rule above sets them, but a control at appearance:auto
     computes 0px for both anyway, so the lines would assert nothing. Same two declarations
     assets/beta-pulse.js:110 already uses for the Pulse's radios, and it keeps its own copy
     on purpose: it mounts into host pages this file does not style. */
  input[type=checkbox],
  input[type=radio] {
    width: auto;
    min-height: 0;
  }

  /* --field-h is a touch target, not a decoration. Before the carve-out above, the label was
     44px tall only because the 44px control inside it made it so, and shrinking the control
     would have taken the clickable area down to the height of one line of text. The minimum
     moves to the label, which is what the user actually presses. Scoped with :has() to labels
     that own one of these controls, so no ordinary field label gains a height it never had. */
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]) {
    min-height: var(--field-h);
  }

  textarea {
    min-height: 110px;
    resize: vertical
  }

  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: none
  }

  .remember-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2, 8px);
    margin-top: var(--s-2, 8px);
  }

  .remember-row .btn.small {
    /* keep these subtle and compact */
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
  }

  .remember-row .muted {
    margin-left: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-3, #6b7280);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--ring-shadow)
  }

  input.invalid,
  select.invalid,
  textarea.invalid {
    border-color: var(--danger)
  }

  .help {
    margin: .35rem 0 0;
    color: var(--text-2);
    font-size: .85rem
  }

  /* Sticky footer actions (left) */
  .panel.left .actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: var(--s-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--s-4);
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, var(--card-bg) 24px);
    border-top: 1px solid var(--border);
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    /* ≥44px tap target */
    padding: 12px 18px;
    border-radius: var(--pill, 999px);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-1);
    font-weight: 600;
    cursor: pointer;
    /* Base elevation (light) */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition:
      transform var(--dur-1, 70ms) var(--ease-standard, ease),
      box-shadow var(--dur-2, 150ms) var(--ease-standard, ease),
      background-color var(--dur-2, 150ms) var(--ease-standard, ease),
      border-color var(--dur-2, 150ms) var(--ease-standard, ease);
  }

  /* Pixel parity in dark (same geometry, stronger alpha) */
  :root[data-theme="dark"] .btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  }

  .btn.small {
    min-height: 36px;
    padding: 8px 12px;
    font-size: .9rem;
  }

  .btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Focus */
  .btn:focus-visible {
    outline: var(--ring-outline);
    outline-offset: 2px;
    box-shadow: var(--ring-shadow);
  }

  /* ----------------------- Button variants ----------------------- */

  /* Primary = GOLD (keep aliases) + bigger glow */
  :is(.btn.primary, .btn-primary, .btn-cta) {
    background: var(--brand-gold);
    color: #111;
    /* readable on gold */
    border-color: transparent;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, .04),
      var(--gold-glow, 0 8px 18px rgba(255, 194, 67, .28));
  }

  @media (hover:hover) {
    :is(.btn.primary, .btn-primary, .btn-cta):hover {
      background: var(--brand-gold-pressed);
    }
  }

  /* Dark-mode parity for the primary glow */
  :root[data-theme="dark"] :is(.btn.primary, .btn-primary, .btn-cta) {
    box-shadow:
      0 1px 1px rgba(0, 0, 0, .24),
      0 8px 18px color-mix(in srgb, var(--brand-gold) 22%, transparent);
  }

  /* Accent (Amethyst) */
  .btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
  }

  @media (hover:hover) {
    .btn-accent:hover {
      background: var(--accent-pressed);
    }
  }

  /* Tertiary (soft, token-safe across themes) */
  .btn-tertiary {
    background: var(--chip-bg);
    /* theme-aware */
    color: var(--accent);
    border-color: var(--chip-bd);
  }

  /* Optional hover lift for all non-disabled buttons */
  @media (hover:hover) {
    .btn:not([disabled]):hover {
      transform: translateY(-1px);
    }
  }

  /* Info icon button (≥44x44) */
  .btn.info {
    --icon-size: 44px;
    display: inline-grid;
    place-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    line-height: 1;
    border-radius: 9999px;
    background: var(--accent);
    color: #fff;
    border: 0;
  }

  .btn.info svg,
  .btn.info .icon-info {
    width: 60%;
    height: 60%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .btn.info:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, white);
    outline-offset: 2px;
  }

  /* Pressed toggle state (optional) */
  .btn[aria-pressed="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  /* High-contrast users: flatten elevation for clarity */
  @media (prefers-contrast: more) {

    .btn,
    :is(.btn.primary, .btn-primary, .btn-cta) {
      box-shadow: none !important;
    }

    .btn {
      border-color: currentColor;
    }
  }

  /* Middle column */
  .panel.middle {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .output-card .output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }

  /* Middle panel header should also be a single row */
  .panel.middle .output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }

  .output-card .meta {
    color: var(--text-2);
    font-size: .9rem;
  }

  /* Single source of truth for the output surface */
  .output {
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--text-1);
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: 12px;
    min-height: 260px;
    outline: none;
    font-variant-ligatures: contextual;
  }

  .panel.middle .output-card {
    position: sticky;
    top: calc(var(--header-h) + 12px);
    z-index: 5;
  }

  .output-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
  }

  /* --- Signal bar (Results insight) --- */
  @layer components {
    .signal {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 var(--s-2);
    }

    .signal-track {
      flex: 1;
      height: 10px;
      border-radius: var(--pill);
      background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-1));
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .signal-fill {
      height: 100%;
      width: 0%;
      background: var(--brand-teal);
      /* subtle sheen in light, parity in dark via tokens */
      background-image: linear-gradient(90deg,
          color-mix(in srgb, #fff 12%, var(--brand-teal)) 0%,
          var(--brand-teal) 60%);
      border-radius: var(--pill);
      transition: width var(--dur-3) var(--ease-standard);
    }

    .signal-label {
      min-width: 6ch;
      text-align: right;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    /* Dark: keep contrast clean, no glare */
    :root[data-theme="dark"] .signal-track {
      background: color-mix(in srgb, var(--brand-teal) 16%, transparent);
      border-color: var(--border);
    }

    :root[data-theme="dark"] .signal-fill {
      background: var(--brand-teal);
      background-image: none;
    }
  }

  /* Hide per-design: no header buttons in the output head on tool pages */
  .panel.middle .output-head :where(button, .btn):not(#quickcheck-top):not(#insight-help) {
    display: none !important;
  }

  /* Right column / intel */
  .intel .intel-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: sticky;
    top: calc(var(--header-h) + 8px);
    background: var(--card-bg);
    z-index: 4;
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 0;
  }

  .intel .intel-head> :last-child {
    margin-inline-start: auto;
  }

  /* Make intel header/tips action buttons use chip tokens (theme-safe) */
  .intel .intel-head :where(button, .btn),
  .tips-card :where(button, .btn) {
    height: var(--chip-h);
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--chip-bd);
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  .intel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .intel-grid section {
    background: transparent;
    padding: 0;
  }

  .intel-slot {
    background: transparent;
    padding: 8px 0 10px;
    color: var(--text-2);
    border: 0;
    border-radius: 0;
  }

  .intel-grid h3 {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  .intel-slot p {
    font-size: .92rem;
    line-height: 1.35;
    margin: 4px 0;
  }

  .intel-grid ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Single source of truth for intel “chips” */
  .intel-grid li,
  .intel-chip {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-1);
    font-size: .9rem;
    color: var(--text-2);
  }

  /* Tips */
  .tips-card {
    padding-top: 6px;
  }

  .tips-card h3 {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  .tips-card ul {
    margin: 6px 0 0;
    padding-inline-start: 1.15rem;
  }

  .tips-card li {
    font-size: .92rem;
    line-height: 1.35;
    margin: 4px 0;
  }

  /* Select caret (single-line, percent-encoded SVG) */
  select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-inline-end: 36px;
  }

  /* RTL flip (safe to keep or omit) */
  :root:dir(rtl) select:not([multiple]) {
    background-position: left 12px center;
  }

  /* Extra-wide */
  @media (min-width: 1800px) {
    .layout {
      grid-template-columns:
        minmax(0, 1.4fr) minmax(0, 3fr) minmax(var(--right-min), clamp(260px, 14vw, 300px));
    }
  }

  /* Responsive */
  @media (max-width: 1200px) {
    .layout {
      grid-template-columns: 1fr 1fr;
    }

    .panel.left {
      grid-column: 1;
      max-height: none;
    }

    .panel.middle {
      grid-column: 2;
    }

    .panel.right {
      grid-column: 1 / -1;
      max-width: none;
    }
  }

  @media (max-width: 860px) {
    .layout {
      grid-template-columns: 1fr;
    }

    .panel.left,
    .panel.middle,
    .panel.right {
      grid-column: 1;
    }

    .panel.middle {
      grid-template-columns: 1fr;
    }

    .grid-2 {
      grid-template-columns: 1fr;
    }
  }

  /* === Logical properties & RTL resilience ================================ */
  /* “Push to the end” should be writing-mode safe */
  .tips-card .row-between> :last-child {
    margin-inline-start: auto;
  }

  /* Lists that previously hard-coded left margin */
  .output ul {
    margin: 6px 0 0 0;
    margin-inline-start: 1.1rem;
  }

  /* =========================================================
     Rating widget — global (.rating.card)
     Same structure used on Campaign, Engagement, Qualification.
     Page-specific positioning rules stay in each page CSS.
     ========================================================= */

  .rating.card {
    padding: var(--s-3, 12px);
  }

  .rating.card .stars {
    display: inline-flex;
    gap: 6px;
    margin-top: 8px;
  }

  .rating.card .star {
    font-size: 22px;
    line-height: 1;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--chip-bg, rgba(0,0,0,.04));
    border-radius: 999px;
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .rating.card .star.is-on {
    background: color-mix(in srgb, var(--accent) 16%, var(--chip-bg));
    box-shadow: var(--ring-shadow, 0 0 0 3px rgba(70, 30, 92, 0.10));
  }

  @media (hover:hover) {
    .rating.card .star:hover {
      transform: translateY(-1px);
      box-shadow: var(--ring-shadow, 0 0 0 3px rgba(70, 30, 92, 0.10));
    }
  }

  .rating.card textarea {
    width: 100%;
    margin-top: 6px;
    resize: vertical;
  }

  /* Print */
  @media print {
    @page {
      margin: 16mm;
    }

    /* Prefer light ink on white paper */
    body {
      background: #fff !important;
      color: #000 !important;
      -webkit-print-color-adjust: exact;
      /* better background rendering in some browsers */
      print-color-adjust: exact;
    }

    /* Hide chrome / non-essential UI */
    .app-header,
    .panel.left,
    .panel.right,
    .actions,
    #diagnostics,
    .status {
      display: none !important;
    }

    /* Remove layout grid & any sticky/positioning */
    .layout,
    .panel.middle,
    .output-card {
      display: block !important;
      padding: 0 !important;
      margin: 0 !important;
      position: static !important;
      max-width: none !important;
      box-shadow: none !important;
    }

    /* Main output styling for print */
    .output-card .output-head,
    .output-card,
    .output {
      box-shadow: none !important;
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    /* Avoid awkward splits */
    .output,
    .output-card {
      break-inside: avoid-page;
      page-break-inside: avoid;
      /* legacy alias */
    }

    /* Optional: show link destinations */
    a[href]:after {
      content: " (" attr(href) ")";
      font-size: 10pt;
    }

    /* Titles & body text sizing for paper */
    #output-title {
      margin: 0 0 6mm;
      font-size: 20pt;
      line-height: 1.2;
    }

    #output {
      font: 12pt/1.4 "Segoe UI", Roboto, Arial, sans-serif;
      white-space: pre-wrap;
    }
  }

  /* Header logo alignment */
  .app-header .header-left {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
  }

  .app-header .logo {
    height: var(--logo-h);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  .app-header.topbar.compact .logo {
    height: clamp(26px, 2vw, 34px);
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
    min-width: 0;
  }

  .app-header .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
  }

  /* Left column scroll/focus offsets */
  .panel.left {
    scroll-padding-top: 48px;
  }

  .panel.left .card>legend {
    top: 0;
    /* matches sticky header offset */
  }

  .panel.left .card>legend+* {
    margin-top: 8px;
  }

  .panel.left :is(.field, input, select, textarea) {
    scroll-margin-top: 48px;
  }

  /* Tips header layout */
  .tips-card .row-between {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .tips-card .row-between> :last-child {
    margin-left: auto;
  }

  /* Helpful tips chips */
  #tips-list {
    list-style: none;
    margin: 6px 0 0;
    padding-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #tips-list li {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: .9rem;
    color: var(--text-2);
  }

  /* ---------- Conversation Guide (scoped) ---------- */
  .output {
    font-size: .9rem;
    line-height: 1.5;
  }

  /* Preface (hello + motivation) */
  .output .script-preface {
    padding: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border);
    margin: 0 0 var(--s-2);
    background: transparent;
  }

  .output .script-preface .hello {
    margin: 0 0 .25rem;
    font-weight: 600;
  }

  .output .script-preface .muted {
    margin: 0;
    /*color: var(--text-2);*/
  }

  /* Section card */
  .output .script-sec {
    margin: var(--s-1) 0;
    padding: var(--s-2);
    background: var(--card-bg);
    /*border: 1px solid var(--border);
    border-radius: 10px;*/
  }

  .output .script-sec>h3 {
    font-size: calc(var(--fs-output-h3) * 0.9);
    line-height: 1.25;
    /*margin: 0 0 6px;*/
    color: var(--text-1);
  }

  .output .script-sec .sec-body p {
    margin: 2px 0;
  }

  .output .script-sec .sec-body li {
    margin: 2px 0;
  }

  /* Tips section inside the guide */
  .output .script-sec.tips ol {
    margin: .25rem 0 .5rem 1.25rem;
  }

  /* Remove legacy/global spacing that caused big gaps */
  .output h3 {
    margin: 0;
  }

  /* Openers */
  #openers-body {
    padding: 0;
  }

  #openers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
  }

  #openers-list li {
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: .55rem .7rem;
    background: var(--surface-1);
    font-size: .95rem;
    line-height: 1.35;
  }

  #openers-list li.muted {
    opacity: .7;
  }

  /* Highlighter */
  .output mark.hl {
    background: #FFF59D;
    padding: 0 .08em;
    border-radius: .18em;
  }

  /* ===== Reusable tile grid + cards ===== */
  .grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
  }

  /* Base card styles (driven by tokens) */
  .tool {
    display: block;
    position: relative;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 14px;
    padding: 16px 16px 18px;
    box-shadow: var(--shadow);
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
    font-weight: 600;
    color: var(--tile-text);
  }

  .tool h1,
  .tool h2,
  .tool h3,
  .tool h4 {
    color: var(--tile-title);
  }

  :where(a.tool) {
    color: inherit;
    text-decoration: none;
  }

  .tool .tool-title {
    color: var(--tile-title);
    font-weight: 600;
    line-height: 1.25;
  }

  .tool:focus-visible {
    outline: var(--ring-outline);
    outline-offset: 2px;
    box-shadow: var(--ring-shadow);
  }

  .tool small {
    color: var(--tile-muted);
    display: block;
    margin-top: 6px;
    line-height: 1.35;
  }

  /* Pill semantics (token-driven) */
  .pill {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--pill-bg-teal-12);
    color: var(--brand-teal);
    border: 1px solid var(--pill-bd-teal-32);
    margin-top: 10px;
  }

  /* Disabled tiles (CSS + ARIA) */
  :where(.tool.disabled, .tool[aria-disabled="true"]) {
    cursor: not-allowed;
    pointer-events: none;
    color: color-mix(in srgb, var(--tile-text) 65%, transparent);
    background: linear-gradient(180deg, var(--card-bg), color-mix(in srgb, var(--border-2) 40%, transparent));
    opacity: .72;
    box-shadow: none;
    transform: none;
    text-decoration: none;
  }

  /* ===== Suite: page title band ===== */

  /* Fallback first (works everywhere) */
  .suite-pagebar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
  }

  /* Upgrade to gradient accents when color-mix is supported */
  @supports (color: color-mix(in srgb, white 50%, black)) {
    :root:not([data-theme="dark"]) .suite-pagebar {
      background:
        /* subtle teal wash that fades to transparent */
        linear-gradient(90deg,
          color-mix(in srgb, var(--brand-teal) 22%, #fff 78%),
          transparent),
        /* faint teal→amethyst ribbon */
        linear-gradient(90deg,
          color-mix(in srgb, var(--brand-teal) 20%, transparent),
          color-mix(in srgb, var(--accent) 20%, transparent));
    }
  }

  /* In dark, keep it clean and flat */
  :root[data-theme="dark"] .suite-pagebar {
    background: var(--card-bg);
  }

  .suite-pagebar .container {
    max-width: var(--stage-max, 1180px);
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .suite-pagebar .page-title {
    margin: 0;
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 28px);
    color: var(--heading);
  }

  /* Suite Shell */
  .suite-topbar {
    border-bottom: 1px solid var(--border);
  }

  .suite-topbar .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  .suite-brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .suite-title {
    text-align: center;
    font-weight: 600;
    color: var(--heading);
  }

  .suite-chips {
    display: flex;
    justify-content: flex-end;
    /* was 'end' */
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Accent rule under the topbar */
  .suite-topbar::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--brand-teal) 35%, transparent),
        color-mix(in srgb, var(--accent) 35%, transparent));
  }

  /* Dark: very subtle line */
  :root[data-theme="dark"] .suite-topbar::after {
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, .06),
        rgba(255, 255, 255, .02));
  }

  /* Suite Toolbar */
  .suite-toolbar {
    position: sticky;
    top: var(--header-h);
    /* keep it below the sticky header */
    z-index: 40;
    /* header is higher (e.g. 100) */
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
  }

  .suite-toolbar .container {
    max-width: var(--stage-max);
    /* centralise width control */
    margin: 0 auto;
    padding-block: 10px;
    padding-inline: 16px;
  }

  .toolbar-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .toolbar-left,
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Scope these to avoid clashing with header definitions */
  .suite-toolbar .calltype-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .suite-toolbar .calltype-mini .mini-label {
    color: var(--muted);
    font-size: 12px;
  }

  .suite-toolbar .calltype-mini select {
    min-width: 140px;
  }

  .suite-toolbar .calltype-mini .remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
  }

  .suite-toolbar .model-note {
    color: var(--muted);
    font-size: 13px;
  }

  .suite-toolbar .model-note .label {
    opacity: .9;
  }

  /* Workboard (3-column shell for tool pages) */
  .workboard {
    max-width: var(--stage-max);
    margin: 0 auto;
    padding: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns:
      minmax(var(--left-min), 1fr) minmax(680px, 2fr) minmax(var(--right-min), 320px);
    align-items: start;
  }

  .setup-panel,
  .work-canvas,
  .assist-rail {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 16px;
  }

  .setup-panel,
  .assist-rail {
    max-height: calc(100dvh - (var(--header-h) + 140px));
    overflow: auto;
  }

  /* Breakpoints */
  @media (max-width:1279px) {
    .workboard {
      grid-template-columns:
        minmax(var(--left-min), 1fr) 1fr;
    }

    .assist-rail {
      display: none;
    }
  }

  @media (max-width:900px) {
    .workboard {
      grid-template-columns: 1fr;
    }

    .setup-panel {
      order: 2;
    }
  }

  /* Hovers only when a true hover pointer exists — token driven, same in light/dark */
  @media (hover: hover) and (pointer: fine) {

    /* Sales: hover #64234A, white text */
    .group-sales .tool:hover {
      --tile-bg: var(--d-accent-pressed);
      /* #64234A */
      background: var(--tile-bg) !important;
      transform: translateY(-1px);
    }

    .group-sales .tool:hover .tool-title,
    .group-sales .tool:hover small {
      color: #fff !important;
    }

    /* Marketing: hover #E79101, black text */
    .group-marketing .tool:hover {
      --tile-bg: var(--c-gold-pressed);
      /* #E79101 in light */
      background: var(--tile-bg) !important;
      transform: translateY(-1px);
    }

    html[data-theme="dark"] .group-marketing .tool:hover {
      --tile-bg: var(--d-gold-pressed);
      /* #E79101 in dark */
      background: var(--tile-bg) !important;
    }
  }

  /* ===== High-contrast & forced-colors support ===== */
  @media (forced-colors: active) {

    * {
      forced-color-adjust: auto;
    }

    :where(a, button, [role="button"], [tabindex]:not(input):not(select):not(textarea)):focus-visible,
    .tool:focus-visible,
    .chip:focus-visible {
      outline: var(--ring-outline);
      outline-offset: 2px;
      box-shadow: var(--ring-shadow);
    }

    .panel,
    .tool,
    .btn,
    .btn.primary,
    .btn-primary,
    .btn-cta,
    .btn-accent,
    .btn-tertiary {
      background: ButtonFace !important;
      color: ButtonText !important;
      border-color: ButtonText !important;
      box-shadow: none !important;
    }

    .btn[disabled] {
      opacity: 1;
    }

    /* avoid dimming in forced colors */

    select:not([multiple]) {
      background-image: none !important;
    }

    .tool :where(a) {
      color: LinkText !important;
      text-decoration: underline;
    }

    .tool:hover {
      transform: none !important;
      filter: none !important;
    }
  }

  /* Prefer more contrast: strengthen borders/text and focus cues */
  @media (prefers-contrast: more) {

    .kicker,
    .output-card .meta,
    .intel-slot,
    .tool small,
    .help,
    .model-note,
    .calltype-mini .mini-label {
      color: var(--text-1) !important;
    }

    .panel,
    .tool,
    .intel-grid li,
    .intel-chip,
    #openers-list li,
    .output,
    .badge,
    .pill {
      border-color: currentColor !important;
      box-shadow: none;
    }

    :where(a, button, [role="button"], [tabindex]:not(input):not(select):not(textarea)):focus-visible {
      outline-width: 4px;
      box-shadow: none;
    }

    .suite-topbar::after {
      background-image: none;
      background: rgba(0, 0, 0, .20);
    }

    :root[data-theme="dark"] .suite-topbar::after {
      background: rgba(255, 255, 255, .25);
    }
  }

  /* Avatar */
  .user-avatar,
  .profile-avatar,
  .avatar {
    --sz: 72px;
    width: var(--sz);
    height: var(--sz);
    border-radius: 999px;
    flex: 0 0 var(--sz);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand-gold) 20%, #fff);
    border: 2px solid color-mix(in srgb, var(--brand-gold) 50%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  }

  .user-avatar img,
  .profile-avatar img,
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
  }

  :root[data-theme="dark"] .user-avatar,
  :root[data-theme="dark"] .profile-avatar,
  :root[data-theme="dark"] .avatar {
    background: color-mix(in srgb, var(--brand-gold) 18%, #2A242C);
    border-color: color-mix(in srgb, var(--brand-gold) 40%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  }
}

/* Motion preferences: honor users who choose "Reduce Motion" */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  /* Greatly reduce motion (keep events firing) */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  /* Stop explicit spinners */
  .btn.busy .spinner {
    animation: none !important;
  }

  /* Neutralize hover lifts/filters */
  .tool:hover,
  .group-sales .tool:hover,
  .group-marketing .tool:hover {
    transform: none !important;
    filter: none !important;
  }

  /* Avoid snap jumps in the left panel */
  .panel.left {
    scroll-snap-type: none !important;
  }
}

/*  Main menu only items (PBI etc) */
/* ===== Main Menu (index) specifics ===== */

/* Keep index page narrower than tools */
.container {
  max-width: var(--stage-max, 1180px);
  margin: 0 auto;
  padding: 12px 20px 28px;
}

/* Page intro + avatar */
.page-intro {
  margin: 18px 0 10px;
}

.welcome-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.avatar {
  --size: clamp(52px, 6vw, 74px);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #DDD;
  border: 3px solid rgba(70, 30, 92, .4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  .avatar {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--brand-gold) 20%);
  }
}

.avatar.is-empty::after {
  content: "✦";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--size) * .46);
  color: var(--brand-gold);
}

/* ---- Top-bar profile avatar ---- */
.topbar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-gold, #c9a227);
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.topbar-avatar:hover {
  opacity: 0.82;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35);
}

.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.topbar-avatar .avatar-initials {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* Section framing */
.backdrop {
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  margin: 10px 0 12px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Grids for tiles on main menu (3 → 2 → 1) */
.grid-3,
.grid {
  display: grid;
  gap: 14px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width:980px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {

  .grid-3,
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Brand tiles — single source of truth (same in light & dark) ===== */

/* Sales: bg #461E5C, hover #64234A, white text */
.group-sales .tool {
  --tile-bg: var(--c-accent);
  /* #461E5C */
  --tile-border: var(--d-accent-pressed);
  /* #64234A */
  --tile-text: #fff;

  background: var(--tile-bg);
  border-color: var(--tile-border);
  color: var(--tile-text);
}

.group-sales .tool .tool-title {
  color: #fff;
}

.group-sales .tool small {
  color: color-mix(in srgb, #fff 82%, transparent);
}

/* Dark uses the same visual via dark tokens (parity across themes) */
html[data-theme="dark"] .group-sales .tool {
  --tile-bg: var(--d-accent);
  /* #461E5C */
  --tile-border: var(--d-accent-pressed);
  /* #64234A */
  /* color stays #fff */
}

/* Marketing: bg #FFAD03, hover #E79101, black text */
.group-marketing .tool {
  --tile-bg: var(--c-gold);
  /* #FFAD03 */
  --tile-border: var(--c-gold-pressed);
  /* #E79101 */
  --tile-text: #000;

  background: var(--tile-bg);
  border-color: var(--tile-border);
  color: var(--tile-text);
}

.group-marketing .tool .tool-title {
  color: #000;
}

.group-marketing .tool small {
  color: color-mix(in srgb, #000 65%, transparent);
}

/* Dark uses the same visual via dark tokens */
html[data-theme="dark"] .group-marketing .tool {
  --tile-bg: var(--d-gold);
  /* #FFAD03 */
  --tile-border: var(--d-gold-pressed);
  /* #E79101 */
  /* color stays #000 */
}

/* Hovers only when a true hover pointer exists — exact colours, no brightness */
@media (hover: hover) and (pointer: fine) {
  .group-sales .tool:hover {
    --tile-bg: var(--d-accent-pressed);
    /* #64234A */
    background: var(--tile-bg) !important;
    transform: translateY(-1px);
  }

  .group-sales .tool:hover .tool-title,
  .group-sales .tool:hover small {
    color: #fff !important;
  }

  .group-marketing .tool:hover {
    --tile-bg: var(--c-gold-pressed);
    /* #E79101 (light) */
    background: var(--tile-bg) !important;
    transform: translateY(-1px);
  }

  html[data-theme="dark"] .group-marketing .tool:hover {
    --tile-bg: var(--d-gold-pressed);
    /* #E79101 (dark) */
    background: var(--tile-bg) !important;
  }
}

/* Power BI card */
.pbi-card {
  margin-top: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.pbi-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pbi-head>.pbi-actions {
  margin-inline-start: auto;
}

#reportContainer {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

/* Full-screen (CSS-driven; toggled by [data-fullscreen]) */
.pbi-card[data-fullscreen] {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 1000);
  padding: 16px;
  border-radius: 0;
  background: var(--bg);
}

.pbi-card[data-fullscreen] .pbi-head {
  padding-inline: 2px;
}

.pbi-card[data-fullscreen] #reportContainer {
  min-height: calc(100dvh - 84px);
}

.no-scroll {
  overflow: hidden;
}

/* === FINAL HOVER OVERRIDES (dark mode) — ensure pressed colours apply === */
@media (hover: hover) and (pointer: fine) {

  /* Sales — pressed: #64234A */
  html[data-theme="dark"] .group-sales .tool:hover {
    --tile-bg: var(--d-accent-pressed) !important;
    /* #64234A */
    background: var(--tile-bg) !important;
    transform: translateY(-1px);
    filter: none !important;
    /* in case any legacy filter lingers */
  }

  /* Marketing — pressed: #E79101 */
  html[data-theme="dark"] .group-marketing .tool:hover {
    --tile-bg: var(--d-gold-pressed) !important;
    /* #E79101 */
    background: var(--tile-bg) !important;
    transform: translateY(-1px);
    filter: none !important;
  }
}

/* Header brand block */
.app-header .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically align with logo */
  gap: 2px;
  /* tighten title ↔ kicker spacing */
}

/* Title */
.app-header .app-title {
  margin: 0;
  /* remove default h1 margins */
  line-height: 1.15;
  /* tighter leading */
  letter-spacing: -0.01em;
  /* subtle tracking for density */
  font-weight: 700;
  /* keep weight for brand impact */
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Kicker (subtitle) */
.app-header .kicker {
  margin: 0;
  line-height: 1.15;
  /* match title rhythm */
  font-size: 0.95rem;
  /* slightly smaller than body */
  color: var(--text-muted, #666);
  letter-spacing: -0.005em;
}

/* Make the entire brand stack a single, large click target */
.header-left .brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  outline-offset: 3px;
  /* clear keyboard focus halo */
}

/* Subtle “it’s a link” affordance on hover/focus */
.header-left .brand-link:hover .app-title,
.header-left .brand-link:focus .app-title {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}

/* Optional: tiny visual nudge on the logo */
.header-left .brand-link:hover .logo,
.header-left .brand-link:focus .logo {
  filter: contrast(115%);
  transform: translateY(-0.5px);
}

/* Keep tightened type from earlier */
.app-header .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.app-header .app-title {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.app-header .kicker {
  margin: 0;
  line-height: 1.15;
  font-size: 0.95rem;
  color: var(--text-muted, #666);
}

/* ===== Follow-up email modal (WIDE variant) ===== */
#script-modal.modal-wide {
  width: min(98vw, 1100px);
  /* nice and wide on desktop */
  max-width: 1100px;
  max-height: 90vh;
  /* keep within viewport height */
  padding: var(--s-4);
}

#script-modal.modal-wide::backdrop {
  background: rgba(0, 0, 0, .35);
}

/* Sticky header with actions (Copy / Close) */
#script-modal .email-modal .modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  background: var(--panel-bg, #fff);
  z-index: 1;
  border-bottom: 1px solid var(--border);
}

#script-modal .email-modal .modal-head h3 {
  font-size: calc(var(--fs-output-h3) * 0.95);
  margin: 0;
}

#script-modal .email-modal .modal-head .spacer {
  flex: 1;
}

/* Large, readable preview area (no cramped textarea) */
#script-modal .email-preview {
  white-space: pre-wrap;
  font: 400 1rem/1.6 var(--font-sans, system-ui, sans-serif);
  color: var(--text-1);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--s-3);
  margin: 0;
  max-height: calc(90vh - 4rem);
  /* allow the header + padding */
  overflow: auto;
  /* scroll only if truly long */
}

/* Buttons look neat inside the head */
#script-modal .email-modal .btn.small {
  padding: .35rem .65rem;
}

@layer components {

  /* Optional: dim modal header controls while regenerating */
  [aria-busy="true"] .btn {
    opacity: 0.6;
    pointer-events: none;
  }
}


/* Optional: dim modal header controls while regenerating */
[aria-busy="true"] .btn {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Warmer header background (overrides) --- */

/* Tokens so you can tweak later from one place */
:root {
  --header-bg: #F7EBDD;
  /* warm sand */
  --header-border: #E7D8C6;
  /* soft tan */
}

/* If your app toggles dark mode with [data-theme="dark"] */
:root[data-theme="dark"] {
  --header-bg: #2B2330;
  /* warm plum */
  --header-border: #3A303B;
  /* deeper border */
}

/* Apply just to the top bar with the logo */
.app-header {
  background: var(--header-bg) !important;
  border-bottom-color: var(--header-border) !important;
}

/* Fallback for systems that rely on OS dark mode instead of data-theme */
@media (prefers-color-scheme: dark) {
  .app-header {
    background: #2B2330;
    border-bottom-color: #3A303B;
  }
}

/* === Mobile header layout fix (stack + wrap) ============================= */
/* Place at the very end of styles.css */

@media (max-width: 640px) {

  /* Make the header a two-row stack */
  .app-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    /* tidy spacing between rows */
    padding: 8px 12px;
    /* reduce side padding on small screens */
  }

  /* Brand stays on its own row; truncate long titles safely */
  .app-header .header-left .app-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Controls row: allow wrapping with good spacing */
  .app-header .header-right {
    display: flex;
    flex-wrap: wrap;
    /* allow chips to wrap to a new line */
    row-gap: 8px;
    column-gap: 8px;
    overflow: visible;
    /* remove the tiny horizontal scroller */
  }

  /* Hide the redundant “Sales model in use: …” note on mobile */
  .app-header .model-note {
    display: none;
  }

  /* Keep the call type group compact */
  .app-header .calltype-mini {
    max-width: 100%;
  }
}

/* Extra-narrow handsets: drop the subtitle for space */
@media (max-width: 420px) {
  .app-header .kicker {
    display: none;
  }
}

/* Temporarily hide Sales model inside Call details (keep markup intact) */
.field-calltype-xs {
  display: none !important;
}

/* Hide change log and activity (temporary) */
.change-log,
.activity {
  display: none !important;
}

/* === Engage page only: right-rail intel chips (hover highlight + hand icon) */
html[data-page="engagement"] .intel-chip {
  position: relative;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .05s ease;
  padding-left: 28px;
  /* space for the icon */
}

html[data-page="engagement"] .intel-chip::before {
  content: "👆";
  /* click hint */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  opacity: .75;
  font-size: .95em;
  pointer-events: none;
  /* don’t block clicks */
}

html[data-page="engagement"] .intel-chip:hover,
html[data-page="engagement"] .intel-chip:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
  border-color: var(--accent);
  box-shadow: var(--ring-shadow);
  color: var(--text-1);
  outline: none;
}

html[data-page="engagement"] .intel-chip:active {
  transform: translateY(0) scale(.98);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}

/* === Engage app only — readable Objections (Q→A) ======================== */
html[data-page="engagement"] #intel-objections .objections-text .qa {
  padding: 10px 12px;
  margin: 0 0 10px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-1);
}

html[data-page="engagement"] #intel-objections .objections-text .q,
html[data-page="engagement"] #intel-objections .objections-text .a {
  margin: 0;
  line-height: 1.45;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 2px;
}

html[data-page="engagement"] #intel-objections .objections-text .a.missing {
  cursor: default;
  opacity: .75;
}

html[data-page="engagement"] #intel-objections .objections-text .q:hover,
html[data-page="engagement"] #intel-objections .objections-text .a:hover,
html[data-page="engagement"] #intel-objections .objections-text .q:focus-visible,
html[data-page="engagement"] #intel-objections .objections-text .a:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
  outline: none;
}


/* ===== Quick checklist modal typography & spacing ===================== */
#quickcheck-modal .modal-body {
  line-height: 1.6;
  font-size: 0.98rem;
  /* subtle readability bump */
}

#quickcheck-modal .modal-body h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 1rem 0 .5rem 0;
  font-weight: 700;
}

#quickcheck-modal .modal-body h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: .85rem 0 .35rem 0;
  font-weight: 600;
}

#quickcheck-modal .modal-body p {
  margin: .45rem 0;
}

#quickcheck-modal .modal-body ul {
  margin: .35rem 0 .65rem 0;
  padding-left: 1.15rem;
}

#quickcheck-modal .modal-body li+li {
  margin-top: .25rem;
}

/* Space above the upload controls (before the sr-only label) */
html[data-page="qualification"] #file_hint {
  margin-bottom: var(--s-3) !important;
  /* adjust to taste: var(--s-2|s-4) */
}

/* ===== Qualification · Evidence spacing tidy =========================== */
/* 1) Add breathing room under the CH fetch row */
html[data-page="qualification"] fieldset[aria-labelledby="legend-evidence"] .row-between:has(#fetch-chdi) {
  margin-bottom: var(--s-4);
  /* was .5rem inline; this is clearer */
}

/* 2) Make the Manual metrics accordion sit lower and read better */
html[data-page="qualification"] #manual-metrics {
  margin-top: var(--s-4) !important;
  /* override inline var(--s-3) */
  padding-top: var(--s-2);
}

html[data-page="qualification"] #manual-metrics>summary {
  margin-bottom: var(--s-2);
}

/* 3) Push the Upload block down (it’s the <div class="field"> that contains #report_files) */
html[data-page="qualification"] .field:has(#report_files) {
  margin-top: var(--s-4);
}

/* 4) Tidy hint spacing above the upload control */
html[data-page="qualification"] #file_hint {
  margin: 0 0 var(--s-2) 0;
}

/* Optional: ensure the big pill upload button (if styled) has space above itself */
html[data-page="qualification"] .field:has(#report_files) .btn,
html[data-page="qualification"] .field:has(#upload-reports) .btn {
  margin-top: var(--s-1);
}

/* === Make #upload-reports EXACTLY match the CH CTA ===================== */
/* 1) Kill any container rules that force full-width or odd margins */
html[data-page="qualification"] .field:has(#upload-reports) {
  margin-left: 0 !important;
  /* neutralise any left indent */
}

/* 2) Force the same inline pill sizing/typography as the CH button */
html[data-page="qualification"] .field:has(#upload-reports)>#upload-reports.btn.primary.btn-cta {
  display: inline-flex;
  /* stop block/full-width stretch */
  width: auto;
  max-width: max-content;
  align-items: center;
  justify-content: center;

  /* mirror button text metrics */
  font-size: .95rem;
  /* same readable size as CH CTA */
  line-height: 1.1;
  font-weight: 600;

  /* mirror padding & shape */
  padding: .5rem 1rem;
  border-radius: 9999px;
  /* pill look */
}

/* 3) Keep the hint normal size and give a clear gap above the button */
html[data-page="qualification"] #upload-block .upload-hint {
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--s-2) 0;
}

/* 4) Hide the file list until populated */
html[data-page="qualification"] #file_list:empty {
  display: none;
}

/* Header quick-checklist chip */
html[data-page="qualification"] #quickcheck-top.btn.tip-chip {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  /* bigger tap target */
  font-size: .95rem;
  /* slightly larger text */
  line-height: 1.25;
  white-space: normal;
  /* allow wrap so chip never overflows narrow right panel */
  text-align: center;
  max-width: 100%;
  border-radius: 18px;
  /* rest unchanged */
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: var(--text-1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}

html[data-page="qualification"] #quickcheck-top.btn.tip-chip:hover,
html[data-page="qualification"] #quickcheck-top.btn.tip-chip:focus-visible {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-1));
  border-color: var(--accent);
  box-shadow: var(--ring-shadow);
  outline: none;
}

html[data-page="qualification"] #quickcheck-top.btn.tip-chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Scope: Results header helper chip — match tip style */
.panel.middle .output-head #insight-help.btn.tip-chip {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-1));
  border-color: var(--accent);
  box-shadow: var(--ring-shadow);
  outline: none;
}
/* --- File-divider tabs --- */
.tabs { display:flex; align-items:flex-start; gap:12px; }
.tabs-left { display:flex; flex-direction:column; gap:6px; }

.tab {
  position: relative;
  padding: 10px 14px 10px 18px;
  border: 1px solid var(--border, #dcdcdc);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: #f7f7f7;
  cursor: pointer;
  min-width: 220px;
  text-align: left;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.tab::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 0; bottom: 0;
  width: 12px;
  border-radius: 0 12px 12px 0;
  background: #eaeaea;           /* edge spine colour */
  border: 1px solid var(--border, #dcdcdc);
  border-left: none;
}

.tab.active { background:#ffffff; z-index:1; }
.tab.active::before { background:#ffffff; }

.tab:nth-child(1){ background:#e9f7f0; }
.tab:nth-child(2){ background:#fff6e2; }
.tab:nth-child(3){ background:#e8f0ff; }
.tab:nth-child(4){ background:#ffe9ea; }
.tab:nth-child(5){ background:#f0e9ff; }
.tab:nth-child(6){ background:#e9fff7; }
.tab:nth-child(7){ background:#fdf0ff; }
.tab:nth-child(8){ background:#eaf9ff; }
.tab:nth-child(9){ background:#fff0e8; }
.tab:nth-child(10){ background:#eef8e8; }
.tab:nth-child(11){ background:#f7eef8; }
.tab:nth-child(12){ background:#eef2f8; }

/* panel sits to the right like a folder page */
.workspace .panel#centerPanel {
  border: 1px solid var(--border, #dcdcdc);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  flex: 1;
}
/* highlight target rows when jumping from Evidence Log */
tr.hl { 
  outline: 2px solid #6aa84f; 
  background: #f0ffe8; 
  transition: background 0.6s ease-in-out;
}
.table td, .table th { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
tr.hl { outline:2px solid #6aa84f; background:#f0ffe8; }
/* === Campaign-only: underline tab bar === */

/* Tab strip container */
.app-campaign .panel.middle .tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border, #e5e2dd);
  padding: 0 .5rem;
}

/* Horizontal row — override global .tabs-left column layout */
.app-campaign .panel.middle .tabs .tabs-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  overflow-x: visible;
  padding: 0;
}

/* Mount target: buttons become direct flex children */
.app-campaign .panel.middle .tabs #sectionTabs {
  display: contents;
}

/* Tab button — underline style, fills available width */
.app-campaign .panel.middle .tabs #sectionTabs .tab {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap;

  /* Underline geometry */
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-right: 1px solid var(--border, #e5e2dd) !important;
  border-radius: 0 !important;
  margin-bottom: -1px;

  /* Spacing & type */
  padding: 11px 12px;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;

  /* Resting state — subtle background */
  background: color-mix(in srgb, currentColor 5%, var(--card-bg, #fff)) !important;
  color: var(--text-2, #4a4650);
  box-shadow: none;
  cursor: pointer;

  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Kill the ::before folder-tab wedge */
.app-campaign .panel.middle .tabs #sectionTabs .tab::before {
  content: none !important;
}

/* Active tab — accent underline + filled background */
.app-campaign .panel.middle .tabs #sectionTabs .tab.active,
.app-campaign .panel.middle .tabs #sectionTabs .tab[aria-selected="true"] {
  border-bottom-color: var(--accent, #461e5c) !important;
  border-right-color: transparent !important;
  color: var(--text-1, #1e1b1b) !important;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #461e5c) 14%, var(--card-bg, #fff)) !important;
  box-shadow: none;
}

/* Hover */
.app-campaign .panel.middle .tabs #sectionTabs .tab:not(.active):not([aria-selected="true"]):hover {
  color: var(--text-1, #1e1b1b);
  background: color-mix(in srgb, currentColor 8%, var(--card-bg, #fff)) !important;
  filter: none;
}

/* Space between tab bar and content */
.app-campaign #centerPanel { margin-top: .25rem; }

/* BR-45. Terminal messages (refused, session expired, run failed) render in the output panel,
   where the user is already looking for their report, not under the submit button in the form
   column. Empty gets no box at all, so the element can stay in the accessibility tree: a live
   region hidden with [hidden] is out of the tree and its first message is never announced. */
.output-terminal:empty { display: none; }

.output-terminal {
  margin: 0 0 var(--s-4) 0;
  padding: var(--s-4);
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-2);
  background: var(--surface-2, #fff);
}

.output-terminal[data-kind="error"] {
  border-left-color: #d9534f;
  background: #fce3e2;
  color: #7b1c1c;
}

.output-terminal .output-terminal__msg { margin: 0; }

.output-terminal .output-terminal__action { margin-top: var(--s-3); display: inline-block; }

/* Module 74. The validation panel, shaped like .output-terminal above it because it answers a
   neighbouring question: that one says why there is no report, this one says what is wrong with
   the one you are looking at. Amber rather than red, because the report is still worth reading. */
.quality-flags {
  margin: 0 0 var(--s-4) 0;
  padding: var(--s-4);
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 4px solid #b8860b;
  background: #fdf6e3;
  color: #6b4e00;
}

.quality-flags .quality-flags__lead { margin: 0; font-weight: 600; }

.quality-flags .quality-flags__list { margin: var(--s-3) 0 0 0; padding-left: 1.25rem; }

.quality-flags .quality-flags__list:empty { display: none; }

.quality-flags .quality-flags__list li { margin: 0 0 var(--s-2) 0; }