/* ═══════════════════════════════════════════════════════════════════════════
   Fluxo Platform Design System v1.0
   Source of truth: Fluxo Platform Design System.md (Obsidian vault)
   Applies to: fluxotrade.co, /contracts/, app.fluxotrade.co, all samples
   Change protocol: discuss in claude.ai before editing any token
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── 2. CSS Custom Properties ─────────────────────────────────────────────── */
:root {

  /* ── Canonical platform tokens ── */

  /* Core palette */
  --fluxo-navy:        #0f1e30;
  --fluxo-navy-deep:   #091520;
  --fluxo-navy-mid:    #162840;
  --fluxo-gold:        #c8b478;
  --fluxo-gold-muted:  rgba(200,180,120,0.15);
  --fluxo-gold-border: rgba(200,180,120,0.30);
  --fluxo-warm-white:  #f0ead8;
  --fluxo-cream:       #f4f2ee;
  --fluxo-cream-dark:  #ede9e3;

  /* Text (on light backgrounds) */
  --fluxo-text-primary: #1e1c18;
  --fluxo-text-body:    #3d3a32;
  --fluxo-text-muted:   #7a7468;
  --fluxo-text-faint:   #a8a49c;

  /* Semantic colors */
  --fluxo-critical:    #dc2626;
  --fluxo-critical-bg: #fef2f2;
  --fluxo-high:        #d97706;
  --fluxo-high-bg:     #fffbeb;
  --fluxo-medium:      #b45309;
  --fluxo-medium-bg:   #fef9ec;
  --fluxo-pass:        #16a34a;
  --fluxo-pass-bg:     #f0fdf4;
  --fluxo-info:        #1d4ed8;
  --fluxo-info-bg:     #eff6ff;

  /* Borders */
  --fluxo-border:      rgba(0,0,0,0.09);
  --fluxo-border-med:  rgba(0,0,0,0.14);
  --fluxo-border-dark: rgba(0,0,0,0.22);

  /* Typography */
  --fluxo-font-display: 'Cormorant Garamond', Georgia, serif;
  --fluxo-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Backward-compatible aliases — cover all 7 sample files ── */

  /* Shared across all files */
  --navy:      var(--fluxo-navy);
  --navy-lt:   var(--fluxo-navy-mid);
  --navy-dark: var(--fluxo-navy-deep);
  --navy-mid:  var(--fluxo-navy-mid);
  --gold:      var(--fluxo-gold);
  --warm:      var(--fluxo-warm-white);
  --bg:        var(--fluxo-cream);
  --white:     #ffffff;
  --surface:   #ffffff;
  --text:      var(--fluxo-text-primary);
  --t1:        var(--fluxo-text-primary);
  --t2:        var(--fluxo-text-body);
  --t3:        var(--fluxo-text-muted);
  --b1:        rgba(0,0,0,0.09);
  --b2:        rgba(0,0,0,0.14);
  --green:     var(--fluxo-pass);
  --red:       var(--fluxo-critical);
  --amber:     var(--fluxo-high);
  --gold-rule: rgba(200,180,120,0.4);

  /* Border radius */
  --r:         8px;
  --rx:        14px;
  --radius:    10px;
  --radius-sm: 6px;

  /* Named border alias (design-samples/docs-* files) */
  --border:    var(--fluxo-border);

  /* Font aliases — marketing uses --fd/--fb, contracts use --fh/--fm */
  --fd: var(--fluxo-font-display);
  --fh: var(--fluxo-font-display);
  --fb: var(--fluxo-font-body);
  --fm: var(--fluxo-font-body);

  /* Severity — docs/contracts files */
  --crit:        var(--fluxo-critical);
  --crit-bg:     var(--fluxo-critical-bg);
  --crit-border: #fecaca;
  --high:        var(--fluxo-high);
  --high-bg:     var(--fluxo-high-bg);
  --high-border: #fde68a;
  --med:         var(--fluxo-medium);
  --med-bg:      var(--fluxo-medium-bg);
  --med-border:  #fef08a;
  --pass:        var(--fluxo-pass);
  --pass-bg:     var(--fluxo-pass-bg);
  --pass-border: #bbf7d0;
}

/* ── 3. Base reset and body defaults ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--fluxo-font-body);
  background: var(--fluxo-cream);
  color: var(--fluxo-text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--fluxo-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 4. Typography classes ────────────────────────────────────────────────── */
