/* ═══════════════════════════════════════════════════════════════
   SolidDomino Ops Portal v2 — Master Stylesheet (Premium Rebuild)
   Brand: Navy #0D1B3E / Navy2 #1A2F5E, Gold #B8962E, Orange #C05820
   — matched exactly to the approved docgen.js brand constants used
   in every RIB / SAB Digest, so the portal chrome and the branded
   client documents are finally the same brand, not two shades of navy.
   Body font: Inter (UI), Cambo (display accents)

   This file is the single source of truth for every selector below.
   No selector is redeclared later in the file — the old copy/paste
   duplicates (three .topbar blocks, two workflow trackers, two
   .results-area rules, etc.) have been removed on purpose so the
   cascade is predictable at every zoom level and viewport size.
═══════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0D1B3E;
  --navy-light:  #1A2F5E;
  --navy-muted:  #2A3F6E;
  --navy-rgb:    13, 27, 62;
  --gold:        #B8962E;
  --gold-light:  #D4B457;
  --gold-dim:    #8A701F;
  --gold-bg:     #FBF6E9;
  --gold-rgb:    184, 150, 46;
  --orange:      #C05820;
  --orange-rgb:  192, 88, 32;
  --surface:     #FFFFFF;
  --surface2:    #F7F8FC;
  --surface3:    #ECEEF5;
  --text1:       #0D1B3E;
  --text2:       #4A5070;
  --text3:       #8890B0;
  --border:      #DDE0EC;
  --border-med:  #BCC0D6;
  --green:       #1A7A3C;
  --green-bg:    #E6F5EA;
  --green-text:  #145E30;
  --amber:       #C47F17;
  --amber-bg:    #FEF5E4;
  --red:         #C0392B;
  --red-bg:      #FBEAEA;
  --blue:        #1A6FC9;
  --blue-bg:     #EBF3FD;

  --r:           8px;
  --r-md:        10px;
  --r-lg:        12px;
  --r-xl:        16px;
  --r-2xl:       20px;

  --shadow-sm:   0 1px 3px rgba(26,31,54,.08);
  --shadow-md:   0 4px 12px rgba(26,31,54,.12);
  --shadow-lg:   0 8px 24px rgba(26,31,54,.16);
  --shadow-glass: 0 8px 32px rgba(26,31,54,.28);

  /* Glassmorphism tokens */
  --glass-bg:      rgba(255,255,255,.62);
  --glass-bg-navy: rgba(26,31,54,.72);
  --glass-border:  rgba(255,255,255,.35);
  --glass-border-navy: rgba(255,255,255,.10);
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(28px);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .15s;
  --dur-med: .25s;
  --dur-slow: .45s;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(12.5px, 0.95vw + 8px, 13.5px);
  color: var(--text1);
  background: var(--surface2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img, svg { max-width: 100%; display: block; }

/* Respect reduced-motion preference across every animation in this file */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scrollbars (global, visible + premium) ──────────────────────
   Wider and higher-contrast than a default thin scrollbar so every
   scrollable region (workflow output, history, team, result page)
   reads as obviously scrollable at a glance, not just on hover. */
* { scrollbar-width: auto; scrollbar-color: var(--border-med) var(--surface3); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--surface3); border-radius: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-med);
  border-radius: 10px;
  border: 2px solid var(--surface3);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* Primary scroll regions get an always-visible, gold-accented thumb —
   the "sliding bar" that lets people see at a glance there's more
   content below, on the workflow output, history, team, and result
   pages specifically (not just a generic thin scrollbar). */
.output-panel-wrap, .history-container, .team-container,
.result-page, .result-main, .result-sidebar, .input-form,
.raw-handoff-body, .email-body, .result-pre {
  scrollbar-width: auto;
  scrollbar-color: var(--gold) var(--surface3);
}
.output-panel-wrap::-webkit-scrollbar-thumb,
.history-container::-webkit-scrollbar-thumb,
.team-container::-webkit-scrollbar-thumb,
.result-page::-webkit-scrollbar-thumb,
.result-main::-webkit-scrollbar-thumb,
.result-sidebar::-webkit-scrollbar-thumb,
.input-form::-webkit-scrollbar-thumb,
.raw-handoff-body::-webkit-scrollbar-thumb,
.email-body::-webkit-scrollbar-thumb,
.result-pre::-webkit-scrollbar-thumb {
  background: var(--gold);
  border: 2px solid var(--surface3);
  background-clip: padding-box;
}
.output-panel-wrap::-webkit-scrollbar-thumb:hover,
.history-container::-webkit-scrollbar-thumb:hover,
.team-container::-webkit-scrollbar-thumb:hover,
.result-page::-webkit-scrollbar-thumb:hover,
.result-main::-webkit-scrollbar-thumb:hover,
.result-sidebar::-webkit-scrollbar-thumb:hover,
.input-form::-webkit-scrollbar-thumb:hover,
.raw-handoff-body::-webkit-scrollbar-thumb:hover,
.email-body::-webkit-scrollbar-thumb:hover,
.result-pre::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* Force the track to always render (rather than only on hover/scroll)
   so the presence of a scrollbar is obvious even before interacting —
   this is the concrete fix for "no sliding bar visible" on the
   workflow output panel and the Run History page. */
.output-panel-wrap, .history-container, .team-container, .result-page {
  overflow-y: scroll;
}

