/* ==========================================================================
   OSH-Calc cockpit: "Clinical Paper" light theme
   Loaded after osh-calc.css. Overrides the Clinical Noir block when the
   body is NOT in dark mode; body.dark-mode keeps the original noir look.

   Palette
     canvas  #F2F5F7   surface #FFFFFF   ink #12202B   line #DAE1E7
     accent  #0B6B77   fit #17724A   restricted #8F5600   unfit #B3261E
     pending #475569
   Type: system UI, tabular numerals for every measured value, sentence-case
   labels. Colour is spent in one place: the clearance bar.
   ========================================================================== */

:root {
  --paper: #F2F5F7;
  --bg: #F2F5F7;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --surface-subtle: #F6F8FA;
  --surface-hover: #EDF1F4;

  --ink: #12202B;
  --muted: #52606D;
  --faint: #6F7C88;
  --line: #DAE1E7;
  --border: #DAE1E7;
  --border-subtle: #E6EBEF;
  --border-strong: #C4CED7;

  --osh-navy: #12202B;
  --osh-navy-subtle: #F6F8FA;
  --osh-primary: #0B6B77;
  --osh-primary-hover: #095661;
  --osh-primary-soft: #E3F1F3;
  --osh-primary-border: #A9D2D8;
  --osh-link: #0B6B77;

  --osh-ok: #17724A;
  --osh-ok-soft: #E7F5ED;
  --osh-ok-border: #BFE3CF;
  --osh-ok-text: #17724A;

  --osh-warn: #8F5600;
  --osh-warn-soft: #FBF0DB;
  --osh-warn-border: #EBD3A0;
  --osh-warn-text: #8F5600;

  --osh-bad: #B3261E;
  --osh-bad-soft: #FCE8E6;
  --osh-bad-border: #F0BDB8;
  --osh-bad-text: #B3261E;

  --pending: #475569;
  --pending-soft: #EEF1F5;
  --pending-border: #CBD3DC;

  --osh-radius-card: 12px;
  --osh-radius-btn: 10px;
  --osh-radius-input: 10px;
  --osh-shadow-sm: none;
  --osh-shadow-md: none;
  --osh-shadow-lg: 0 6px 20px rgba(18, 32, 43, .08);

  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* ---------- Page ---------- */
body:not(.dark-mode) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
  -webkit-font-smoothing: antialiased;
}
body:not(.dark-mode) .wrap.app {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
}