.fluxo-display    { font-family: var(--fluxo-font-display); font-size: 32px; font-weight: 700; }
.fluxo-display-lg { font-family: var(--fluxo-font-display); font-size: 48px; font-weight: 700; }
.fluxo-display-sm { font-family: var(--fluxo-font-display); font-size: 24px; font-weight: 600; }
.fluxo-label      { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--fluxo-font-body); }
.fluxo-body       { font-size: 14px; font-weight: 400; line-height: 1.6; font-family: var(--fluxo-font-body); }
.fluxo-body-sm    { font-size: 12px; font-weight: 400; line-height: 1.55; font-family: var(--fluxo-font-body); }
.fluxo-note       { font-size: 12px; color: var(--fluxo-text-muted); line-height: 1.55; font-family: var(--fluxo-font-body); }

/* ── 5. Navigation ────────────────────────────────────────────────────────── */
.fluxo-nav {
  background: var(--fluxo-navy);
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(200,180,120,0.1);
}
.fluxo-nav-logo {
  font-family: var(--fluxo-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fluxo-warm-white);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-decoration: none;
}
.fluxo-nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.fluxo-nav-label {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fluxo-gold);
  flex-shrink: 0;
}
.fluxo-nav-spacer { flex: 1; }
.fluxo-nav-link {
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(240,234,216,0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  transition: background .15s, color .15s;
  touch-action: manipulation;
}
.fluxo-nav-link:hover,
.fluxo-nav-link.active { color: rgba(240,234,216,1); background: rgba(255,255,255,0.08); }
.fluxo-nav-link:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }
.fluxo-nav-user {
  font-family: var(--fluxo-font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fluxo-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fluxo-gold);
  color: var(--fluxo-navy);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--fluxo-font-body);
}
.fluxo-nav-version {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  font-family: var(--fluxo-font-body);
}

/* Connection status */
.fluxo-conn { display: flex; align-items: center; gap: 5px; }
.fluxo-conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fluxo-conn-dot.live        { background: #4caf7d; }
.fluxo-conn-dot.connecting  { background: #94a3b8; animation: fluxo-pulse 1.5s ease-in-out infinite; }
.fluxo-conn-dot.offline     { background: var(--fluxo-critical); }
.fluxo-conn-label { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--fluxo-font-body); }
@keyframes fluxo-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── 6. Buttons ───────────────────────────────────────────────────────────── */

/* Primary — gold fill (main CTAs) */
.fluxo-btn-primary {
  background: var(--fluxo-gold);
  color: var(--fluxo-navy);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}
.fluxo-btn-primary:hover   { opacity: .88; }
.fluxo-btn-primary:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }

/* Secondary — navy fill */
.fluxo-btn-secondary {
  background: var(--fluxo-navy);
  color: var(--fluxo-warm-white);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}
.fluxo-btn-secondary:hover   { opacity: .85; }
.fluxo-btn-secondary:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }

/* Outline */
.fluxo-btn-outline {
  background: transparent;
  color: var(--fluxo-text-body);
  border: 1px solid var(--fluxo-border-med);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fluxo-btn-outline:hover   { background: var(--fluxo-gold-muted); color: var(--fluxo-navy); }
.fluxo-btn-outline:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }
.fluxo-btn-destructive { color: var(--fluxo-critical); border-color: rgba(220,38,38,0.3); }

/* ── 7. Cards ─────────────────────────────────────────────────────────────── */
.fluxo-card {
  background: #ffffff;
  border: 1px solid var(--fluxo-border);
  border-radius: 10px;
  padding: 20px 24px;
}
.fluxo-card-feature {
  background: #ffffff;
  border: 1px solid var(--fluxo-border);
  border-left: 2.5px solid rgba(200,180,120,0.6);
  border-radius: 10px;
  padding: 20px 24px;
}
.fluxo-card-selected {
  border: 1.5px solid var(--fluxo-gold);
  background: var(--fluxo-gold-muted);
}