/* ── Focus visibility (accessibility) ────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
@keyframes rippleAnim {
  to { transform: scale(3); opacity: 0; }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .35); }
  50%     { box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0); }
}

.spin { animation: spin .8s linear infinite; display: inline-block; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }

/* Scroll-reveal utility — app.js adds .is-visible via IntersectionObserver */
.reveal-on-scroll { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--surface3) 25%, #f2f3f8 37%, var(--surface3) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r);
}

/* Ripple effect container — app.js injects .ripple spans into .btn/.nav-item/etc */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: rippleAnim .55s var(--ease-out);
}
.ripple.dark { background: rgba(26,31,54,.18); }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* ── Mobile drawer backdrop (injected by app.js, hidden on desktop) ── */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,12,24,.5);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.mobile-backdrop.open { opacity: 1; }

/* Hamburger button — injected by app.js, only shown under 900px */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.mobile-menu-btn:hover { background: var(--navy); color: #fff; }
.mobile-menu-btn:active { transform: scale(.92); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — glassmorphic navy rail; off-canvas drawer on mobile
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: 216px;
  background:
    linear-gradient(180deg, rgba(37,43,71,.97) 0%, rgba(20,24,42,.97) 100%);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-right: 1px solid var(--glass-border-navy);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 20;
  transition: transform var(--dur-med) var(--ease-out);
}

.sidebar-logo {
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--glass-border-navy);
}

.logo-mark {
  width: 34px; height: 34px;
  background: linear-gradient(150deg, var(--navy-light), var(--navy) 65%, #08132c);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(var(--navy-rgb), .45), inset 0 1px 0 rgba(255,255,255,.06);
}
.logo-mark svg { width: 52%; height: 52%; display: block; }
.logo-mark.lg { width: 48px; height: 48px; border-radius: 12px; }

.logo-name { color: #fff; font-size: 14px; font-weight: 600; }
.logo-sub  { color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }

.sidebar-nav {
  padding: 14px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}

.nav-section {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  padding: 10px 8px 5px;
  margin-top: 4px;
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r);
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
  overflow: hidden;
}
.nav-item i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-item span:first-of-type { flex: 1; }
.nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.92); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.06));
  color: var(--gold-light);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--gold);
}

.nav-tag {
  font-size: 9.5px; font-weight: 600;
  background: rgba(var(--gold-rgb),.16); color: var(--gold-light);
  border-radius: 20px; padding: 1px 6px;
}

.sidebar-footer {
  padding: 12px 12px;
  border-top: 1px solid var(--glass-border-navy);
  display: flex; flex-direction: column; gap: 8px;
}

.sidebar-version {
  font-size: 11px; color: rgba(255,255,255,.32);
  display: flex; align-items: center; gap: 5px;
}

.logout-btn {
  width: 100%;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  padding: 7px 10px; border-radius: var(--r);
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.logout-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — sticky glass strip, single authoritative definition
═══════════════════════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(14px, 2vw, 24px);
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
  z-index: 15;
  transition: box-shadow var(--dur-med);
}
.topbar.is-scrolled { box-shadow: 0 4px 16px rgba(26,31,54,.08); }
.topbar-title { font-size: clamp(14px, 1.4vw, 15px); font-weight: 700; }
.topbar-sub   { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text2);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--surface2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(.98); }
.btn i { font-size: 14px; }

.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-light); box-shadow: 0 6px 16px rgba(26,31,54,.28); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text2); }
.btn-ghost:hover { background: var(--surface2); }

.btn-full { width: 100%; justify-content: center; }

.btn-download-rib {
  background: var(--navy); color: white; border-color: var(--navy);
  padding: 9px 18px; font-size: 13px; font-weight: 600;
}
.btn-download-rib:hover { background: var(--navy-light); box-shadow: 0 8px 20px rgba(26,31,54,.3); }

.btn-download-sab {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy); border-color: var(--gold);
  padding: 9px 18px; font-size: 13px; font-weight: 600;
}
.btn-download-sab:hover { background: var(--gold-light); box-shadow: 0 8px 20px rgba(var(--gold-rgb),.35); }

/* ═══════════════════════════════════════════════════════════════
   RUN PAGE — resizable layout (single authoritative definition)
═══════════════════════════════════════════════════════════════ */
.run-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.input-panel {
  width: 340px;
  min-width: 280px;
  max-width: 560px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  min-height: 0;
  transition: width var(--dur-med) var(--ease-out), min-width var(--dur-med) var(--ease-out), max-width var(--dur-med) var(--ease-out);
}
.input-panel.resizing { transition: none; }

@media (min-width: 1200px) {
  .input-panel:not([style*="width"]) { width: 380px; }
}

.input-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right: none;
}
.input-panel.collapsed .input-form,
.input-panel.collapsed .run-btn-area,
.input-panel.collapsed .panel-header { display: none; }

.panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
}
.panel-title { font-size: 13px; font-weight: 600; }
.panel-sub   { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

.input-form {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field-label {
  font-size: 11.5px; font-weight: 600; color: var(--text2);
  display: flex; align-items: center; gap: 4px;
}
.field-req      { color: var(--red); font-size: 10.5px; font-weight: 400; }
.field-optional { color: var(--text3); font-size: 10.5px; font-weight: 400; }

.field-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text1);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  resize: vertical;
}
.field-input:focus { border-color: var(--navy); background: white; box-shadow: 0 0 0 3px rgba(26,31,54,.08); outline: none; }
.field-input::placeholder { color: var(--text3); }

