/* ====== web/styles.css 07-10-2025 v12 ======================================
   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 1px rgba(0, 0, 0, .04),
      var(--gold-glow, 0 8px 18px rgba(255, 194, 67, .28));
    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 1px 1px rgba(0, 0, 0, .04),
        var(--gold-glow, 0 10px 20px rgba(255, 194, 67, .34));
    }
  }

  .file-btn:active::file-selector-button {
    transform: translateY(0);
    box-shadow:
      0 1px 1px rgba(0, 0, 0, .04),
      var(--gold-glow, 0 8px 18px rgba(255, 194, 67, .28));
  }

  .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;
  }

  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-end;
    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;
  }

  /* 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 .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);
}

/* 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;
}

/* 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 {

  /* Tools panel under the guide */
  .script-tools.card {
    margin-top: var(--s-4);
    padding: var(--s-3);
  }

  .script-tools .row-gap-top {
    margin-top: 10px;
  }

  .script-tools .row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .script-tools .row-wrap {
    flex-wrap: wrap;
  }

  .script-tools .between {
    justify-content: space-between;
  }

  .script-tools .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  #lookup-q {
    flex: 1;
    min-width: 240px;
  }

  #lookup-results {
    margin-top: 6px;
  }

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


/* Chips for sources (scoped so header/right-rail chips keep their look) */
.script-tools .chip,
#lookup-results .chip {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: underline;
  font-size: 12px;
  line-height: 1.2;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

/* 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;
}

/* === Qualification app only — mobile header layout & tweaks ============== */
@media (max-width: 640px) {
  html[data-page="qualification"] .app-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 8px 12px;
    /* reduce side padding on small screens */
  }

  html[data-page="qualification"] .app-header .header-right {
    display: flex;
    flex-wrap: wrap;
    /* allow chips/controls to wrap neatly */
    row-gap: 8px;
    column-gap: 8px;
    overflow: visible;
  }

  html[data-page="qualification"] .app-header .model-note {
    display: none;
    /* hide "Sales model in use" note on mobile */
  }

  html[data-page="qualification"] .app-header .header-left .app-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* truncate long titles */
  }
}

@media (max-width: 420px) {
  html[data-page="qualification"] .app-header .kicker {
    display: none;
    /* hide secondary kicker line on very small screens */
  }
}

/* Qualification app only */
html[data-page="qualification"] .is-hidden {
  display: none !important;
}

/* Hide Fetch iXBRL (belt-and-braces, even if HTML not changed) */
html[data-page="qualification"] #fetch-ixbrl {
  display: none !important;
}

/* Move notes buttons below the textarea if a grid/flex was forcing them above */
html[data-page="qualification"] .notes-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

/* Temporarily hide What changed and Recent activity (reversible) */
html[data-page="qualification"] #delta-log,
html[data-page="qualification"] #activity-log {
  display: none !important;
}

/* === Qualification: SWOT cards styled like Helpful tips =================== */
html[data-page="qualification"] .swot-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  cursor: pointer;
}

/* Hover/active shading aligned to design tokens */
@media (hover:hover) {
  html[data-page="qualification"] .swot-card:hover {
    background: var(--hover-tint-accent-6);
    border-color: var(--accent);
    box-shadow: var(--ring-shadow);
  }
}

html[data-page="qualification"] .swot-card:active {
  transform: translateY(0) scale(.985);
}

/* Numbered list inside each card */
html[data-page="qualification"] .swot-list {
  list-style: decimal;
  margin: 6px 0 0;
  padding-inline-start: 1.15rem;
}

html[data-page="qualification"] .swot-list li {
  font-size: .92rem;
  line-height: 1.35;
  margin: 4px 0;
  color: var(--text-2);
}

/* Align SWOT header like Helpful tips (single row) */
html[data-page="qualification"] #swot-panel #swot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  /* keep button on same line */
}

html[data-page="qualification"] #swot-panel #swot-header h3 {
  margin: 0;
  /* avoid pushing the chip down */
  white-space: nowrap;
  /* match tips header behaviour */
}