/* ── 8. Severity badges & status dots ─────────────────────────────────────── */
.fluxo-badge {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-critical { background: var(--fluxo-critical-bg); color: var(--fluxo-critical); }
.badge-high     { background: var(--fluxo-high-bg);     color: var(--fluxo-high); }
.badge-medium   { background: var(--fluxo-medium-bg);   color: var(--fluxo-medium); }
.badge-pass     { background: var(--fluxo-pass-bg);     color: var(--fluxo-pass); }
.badge-info     { background: var(--fluxo-info-bg);     color: var(--fluxo-info); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-critical { background: var(--fluxo-critical); }
.dot-high     { background: var(--fluxo-high); }
.dot-medium   { background: var(--fluxo-medium); }
.dot-pass     { background: var(--fluxo-pass); }
.dot-muted    { background: rgba(0,0,0,0.2); }
.dot-gold     { background: var(--fluxo-gold); }
.dot-live     { background: #4caf7d; }

/* ── 9. Background texture (hero sections only) ───────────────────────────── */
.fluxo-texture {
  background-image:
    linear-gradient(rgba(200,180,120,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,180,120,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── 10. Sandbox / trial bar ──────────────────────────────────────────────── */
.fluxo-sandbox-bar {
  background: var(--fluxo-navy-deep);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: rgba(240,234,216,0.5);
  font-family: var(--fluxo-font-body);
  gap: 8px;
}
.fluxo-trial-pill {
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  background: #fef9ec;
  border: 1px solid rgba(180,83,9,0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--fluxo-font-body);
}

/* ── 11. Section eyebrow pattern ──────────────────────────────────────────── */
.fluxo-eyebrow {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fluxo-eyebrow-dark  { color: rgba(240,234,216,0.45); }
.fluxo-eyebrow-light { color: var(--fluxo-text-muted); }

/* ── 12. Contextual notes ─────────────────────────────────────────────────── */
.fluxo-note {
  font-size: 12px;
  color: var(--fluxo-text-muted);
  line-height: 1.55;
  margin-top: 8px;
  font-family: var(--fluxo-font-body);
}

/* ── 13. Coming soon / in development ────────────────────────────────────── */
.fluxo-coming-soon {
  opacity: 0.45;
  pointer-events: none;
}
.fluxo-coming-soon-label {
  font-size: 10px;
  color: var(--fluxo-text-faint);
  font-family: var(--fluxo-font-body);
}

/* ── 14. Footer ───────────────────────────────────────────────────────────── */
.fluxo-footer {
  font-size: 12px;
  color: var(--fluxo-text-faint);
  padding: 24px 32px;
  border-top: 1px solid var(--fluxo-border);
  font-family: var(--fluxo-font-body);
}
.fluxo-footer-dark {
  background: var(--fluxo-navy-deep);
  color: rgba(240,234,216,0.35);
}

/* ── 15. Utility classes ──────────────────────────────────────────────────── */
.fluxo-hidden  { display: none !important; }
.fluxo-show    { display: block; }

/* Accessible hide — both class names in use across sample files */
.fluxo-visually-hidden,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v44.0 additions — Documents app rebuild
   Sections 16–22 added per G84-B Wave 2 build plan (Phase A).
   New components consume canonical --fluxo-* tokens. Legacy SPA tokens
   are unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 16. Info button (i) — popover, hover/tap, position-aware ───────────── */
.fluxo-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
}
.fluxo-info-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(200,180,120,0.15);
  border: 1px solid rgba(200,180,120,0.4);
  color: var(--fluxo-text-muted);
  font-family: var(--fluxo-font-body);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  /* Phase F UX-I6: pointer (not help) — these are real toggle buttons, not hover-only tooltip icons. */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
/* Phase F UX-I4: active-state keys off [aria-describedby] (the canonical SR
   signal for an open tooltip). aria-expanded was removed from triggers per
   WAI-ARIA APG tooltip pattern. */
.fluxo-info-btn:hover,
.fluxo-info-btn:focus-visible,
.fluxo-info-btn[aria-describedby] {
  background: var(--fluxo-gold-muted);
  border-color: var(--fluxo-gold);
  color: var(--fluxo-navy);
}
.fluxo-info-btn:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: 2px;
}
.fluxo-info-popover {
  position: absolute;
  z-index: 1000;
  background: var(--fluxo-navy);
  color: rgba(240,234,216,0.95);
  font-family: var(--fluxo-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 6px;
  max-width: 260px;
  min-width: 180px;
  box-shadow: 0 6px 18px rgba(15,30,48,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.fluxo-info-popover[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.fluxo-info-popover[hidden] { display: none; }
.fluxo-info-popover::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--fluxo-navy);
  transform: rotate(45deg);
}
.fluxo-info-popover[data-pos="bottom"] {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
}
.fluxo-info-popover[data-pos="bottom"][data-state="open"] {
  transform: translateX(-50%) translateY(0);
}
.fluxo-info-popover[data-pos="bottom"]::before {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}
.fluxo-info-popover[data-pos="top"] {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
}
.fluxo-info-popover[data-pos="top"][data-state="open"] {
  transform: translateX(-50%) translateY(0);
}
.fluxo-info-popover[data-pos="top"]::before {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}
.fluxo-info-popover[data-pos="right"] {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-2px);
}
.fluxo-info-popover[data-pos="right"][data-state="open"] {
  transform: translateY(-50%) translateX(0);
}
.fluxo-info-popover[data-pos="right"]::before {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}
.fluxo-info-popover[data-pos="left"] {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(2px);
}
.fluxo-info-popover[data-pos="left"][data-state="open"] {
  transform: translateY(-50%) translateX(0);
}
.fluxo-info-popover[data-pos="left"]::before {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

/* ── 17. FluxoAIWorkPanel — visible-work animation ──────────────────────── */
/* Helper signature (vanilla JS, defined in SPA):
   renderFluxoAIWorkPanel(targetEl, { title, steps, onComplete })
   where steps is [{ id, label, status: 'pending'|'in-progress'|'complete' }] */
.fluxo-aiwork {
  background: var(--fluxo-cream-dark);
  border: 1px solid rgba(200,180,120,0.25);
  border-radius: 10px;
  padding: 18px 20px;
  font-family: var(--fluxo-font-body);
}
.fluxo-aiwork-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fluxo-text-body);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fluxo-aiwork-title::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--fluxo-gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: fluxo-aiwork-spin 1s linear infinite;
  flex-shrink: 0;
}
.fluxo-aiwork[data-state="complete"] .fluxo-aiwork-title::before {
  border: 2px solid var(--fluxo-pass);
  animation: none;
}
@keyframes fluxo-aiwork-spin { to { transform: rotate(360deg); } }
.fluxo-aiwork-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fluxo-aiwork-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 0;
  transition: opacity .25s, color .25s;
}
.fluxo-aiwork-step[data-status="pending"] {
  opacity: 0.45;
  color: var(--fluxo-text-muted);
}
.fluxo-aiwork-step[data-status="in-progress"] {
  opacity: 1;
  color: var(--fluxo-text-primary);
  font-weight: 500;
}
.fluxo-aiwork-step[data-status="complete"] {
  opacity: 1;
  color: var(--fluxo-text-body);
}
.fluxo-aiwork-step-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.fluxo-aiwork-step[data-status="pending"] .fluxo-aiwork-step-icon {
  background: rgba(0,0,0,0.08);
}
.fluxo-aiwork-step[data-status="in-progress"] .fluxo-aiwork-step-icon {
  background: var(--fluxo-gold);
  animation: fluxo-aiwork-pulse 1.4s ease-in-out infinite;
}
.fluxo-aiwork-step[data-status="complete"] .fluxo-aiwork-step-icon {
  background: var(--fluxo-pass);
}
.fluxo-aiwork-step[data-status="complete"] .fluxo-aiwork-step-icon::before {
  content: "✓";
}
@keyframes fluxo-aiwork-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}
.fluxo-aiwork-step-label { flex: 1; min-width: 0; }
.fluxo-aiwork-confirm {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--fluxo-text-body);
  line-height: 1.55;
}
.fluxo-aiwork-confirm[hidden] { display: none; }

/* ── 18. Drawer chrome — 60–70% viewport width ──────────────────────────── */
.fluxo-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,30,48,0.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.fluxo-drawer-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.fluxo-drawer-overlay[hidden] { display: none; }
.fluxo-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%;
  min-width: 420px;
  max-width: 920px;
  background: var(--fluxo-cream);
  z-index: 210;
  box-shadow: -12px 0 36px rgba(15,30,48,0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease-out;
}
.fluxo-drawer[data-state="open"] { transform: translateX(0); }
.fluxo-drawer[hidden] { display: none; }
@media (max-width: 700px) {
  .fluxo-drawer { width: 100%; min-width: 0; }
}
.fluxo-drawer-hdr {
  flex-shrink: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--fluxo-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
}
.fluxo-drawer-title {
  font-family: var(--fluxo-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--fluxo-navy);
  line-height: 1.25;
}
.fluxo-drawer-sub {
  font-family: var(--fluxo-font-body);
  font-size: 12.5px;
  color: var(--fluxo-text-muted);
  margin-top: 4px;
}
.fluxo-drawer-close {
  background: none;
  border: none;
  color: var(--fluxo-text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  touch-action: manipulation;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.fluxo-drawer-close:hover {
  color: var(--fluxo-text-primary);
  background: var(--fluxo-cream-dark);
}
.fluxo-drawer-close:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: 2px;
}
.fluxo-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.fluxo-drawer-footer {
  flex-shrink: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--fluxo-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: #ffffff;
}
.fluxo-drawer-stages {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 0;
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fluxo-text-faint);
}
.fluxo-drawer-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fluxo-drawer-stage[data-state="active"] { color: var(--fluxo-navy); }
.fluxo-drawer-stage[data-state="complete"] { color: var(--fluxo-pass); }
.fluxo-drawer-stage-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: var(--fluxo-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.fluxo-drawer-stage[data-state="active"] .fluxo-drawer-stage-num {
  background: var(--fluxo-navy);
  color: #ffffff;
}
.fluxo-drawer-stage[data-state="complete"] .fluxo-drawer-stage-num {
  background: var(--fluxo-pass);
  color: #ffffff;
}
.fluxo-drawer-stage-sep {
  color: var(--fluxo-text-faint);
  font-size: 12px;
}

/* ── 19. Density toggle — Compact / Detailed segmented control ──────────── */
.fluxo-density-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 2px;
  font-family: var(--fluxo-font-body);
}
.fluxo-density-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--fluxo-text-muted);
  /* v44.0 Phase E UX-I4: bump hit area toward the 44pt touch-target ideal.
     Density toggles render in the Review Results header where tap precision matters. */
  padding: 8px 14px;
  min-height: 32px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s, box-shadow .15s;
  letter-spacing: 0.02em;
}
.fluxo-density-btn:hover { color: var(--fluxo-text-primary); }
.fluxo-density-btn[aria-pressed="true"] {
  background: #ffffff;
  color: var(--fluxo-navy);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15,30,48,0.08);
}
.fluxo-density-btn:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: 2px;
}