.output-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.output-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface2);
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.output-type-card:hover { transform: translateY(-1px); }
.output-type-card input[type="radio"] { display: none; }
.output-type-card:has(input:checked) {
  border-color: var(--gold); background: var(--gold-bg);
  box-shadow: 0 0 0 1px var(--gold);
}
.ot-icon { font-size: 18px; color: var(--text3); margin-bottom: 2px; }
.output-type-card:has(input:checked) .ot-icon { color: var(--amber); }
.ot-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.output-type-card:has(input:checked) .ot-label { color: var(--amber); }
.ot-desc { font-size: 10.5px; color: var(--text3); }

.sdr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sdr-chip {
  padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; color: var(--text2); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.sdr-chip.active { background: var(--navy); color: white; border-color: var(--navy); }
.sdr-chip:hover:not(.active):not(:disabled) { background: var(--surface2); transform: translateY(-1px); }
.sdr-chip:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.sdr-chip:disabled:not(.active) { background: var(--surface2); }
.sdr-chip.active:disabled { opacity: 1; }
.sdr-chip.active:disabled::after { content: ' \1F512'; font-size: 9px; }
.sdr-lock-note {
  font-size: 11px; color: var(--text3);
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px;
}
.sdr-lock-note i { font-size: 12px; }

.info-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--blue-bg);
  border: 1px solid var(--blue);
  border-radius: var(--r);
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.5;
}
.info-callout i { color: var(--blue); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.run-btn-area {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.run-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
  color: #fff; border: none; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 4px 14px rgba(26,31,54,.25);
}
.run-btn:hover:not(:disabled) { background: var(--navy-light); box-shadow: 0 6px 20px rgba(26,31,54,.32); transform: translateY(-1px); }
.run-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.run-btn:disabled { opacity: .5; cursor: not-allowed; }
.run-btn i { font-size: 16px; }

/* Drag handle between the two panels */
.panel-resizer {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-resizer::after {
  content: '';
  width: 2px;
  height: 100%;
  background: var(--border);
  transition: background var(--dur-fast);
}
.panel-resizer:hover::after,
.panel-resizer.dragging::after { background: var(--gold); }
.panel-resizer.collapsed-state {
  width: 18px;
  background: var(--surface3);
  border-right: 1px solid var(--border);
}
.panel-resizer.collapsed-state::after { display: none; }
.panel-resizer.collapsed-state .resizer-chevron { display: flex; }
.resizer-chevron {
  display: none;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text3);
  font-size: 13px;
}
.panel-resizer.collapsed-state:hover { background: var(--navy); }
.panel-resizer.collapsed-state:hover .resizer-chevron { color: white; }

.collapse-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.collapse-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }

.panel-toggle-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.panel-toggle-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   OUTPUT PANEL WRAP — the single scroll owner for the Run page.
   Everything inside (workflow tracker, empty state, results) lives
   in normal flow; this wrapper alone scrolls, so there is exactly
   one scrollbar and no nested-overflow conflicts.
═══════════════════════════════════════════════════════════════ */
.output-panel-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface2);
  min-width: 0;
  min-height: 0;
}

.output-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 240px;
  gap: 4px;
  animation: fadeIn var(--dur-slow) var(--ease-out);
}
.empty-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface3);
  margin-bottom: 10px;
}
.empty-icon i { font-size: 30px; color: var(--border-med); }
.empty-title { font-size: 16px; font-weight: 600; color: var(--text2); }
.empty-body  { font-size: 13px; color: var(--text3); max-width: 360px; line-height: 1.6; }

.results-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW / PIPELINE TRACKER — the horizontal pipeline used on
   the Run page (#workflowTracker > .pipeline-header + .pipeline-
   scroll-wrap > .pipeline-stages > .ps-stage). This is the only
   tracker system in the markup — the old unused vertical wf-step
   variant has been removed.
═══════════════════════════════════════════════════════════════ */
.workflow-tracker {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
  padding: 14px 16px 16px;
  animation: fadeInUp var(--dur-slow) var(--ease-out);
}
.pipeline-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.pipeline-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); font-weight: 600;
}
.workflow-elapsed {
  font-size: 12px; color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08);
  padding: 2px 8px; border-radius: 20px;
}

.pipeline-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  margin: 0 -4px;
}
.pipeline-scroll-wrap::-webkit-scrollbar { height: 4px; }
.pipeline-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.pipeline-stages {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  padding: 0 4px;
}

.ps-stage {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  min-width: 140px;
  transition: background var(--dur-med), transform var(--dur-med);
}
.ps-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  font-size: 13px;
  transition: background var(--dur-med), border-color var(--dur-med), color var(--dur-med), transform var(--dur-med);
}
.ps-info { flex: 1; min-width: 0; }
.ps-name   { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.55); white-space: nowrap; }
.ps-detail { font-size: 10px; color: rgba(255,255,255,.35); white-space: nowrap; }
.ps-status { font-size: 13px; color: rgba(255,255,255,.4); flex-shrink: 0; }

.ps-connector {
  width: 22px; height: 2px; flex-shrink: 0;
  background: rgba(255,255,255,.12);
  transition: background var(--dur-med);
}
.ps-connector.done { background: var(--green); }

