:root {
    /* ---- Neutrals: warm graphite "Ink" on warm "Bone" ---- */
    --ink-950: #141310;
    --ink-900: #1B1A16;
    --ink-800: #2A2823;
    --ink-700: #3A3833;
    --ink-600: #56534C;
    --ink-500: #74716A;
    --ink-400: #9A968D;
    --ink-300: #C3BFB5;
    --ink-200: #DFDBD1;
    --ink-150: #E7E3DA;
    --ink-100: #ECE9E1;
    --ink-50:  #F4F1EA;
    --bone:    #F7F5F0;
    --paper:   #FFFFFF;

    /* ---- Signal: cobalt brand accent ---- */
    --signal-700: #1842BE;
    --signal-600: #1E54E8;
    --signal-500: #3D6CF5;
    --signal-400: #6E93FF;
    --signal-300: #A9C0FF;
    --signal-200: #D2DEFF;
    --signal-100: #E6ECFF;
    --signal-50:  #F1F4FF;

    /* ---- Traffic-light: safe / hold / block ---- */
    --safe-700: #14794A; --safe-600: #1B935A; --safe-500: #22A862; --safe-100: #D7EFE1; --safe-50: #ECF8F1;
    --hold-700: #9A6207; --hold-600: #BE7C0C; --hold-500: #E0911A; --hold-100: #FAEAC8; --hold-50: #FDF6E7;
    --block-700: #B23227; --block-600: #CE3A2E; --block-500: #E2554A; --block-100: #FAD9D4; --block-50: #FCEBE8;

    /* ---- Fonts ---- */
    --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ---- Radius / shadow / motion ---- */
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
    --shadow-xs: 0 1px 1px rgba(20,19,16,0.05);
    --shadow-sm: 0 1px 2px rgba(20,19,16,0.06), 0 1px 1px rgba(20,19,16,0.04);
    --shadow-md: 0 4px 12px -2px rgba(20,19,16,0.10), 0 2px 4px -1px rgba(20,19,16,0.06);
    --shadow-lg: 0 12px 28px -6px rgba(20,19,16,0.14), 0 4px 8px -3px rgba(20,19,16,0.08);
    --shadow-xl: 0 24px 56px -12px rgba(20,19,16,0.22), 0 8px 16px -6px rgba(20,19,16,0.10);
    --inset: inset 0 1px 2px rgba(20,19,16,0.06);
    --ring-focus: 0 0 0 3px rgba(30,84,232,0.30);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 130ms; --dur-base: 200ms;

    /* ---- Legacy aliases (keep existing markup + inline var() refs working) ---- */
    --bg: var(--bone);
    --bg-2: var(--paper);
    --bg-3: var(--ink-50);
    --panel: var(--paper);
    --panel-strong: var(--paper);
    --border: var(--ink-200);
    --border-strong: var(--ink-300);
    --text: var(--ink-900);
    --text-dim: var(--ink-600);
    --text-muted: var(--ink-500);
    --accent: var(--signal-600);
    --accent-soft: var(--signal-100);
    --high: var(--block-600);
    --med: var(--hold-500);
    --low: var(--ink-400);
    --active: var(--safe-600);
    --planning: var(--signal-600);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bone);
    color: var(--ink-700);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01" 1;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 800;
    margin: 0;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    line-height: 1.18;
  }
  a { color: var(--signal-600); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
  ::selection { background: var(--signal-200); color: var(--ink-900); }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-500);
  }

  /* ---------- Modal ---------- */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(20,19,16,0.42);
    backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center;
    z-index: 200; padding: 24px;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    width: 100%; max-width: 520px;
    padding: 24px;
    box-shadow: var(--shadow-xl);
    /* Tall modals (New RFP) were centered by the flex backdrop and clipped top+bottom off-screen with
       no way to reach the cut-off content. Cap height to the viewport (minus the backdrop's 24px pad
       each side) and let the modal itself scroll. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .modal h3 {
    font-size: 18px; margin-bottom: 4px; letter-spacing: -0.01em; color: var(--ink-900);
  }
  .modal .modal-sub {
    color: var(--ink-500); font-size: 13px; margin-bottom: 18px;
  }
  .modal label {
    display: block; font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-500); margin: 14px 0 6px;
  }
  /* Labels that WRAP a checkbox/radio are clickable rows, not field captions — undo the
     uppercase-mono field-label styling so their content reads as normal prose. */
  .modal label:has(input[type="checkbox"]), .modal label:has(input[type="radio"]) {
    font-family: var(--font-sans); font-size: 14px; text-transform: none;
    letter-spacing: normal; color: var(--ink-900); margin: 0;
  }
  .modal input, .modal textarea {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    color: var(--ink-900);
    font-family: var(--font-sans); font-size: 14px;
    padding: 9px 12px;
    box-shadow: var(--inset);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  /* Checkboxes/radios must not stretch to 100% (that collapses neighboring flex content to 0 width). */
  .modal input[type="checkbox"], .modal input[type="radio"] {
    width: auto; padding: 0; box-shadow: none; flex: 0 0 auto;
  }
  .modal input:focus, .modal textarea:focus {
    outline: none; border-color: var(--signal-600); box-shadow: var(--ring-focus);
  }
  .modal textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
  .modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
  }
  .modal .btn-cancel {
    background: var(--paper); color: var(--ink-800);
    border: 1px solid var(--ink-200);
    height: 38px; padding: 0 14px; border-radius: var(--radius-md); cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px;
    box-shadow: var(--shadow-xs);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .modal .btn-cancel:hover { background: var(--ink-50); border-color: var(--ink-300); }
  .modal .btn-primary {
    background: var(--signal-600); color: #fff; border: 1px solid var(--signal-600);
    height: 38px; padding: 0 16px; border-radius: var(--radius-md); cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .modal .btn-primary:hover { background: var(--signal-500); border-color: var(--signal-500); }
  .modal .btn-primary:active { background: var(--signal-700); border-color: var(--signal-700); transform: translateY(0.5px); }
  .modal .btn-primary:disabled { opacity: 0.45; cursor: wait; }

  /* ---------- Global primary button (the styled rule above is modal-scoped; the RFP editor and other
       in-page surfaces use .btn-primary too, so give it a global definition). ---------- */
  .btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--signal-600); color: #fff; border: 1px solid var(--signal-600);
    height: 38px; padding: 0 16px; border-radius: var(--radius-md); cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .btn-primary:hover { background: var(--signal-500); border-color: var(--signal-500); }
  .btn-primary:active { background: var(--signal-700); border-color: var(--signal-700); transform: translateY(0.5px); }
  .btn-primary:disabled { opacity: 0.45; cursor: wait; }

  /* ---------- RFP status pill (Parsed / Parsing / Error) ---------- */
  .rfp-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: .02em; padding: 4px 11px; border-radius: var(--radius-pill);
    white-space: nowrap; line-height: 1;
  }

  /* ---------- RFP section editor: the draft writing surface (was an unstyled browser textarea) ---------- */
  #sectionDraftText {
    width: 100%; box-sizing: border-box;
    font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65;
    color: var(--ink-900); background: var(--paper);
    border: 1px solid var(--ink-200); border-radius: var(--radius-md);
    padding: 16px 18px; resize: vertical; min-height: 440px;
    box-shadow: var(--inset);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  #sectionDraftText:focus { outline: none; border-color: var(--signal-600); box-shadow: var(--ring-focus); }
  #sectionDraftText::placeholder { color: var(--ink-400); }

  /* ---------- Rich-text draft editor (humans shouldn't see raw markdown) ---------- */
  .rte-toolbar {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--ink-200); border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--ink-50); padding: 6px 8px;
  }
  .rte-btn {
    border: 1px solid transparent; background: none; border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    color: var(--ink-700); padding: 4px 9px; min-width: 30px; line-height: 1.2;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .rte-btn:hover { background: var(--paper); border-color: var(--ink-200); color: var(--ink-900); }
  .rte-sep { width: 1px; height: 18px; background: var(--ink-200); margin: 0 4px; }
  .rte {
    width: 100%; box-sizing: border-box; min-height: 440px;
    border: 1px solid var(--ink-200); border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--paper); padding: 16px 18px;
    font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65; color: var(--ink-900);
    box-shadow: var(--inset); outline: none; overflow-y: auto;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .rte:focus { border-color: var(--signal-600); box-shadow: var(--ring-focus); }
  .rte h2 { font-size: 18px; margin: 18px 0 8px; font-weight: 700; line-height: 1.3; }
  .rte h3 { font-size: 15px; margin: 14px 0 6px; font-weight: 700; line-height: 1.3; }
  .rte p { margin: 0 0 12px; }
  .rte ul, .rte ol { margin: 0 0 12px; padding-left: 22px; }
  .rte li { margin: 4px 0; }
  .rte > :first-child { margin-top: 0; }
  .rte:empty:before { content: attr(data-ph); color: var(--ink-400); }

  /* ---------- P7 AI-tells: spellcheck-style flags inside the draft editor ---------- */
  mark.tell-open {
    background: var(--hold-50); color: inherit; border-radius: 2px; cursor: pointer;
    text-decoration: underline wavy var(--hold-500); text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  mark.tell-open:hover { background: var(--hold-100); }
  /* A2b: an approver-banned phrase is a compliance block, not a style nit — stronger red, solid. */
  mark.tell-open.tell-banned {
    background: var(--block-50);
    text-decoration: underline solid var(--block-500); text-decoration-thickness: 2px;
  }
  mark.tell-open.tell-banned:hover { background: var(--block-100); }
  mark.tell-kept {
    background: transparent; color: inherit; cursor: pointer;
    text-decoration: underline dotted var(--ink-300); text-underline-offset: 3px;
  }
  .tell-pop {
    position: absolute; z-index: 400; max-width: 300px;
    background: var(--paper); border: 1px solid var(--ink-200); border-left: 3px solid var(--hold-500);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px 12px;
  }
  .tell-pop.kept { border-left-color: var(--ink-300); }
  .tell-pop .tp-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hold-700); margin-bottom: 4px;
  }
  .tell-pop.kept .tp-label { color: var(--ink-500); }
  .tell-pop .tp-hint { font-size: 12.5px; color: var(--ink-700); line-height: 1.45; margin-bottom: 8px; }
  .tell-pop .tp-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); margin-bottom: 8px; }

  /* Inline-image chip inside the draft editor: an atom you place, drag between
     paragraphs, and delete, never type into. Renders as a thumbnail here; compiles
     as a full-width branded figure at the same spot. */
  .rte figure.rte-inline-img {
    position: relative;
    margin: 12px 0; max-width: 340px; border: 1px solid var(--ink-150);
    border-radius: var(--radius-md); overflow: hidden; cursor: grab; user-select: all;
    box-shadow: var(--shadow-xs);
  }
  .rte figure.rte-inline-img img { display: block; width: 100%; pointer-events: none; }
  .rte figure.rte-inline-img:hover { outline: 2px solid var(--signal-300); outline-offset: 1px; }
  .rte figure.rte-inline-img.rte-dragging { opacity: 0.45; cursor: grabbing; }
  /* Remove control: appears on hover so an inline image can be taken back out of the draft. */
  .rte figure.rte-inline-img .rte-inline-img-del {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 24px; height: 24px; padding: 0; margin: 0; border: 0; border-radius: 50%;
    background: rgba(20,18,16,0.62); color: #fff; font-size: 17px; line-height: 1;
    cursor: pointer; opacity: 0; transition: opacity .12s ease;
    display: flex; align-items: center; justify-content: center; user-select: none;
  }
  .rte figure.rte-inline-img:hover .rte-inline-img-del,
  .rte figure.rte-inline-img .rte-inline-img-del:focus-visible { opacity: 1; }
  .rte figure.rte-inline-img .rte-inline-img-del:hover { background: var(--block-600, #B4442E); }

  /* committee role badge — must never wrap or shrink (long labels like PROGRAM OWNER were wrapping) */
  .buyer-role-badge { white-space: nowrap; flex: 0 0 auto; }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 300;
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-left: 3px solid var(--signal-600);
    color: var(--ink-800); font-size: 13.5px;
    padding: 12px 16px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
    pointer-events: none;
    max-width: 360px;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { border-left-color: var(--safe-600); }
  .toast.error { border-left-color: var(--block-600); }

  /* ---------- Top Bar ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(247, 245, 240, 0.82);
    border-bottom: 1px solid var(--ink-200);
    padding: 10px 20px; min-height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
  }
  .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0; }
  .brand-mark {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
    aspect-ratio: 1 / 1; flex: 0 0 32px; box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--signal-600);
    display: grid; place-items: center;
    color: #fff; box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .brand-mark svg {
    display: block; width: 20px; height: 20px;
    flex: none; aspect-ratio: 1 / 1;
  }
  .brand-mark-wordmark {
    width: auto; height: 40px; min-width: 0; min-height: 40px;
    aspect-ratio: auto; flex: 0 0 auto;
    background: transparent; box-shadow: none; border-radius: 0;
    overflow: visible; display: flex; align-items: center;
  }
  .brand-mark-wordmark img {
    display: block; height: 40px; width: auto;
  }
  .brand-has-wordmark .brand-text { width: 0; height: 0; overflow: hidden; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .brand-text { min-width: 0; display: flex; align-items: center; }
  .brand-text h1 {
    font-size: 16px; letter-spacing: -0.01em; color: var(--ink-900);
    line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tabs { display: flex; gap: 2px; min-width: 0; }
  .tab {
    background: transparent; border: none;
    color: var(--ink-500); font-family: var(--font-sans); font-weight: 500; font-size: 13.5px;
    padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .tab:hover { color: var(--ink-800); background: var(--ink-100); }
  .tab.active { background: var(--signal-100); color: var(--signal-700); font-weight: 600; }

  /* ---------- Layout ---------- */
  .container { max-width: 2000px; margin: 0 auto; padding: 28px 20px; }

  /* ---- Studio inspector (P1) ---- */
  #studioWorkspace { display:none; border:1px solid var(--ink-200, #e5e7eb); border-top:none; border-radius:0 0 12px 12px; overflow:hidden; }
  #studioInspector { flex:0 0 252px; width:252px; box-sizing:border-box; border-left:1px solid var(--ink-200, #e5e7eb); background:var(--paper, #fff); padding:14px; overflow-y:auto; }
  .insp-empty { font-size:12.5px; color:var(--ink-500, #8a938f); line-height:1.55; padding:6px 2px; }
  .insp-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-700, #444); margin-bottom:12px; }
  .insp-sec { padding:12px 0; border-top:1px solid var(--ink-150, #eee); }
  .insp-sec:first-of-type { border-top:none; padding-top:0; }
  .insp-label { display:block; font-size:10.5px; font-weight:700; color:var(--ink-500, #8a938f); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
  .insp-input { width:100%; box-sizing:border-box; font-size:13px; padding:5px 7px; border:1px solid var(--ink-200, #e5e7eb); border-radius:7px; background:var(--paper, #fff); color:var(--ink-900, #16191a); }
  .insp-input:focus { outline:none; border-color:var(--signal-500, #3D6CF5); box-shadow:0 0 0 3px rgba(30,84,232,0.14); }
  .insp-row { display:flex; gap:8px; }
  .insp-seg { display:inline-flex; border:1px solid var(--ink-200, #e5e7eb); border-radius:7px; overflow:hidden; }
  .insp-tog { min-width:32px; padding:5px 8px; border:none; background:var(--paper, #fff); color:var(--ink-700, #444); cursor:pointer; font-size:14px; line-height:1.1; border-right:1px solid var(--ink-200, #e5e7eb); }
  .insp-seg .insp-tog:last-child { border-right:none; }
  .insp-tog:hover { background:var(--ink-50, #f7f8fa); }
  .insp-tog.on { background:var(--signal-600, #1E54E8); color:#fff; }
  .insp-btn { flex:1; padding:6px 8px; font-size:12px; border:1px solid var(--ink-200, #e5e7eb); border-radius:7px; background:var(--paper, #fff); color:var(--ink-700, #444); cursor:pointer; white-space:nowrap; }
  .insp-btn:hover { background:var(--ink-50, #f7f8fa); }
  .insp-btn.on { background:var(--signal-100, #E6ECFF); border-color:var(--signal-300, #A9C0FF); color:var(--signal-700, #1842BE); }
  .insp-swatches { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
  .insp-swatch { aspect-ratio:1; border-radius:6px; border:1px solid rgba(0,0,0,.14); cursor:pointer; padding:0; }
  .insp-swatch.on { outline:2px solid var(--signal-600, #1E54E8); outline-offset:1px; }
  .insp-range { width:100%; accent-color:var(--signal-600, #1E54E8); }
  .insp-color { width:40px; height:28px; padding:0; border:1px solid var(--ink-200, #e5e7eb); border-radius:6px; background:none; cursor:pointer; }
  .insp-hex { font-family:var(--font-mono, monospace); font-size:11.5px; color:var(--ink-600, #667); }
  .insp-mini { font-size:10px; color:var(--ink-500, #8a938f); display:block; margin-bottom:2px; }
  @media (max-width:720px) {
    #studioWorkspace { flex-direction:column; }
    #studioInspector { width:auto; flex:none; border-left:none; border-top:1px solid var(--ink-200, #e5e7eb); }
  }

  /* ---- Studio filmstrip rail (P3) ---- */
  #studioRail { flex:0 0 128px; width:128px; box-sizing:border-box; border-right:1px solid var(--ink-200, #e5e7eb); background:var(--ink-50, #f7f8fa); padding:10px 9px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
  .rail-thumb { position:relative; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; box-shadow:0 1px 2px rgba(20,19,16,0.10); }
  .rail-thumb:hover { box-shadow:0 2px 6px rgba(20,19,16,0.16); }
  .rail-thumb.on { border-color:var(--signal-600, #1E54E8); }
  .rail-thumb img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
  .rail-num { position:absolute; bottom:3px; left:4px; font-size:10px; font-weight:700; color:#fff; background:rgba(20,19,16,.5); border-radius:4px; padding:0 5px; font-variant-numeric:tabular-nums; pointer-events:none; }
  .rail-acts { position:absolute; top:3px; right:3px; display:none; gap:3px; }
  .rail-thumb:hover .rail-acts { display:flex; }
  .rail-act { width:19px; height:19px; display:grid; place-items:center; font-size:11px; line-height:1; border:none; border-radius:5px; background:rgba(255,255,255,.92); color:var(--ink-700, #444); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.25); }
  .rail-act:hover { background:#fff; color:var(--ink-900, #16191a); }
  .rail-thumb.drag-over { border-color:var(--signal-400, #6E93FF); border-style:dashed; }
  @media (max-width:720px) {
    #studioRail { flex-direction:row; width:auto; flex:none; border-right:none; border-bottom:1px solid var(--ink-200, #e5e7eb); overflow-x:auto; overflow-y:hidden; }
    #studioRail .rail-thumb { flex:0 0 118px; }
  }
  #studioBar .mini-btn:disabled { opacity:.35; cursor:default; }
  .section { display: none; }
  .section.active { display: block; }

  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; gap: 12px;
  }
  .section-head h2 { font-size: 22px; letter-spacing: -0.015em; }
  .section-head .sub { color: var(--ink-500); font-size: 13.5px; margin-top: 3px; }

  /* ---------- Cards ---------- */
  .grid { display: grid; gap: 16px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  .card {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-sm); }
  .card h3 { font-size: 16px; margin-bottom: 4px; font-weight: 700; letter-spacing: -0.01em; }
  .card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
  /* Drift signal cards (#150): nag-banner treatment — solid severity border + a soft colored glow, keyed by severity. */
  .drift-card { border-radius: var(--radius-md); }
  .drift-card.sev-critical { background: var(--block-50); border-color: var(--block-500); box-shadow: 0 2px 14px color-mix(in srgb, var(--block-500) 22%, transparent), 0 1px 4px color-mix(in srgb, var(--block-500) 14%, transparent); }
  .drift-card.sev-critical:hover { border-color: var(--block-500); box-shadow: 0 3px 18px color-mix(in srgb, var(--block-500) 28%, transparent), 0 1px 5px color-mix(in srgb, var(--block-500) 16%, transparent); }
  .drift-card.sev-warn { background: var(--hold-50); border-color: var(--hold-500); box-shadow: 0 2px 14px color-mix(in srgb, var(--hold-500) 22%, transparent), 0 1px 4px color-mix(in srgb, var(--hold-500) 14%, transparent); }
  .drift-card.sev-warn:hover { border-color: var(--hold-500); box-shadow: 0 3px 18px color-mix(in srgb, var(--hold-500) 28%, transparent), 0 1px 5px color-mix(in srgb, var(--hold-500) 16%, transparent); }
  .drift-card.sev-info { background: var(--paper); border-color: var(--ink-300); box-shadow: 0 2px 12px color-mix(in srgb, var(--ink-500) 12%, transparent), 0 1px 4px color-mix(in srgb, var(--ink-500) 9%, transparent); }
  .drift-card.sev-info:hover { border-color: var(--ink-300); box-shadow: 0 3px 16px color-mix(in srgb, var(--ink-500) 16%, transparent), 0 1px 5px color-mix(in srgb, var(--ink-500) 11%, transparent); }

  .field-label {
    display: block;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 14px 0 5px;
    font-weight: 600;
  }
  .editable {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-800);
    font-family: inherit; font-size: 14px; line-height: 1.5;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    resize: vertical;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    min-height: 22px;
  }
  .editable:hover { background: var(--ink-50); }
  .editable:focus { outline: none; background: var(--paper); border-color: var(--signal-600); box-shadow: var(--ring-focus); }
  textarea.editable { min-height: 56px; font-family: inherit; }
  input.editable { min-height: 34px; }
  .editable.title-input { font-weight: 700; font-size: 16px; padding: 4px 6px; color: var(--ink-900); letter-spacing: -0.01em; }

  /* ---------- Channels / pills ---------- */
  .pill {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-pill);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--font-sans);
  }
  .pill-high { background: var(--block-50); color: var(--block-700); box-shadow: inset 0 0 0 1px var(--block-100); }
  .pill-med { background: var(--hold-50); color: var(--hold-700); box-shadow: inset 0 0 0 1px var(--hold-100); }
  .pill-low { background: var(--ink-100); color: var(--ink-600); }
  .pill-active { background: var(--safe-50); color: var(--safe-700); box-shadow: inset 0 0 0 1px var(--safe-100); }
  .pill-planning { background: var(--signal-50); color: var(--signal-700); box-shadow: inset 0 0 0 1px var(--signal-200); }
  .pill-paused { background: var(--ink-100); color: var(--ink-600); }

  .select-pill {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-pill);
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent; cursor: pointer;
    background: var(--ink-100); color: var(--ink-600);
    -webkit-appearance: none; appearance: none;
    transition: box-shadow var(--dur-fast) var(--ease);
  }
  .select-pill:focus { outline: none; box-shadow: var(--ring-focus); }

  .pill-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }

  /* ---------- Kanban ---------- */
  .issuer-grid {
    display: grid;
    /* Hard cap at 2 columns; default row flow = left→right, then next row. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 14px;
    align-items: start;
  }
  .issuer-card {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    /* Grid items default to min-width:auto, so a wide/unbreakable child (the folded-in brand block,
       long domains) forces the track — and the card — past the viewport, esp. in the single-column
       mobile layout below. min-width:0 lets the card shrink to its track; overflow-wrap breaks the
       long strings instead of blowing out. */
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .issuer-card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-sm); }
  .issuer-card .company { font-weight: 700; font-size: 15.5px; color: var(--ink-900); letter-spacing: -0.01em; }
  .issuer-card .domain { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-400); margin-left: 7px; }
  .issuer-card .cat { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
  .issuer-record { font-family: var(--font-mono); font-size: 11px; color: var(--ink-600); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
  .issuer-record .win { color: var(--safe-700); }
  .issuer-record .loss { color: var(--block-700); }
  .issuer-record .live { color: var(--signal-700); }
  .issuer-rfps { margin-top: 10px; border-top: 1px solid var(--ink-100); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
  .issuer-rfp {
    display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-800);
    padding: 3px 6px; margin: 0 -6px; border-radius: var(--radius-sm); cursor: pointer;
  }
  .issuer-rfp:hover { background: var(--signal-50); color: var(--signal-700); }
  .issuer-rfp .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .issuer-rfp .qual { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; padding: 1px 5px; border-radius: var(--radius-pill); flex: none; }
  .issuer-people { margin-top: 10px; border-top: 1px solid var(--ink-100); padding-top: 8px; }
  .issuer-people .ph { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 4px; }
  .issuer-people .pr { font-size: 11.5px; color: var(--ink-700); line-height: 1.5; }
  .issuer-note { font-size: 12.5px; color: var(--ink-600); line-height: 1.45; margin-top: 9px; }
  .issuer-radar { font-family: var(--font-mono); font-size: 11px; color: var(--hold-700); margin-top: 9px; }
  .issuer-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
  /* The card sets overflow-wrap:anywhere to break long domains/text; keep it off the action buttons so
     labels wrap between buttons, not mid-word ("Dra ft pitc h"). */
  .issuer-actions .mini-btn { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
  .mini-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: var(--paper); border: 1px solid var(--ink-200);
    color: var(--ink-700); font-size: 12px; font-weight: 500;
    padding: 4px 9px; border-radius: var(--radius-sm); cursor: pointer;
    font-family: var(--font-sans); box-shadow: var(--shadow-xs);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .mini-btn .ico { width: 14px; height: 14px; }
  .mini-btn:hover { color: var(--ink-900); background: var(--ink-50); border-color: var(--ink-300); }
  .mini-btn.danger { color: var(--block-700); }
  .mini-btn.danger:hover { color: var(--block-700); background: var(--block-50); border-color: var(--block-100); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--signal-600); color: #fff;
    border: 1px solid var(--signal-600);
    height: 38px; padding: 0 16px; border-radius: var(--radius-md);
    font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .btn:hover { background: var(--signal-500); border-color: var(--signal-500); }
  .btn:active { background: var(--signal-700); border-color: var(--signal-700); transform: translateY(0.5px); }
  .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .btn-ghost { background: var(--paper); border: 1px solid var(--ink-200); color: var(--ink-800); box-shadow: var(--shadow-xs); }
  .btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-300); }

  /* ---------- Studio UI: Lucide icons, form controls, toolbar ---------- */
  .ico { width:16px; height:16px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ico-sm { width:13px; height:13px; }
  /* btn-cancel was only styled inside .modal — give it a global style so card delete buttons aren't raw. */
  .btn-cancel { display:inline-flex; align-items:center; justify-content:center; gap:5px; background: var(--paper); border: 1px solid var(--ink-200); color: var(--ink-700); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size:12px; font-weight:500; padding:4px 9px; cursor:pointer; box-shadow: var(--shadow-xs); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .btn-cancel:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
  /* Plan-gate lock indicator — applied via attribute so it never rewrites a button's own content/icon. */
  [data-gate-locked="1"] { opacity: 0.55; }
  button[data-gate-locked="1"]::before, a[data-gate-locked="1"]::before {
    content:""; display:inline-block; width:12px; height:12px; margin-right:5px; vertical-align:-1px;
    background: 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='%2380786c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  #app .mini-btn .ico, .card .mini-btn .ico, button .ico { pointer-events:none; }
  #studioBar .mini-btn { display:inline-flex; align-items:center; gap:6px; line-height:1; }
  #studioBar .mini-btn.icon-only { padding:6px; }
  #studioBar .mini-btn .ico { width:15px; height:15px; }
  #studioBar .mini-btn:focus-visible { outline:none; box-shadow: var(--ring-focus); }
  .st-vr { width:1px; align-self:stretch; background: var(--ink-200); margin:0 3px; }

  /* Form pickers — a real chevron so selects stop looking like native OS controls. */
  .input {
    font-family: var(--font-sans); font-size: 13px; color: var(--ink-900);
    background: var(--paper); border: 1px solid var(--ink-200);
    border-radius: var(--radius-md); height: 38px; padding: 0 12px; box-sizing: border-box;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .input:hover { border-color: var(--ink-300); }
  .input:focus { outline: none; border-color: var(--signal-600); box-shadow: var(--ring-focus); }

  /*
   * ALL <select> pickers — global (Brian 2026-08-18).
   * Same pattern as The Post queue (846d5a3): appearance:none + custom caret +
   * padding-right 36px so the chevron never kisses the border. !important on
   * background-* beats inline background/padding shorthand used in older markup.
   * multiple/size lists keep native chrome (no fake caret on multi-select).
   */
  select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2380786c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
  }
  select.input:not([multiple]):not([size]),
  select.insp-input:not([multiple]):not([size]) {
    background-color: var(--paper);
  }
  select.insp-input:not([multiple]):not([size]) {
    background-position: right 8px center !important;
  }
  /* Compact status pills still get a caret, tucked tighter */
  select.select-pill:not([multiple]):not([size]) {
    padding-right: 28px !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
  }

  /* Segmented export control — PPTX + PDF read as one unit, not two mismatched buttons. */
  .st-seg { display:inline-flex; border:1px solid var(--ink-200); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-xs); }
  .st-seg button { display:inline-flex; align-items:center; gap:6px; border:none; background: var(--paper); color: var(--ink-700); font-family: var(--font-sans); font-size:12px; font-weight:600; padding:7px 12px; cursor:pointer; line-height:1; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .st-seg button + button { border-left:1px solid var(--ink-200); }
  .st-seg button:hover { background: var(--ink-50); color: var(--ink-900); }
  .st-seg button:focus-visible { outline:none; box-shadow: inset 0 0 0 2px var(--signal-500); }
  .st-seg .ico { width:15px; height:15px; color: var(--ink-500); }

  /* Image picker menu (upload / link / saved images) */
  .st-pop { position:absolute; z-index:60; min-width:210px; background: var(--paper); border:1px solid var(--ink-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 12px 32px -8px rgba(20,30,28,.28)); padding:5px; }
  .st-pop .st-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; color: var(--ink-800); font-family: var(--font-sans); font-size:13px; padding:8px 9px; border-radius: var(--radius-sm); cursor:pointer; }
  .st-pop .st-item:hover { background: var(--ink-50); color: var(--ink-900); }
  .st-pop .st-item .ico { color: var(--ink-500); }
  .st-gallery { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; max-height:236px; overflow:auto; padding:5px 4px 2px; margin-top:4px; border-top:1px solid var(--ink-150); }
  .st-gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; border:1px solid var(--ink-200); cursor:pointer; display:block; }
  .st-gallery img:hover { border-color: var(--signal-500); }
  .st-empty { font-size:12px; color: var(--ink-500); padding:10px 9px; line-height:1.5; }
  /* Icon alignment inside inspector buttons / toggles / rail actions */
  .insp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .insp-tog { display:inline-flex; align-items:center; justify-content:center; }
  .insp-btn .ico, .insp-tog .ico { width:14px; height:14px; }
  .insp-btn.on { background: var(--signal-100, #E6ECFF); border-color: var(--signal-300, #A9C0FF); color: var(--signal-700, #1842BE); }
  .rail-act { display:inline-flex; align-items:center; justify-content:center; }

  .empty-state {
    color: var(--ink-500); font-size: 13.5px; padding: 24px;
    text-align: center; border: 1px dashed var(--ink-200); border-radius: var(--radius-lg); background: var(--paper);
  }
  /* ---------- Notes ---------- */
  .notes-compose {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
  }
  .notes-compose textarea {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--ink-200);
    color: var(--ink-900);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-family: inherit; font-size: 14px;
    min-height: 70px;
    resize: vertical;
    box-shadow: var(--inset);
  }
  .notes-compose textarea:focus { outline: none; border-color: var(--signal-600); box-shadow: var(--ring-focus); }
  .note-item {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex; justify-content: space-between; gap: 12px;
    box-shadow: var(--shadow-xs);
  }
  .note-item .body { font-size: 13.5px; color: var(--ink-800); white-space: pre-wrap; flex: 1; }
  .note-item .stamp { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-top: 6px; }



  .example-import { display:flex; flex-direction:column; gap:8px; }
  .example-import > .btn { justify-content:flex-start; gap:8px; }
  .example-paste { background:var(--ink-50); border:1px solid var(--ink-150); border-radius:var(--radius-md); padding:10px 12px; }
  .example-paste summary { cursor:pointer; font-size:13px; color:var(--ink-700); font-weight:600; }
  .example-paste[open] summary { margin-bottom:8px; }

  /* ---------- Agency page ---------- */
  .agency-page { max-width: 920px; }
  .agency-page .agency-block { margin-top: 26px; }
  .agency-page .agency-block > h3,
  .agency-page .agency-block-head h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--ink-900);
  }
  .agency-page .agency-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .agency-page .agency-block-head .sub,
  .agency-page .agency-block-copy { margin: 0 0 12px; }
  .agency-page .agency-actions { display: flex; gap: 6px; flex: none; }
  .agency-page .agency-loading { color: var(--ink-500); font-size: 14px; padding: 16px 4px; }
  .agency-page .agency-connections { display: flex; flex-direction: column; gap: 12px; }
  .agency-page .agency-footnote {
    font-size: 12px; color: var(--ink-400); margin-top: 14px; line-height: 1.5;
  }
  .agency-page .agency-footnote strong { color: var(--ink-600); }

  .agency-profile {
    background: var(--paper);
    border: 1px solid var(--ink-150);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .agency-profile-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
  .agency-profile-copy { font-size: 13px; color: var(--ink-600); line-height: 1.5; margin-bottom: 14px; }
  .agency-profile-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  }
  .agency-profile-id { min-width: 0; }
  .agency-profile-name { font-size: 18px; font-weight: 700; color: var(--ink-900); }
  .agency-profile-domain { font-size: 13px; color: var(--ink-600); margin-top: 2px; }
  .agency-profile-quote {
    font-size: 13px; color: var(--ink-600); font-style: italic; margin-top: 8px;
  }
  .agency-profile-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ink-100);
  }
  .agency-field .k {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px;
  }
  .agency-field .v { font-size: 13.5px; color: var(--ink-800); line-height: 1.45; }
  .agency-field .unset { color: var(--ink-400); }
  .agency-profile-meta {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-100);
    font-size: 12px; color: var(--ink-500);
  }
  .agency-profile-meta.warn { color: var(--hold-700); }

  .buyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .buyer-card { position: relative; padding: 12px 14px 10px; min-width: 0; }
  .buyer-card-del { position: absolute; top: 8px; right: 8px; }
  .buyer-card .buyer-title { padding-right: 72px; font-size: 14.5px; }
  .buyer-card .buyer-meta { color: var(--ink-500); font-size: 12px; min-height: 28px; }
  .buyer-card .field-label { margin: 8px 0 2px; }
  .buyer-card textarea.editable {
    min-height: 0; height: auto; font-size: 13px; line-height: 1.4; padding: 4px 6px;
  }

  @media (max-width: 700px) {
    .agency-profile-fields,
    .buyer-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    /* Hard-cap the page to the true viewport. max-width:100% resolves against the initial containing
       block, which iOS Safari lets a wide child expand — so it caps nothing and overflow-x:hidden on
       body becomes a no-op (the classic iOS horizontal-scroll bug). 100vw is the real viewport width,
       and overflow-x:clip actually contains the spill. Clip on .container too (a wrapper, not just
       body, is the reliable iOS pattern). */
    html, body { max-width: 100vw; overflow-x: clip; }
    .container { padding: 16px; max-width: 100vw; overflow-x: clip; }
    .topbar { flex-wrap: wrap; padding: 12px 16px; }
    .tabs { order: 3; width: 100%; overflow-x: auto; }
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    /* Drop CSS Grid entirely on mobile. In a single-column grid, iOS Safari sizes the track to the
       WIDEST card's content (the auto minimum of `1fr` = minmax(auto,1fr)), so one card with a wide
       inner block — the folded-in brand block / concept grid — drags every other card in the column
       wide too, past the viewport. Plain block flow sizes each card to the container independently, so
       no card can inflate its neighbors and no grid track-sizing quirk applies. */
    .issuer-grid { display: block; max-width: 100%; }
    /* Card is a plain block == container width; overflow:hidden clips any child that still tries to
       spill (long RFP row, people line) so it can never push the page wide. */
    .issuer-grid > .issuer-card { margin-bottom: 14px; width: 100%; max-width: 100%; overflow: hidden; }
    .issuer-rfps, .issuer-people, .issuer-record, .issuer-actions { max-width: 100%; min-width: 0; }
    /* Stack section headers on mobile so action buttons wrap under the heading and
       description instead of overflowing off-screen (Knowledge Base, Case Studies, etc.). */
    .section-head { flex-direction: column; align-items: stretch; }
    .section-head > div:last-child { flex-wrap: wrap; }
  }


/* RFP stream row: Supporting docs / Questionnaires / Context Review as one 3-up */
.rfp-stream-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
  align-items: start;
}
.rfp-stream-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rfp-stream-card {
  background: var(--paper);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 0;
  height: auto;
  min-height: 100%;
}
.rfp-stream-card-wide { height: auto; }
.rfp-stream-card.rfp-context-has-queue {
  border-color: var(--signal-300, #A9C0FF);
  box-shadow: 0 0 0 1px var(--signal-200, #D2DEFF);
}
#rfpContextPanel.rfp-context-flash .rfp-stream-card,
#rfpContextPanel.rfp-context-flash {
  animation: rfpCtxFlash 1.6s ease-out 1;
}
@keyframes rfpCtxFlash {
  0% { box-shadow: 0 0 0 0 rgba(30, 84, 232, 0.45); }
  40% { box-shadow: 0 0 0 4px rgba(30, 84, 232, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(30, 84, 232, 0); }
}
/* Open questionnaire answer grid needs full width — park docs/context under it. */
.rfp-stream-row.is-qa-open {
  grid-template-columns: minmax(0, 1fr);
}
.rfp-stream-row.is-qa-open #rfpDocsPanel,
.rfp-stream-row.is-qa-open #rfpContextPanel {
  display: none;
}
@media (max-width: 1100px) {
  .rfp-stream-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rfp-stream-row #rfpContextPanel { grid-column: 1 / -1; }
  .rfp-stream-row.is-qa-open { grid-template-columns: minmax(0, 1fr); }
  .rfp-stream-row.is-qa-open #rfpContextPanel { grid-column: auto; }
}
@media (max-width: 700px) {
  .rfp-stream-row,
  .rfp-stream-row.is-qa-open { display: block; }
  .rfp-stream-slot { margin-bottom: 14px; }
  .rfp-stream-row.is-qa-open #rfpDocsPanel,
  .rfp-stream-row.is-qa-open #rfpContextPanel { display: none; }
}

/* RFP section list: drag handles + hide control */
#rfpSectionList .sec-drag-handle:hover { color: var(--ink-700) !important; background: var(--ink-100) !important; }
#rfpSectionList .sec-drag-handle:active { cursor: grabbing; }
#rfpSectionList .sec-hide-btn:hover { color: var(--ink-700) !important; background: var(--ink-100) !important; }
#rfpSectionList .rfp-section-row.sec-dragging { opacity: 0.45; }
#rfpSectionList .rfp-section-row.sec-drag-over { box-shadow: inset 0 2px 0 0 var(--signal-500); }
#rfpSectionList .rfp-section-row.sec-drag-over-below { box-shadow: inset 0 -2px 0 0 var(--signal-500); }
#rfpSectionList .rfp-section-row.is-hidden .sec-title { text-decoration: line-through; color: var(--ink-500); }
/* Section list: title on its own line; phase/meta chips never center through wrapped titles */
#rfpSectionList .rfp-section-row .sec-row-main { min-width: 0; }
#rfpSectionList .rfp-section-row .sec-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
#rfpSectionList .rfp-section-row .sec-row-sub > span {
  flex: 0 1 auto;
  max-width: 100%;
}
#rfpSectionList .rfp-section-row .sec-status-dot,
#rfpSectionList .rfp-section-row .sec-drag-handle,
#rfpSectionList .rfp-section-row .sec-hide-btn {
  flex: 0 0 auto;
}


/* [1.1/1.2] Qualification + model-editor tables. These were shipped with a class that did not
   exist in this stylesheet, so they rendered as bare browser tables.
   2026-08-18: table-layout:fixed + column classes so Pts is not crushed off-screen and
   Tone/Severity selects keep room for chevron padding (no more truncated bloc/hol). */
.qm-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.qm-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500); font-weight: 600;
  padding: 0 8px 8px 0; border-bottom: 1px solid var(--ink-150);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.qm-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.qm-table tr:last-child td { border-bottom: none; }
.qm-table .input { width: 100%; min-width: 0; box-sizing: border-box; }
.qm-table th.qm-col-num,
.qm-table td.qm-col-num { width: 84px; text-align: right; }
.qm-table th.qm-col-key,
.qm-table td.qm-col-key { width: 20%; }
.qm-table th.qm-col-del,
.qm-table td.qm-col-del { width: 44px; text-align: center; padding-right: 0; }
.qm-table th.qm-col-tone,
.qm-table td.qm-col-tone { width: 132px; }
.qm-table th.qm-col-sev,
.qm-table td.qm-col-sev { width: 152px; }
.qm-table th.qm-col-min,
.qm-table td.qm-col-min,
.qm-table th.qm-col-max,
.qm-table td.qm-col-max { width: 84px; text-align: right; }
/* Narrow numeric headers: kill tracking so MIN/MAX/TONE never run together */
.qm-table th.qm-col-min,
.qm-table th.qm-col-max,
.qm-table th.qm-col-num,
.qm-table th.qm-col-tone,
.qm-table th.qm-col-sev {
  letter-spacing: 0.02em;
}
.qm-table th.qm-col-band,
.qm-table td.qm-col-band { width: 16%; }
/* Seed / model picker in the action row — full name, not 230px clip */
#qmSeed {
  min-width: 280px;
  max-width: min(420px, 42vw);
  flex: 1 1 280px;
}
#qmScale {
  min-width: 280px;
  max-width: min(440px, 100%);
  width: 100%;
}
.qm-table input[type="number"].input {
  width: 100%;
  max-width: none;
  text-align: right;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
}
.qm-table select.input {
  width: 100%;
  max-width: 100%;
}
.qm-table .qmo-del,
.qm-table .qmb-del,
.qm-table .qmi-del {
  min-width: 32px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Workback beat table: spreadsheet rows, not stage bands. Horizontal scroll is the point. */
.wb-wrap { overflow-x: auto; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--paper); }
.wb-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; }
.wb-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500); font-weight: 600;
  padding: 8px; border-bottom: 1px solid var(--ink-200); white-space: nowrap; background: var(--ink-50);
  position: sticky; top: 0;
}
.wb-table td { padding: 6px 8px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.wb-table tr:last-child td { border-bottom: none; }
.wb-table .input { height: 30px; font-size: 12px; padding: 0 8px; width: 100%; min-width: 0; }
.wb-col-id { min-width: 88px; width: 88px; }
.wb-col-status { min-width: 128px; width: 128px; }
.wb-col-phase { min-width: 160px; }
.wb-col-date { min-width: 138px; width: 138px; }
.wb-col-stream { min-width: 140px; }
.wb-col-task { min-width: 280px; }
.wb-col-owner { min-width: 140px; }
.wb-col-support { min-width: 160px; }
.wb-col-pri { min-width: 78px; width: 78px; }
.wb-col-effort { min-width: 78px; width: 78px; }
.wb-col-cadence { min-width: 110px; }
.wb-col-dep { min-width: 110px; }
.wb-col-deliv { min-width: 160px; }
.wb-col-notes { min-width: 220px; }
.wb-col-del { width: 44px; text-align: center; padding-right: 6px; }
.wf-stage-fold { margin-top: 4px; }
.wf-stage-fold summary {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500); cursor: pointer; list-style: none;
}
.wf-stage-fold summary::-webkit-details-marker { display: none; }
.wf-stage-fold summary::before { content: "▸ "; color: var(--ink-400); }
.wf-stage-fold[open] summary::before { content: "▾ "; }