/* ── 20. TOC card colors — confidence accent for shipment cards ─────────── */
:root {
  --fluxo-toc-clean: var(--fluxo-pass);     /* green   — zero unresolved findings */
  --fluxo-toc-watch: #b8861a;                /* yellow  — unresolved MEDIUM-only (darkened from #d4a017 for 3:1 contrast on white per Phase C UX audit) */
  --fluxo-toc-alert: var(--fluxo-high);      /* orange  — unresolved HIGH or CRITICAL */
  --fluxo-toc-block: var(--fluxo-critical);  /* red     — customs hold or rejection */
}
.fluxo-toc-card {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color .25s;
}
.fluxo-toc-card[data-toc="clean"] { border-left-color: var(--fluxo-toc-clean); }
.fluxo-toc-card[data-toc="watch"] { border-left-color: var(--fluxo-toc-watch); }
.fluxo-toc-card[data-toc="alert"] { border-left-color: var(--fluxo-toc-alert); }
.fluxo-toc-card[data-toc="block"] { border-left-color: var(--fluxo-toc-block); }

/* ── 21. Dropdown menu chrome — for nav user identity dropdown ──────────── */
.fluxo-dropdown {
  position: relative;
  display: inline-block;
  font-family: var(--fluxo-font-body);
}
.fluxo-dropdown-trigger {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  touch-action: manipulation;
  transition: background .15s;
}
.fluxo-dropdown-trigger:hover,
.fluxo-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,0.06);
}
.fluxo-dropdown-trigger:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: 2px;
}
.fluxo-dropdown-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
  transition: transform .15s;
}
.fluxo-dropdown-trigger[aria-expanded="true"] .fluxo-dropdown-chevron {
  transform: rotate(180deg);
}
.fluxo-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  /* Defensive cap so the menu never extends past the viewport edge on narrow screens. */
  max-width: calc(100vw - 16px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,30,48,0.18), 0 2px 6px rgba(15,30,48,0.06);
  border: 1px solid var(--fluxo-border);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.fluxo-dropdown-menu[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fluxo-dropdown-menu[hidden] { display: none; }
.fluxo-dropdown-header {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--fluxo-border);
  margin-bottom: 4px;
}
.fluxo-dropdown-header-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fluxo-text-primary);
  line-height: 1.3;
}
.fluxo-dropdown-header-email {
  font-size: 11.5px;
  color: var(--fluxo-text-muted);
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-all;
}
.fluxo-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--fluxo-text-body);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  touch-action: manipulation;
  transition: background .12s, color .12s;
}
.fluxo-dropdown-item:hover,
.fluxo-dropdown-item:focus-visible {
  background: var(--fluxo-cream);
  color: var(--fluxo-navy);
}
.fluxo-dropdown-item:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: -2px;
}
.fluxo-dropdown-item.danger { color: var(--fluxo-critical); }
.fluxo-dropdown-item.danger:hover { background: var(--fluxo-critical-bg); }
.fluxo-dropdown-divider {
  height: 1px;
  background: var(--fluxo-border);
  margin: 4px 0;
}