.ps-stage.active {
  background: rgba(255,255,255,.08);
  animation: glowPulse 1.8s ease-in-out infinite;
}
.ps-stage.active .ps-icon   { background: rgba(255,255,255,.16); border-color: var(--gold); color: var(--gold-light); transform: scale(1.08); }
.ps-stage.active .ps-name   { color: white; }
.ps-stage.active .ps-detail { color: rgba(255,255,255,.65); }
.ps-stage.active .ps-status { color: var(--gold-light); }

.ps-stage.done .ps-icon   { background: var(--green); border-color: var(--green); color: white; }
.ps-stage.done .ps-name   { color: #C9EFE1; }
.ps-stage.done .ps-status { color: var(--green); }

.ps-stage.error .ps-icon { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.ps-stage.error .ps-name { color: #F5B7AE; }

.ps-stage.done[style*="opacity"] .ps-icon { background: var(--border-med); border-color: var(--border-med); }

.workflow-message {
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  text-align: center;
}

@media (max-width: 900px) { .ps-stage { min-width: 120px; } }
@media (max-width: 600px) { .ps-detail { display: none; } .ps-stage { min-width: 96px; } }

/* ── Status bar (pinned under results) ───────────────────────── */
.status-bar {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.stat-pill { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.stat-dot  { width: 6px; height: 6px; border-radius: 50%; }
.dot-green { background: var(--green); }
.dot-amber { background: #E8A000; }
.dot-gray  { background: var(--border-med); }
.stat-label { color: var(--text3); }
.stat-val   { color: var(--text1); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600;
}
.badge-green  { background: var(--green-bg);  color: var(--green-text); }
.badge-gold   { background: var(--gold-bg);   color: var(--amber); }
.badge-amber  { background: var(--amber-bg);  color: var(--amber); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-navy   { background: rgba(26,31,54,.1); color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   RESULT CONTENT CARDS — glass panels for ops-block, opp-section,
   email-block, generate-panel, handoff-card, download cards
═══════════════════════════════════════════════════════════════ */
/* Entrance animation for these cards is handled by app.js, which adds
   .reveal-on-scroll + .is-visible via IntersectionObserver as they scroll
   into view (staggered). No CSS auto-animation here to avoid the two
   systems fighting over opacity/transform on first paint. */

.ops-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med), transform var(--dur-med);
}
.ops-block:hover { box-shadow: var(--shadow-md); }
.ops-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  gap: 8px; flex-wrap: wrap;
}
.ops-block-title { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ops-block-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-block-body { padding: 14px 16px; }
.ops-table { width: 100%; border-collapse: collapse; }
.ops-table td { padding: 6px 0; vertical-align: top; }
.ops-table td:first-child {
  width: 140px; font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .04em; padding-right: 10px;
}
.ops-table td:last-child { font-size: 12.5px; color: var(--text1); line-height: 1.45; }

.opp-section { padding: 12px 16px; border-top: 1px solid var(--border); }
.opp-num {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.opp-num::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.opp-name { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }

.block-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.action-btn:hover { background: var(--navy); color: white; border-color: var(--navy); transform: translateY(-1px); }
.action-btn.gold  { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 600; }
.action-btn.gold:hover { background: var(--gold-light); }
.action-btn i { font-size: 13px; }

.email-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.email-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 16px; background: var(--surface2); border-bottom: 1px solid var(--border);
  gap: 10px; flex-wrap: wrap;
}
.email-meta-row { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; margin-bottom: 3px; }
.email-meta-row:last-child { margin-bottom: 0; }
.email-meta-key { color: var(--text3); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; width: 40px; flex-shrink: 0; }
.email-meta-val { color: var(--text1); }
.email-actions { display: flex; gap: 6px; flex-shrink: 0; }
.email-body { padding: 16px; font-size: 12.5px; color: var(--text2); line-height: 1.75; white-space: pre-wrap; font-family: 'Cambo', Georgia, serif; max-height: 420px; overflow-y: auto; }

/* Expandable panels (Ops Handoff raw + Email body) */
.raw-handoff-body { padding: 0 16px 16px; max-height: 480px; overflow-y: auto; }
.expand-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.expand-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r);
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}
.expand-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.expand-btn i { font-size: 13px; }

#expandModal {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: 24px;
}
#expandModal .preview-overlay { position: absolute; inset: 0; background: rgba(10,12,24,.55); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
#expandModal .preview-panel {
  position: relative; z-index: 1;
  background: #fff;
  width: min(800px, 96vw);
  margin: 0 auto;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  animation: scaleIn var(--dur-med) var(--ease-out);
}
#expandModal .expand-modal-body {
  padding: 20px 24px; overflow-y: auto; flex: 1;
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--text1);
}
#expandModal .expand-modal-body.is-email { font-family: 'Cambo', Georgia, serif; font-size: 13.5px; }
#expandModal .expand-modal-body.is-raw   { font-family: monospace; font-size: 12px; color: var(--text2); }

/* ── Handoff Summary Card ─────────────────────────────────────── */
.handoff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.handoff-card-head {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
}
.handoff-card-title { font-size: 12.5px; font-weight: 700; color: #fff; }
.handoff-card-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.handoff-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.hs-item { background: var(--surface); padding: 12px 14px; }
.hs-full { grid-column: 1 / -1; }
.hs-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 3px; }
.hs-val { font-size: 12.5px; color: var(--text1); font-weight: 500; }