/* Labels: sentence case, no tracking */
body:not(.dark-mode) .dosh-badge,
body:not(.dark-mode) .preset-label,
body:not(.dark-mode) .param-name,
body:not(.dark-mode) .freq-section-title,
body:not(.dark-mode) .triad-lbl,
body:not(.dark-mode) .metric-lbl,
body:not(.dark-mode) .cockpit-tagline,
body:not(.dark-mode) .cockpit-status-sub,
body:not(.dark-mode) .ear-kpi-lbl,
body:not(.dark-mode) .lbl,
body:not(.dark-mode) .band small,
body:not(.dark-mode) .osh-title-text small {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Labels set with inline uppercase/tracking styles */
body:not(.dark-mode) [style*="text-transform: uppercase"],
body:not(.dark-mode) [style*="text-transform:uppercase"] {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body:not(.dark-mode) .field label,
body:not(.dark-mode) .calc-cell .metric-lbl,
body:not(.dark-mode) .sticky-status-box .sub-label,
body:not(.dark-mode) .ear-kpi-lbl {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}
body:not(.dark-mode) .dosh-badge {
  white-space: nowrap;
  font-family: var(--f-body) !important;
}
body:not(.dark-mode) .ear-status-pill,
body:not(.dark-mode) .p-badge {
  font-family: var(--f-body) !important;
  letter-spacing: .02em !important;
}

/* ---------- Brand header ---------- */
body:not(.dark-mode) .band {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-top: 16px;
}
body:not(.dark-mode) .band h1,
body:not(.dark-mode) .osh-title-text h1 {
  color: var(--ink) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body:not(.dark-mode) .osh-title-text small,
body:not(.dark-mode) .band small {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
body:not(.dark-mode) .icon-btn,
body:not(.dark-mode) .np-btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 44px !important;
}
body:not(.dark-mode) .icon-btn:hover,
body:not(.dark-mode) .np-btn:hover { background: var(--surface-hover) !important; }

body:not(.dark-mode) .worker-bar {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
}
body:not(.dark-mode) .worker-bar .anon-id { color: var(--ink) !important; }

/* ---------- Inputs ---------- */
body:not(.dark-mode) input[type="number"],
body:not(.dark-mode) input[type="text"],
body:not(.dark-mode) select,
body:not(.dark-mode) .pair-in .field input,
body:not(.dark-mode) .freq-cell input,
body:not(.dark-mode) .activation-input {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  font-family: var(--f-body) !important;
  font-variant-numeric: tabular-nums;
  font-size: 16px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 8px 12px !important;
}
body:not(.dark-mode) input[type="number"] {
  font-family: var(--f-mono) !important;
  font-weight: 600;
}
body:not(.dark-mode) input::placeholder { color: var(--faint) !important; }
body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus {
  border-color: var(--osh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 119, .18) !important;
  outline: none !important;
}
body:not(.dark-mode) :focus-visible {
  outline: 2px solid var(--osh-primary);
  outline-offset: 2px;
}
body:not(.dark-mode) .unit { color: var(--faint) !important; }

/* ---------- Cards ---------- */
body:not(.dark-mode) .osh-card,
body:not(.dark-mode) .pattern-card,
body:not(.dark-mode) .bento-card,
body:not(.dark-mode) .ear-card,
body:not(.dark-mode) .activation-card,
body:not(.dark-mode) .panel {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
body:not(.dark-mode) .osh-card-title,
body:not(.dark-mode) .ear-title,
body:not(.dark-mode) .pattern-badges {
  font-family: var(--f-body) !important;
  color: var(--ink) !important;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.005em;
}
body:not(.dark-mode) .osh-card-sub,
body:not(.dark-mode) .param-desc,
body:not(.dark-mode) .ear-sub,
body:not(.dark-mode) .guidance-text {
  color: var(--muted) !important;
}
body:not(.dark-mode) .guidance-text { font-size: 14px; line-height: 1.55; }
body:not(.dark-mode) .osh-card-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: 14px;
}
body:not(.dark-mode) .dosh-badge {
  background: var(--osh-primary-soft) !important;
  color: var(--osh-primary) !important;
  border: 1px solid var(--osh-primary-border) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}

/* Inner groups sit one step below the card surface */
body:not(.dark-mode) .param-group,
body:not(.dark-mode) .calc-cell,
body:not(.dark-mode) .freq-cell,
body:not(.dark-mode) .tree-step-row {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
}
body:not(.dark-mode) .param-name { color: var(--muted) !important; font-size: 13px !important; font-weight: 600 !important; }

/* Measured values: tabular numerals */
body:not(.dark-mode) .num,
body:not(.dark-mode) .metric-val,
body:not(.dark-mode) .ear-kpi-val {
  font-family: var(--f-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- Presets ---------- */
body:not(.dark-mode) .preset-label { color: var(--muted) !important; font-size: 13px !important; font-weight: 600 !important; }
body:not(.dark-mode) .preset-chip {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: none !important;
}
body:not(.dark-mode) .preset-chip:hover { background: var(--surface-hover) !important; border-color: var(--osh-primary) !important; }

/* ---------- Result banners keep their gate colour ---------- */
body:not(.dark-mode) .pattern-card.status-fit { background: var(--osh-ok-soft) !important; border-color: var(--osh-ok-border) !important; }
body:not(.dark-mode) .pattern-card.status-restricted { background: var(--osh-warn-soft) !important; border-color: var(--osh-warn-border) !important; }
body:not(.dark-mode) .pattern-card.status-unfit { background: var(--osh-bad-soft) !important; border-color: var(--osh-bad-border) !important; }

/* ---------- Clearance bar (the one place colour is spent) ---------- */
@media (min-width: 769px) {
  body:not(.dark-mode) .desktop-cockpit-bar {
    position: sticky !important;
    top: 12px;
    z-index: 30;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-left: 8px solid var(--pending) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(18, 32, 43, .08) !important;
    padding: 16px 24px !important;
    margin-bottom: 28px !important;
  }
  body:not(.dark-mode) .desktop-cockpit-bar:has(.gate-pass) { border-left-color: var(--osh-ok) !important; }
  body:not(.dark-mode) .desktop-cockpit-bar:has(.gate-warn) { border-left-color: var(--osh-warn) !important; }
  body:not(.dark-mode) .desktop-cockpit-bar:has(.gate-fail) { border-left-color: var(--osh-bad) !important; }

  body:not(.dark-mode) .cockpit-tagline {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
  }
  body:not(.dark-mode) .cockpit-worker-info {
    color: var(--ink) !important;
    font-family: var(--f-mono) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  body:not(.dark-mode) .cockpit-status-sub {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
  }
  body:not(.dark-mode) .cockpit-status-badge {
    font-family: var(--f-body) !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    padding: 6px 20px !important;
    border-radius: 10px !important;
    background: var(--pending-soft) !important;
    color: var(--pending) !important;
    border: 1px solid var(--pending-border) !important;
  }
  body:not(.dark-mode) .cockpit-status-badge.gate-pending { background: var(--pending-soft) !important; color: var(--pending) !important; border-color: var(--pending-border) !important; }
  body:not(.dark-mode) .cockpit-status-badge.gate-pass { background: var(--osh-ok-soft) !important; color: var(--osh-ok) !important; border-color: var(--osh-ok-border) !important; }
  body:not(.dark-mode) .cockpit-status-badge.gate-warn { background: var(--osh-warn-soft) !important; color: var(--osh-warn) !important; border-color: var(--osh-warn-border) !important; }
  body:not(.dark-mode) .cockpit-status-badge.gate-fail { background: var(--osh-bad-soft) !important; color: var(--osh-bad) !important; border-color: var(--osh-bad-border) !important; }

  body:not(.dark-mode) .cockpit-hr-slip-btn {
    height: 48px !important;
    background: var(--osh-primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }
  body:not(.dark-mode) .cockpit-hr-slip-btn:hover { background: var(--osh-primary-hover) !important; transform: none !important; }

  body:not(.dark-mode) .osh-card,
  body:not(.dark-mode) .pattern-card,
  body:not(.dark-mode) .bento-card,
  body:not(.dark-mode) .ear-card,
  body:not(.dark-mode) .panel { padding: 24px !important; margin-bottom: 20px !important; }
}

/* ---------- Mobile: sticky bar, module tabs, bottom dock ---------- */
@media (max-width: 768px) {
  body:not(.dark-mode) .wrap.app { background: var(--paper) !important; }
  body:not(.dark-mode) .module-tab-btn {
    background: var(--surface) !important;
    color: var(--muted) !important;
    border: 1px solid var(--border-strong) !important;
  }
  body:not(.dark-mode) .module-tab-btn.active {
    background: var(--osh-primary-soft) !important;
    color: var(--osh-primary) !important;
    border-color: var(--osh-primary) !important;
    border-bottom: 2px solid var(--osh-primary) !important;
  }
  body:not(.dark-mode) .osh-sticky-bar {
    background: rgba(255, 255, 255, .94) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -6px 20px rgba(18, 32, 43, .08);
  }
  body:not(.dark-mode) .clinical-nav-dock {
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* ---------- Sticky status box gets a pending state ---------- */
body:not(.dark-mode) .sticky-status-box { background: var(--pending-soft); border-color: var(--pending-border); }
body:not(.dark-mode) .sticky-status-box.fit { background: var(--osh-ok-soft); border-color: var(--osh-ok-border); }
body:not(.dark-mode) .sticky-status-box.restricted { background: var(--osh-warn-soft); border-color: var(--osh-warn-border); }
body:not(.dark-mode) .sticky-status-box.unfit { background: var(--osh-bad-soft); border-color: var(--osh-bad-border); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.dark-mode) * { transition: none !important; animation: none !important; }
}