/* ── 21b. Nav-specific small buttons + display strings (v44.0 carry-forward
   from Phase B I5 — promoted from inline styles to first-class classes). */
.fluxo-btn-upgrade-nav {
  background: transparent;
  color: var(--fluxo-gold);
  border: 1px solid rgba(200,180,120,0.5);
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--fluxo-font-body);
  touch-action: manipulation;
  min-height: 32px;
  transition: background .15s, border-color .15s;
}
.fluxo-btn-upgrade-nav:hover {
  background: rgba(200,180,120,0.08);
  border-color: var(--fluxo-gold);
}
.fluxo-btn-upgrade-nav:focus-visible {
  outline: 2px solid var(--fluxo-gold);
  outline-offset: 2px;
}
.fluxo-nav-user-display {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 22. Settings tab section chrome ─────────────────────────────────────── */
.fluxo-settings {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0;
  font-family: var(--fluxo-font-body);
}
.fluxo-settings-section {
  background: #ffffff;
  border: 1px solid var(--fluxo-border);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.fluxo-settings-section-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fluxo-border);
}
.fluxo-settings-section-title {
  font-family: var(--fluxo-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--fluxo-navy);
  line-height: 1.2;
}
.fluxo-settings-section-sub {
  font-size: 12px;
  color: var(--fluxo-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.fluxo-settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fluxo-border);
}
.fluxo-settings-row:last-child { border-bottom: none; }
.fluxo-settings-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fluxo-text-body);
  flex-shrink: 0;
  min-width: 140px;
}
.fluxo-settings-row-value {
  flex: 1;
  font-size: 13px;
  color: var(--fluxo-text-primary);
  text-align: right;
  word-break: break-word;
}
.fluxo-settings-row-value.muted { color: var(--fluxo-text-muted); }
.fluxo-settings-row-value.mono {
  font-family: var(--fluxo-font-body);
  font-feature-settings: "tnum";
}
.fluxo-settings-coming-soon {
  text-align: center;
  padding: 18px;
  color: var(--fluxo-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
  background: rgba(0,0,0,0.025);
  border-radius: 6px;
}
.fluxo-settings-grandfathered {
  background: var(--fluxo-gold-muted);
  border: 1px solid var(--fluxo-gold-border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fluxo-text-body);
  line-height: 1.5;
}

/* ── 23. [hidden] discipline ─────────────────────────────────────────────────
   Per 2026-04-21 Decisions Log: every fluxo-* class with display: flex/block/grid
   must respect the HTML [hidden] attribute. This blanket rule ensures any consumer
   that toggles [hidden] gets display: none regardless of the component's display
   declaration. Specificity (0,2,0) beats a single class selector (0,1,0).
   ─────────────────────────────────────────────────────────────────────────── */
[class*="fluxo-"][hidden] { display: none !important; }

/* ── 24. Reduced-motion floor (Phase D UX-C1) ────────────────────────────────
   Honors prefers-reduced-motion across all keyframe animations introduced by
   v44.0 — Fluxo design system AND legacy SPA-side animations (fadeUp / pip / spin
   / cust-just-saved-pulse). Per WCAG 2.3.3, vestibular triggers should ramp out.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Fluxo design-system keyframes */
  .fluxo-aiwork-title::before { animation: none !important; }
  .fluxo-aiwork-step[data-status="in-progress"] .fluxo-aiwork-step-icon { animation: none !important; }
  .fluxo-conn-dot.connecting { animation: none !important; }
  /* Drawer / dropdown transitions become instantaneous */
  .fluxo-drawer,
  .fluxo-drawer-overlay,
  .fluxo-dropdown-menu,
  .fluxo-info-popover { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v44.0.1 — Conditional Certifications subsection (Extracted Fields panel).
   Surfaces struck_items and kept_conditional_items from the review JSON
   so reviewers can see the certifier's negative and positive assertions
   on government health certificates side-by-side, with permit cross-check.
   ═══════════════════════════════════════════════════════════════ */

/* Aliases bridging this block to existing design-system tokens.
   Defined here (additive only) because the .ep-cc-* rules below
   read more cleanly with these names and these aliases were not
   previously needed elsewhere in the system. */
:root {
  --bg2:        var(--fluxo-cream-dark);
  --red-dim:    var(--fluxo-critical-bg);
  --green-dim:  var(--fluxo-pass-bg);
  --amber-dim:  var(--fluxo-high-bg);
  --amber-pale: var(--high-border);
}

.ep-section.ep-cc { display: block; }
.ep-section.ep-cc[hidden] { display: none; }

.ep-cc-hint { font-weight: 400; font-size: 11px; color: var(--t3); margin-left: 6px; }

.ep-cc-empty {
  padding: 10px 12px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-pale);
  border-radius: var(--r);
  color: var(--t2);
  font-size: 12px;
}

.ep-cc-group { display: block; margin-top: 8px; }
.ep-cc-group[hidden] { display: none; }

.ep-cc-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t2);
  padding: 4px 0;
}
.ep-cc-group-hdr[hidden] { display: none; }
.ep-cc-struck-hdr { color: var(--red); }
.ep-cc-kept-hdr   { color: var(--green); }