/* ── Download section — large prominent cards ────────────────── */
.download-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.download-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: 10px; }
.download-buttons { display: flex; flex-direction: column; gap: 10px; }
.download-card-wrap { display: flex; flex-direction: column; gap: 6px; }
.download-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.download-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.download-card-rib { background: linear-gradient(135deg, var(--navy-light), var(--navy)); border-color: var(--navy); }
.download-card-rib .dl-title, .download-card-rib .dl-sub { color: #fff; }
.download-card-rib .dl-sub { color: rgba(255,255,255,.6); }
.download-card-sab { background: linear-gradient(135deg, var(--gold-bg), #fff); border-color: var(--gold); }
.dl-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r); font-size: 19px; }
.download-card-rib .dl-icon { background: rgba(255,255,255,.12); color: var(--gold-light); }
.download-card-sab .dl-icon { background: rgba(var(--gold-rgb),.16); color: var(--amber); }
.dl-info { flex: 1; min-width: 0; }
.dl-title { font-size: 13px; font-weight: 700; }
.dl-sub   { font-size: 11px; color: var(--text3); margin-top: 1px; }
.download-card-sab .dl-title { color: var(--navy); }
.dl-arrow { font-size: 16px; color: var(--text3); flex-shrink: 0; }

/* ── Generate documents panel ─────────────────────────────────── */
.generate-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.generate-header { margin-bottom: 14px; }
.generate-title { font-size: 14px; font-weight: 700; }
.generate-sub { font-size: 11.5px; color: var(--text3); margin-top: 3px; }
.generate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy); border: none; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 4px 14px rgba(var(--gold-rgb),.3);
}
.generate-btn:hover:not(:disabled) { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--gold-rgb),.4); }
.generate-btn:active:not(:disabled) { transform: scale(.98); }
.generate-btn:disabled { opacity: .5; cursor: not-allowed; }
.generate-btn i { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
   HISTORY PAGE — cards + table + pagination
═══════════════════════════════════════════════════════════════ */
.history-container { padding: clamp(14px, 2vw, 22px); overflow-y: auto; flex: 1; min-height: 0; }
.team-container { padding: clamp(14px, 2vw, 22px); overflow-y: auto; flex: 1; min-height: 0; }

.history-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.history-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.history-table th {
  text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text3);
  background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.history-table td { padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--surface2); }
.tbl-link { color: var(--navy); font-weight: 500; }
.tbl-link:hover { color: var(--gold-dim); }
.tbl-action-btn {
  padding: 4px 9px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); font-size: 11px; cursor: pointer; color: var(--text2);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tbl-action-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }
.table-loading, .table-empty, .table-error { padding: 30px; text-align: center; color: var(--text3); font-size: 12.5px; }
.date-cell    { color: var(--text3); font-size: 12px; }
.actions-cell { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.type-badge   { font-size: 11px; font-weight: 500; color: var(--text2); }
.stars        { color: var(--gold); letter-spacing: -1px; font-size: 13px; }

.history-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.page-btn {
  min-width: 30px; padding: 5px 10px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; cursor: pointer; color: var(--text2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.page-btn.active, .page-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }

.history-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med), transform var(--dur-med);
}
.history-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hc-client { flex: 1; min-width: 0; }
.hc-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-contact { font-size: 12px; color: var(--text3); margin-top: 2px; }
.hc-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text3); margin-bottom: 12px; }
.hc-meta span { display: flex; align-items: center; gap: 4px; }
.hc-meta i { font-size: 13px; margin-right: 2px; }
.hc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; font-weight: 500; color: var(--text2); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.hc-btn:hover { background: var(--surface3); color: var(--text1); transform: translateY(-1px); }
.hc-btn i { font-size: 13px; }
.hc-btn-rib { background: var(--navy); color: #fff; border-color: var(--navy); }
.hc-btn-rib:hover { background: var(--navy-light); color: #fff; }
.hc-btn-sab { background: var(--gold-bg); color: var(--gold-dim); border-color: var(--gold); }
.hc-btn-sab:hover { background: var(--gold); color: #fff; }
.hc-btn-email { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.hc-btn-email:hover { background: var(--blue); color: #fff; }

/* ── Team page ────────────────────────────────────────────────── */
.team-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.sdr-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--navy); flex-shrink: 0;
}

/* ── Empty states ─────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; text-align: center; }
.empty-state .empty-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface3); margin-bottom: 12px; }
.empty-state .empty-icon i { font-size: 28px; color: var(--border-med); }
.empty-state .empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.empty-state .empty-sub { font-size: 12.5px; color: var(--text3); }
.empty-state .empty-sub a { color: var(--blue); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   RESULT PAGE — layout, meta bar, tabs, output blocks
═══════════════════════════════════════════════════════════════ */
.result-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.result-main {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 24px);
  min-width: 0;
}
.result-sidebar {
  width: 280px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 16px;
  flex-shrink: 0;
  background: var(--surface);
}
.result-container { display: flex; flex-direction: column; gap: 16px; }

.result-meta-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text2);
}
.meta-pill i { color: var(--text3); font-size: 13px; }
.rating-pill { cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.rating-pill:hover { border-color: var(--gold); color: var(--amber); }

.download-bar { display: flex; gap: 10px; flex-wrap: wrap; }

.result-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.result-tab {
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--text3);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.result-tab:hover { color: var(--text1); background: var(--surface2); }
.result-tab.active { color: var(--navy); border-bottom-color: var(--gold); background: var(--surface); }
.result-tab-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.tab-pane { display: none; animation: fadeIn var(--dur-med) var(--ease-out); }
.tab-pane.active { display: block; }

.output-block { padding: 20px; overflow-x: auto; }
.output-pre {
  font-family: monospace; font-size: 12px; line-height: 1.7;
  white-space: pre-wrap; color: var(--text2);
}
.email-pre { font-family: 'Inter', sans-serif; }

.email-preview {}
.email-preview-header { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.email-preview-meta {}
.ep-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.ep-label { width: 36px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); flex-shrink: 0; }
.ep-val { color: var(--text1); }
.email-preview-body { padding: 16px; }

/* ═══════════════════════════════════════════════════════════════
   MODALS — glass overlay, scale-in panel
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,24,.5);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 16px;
  animation: fadeIn var(--dur-fast) var(--ease-out);
}
.modal-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  width: min(420px, 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  animation: scaleIn var(--dur-med) var(--ease-out);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-size: 14px; font-weight: 600; }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 18px; padding: 4px;
  border-radius: 4px; transition: color var(--dur-fast), background var(--dur-fast); line-height: 1;
}
.modal-close:hover { color: var(--text1); background: var(--surface2); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}
.modal-lg { width: min(640px, 100%); max-height: 85dvh; }

/* ── Document preview modal ──────────────────────────────────── */
#previewModal { display: none; }
.preview-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,24,.55);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.preview-panel {
  position: relative;
  background: #fff;
  width: min(760px, 94vw);
  margin: 24px auto;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  animation: scaleIn var(--dur-med) var(--ease-out);
}
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--surface2); gap: 10px; flex-wrap: wrap;
}
.preview-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.preview-actions { display: flex; gap: 8px; }
.preview-body { flex: 1; overflow-y: auto; min-height: 0; }
.md-preview { padding: 28px 32px; font-size: 13.5px; line-height: 1.7; color: var(--text1); }
.md-h1 { font-size: 22px; font-weight: 700; font-family: 'Cambo', Georgia, serif; margin: 0 0 14px; color: var(--navy); }
.md-h2 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; color: var(--navy); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.md-h3 { font-size: 14.5px; font-weight: 700; margin: 16px 0 8px; color: var(--navy); }
.md-h4 { font-size: 13px; font-weight: 700; margin: 12px 0 6px; color: var(--text2); }
.md-p { margin: 0 0 10px; }
.md-bold { font-weight: 700; }
.md-spacer { height: 8px; }
.md-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; }
.md-cell { border: 1px solid var(--border); padding: 7px 10px; font-size: 12.5px; text-align: left; }
.md-table th.md-cell { background: var(--surface2); font-weight: 700; }
.md-table tr:nth-child(odd) td.md-cell { background: #F2F4F8; }
.md-table tr:nth-child(even) td.md-cell { background: #fff; }

.download-card-wrap .download-card { margin-bottom: 0; }
.preview-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; font-weight: 500; color: var(--text2); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.preview-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════════════ */
.login-page { background: var(--navy); }
.login-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}
.login-left {
  flex: 1.1;
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--gold-rgb),.12), transparent 55%),
    linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 60%, #10131f 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.login-brand { display: flex; align-items: center; gap: 14px; animation: fadeInUp var(--dur-slow) var(--ease-out); }