html[data-page="qualification"] #swot-panel #toggle-swot {
  margin-left: auto;
  padding: 12px 18px;
  font-weight: 600;
}

/* === Qualification UX tidy — Option 1 overrides ====================== */
html[data-page="qualification"] .panel.left {
  max-height: none;
  /* remove independent scrolling */
  overflow: visible;
  scroll-snap-type: none;
}

/* Evidence block spacing */
html[data-page="qualification"] fieldset.card.callout-gold {
  padding: var(--s-4);
  margin-top: var(--s-4);
}

html[data-page="qualification"] #manual-metrics {
  margin-top: var(--s-4) !important;
}

html[data-page="qualification"] #fetch-chdi {
  margin-top: var(--s-2);
}

/* Only show the file list when there are items */
html[data-page="qualification"] #file_list:empty {
  display: none;
}

/* Consistent secondary button look for uploads */
.btn.secondary {
  background: var(--chip-bg);
  color: var(--text-1);
  border-color: var(--chip-bd);
}

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

/* === Qualification: Quick checklist card ================================= */
html[data-page="qualification"] #quickcheck-card {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  padding: 10px 12px;
}

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

html[data-page="qualification"] #quickcheck-card:active {
  transform: translateY(0) scale(.985);
}

/* Make the info button a touch smaller than the default 44px */
html[data-page="qualification"] #quickcheck-card .btn.info {
  --icon-size: 36px;
}

/* Modal content spacing (optional tidy) */
#quickcheck-modal .modal-body :where(h2, h3) {
  margin-top: 1rem;
  margin-bottom: .5rem;
}

#quickcheck-modal .modal-body p {
  margin: .4rem 0;
  line-height: 1.5;
}

#quickcheck-modal .modal-body ul {
  padding-inline-start: 1.15rem;
}

/* ===== 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.1;
  white-space: nowrap;
  /* don’t wrap; keep chip compact */
  border-radius: 9999px;
  /* 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: top tab bar over results === */
.app-campaign .panel.middle .tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-muted, #eee);
  padding: .5rem .5rem .5rem .5rem;
}

.app-campaign #sectionTabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.app-campaign #sectionTabs .tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  font: inherit;
  line-height: 1.1;
  background: var(--btn-ghost-bg, #f7f7f7);
  color: var(--text, #222);
  border: 1px solid var(--border-muted, #ddd);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.app-campaign #sectionTabs .tab:hover { filter: brightness(0.98); }

.app-campaign #sectionTabs .tab.active {
  background: var(--accent, #222);
  color: #fff;
  border-color: var(--accent, #222);
}

.app-campaign #centerPanel { margin-top: .25rem; }

/* === Campaign-only: top tab bar (override vertical stack) === */
.app-campaign .panel.middle .tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-muted, #eee);
  padding: .5rem .5rem;
}

/* Some themes make .tabs-left a vertical column — override */
.app-campaign .panel.middle .tabs .tabs-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;            /* wrap onto a second line when needed */
  overflow-x: auto;           /* allow horizontal scroll if no wrap */
}

/* Your mount target */
.app-campaign .panel.middle .tabs #sectionTabs {
  display: contents;          /* buttons are direct flex items of .tabs-left */
}

/* Stop buttons being full-width pills */
.app-campaign .panel.middle .tabs #sectionTabs .tab {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;     /* override any width:100% */
  min-width: 0 !important;
  white-space: nowrap;
  padding: .4rem .8rem;
  border: 1px solid var(--border-muted, #ddd);
  border-radius: 999px;
  background: var(--btn-ghost-bg, #f7f7f7);
  color: var(--text, #222);
  cursor: pointer;
}

.app-campaign .panel.middle .tabs #sectionTabs .tab:hover { filter: brightness(0.98); }

.app-campaign .panel.middle .tabs #sectionTabs .tab.active {
  background: var(--accent, #222);
  color: #fff;
  border-color: var(--accent, #222);
}

/* a little space between tabs and content */
.app-campaign #centerPanel { margin-top: .25rem; }