.ep-cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.ep-cc-icon[hidden] { display: none; }
.ep-cc-struck-icon { background: var(--red-dim);   color: var(--red); }
.ep-cc-kept-icon   { background: var(--green-dim); color: var(--green); }

.ep-cc-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--b2);
  background: var(--bg2);
  border-radius: var(--r);
  margin-top: 6px;
}
.ep-cc-row[hidden] { display: none; }
.ep-cc-row.ep-cc-sev-critical { border-left-color: var(--red); }
.ep-cc-row.ep-cc-sev-warning  { border-left-color: var(--amber); }
.ep-cc-row.ep-cc-sev-info     { border-left-color: var(--b2); }

.ep-cc-item    { font-weight: 600; color: var(--t1); font-size: 12px; word-break: break-word; }

.ep-cc-body    { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ep-cc-body[hidden] { display: none; }

.ep-cc-interp  { color: var(--t1); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.ep-cc-printed { color: var(--t3); font-size: 11px; font-family: var(--mono, monospace); overflow-wrap: anywhere; }
.ep-cc-strikemark { text-decoration: line-through; }

.ep-cc-permit  {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ep-cc-mismatch { color: var(--red);   background: var(--red-dim);   }
.ep-cc-unknown  { color: var(--amber); background: var(--amber-dim); }
.ep-cc-ok       { color: var(--green); background: var(--green-dim); }

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.3 — Shipment header mode pill + click-to-edit popover.
   Ocean uses the existing --teal family (matches the supporting-docs
   pill convention at SPA L6763); air uses --amber; unknown uses
   neutral --b1/--b2/--t3 for a quiet "pending" treatment.
   ────────────────────────────────────────────────────────────── */
.ship-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: filter .15s;
  background: transparent;
  font-family: inherit;
}
.ship-mode-pill[hidden] { display: none; }
.ship-mode-pill:hover { filter: brightness(0.96); }
.ship-mode-pill:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.ship-mode-air {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: var(--amber-pale);
}
.ship-mode-ocean {
  background: var(--teal-dim);
  color: var(--teal);
  border-color: var(--teal-pale);
}
.ship-mode-unknown {
  background: var(--b1);
  color: var(--t2); /* Phase 4 contrast cluster fix — was --t3 (1.99:1 fails AA) */
  border-color: var(--b2);
}
/* ──────────────────────────────────────────────────────────────
   Phase 4 audit contrast cluster (v44.1 standardization).
   v44.1 standardized on --t2 for body text on light surfaces;
   --t3 (#8EA3B5) fails WCAG AA at 4.5:1 on --b1/--surf in this
   context (computed 1.99:1 / 2.46:1). --t2 (#4A6275) yields
   4.96:1 on --b1 and 6.13:1 on --surf — both pass AA.
   USE --t2 FOR ANY NEW BODY-TEXT-ON-LIGHT-SURFACE WORK.
   --t3 remains valid for: muted decorative dots (non-text contrast
   3:1 spec applies), placeholder hints (where 3:1 is acceptable),
   and dark-bg overlays where the inverted contrast holds.
   ────────────────────────────────────────────────────────────── */
.smp-prov {
  color: var(--t2);
  font-weight: 400;
}

/* Mode popover — fixed-positioned dialog anchored beneath the pill */
.mode-popover {
  position: fixed;
  z-index: 250;
  background: var(--white, #fff);
  border: 1px solid var(--b1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 12px 14px;
  min-width: 240px;
  font-size: 12px;
}
.mode-popover[hidden] { display: none; }
.mp-title {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mp-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 12px;
}
.mp-radio[hidden] { display: none; }
.mp-radio-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mp-hint {
  font-size: 10px;
  color: var(--t2); /* Phase 4 contrast cluster — was --t3 (fails AA on small italic body) */
  font-style: italic;
  margin-left: 22px;
  margin-top: -2px;
}
.mp-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--b1);
}
.mp-actions[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.5 — Mode badge.
   Inline pill rendered next to each required-doc on the lane
   right panel and customer slide-out. Ocean uses --teal family
   to match the §1.3 ship-mode-pill convention (teal substitution
   locked per Jay's note 1, replaces the nonexistent --blue family
   asserted in plan §1.3).
   ────────────────────────────────────────────────────────────── */
.mb {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 4px;
  vertical-align: middle;
}
.mb[hidden] { display: none; }
.mb-ocean { background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-pale); }
.mb-air   { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-pale); }
.mb-all   { background: var(--b1); color: var(--t2); border: 1px solid var(--b2); } /* Phase 4 contrast cluster — was --t3 (1.99:1 fails AA) */

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.6 — Lane right-panel section framing.
   Replaces the inline .lane-section divs at SPA L7047-7051 with
   explicit panel framing. Stronger heading hierarchy, distinct
   visual weight, empty-state body when a section has zero items
   (so no section silently disappears from the lane page).
   ────────────────────────────────────────────────────────────── */
.lane-rightpanel-section {
  background: var(--surf);
  border: 1.5px solid var(--b1);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.lane-rightpanel-section[hidden] { display: none; }
.lrps-title {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}
.lrps-empty {
  font-size: 12px;
  color: var(--t2); /* Phase 4 contrast cluster — was --t3 (2.46:1 fails AA on italic body) */
  font-style: italic;
  padding: 6px 0;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.7 — Customer slide-out side panel.
   Click a customer card on the lane left column → panel slides in
   from the right covering the right column. Falls back to full
   viewport at <768px. Close via X / ESC / backdrop click.
   prefers-reduced-motion honored — no animations when set.
   ────────────────────────────────────────────────────────────── */
.cust-slideout {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
}
.cust-slideout[hidden] { display: none; }
.cso-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 55, 0.4);
  animation: csoFade .18s ease;
}
.cso-panel {
  position: relative;
  margin-left: auto;
  width: min(640px, 100vw);
  height: 100vh;
  background: var(--surf);
  border-left: 1px solid var(--b1);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: csoSlide .2s cubic-bezier(.2, .8, .2, 1);
}
.cso-panel[hidden] { display: none; }
.cso-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.cso-header[hidden] { display: none; }
.cso-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.cso-sub {
  font-size: 12px;
  color: var(--t2);
  margin-top: 2px;
}
.cso-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--t2); /* Phase 4 contrast cluster — was --t3 (fails 3:1 non-text contrast on close glyph) */
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.cso-close:hover {
  background: var(--b1);
  color: var(--navy);
}
.cso-close:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.cso-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}
.cso-body[hidden] { display: none; }
@keyframes csoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes csoSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  /* Phase 4 audit fix 2.I2: extended to cover ALL v44.1 motion vocabulary,
     not just the slide-out's enter animations. Honors the preference
     consistently across animation, transition, and hover-filter surfaces. */
  .cso-backdrop,
  .cso-panel { animation: none; }
  .cso-close { transition: none; }
  .ship-mode-pill { transition: none; }
  .ship-mode-pill:hover { filter: none; }
  .mode-popover { /* future-proof — no animation today, but if added it should respect this */ }
}
@media (max-width: 768px) {
  .cso-panel { width: 100vw; }
}
@media (max-width: 380px) {
  .cso-header { padding: 12px 14px; }
  .cso-body   { padding: 14px; }
  .cso-title  { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.8 — Review history scaling.
   Toolbar (search input + date filter) + results container +
   pagination footer. Renders inside the per-lane Review History
   collapsed body (.lrh-body) when toggled open.
   ────────────────────────────────────────────────────────────── */
.lrh-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  flex-wrap: wrap;
}
.lrh-toolbar[hidden] { display: none; }
.lrh-toolbar > .inp { min-width: 0; }
.lrh-results {
  margin-top: 4px;
}
.lrh-pagination {
  margin-top: 4px;
}
.lrh-pagination[hidden] { display: none; }
@media (max-width: 480px) {
  .lrh-toolbar { gap: 6px; }
  .lrh-toolbar > .sel { width: 100% !important; }
}

/* ──────────────────────────────────────────────────────────────
   v44.1 §1.9 — Add/Edit Lane modal mode-applicability section.
   Sibling section to the chip selector; one row per selected doc
   with three radios (Ocean only / Air only / All modes). Visual
   indicator dot (.ldm-dot) marks rows where the doc's mode has
   not been deliberately user-set in the modal session.
   ────────────────────────────────────────────────────────────── */
.ldm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.ldm-table th,
.ldm-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--b1);
  text-align: center;
  vertical-align: middle;
}
.ldm-table th {
  font-weight: 600;
  color: var(--t2);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--off, var(--surf));
}
.ldm-table th.ldm-name,
.ldm-table td.ldm-name {
  text-align: left;
  font-weight: 500;
  color: var(--navy);
}
.ldm-table tr:last-child td { border-bottom: none; }
.ldm-table input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--navy);
}
/* Phase 4 audit fix 6.C1: each radio is wrapped in a label whose hit area
   spans the full table cell at min 44×44px. Negative margin pulls the label
   to the cell edges; positive padding restores visual rhythm inside it. */
.ldm-radio-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: -6px -8px;
  padding: 6px 8px;
  cursor: pointer;
}
.ldm-radio-cell:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: 4px;
}
/* Phase 4 audit fix 6.I2: was background:var(--amber). Amber carries warning
   semantic across the SPA (.lpa-pending-banner, .badge-warning, mismatch toast,
   --fluxo-toc-watch). The dot's actual semantic is "informational, not yet
   user-set this session — save works regardless." Switched to --t2 (neutral
   slate, passes 3:1 non-text contrast on light surfaces) so the visual signal
   matches the explanatory text. Mercedes/Paloma will read this as "quiet
   informational marker" rather than "this row needs my attention." */
.ldm-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t2);
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.ldm-dot[hidden] { display: none; }
@media (max-width: 480px) {
  .ldm-table th,
  .ldm-table td { padding: 4px 4px; font-size: 11px; }
  /* Phase 4 audit fix 6.C1: re-anchor label margins to compressed cell padding
     so the 44×44 hit area is preserved at narrow viewport too. */
  .ldm-radio-cell { margin: -4px -4px; padding: 4px 4px; }
}