.login-brand-name { font-size: 22px; font-weight: 700; color: white; }
.login-brand-tagline { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.login-pitch { animation: fadeInUp var(--dur-slow) var(--ease-out) .1s both; }
.login-pitch-headline { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; color: var(--gold-light); line-height: 1.3; margin-bottom: 12px; font-family: 'Cambo', Georgia, serif; }
.login-pitch-body { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 440px; }

.login-right {
  flex: 1;
  min-width: 320px;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--surface);
}
.login-card { width: 100%; max-width: 380px; animation: fadeInUp var(--dur-slow) var(--ease-out) .05s both; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub   { font-size: 13px; color: var(--text3); margin-bottom: 24px; }
.login-form  { display: flex; flex-direction: column; gap: 16px; }

.alert {
  padding: 10px 14px; border-radius: var(--r);
  font-size: 12.5px; display: flex; align-items: center; gap: 8px;
  animation: fadeInUp var(--dur-med) var(--ease-out);
}
.alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #EDBBBB; }

@media (max-width: 900px) {
  .login-shell { flex-direction: column; }
  .login-left { flex: none; padding: 28px 24px; }
  .login-pitch-body { max-width: 100%; }
  .login-right { flex: none; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ERROR PAGE
═══════════════════════════════════════════════════════════════ */
.error-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  background: var(--surface2);
  padding: 20px;
}
.error-shell { text-align: center; max-width: 400px; padding: 40px; animation: fadeInUp var(--dur-slow) var(--ease-out); }
.error-title    { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.error-message  { color: var(--text3); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BASE UTILITIES
═══════════════════════════════════════════════════════════════ */
.hide-sm { display: inline; }
body { overflow-x: hidden; }
.app-shell { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — single consolidated set of breakpoints.
   Model: the app-shell always stays a fixed 100dvh box; every
   region below owns exactly one scrollbar (input-panel, output-
   panel-wrap, result-main/result-sidebar, history/team containers).
   Nothing relies on the whole page scrolling, so nothing gets
   clipped as the viewport shrinks or the browser is zoomed.
═══════════════════════════════════════════════════════════════ */

/* ── Large desktop refinement ────────────────────────────────── */
@media (min-width: 1440px) {
  .result-sidebar { width: 320px; }
}

/* ── Tablet / narrow desktop (901px–1199px) ──────────────────── */
@media (max-width: 1199px) and (min-width: 901px) {
  .input-panel:not(.collapsed):not([style*="width"]) { width: 300px; min-width: 260px; }
  .result-sidebar { width: 230px; }
  .sidebar { width: 188px; }
}

/* ── Below 900px: sidebar becomes an off-canvas drawer ───────── */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(260px, 82vw);
    height: 100dvh;
    transform: translateX(-100%);
    box-shadow: var(--shadow-glass);
    z-index: 100;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-backdrop { display: block; pointer-events: none; }
  .mobile-backdrop.open { pointer-events: auto; }
  .mobile-menu-btn { display: inline-flex; }

  .topbar { padding: 0 14px; }
  .topbar-title { font-size: 14px; }
  .topbar-sub { font-size: 10.5px; }
  .hide-sm { display: none !important; }
}

/* ── Below 860px: stacked run/result layouts, each panel scrolls
      independently so content never gets clipped ──────────────── */
@media (max-width: 860px) {
  .run-layout { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .input-panel {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    border-right: none; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    max-height: 46dvh;
  }
  .input-panel.collapsed { max-height: 0; border-bottom: none; }
  .panel-resizer { display: none; }
  .output-panel-wrap { flex: 1 1 auto; min-height: 260px; }

  .field-row { grid-template-columns: 1fr; }
  .output-type-grid { grid-template-columns: 1fr 1fr; }

  .result-layout { flex-direction: column; overflow-y: auto; }
  .result-main { max-height: none; }
  .result-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40dvh; }

  .history-cards { grid-template-columns: 1fr; }
  .history-table { min-width: 560px; }
  .handoff-summary-grid { grid-template-columns: 1fr 1fr; }

  .preview-panel, #expandModal .preview-panel { width: 100%; margin: 0; border-radius: 0; max-height: 100dvh; }
  #previewModal .preview-overlay ~ .preview-panel { max-height: 100dvh; }
  .md-preview { padding: 20px 16px; }
}

/* ── Small mobile (max 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  html, body { font-size: 12.5px; }
  .topbar-actions .btn span { display: none; }
  .hc-meta span:nth-child(n+4) { display: none; }
  .handoff-summary-grid { grid-template-columns: 1fr; }
  .output-type-grid { grid-template-columns: 1fr; }
  .modal-box, .modal-overlay .modal-box { border-radius: var(--r); }
  .history-card { padding: 12px; }
  .hc-name { font-size: 13px; }
  .btn { padding: 7px 11px; font-size: 11.5px; }
  .topbar-title { font-size: 13px; }
  .result-main { padding: 12px; }
  .ops-block-body, .email-body, .output-block { padding: 12px; }
  .generate-panel { padding: 16px; }
  .download-card { padding: 12px; }
  .input-panel { max-height: 52dvh; }
}

/* Touch-friendly tap targets on coarse pointers (phones/tablets) */
@media (pointer: coarse) {
  .btn, .nav-item, .hc-btn, .action-btn, .expand-btn, .tbl-action-btn,
  .page-btn, .sdr-chip, .collapse-btn, .panel-toggle-btn, .mobile-menu-btn {
    min-height: 38px;
  }
  .nav-item { padding-top: 11px; padding-bottom: 11px; }
}

/* Safe-area padding for notched phones */
.sidebar { padding-top: env(safe-area-inset-top, 0); }
.sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
@media (max-width: 900px) {
  .topbar { padding-top: env(safe-area-inset-top, 0); height: calc(56px + env(safe-area-inset-top, 0)); }
}

/* Ops Handoff / Email / RIB-SAB content panels: NO internal scroll cap.
   These live inside a page that already has exactly one scroll owner
   (.output-panel-wrap on the Run page, .result-page on the View Run
   page) with its own visible gold scrollbar. Giving these panels a
   second, nested max-height + scrollbar created two competing scroll
   regions right next to each other — which is what forced zooming out
   to see the rest of the panel. Letting them flow naturally means
   there is exactly one scrollbar to find, and it always reaches the
   very bottom of the content. */
.raw-handoff-body,
.email-body,
.result-pre {
  max-height: none;
  overflow: visible;
}

/* Modal previews (Expand / document preview) are true overlays and
   SHOULD keep an internal scroll — cap those to real viewport space
   instead of a magic pixel number so they adapt to any screen. */
#expandModal .preview-panel,
#previewModal .preview-panel {
  max-height: calc(100dvh - 32px) !important;
}
#expandModal .expand-modal-body,
.preview-body {
  max-height: none;
}
 
/* ─────────────────────────────────────────────────────────────
   2) Defensive flex-scroll fix. A flex column ancestor without
      min-height:0 will refuse to shrink, which pushes its scrolling
      child's content past the bottom of the window instead of
      letting it scroll — the "have to zoom out" symptom.
───────────────────────────────────────────────────────────── */
.app-shell, .main-content, .run-layout, .output-panel-wrap,
.result-layout, .result-main, .result-page, .results-area,
.input-panel, .input-form {
  min-height: 0;
}
 
/* Breathing room so the last card/row is never flush against the
   viewport edge, at any zoom level or window height. */
.results-area           { padding: 16px 16px 56px !important; }
.result-page             { padding-bottom: 64px !important; }
.history-container,
.team-container           { padding-bottom: 64px !important; }
.output-empty             { min-height: 220px; }
 
/* ─────────────────────────────────────────────────────────────
   3) PREMIUM GLASSMORPHISM SURFACES
───────────────────────────────────────────────────────────── */
 
/* Soft drifting gradient blobs behind the whole app for depth —
   this is what the frosted-glass cards are actually blurring. */
.main-content { position: relative; isolation: isolate; }
.main-content::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(620px circle at 12% 6%,  rgba(var(--gold-rgb), .12), transparent 55%),
    radial-gradient(720px circle at 90% 14%, rgba(26,111,201, .09),      transparent 55%),
    radial-gradient(680px circle at 28% 96%, rgba(var(--navy-rgb), .07), transparent 55%),
    radial-gradient(500px circle at 70% 82%, rgba(26,158,117, .06),      transparent 55%);
  background-color: var(--surface2);
  animation: bgDrift 24s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-1.6%, 1.2%, 0) scale(1.035); }
}
 
.handoff-card, .result-section-card, .ops-block, .email-block,
.generate-panel, .status-bar, .input-panel, .team-table-wrap,
.history-table-wrap, .cost-filters, .cost-card, .sdr-chips,
.workflow-tracker {
  background: rgba(255,255,255,.66) !important;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,.55);
}
.workflow-tracker {
  background: linear-gradient(135deg, rgba(37,43,71,.86), rgba(20,24,42,.90)) !important;
  backdrop-filter: blur(18px);
}
 
.history-card, .download-card {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.download-card-rib {
  background: linear-gradient(135deg, rgba(37,43,71,.90), rgba(16,19,31,.94)) !important;
  backdrop-filter: blur(14px);
}
.download-card-sab {
  background: linear-gradient(135deg, rgba(251,245,230,.88), rgba(255,255,255,.78)) !important;
  backdrop-filter: blur(14px);
}
 
.topbar   { background: rgba(255,255,255,.7) !important; }
.sidebar  { background: linear-gradient(180deg, rgba(37,43,71,.92) 0%, rgba(20,24,42,.94) 100%) !important; }
 
.modal-box, .modal-overlay .modal-box {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
 
/* ─────────────────────────────────────────────────────────────
   4) MICRO-INTERACTIONS
───────────────────────────────────────────────────────────── */
.history-card, .download-card, .ops-block, .result-section-card,
.handoff-card, .cost-card {
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out);
}
.history-card:hover, .download-card:hover, .cost-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(26,31,54,.18), 0 0 0 1px rgba(var(--gold-rgb),.28);
  border-color: rgba(var(--gold-rgb),.45);
}
.ops-block:hover, .result-section-card:hover {
  box-shadow: 0 10px 28px rgba(26,31,54,.12);
}
 
.btn, .generate-btn, .run-btn, .hc-btn, .action-btn, .expand-btn {
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out) !important;
}
.btn:active, .generate-btn:active, .run-btn:active, .hc-btn:active {
  transform: scale(.95) !important;
}
 
.nav-item.active {
  animation: navGlow 2.6s ease-in-out infinite;
}
@keyframes navGlow {
  0%,100% { box-shadow: inset 2px 0 0 var(--gold); }
  50%     { box-shadow: inset 2px 0 0 var(--gold), 0 0 14px rgba(var(--gold-rgb),.3); }
}
 
.badge { transition: transform .15s var(--ease-out); }
.badge:hover { transform: scale(1.06); }
 
/* ─────────────────────────────────────────────────────────────
   5) HISTORY PAGE — grid / list view toggle
───────────────────────────────────────────────────────────── */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.view-toggle-btn {
  width: 34px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text3); font-size: 15px;
  transition: background .18s, color .18s;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn:hover { background: var(--surface2); color: var(--text1); }
.view-toggle-btn.active { background: var(--navy); color: #fff; }
 
.history-table-wrap { animation: fadeInUp .35s var(--ease-out); }
.history-table tbody tr { transition: background .15s, transform .15s; }
.history-table tbody tr:hover { background: rgba(var(--navy-rgb),.04); }
.history-table td, .history-table th { white-space: nowrap; }
.history-table td.hl-client { white-space: normal; min-width: 170px; }
.history-table .hc-btn { padding: 4px 8px; font-size: 10.5px; }
 
/* ─────────────────────────────────────────────────────────────
   6) RESPONSIVE REINFORCEMENT — laptop / short-viewport cases
      that used to force a browser zoom-out to see everything
───────────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  .cost-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
 
@media (max-height: 780px) {
  .workflow-tracker { padding: 10px 14px 12px; }
  .ps-stage { padding: 6px 8px; }
  .topbar { height: 50px; min-height: 50px; }
  .results-area { padding-top: 12px !important; }
}
 
@media (max-height: 620px) {
  .panel-header { padding: 10px 14px 8px; }
  .run-btn-area { padding: 10px 14px; }
  .input-form { gap: 10px; padding: 10px 14px; }
}
 
/* Make sure long Ops Handoff / SAB monospace blocks wrap instead of
   forcing horizontal scroll at any zoom level */
.raw-handoff-body pre,
.result-pre {
  word-break: break-word;
  white-space: pre-wrap !important;
}