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

/* =====================================================================
   OneModus — "Delivery Cockpit" design tokens.
   The instrument panel a consultant flies an Oracle implementation from:
   a deep cool-slate canvas, surfaces lit as instrument panels, and ONE
   lit teal-mint signal reserved for primary / active / indicators.
   Two themes only:  :root = Cockpit Dark (default) · .cockpit-light = Daylight.
   Token NAMES are stable — every page + inline template style consumes them,
   so re-skinning inner pages is just a matter of these values.
   ===================================================================== */
:root {
  /* ── Surfaces ── */
  --bg:                #0B1220;   /* canvas — deep cool slate             */
  --surface:           #131C2B;   /* panels — lit instrument face         */
  --surface-2:         #1B2738;   /* wells / drop zones                   */
  --border:            #24344A;   /* hairline dividers, panel borders     */
  --border-input:      #314463;   /* input hairlines (a touch brighter)   */
  --border-table:      #1F2E42;
  --dd-item-border:    #1B2738;
  --dd-item-hover:     #20304A;

  /* ── Text ── */
  --fg:                #E6EDF5;   /* primary text                         */
  --fg-muted:          #8A9BB3;   /* secondary text / placeholders        */
  --fg-label:          #A6B5C9;   /* form labels                          */
  --fg-on-primary:     #06141A;   /* dark ink on the mint signal          */

  /* ── Primary / accent (the one lit signal — teal-mint) ── */
  --primary:           #4FD1C5;
  --primary-hover:     #6FE0D4;
  --primary-light:     #0F2A2E;
  --primary-light-hov: #143A3E;

  /* ── Chips ── */
  --chip-bg:           #0F2A2E;
  --chip-border:       #2E6F69;
  --chip-color:        #6FE0D4;
  --chip-remove:       #8A9BB3;

  /* ── Status (badges, summaries) — small lit indicators ── */
  --status-pending-bg: #16202E;  --status-pending-fg: #8A9BB3;
  --status-running-bg: #15303A;  --status-running-fg: #4FD1C5;
  --status-done-bg:    #10302A;  --status-done-fg:    #46D6A8;
  --status-warn-bg:    #2E2410;  --status-warn-fg:    #E8B14C;
  --status-error-bg:   #2E1620;  --status-error-fg:   #F06B6B;

  --sum-ok:            #46D6A8;
  --sum-warn:          #E8B14C;
  --sum-fail:          #F06B6B;
  --error-text:        #F06B6B;

  /* ── Dashboard data-viz palette (Client-360 donut/bars/tiles only). Dark theme
       uses the user-supplied "pastel rainbow" set — light hues pop on the dark
       #1B2738 surface (all ≳10:1). Kept separate from --sum-*/--primary so the
       rest of the app is untouched. ── */
  --dv-ok:      #CAFFBF;   /* verified · match  (pastel green — matches the pastel-rainbow set; was #178A54, then #CAFFBF, briefly #22C55E) */
  --dv-info:    #A0C4FF;   /* proposed · not_in_sdd     (pastel blue)   */
  --dv-warn:    #FFD6A5;   /* superseded · missing_evid (pastel orange) */
  --dv-bad:     #FFADAD;   /* rejected · config_issue   (pastel red)    */
  --dv-neutral: #BDB2FF;   /* inconclusive (pastel lavender, labeled)   */
  --dv-muted:   #FFC6FF;   /* other        (pastel magenta, labeled)    */

  /* ── Op badges (downloads / uploads in logs) ── */
  --op-download-bg:    #10302A;  --op-download-fg:    #46D6A8;
  --op-upload-bg:      #2E2410;  --op-upload-fg:      #E8B14C;

  /* ── Lock states (credentials gate) ── */
  --lock-ready:        #46D6A8;  /* unlocked, ready to lock              */
  --lock-ready-hov:    #38B890;
  --lock-active:       #E8B14C;  /* locked, click to unlock — amber      */
  --lock-active-hov:   #CF9A36;
  --lock-active-dis:   #5A4A22;
  --lock-active-fg:    #06141A;

  /* ── Disabled inputs ── */
  --input-dis-bg:      #101824;
  --input-dis-fg:      #46586F;

  /* ── Shadows (low, engineered — depth not drama) ── */
  --shadow-card:       rgba(0,0,0,.5);
  --shadow-dd:         rgba(0,0,0,.4);
  --shadow-elev:       0 6px 22px var(--shadow-card);
  --shadow-pop:        0 6px 18px var(--shadow-dd);

  /* ── Ambient instrument grid (faint canvas texture) ── */
  --line:              rgba(79,209,197,.05);

  /* ── Radii (tighter / more engineered) ── */
  --r-sm:      4px;
  --r-md:      6px;    /* inputs                  */
  --r-lg:      7px;    /* buttons, dropdowns      */
  --r-xl:      10px;   /* drop zones              */
  --r-2xl:     10px;   /* large cards / panels    */
  --r-pill:    20px;   /* chips / indicator pills */
  --r-mark-lg: 14px;   /* brand mark (56px)       */
  --r-mark-sm: 8px;    /* brand mark (28px)       */

  /* ── Spacing scale ── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.4rem;   --sp-6: 1.6rem;  --sp-7: 2rem;    --sp-8: 2.5rem;

  /* ── Motion ── */
  --t-fast:  0.15s;  --t-base: 0.20s;  --t-slow: 0.25s;  --t-theme: 0.25s;
  --ease:    ease;

  /* ── Typography ── */
  --font-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --t-display: 2.4rem;  --t-h1: 1.5rem;   --t-h2: 1.15rem;  --t-h3: 0.95rem;
  --t-body: 0.9rem;     --t-body-sm: 0.85rem; --t-meta: 0.82rem;
  --t-micro: 0.78rem;   --t-nano: 0.72rem;
  --w-regular: 400;  --w-medium: 500;  --w-semibold: 600;  --w-bold: 700;  --w-black: 800;
  --ls-tight: -0.03em;  --ls-loose: 0.08em;

  /* ── Backward-compat aliases (old token names used in template inline styles) ── */
  --text:           var(--fg);
  --text-muted:     var(--fg-muted);
  --text-label:     var(--fg-label);
  --text-h3:        var(--fg);
  --table-border:   var(--border-table);
  --table-head:     var(--surface-2);
  --bg-input:       var(--surface-2);
  --bg-muted:       var(--bg);
  --input-dis-color: var(--input-dis-fg);
  --spinner-border: var(--border);
  --drop-border:    var(--primary);
  --drop-bg:        var(--surface-2);
  --drop-text:      var(--fg);
  --status-done:    var(--status-done-fg);   /* inline status text (KB save) */
  --status-error:   var(--status-error-fg);
}

/* =====================================================================
   Daylight — the cool light instrument (NOT warm cream). Same cockpit
   discipline: white panels on a cool-grey canvas, the mint deepened to a
   teal that meets AA on light surfaces.
   ===================================================================== */
html.cockpit-light {
  --bg:                #E7ECF2;
  --surface:           #FFFFFF;
  --surface-2:         #F1F5FA;
  --border:            #D5DDE8;
  --border-input:      #C3CEDC;
  --border-table:      #E4E8EE;
  --dd-item-border:    #EEF2F7;
  --dd-item-hover:     #EEF3F9;

  --fg:                #16243A;
  --fg-muted:          #5C6B82;
  --fg-label:          #41506A;
  --fg-on-primary:     #FFFFFF;   /* white ink: the light-theme primary (dark teal) + lock-ready (dark green) need white for legible button text (Verify / Lock) */

  --primary:           #0FA896;
  --primary-hover:     #0C8C7D;
  --primary-light:     #E2F4F1;
  --primary-light-hov: #CFECE7;

  --chip-bg:           #E2F4F1;
  --chip-border:       #8FD3CA;
  --chip-color:        #0C8C7D;
  --chip-remove:       #5C6B82;

  --status-pending-bg: #EEF1F5;  --status-pending-fg: #5C6B82;
  --status-running-bg: #E2F0F4;  --status-running-fg: #0C8C7D;
  --status-done-bg:    #E0F3EC;  --status-done-fg:    #0B7A5C;
  --status-warn-bg:    #FBEFD6;  --status-warn-fg:    #9A6B14;
  --status-error-bg:   #FBE6E8;  --status-error-fg:   #C0413F;

  --sum-ok:            #0B7A5C;
  --sum-warn:          #9A6B14;
  --sum-fail:          #C0413F;
  --error-text:        #C0413F;

  /* ── Dashboard data-viz palette (light theme). Uses the user-supplied
       saturated red→green ramp for the semantic statuses (dark hues read on the
       #F1F5FA surface). The ramp carries no blue/gray, so proposed keeps a blue
       and inconclusive/other keep low-chroma grays. ── */
  --dv-ok:      #007F4E;   /* verified · match          (ramp green)  */
  --dv-info:    #2A6FD6;   /* proposed · not_in_sdd     (blue — ramp has none) */
  --dv-warn:    #F37324;   /* superseded · missing_evid (ramp orange) */
  --dv-bad:     #AE311E;   /* rejected · config_issue   (ramp red)    */
  --dv-neutral: #64748B;   /* inconclusive (gray — ramp has none)     */
  --dv-muted:   #8B9AAE;   /* other        (gray — ramp has none)     */

  --op-download-bg:    #E0F3EC;  --op-download-fg:    #0B7A5C;
  --op-upload-bg:      #FBEFD6;  --op-upload-fg:      #9A6B14;

  --lock-ready:        #0B7A5C;
  --lock-ready-hov:    #096A50;
  --lock-active:       #C8861E;
  --lock-active-hov:   #A86E14;
  --lock-active-dis:   #E6C896;
  --lock-active-fg:    #FFFFFF;

  --input-dis-bg:      #EEF1F5;
  --input-dis-fg:      #9AA7B8;

  --shadow-card:       rgba(16,36,58,.12);
  --shadow-dd:         rgba(16,36,58,.10);

  --line:              rgba(15,168,150,.06);
}


body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  transition: background var(--t-theme), color var(--t-theme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Global visibility helper (used across templates) */
.hidden { display: none !important; }

/* ── Ambient instrument grid ──────────────────────────────────────────────
   A very faint engineered grid on the canvas so the page reads as a lit
   instrument surface rather than flat dark. Used on the landing (.cockpit)
   and any full-canvas page. Pure CSS, sits behind content, never animates. */
.instrument-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  /* fade the grid out toward the bottom so content sits on calmer canvas */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent);
}

/* ── Brand mark (landing logo + header pill) ── */
/* Onemodus mark: transparent — the logo itself is drawn in the theme accent. */
.brand-mark {
  width: 56px;
  height: 56px;
  background: transparent;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.brand-mark-sm {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* ── Landing ── */
/* =====================================================================
   LANDING — the Delivery Cockpit.
   Top bar · hero · lit lifecycle rail · instrument stations · footer.
   The boldness lives in the rail + the ambient grid; everything else is
   quiet. Mint appears only on indicator dots, hover accents and the brand.
   ===================================================================== */
.cockpit {
  position: relative;
  z-index: 1;                 /* sits above .instrument-grid */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* ── Top bar ── */
.cockpit-bar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 0 1.1rem;
  border-bottom: 1px solid var(--border);
}
.cockpit-bar .brand-mark { margin-bottom: 0; }
.cockpit-brand { display: flex; flex-direction: column; line-height: 1.05; }
.cockpit-wordmark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.cockpit-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: .15rem;
}
.cockpit-bar .header-spacer { flex: 1; }

/* "beta" badge — on the landing wordmark and injected into every page header */
.beta-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: .45rem;
  padding: .1rem .42rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid var(--chip-border);
  border-radius: var(--r-sm);
}

/* ── Hero ── */
.cockpit-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.8rem 0 2rem;
}
.cockpit-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: var(--w-bold);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.cockpit-hero h1 .lit { color: var(--primary); }
.cockpit-sub {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
/* ── Stations — the tool groups as instrument panels ── */
.stations {
  display: grid;
  /* 330px floor caps the wide layout at 3 columns on the 1180px canvas, so the
     5 lifecycle stations balance 3 + 2 (in order) instead of 4 + a lonely 1.
     Still collapses to 2 then 1 column on narrower viewports — no overflow. */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.station {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 1.15rem 1.15rem 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-base);
}
/* top hairline accent rail — quiet until hover */
.station::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--border);
  transition: background var(--t-base);
}
.station:hover,
.station:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--border-input);
}
.station:hover::before,
.station:focus-within::before { background: var(--primary); }

.station-head {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-bottom: .85rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.station-seq {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  color: var(--primary);
}
.station-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--w-semibold);
  letter-spacing: -.01em;
  color: var(--fg);
}
.station-phase {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.tool-link {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .65rem .55rem;
  margin: 0 -.55rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg);
  transition: background var(--t-fast);
}
.tool-link + .tool-link { margin-top: .1rem; }
.tool-link:hover { background: var(--surface-2); }
.tool-icon {
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-top: .05rem;
}
.tool-icon svg { width: 1.3rem; height: 1.3rem; }
.tool-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.tool-title { font-weight: var(--w-semibold); font-size: .9rem; color: var(--fg); }
.tool-desc { font-size: var(--t-micro); color: var(--fg-muted); line-height: 1.4; }

/* ── Footer ── */
.cockpit-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.logs-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .02em;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--t-base);
}
.logs-link .chev { color: var(--primary); font-weight: var(--w-semibold); }
.logs-link:hover { color: var(--fg); }

/* ── Landing responsive ── */
@media (max-width: 860px) {
  .cockpit-hero { gap: 1.2rem; padding-top: 2.4rem; }
}
@media (max-width: 560px) {
  .cockpit { padding: 0 1.1rem 3rem; }
  .stations { grid-template-columns: 1fr; }
}

/* ── Page header (cockpit top bar — shared chrome for inner pages) ── */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .85rem 1.6rem;
}
.page-header .brand-mark { margin-bottom: 0; }
.page-header h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--w-semibold);
  letter-spacing: -.01em;
  color: var(--fg);
}
.header-spacer { flex: 1; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: var(--t-meta);
  letter-spacing: .02em;
  transition: color var(--t-base);
}
.back-link:hover { color: var(--primary); }

/* ── Two-panel layout ── */
.page-layout { display: flex; min-height: calc(100vh - 57px); }

/* ── Accessibility & responsiveness ── */
/* Visible keyboard focus everywhere (mouse clicks stay clean) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Respect users who turn off animation at the OS level */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Narrow screens: stack the credential panel above the content */
@media (max-width: 880px) {
  .page-layout { flex-direction: column; }
  .cred-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Credential panel ── */
.cred-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.cred-panel h3 { font-size: .95rem; font-weight: var(--w-semibold); color: var(--fg); margin-bottom: .3rem; }
.cred-panel label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .82rem;
  font-weight: var(--w-medium);
  color: var(--fg-label);
}
.cred-panel input {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: .45rem .6rem;
  font-size: .88rem;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-slow), color var(--t-slow);
  font-family: inherit;
}
/* Readable placeholders across every theme (browsers dim them by default,
   which is too faint on the dark themes). */
input::placeholder, textarea::placeholder, select:invalid {
  color: var(--fg-muted);
  opacity: 1;
}
.cred-panel input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.cred-panel input:disabled {
  background: var(--input-dis-bg);
  color: var(--input-dis-fg);
  cursor: not-allowed;
}
.lock-note { font-size: .78rem; color: var(--fg-muted); line-height: 1.4; }
.cred-panel.is-locked {
  border-left: 3px solid var(--primary);
  padding-left: calc(1.4rem - 3px);
  transition: border-left-color var(--t-slow);
}

/* ── Content panel ── */
.content-panel {
  flex: 1;
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  overflow-y: auto;
}
.content-panel h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: var(--w-bold);
  color: var(--fg);
  margin-bottom: .8rem;
}
.content-panel h3::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  height: .95rem;
  background: var(--primary);
  border-radius: 2px;
}

/* ── Buttons ── (crisp, engineered — filled primary, hairline ghost) */
/* Bare `.btn` (no colour modifier) defaults to the hairline ghost look so a
   button is always visible on a dark/light panel — newer pages that render a
   plain `.btn` (Scan, Reject, Download links) no longer come out near-invisible.
   `.btn-primary` / `.btn-lock` override the surface + border below. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-input);
  cursor: pointer;
  font-size: .88rem;
  font-weight: var(--w-semibold);
  font-family: inherit;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), opacity var(--t-base);
}
.btn:not(:disabled):hover { border-color: var(--primary); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--fg-on-primary); border-color: var(--primary); }
.btn-primary:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-lock  { background: var(--lock-ready); color: var(--fg-on-primary); border-color: var(--lock-ready); width: 100%; }
.btn-lock:hover { background: var(--lock-ready-hov); border-color: var(--lock-ready-hov); }
.btn-lock.locked          { background: var(--lock-active); color: var(--lock-active-fg); border-color: var(--lock-active); }
.btn-lock.locked:hover    { background: var(--lock-active-hov); border-color: var(--lock-active-hov); }
.btn-lock.locked:disabled { background: var(--lock-active-dis); border-color: var(--lock-active-dis); }
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-input);
}
.btn-secondary:not(:disabled):hover { background: var(--surface-2); border-color: var(--primary); }

/* =====================================================================
   GLOBAL NATIVE FORM CONTROLS — every <input>, <select>, <textarea>, and
   <input type=file> picks up the cockpit instrument styling regardless of
   which container it sits in. Page-scoped rules (.cred-panel input,
   .log-filter select, .mapping-table select, …) still win where they add
   page-specific sizing, but the base look here means newer pages with plain
   markup (e.g. /decisions) are never left OS-white. Tokens only — themes free.
   ===================================================================== */

/* Text-ish inputs + textarea — base cockpit field */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input:not([type]),
textarea {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: .45rem .6rem;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base),
              background var(--t-slow), color var(--t-slow);
}
textarea { line-height: 1.5; resize: vertical; }
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
input:disabled, textarea:disabled, select:disabled {
  background: var(--input-dis-bg);
  color: var(--input-dis-fg);
  cursor: not-allowed;
}

/* ── Native <select> — cockpit well + custom mint caret (no OS-white) ──
   The caret is an inline SVG (stroke = --primary) baked into the background so
   it themes with the token; appearance:none strips the OS chrome. `color` +
   `background` are set so the popped-open option list is legible in dark too. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: .45rem 2rem .45rem .65rem;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base),
              background-color var(--t-slow), color var(--t-slow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234FD1C5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .65rem center;
}
html.cockpit-light select {
  /* deeper teal caret on the cool light surface */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230FA896' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
/* The popped-open option list (rendered by the OS) — force legible colours so
   it isn't white-on-white in dark. */
select option,
select optgroup {
  background: var(--surface);
  color: var(--fg);
}

/* ── Native file input — cockpit ghost "choose file" button + muted text ──
   The default OS-white button is replaced by a ghost button (transparent,
   hairline border, mint on hover); the filename text reads as muted. */
input[type="file"] {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  color: var(--fg-muted);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: .7rem;
  padding: .4rem .85rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
/* WebKit legacy alias (Chromium honours ::file-selector-button, but keep the
   vendor pseudo for older engines). */
input[type="file"]::-webkit-file-upload-button {
  margin-right: .7rem;
  padding: .4rem .85rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
  cursor: pointer;
}
input[type="file"]:disabled::file-selector-button {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Task search / dropdown ── */
.task-select-section { display: flex; flex-direction: column; gap: .8rem; }
.search-wrap { position: relative; max-width: 480px; }
.search-wrap input,
#task-search {
  width: 100%;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-lg);
  padding: .5rem .8rem;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-slow), color var(--t-slow);
  font-family: inherit;
}
.search-wrap input:focus,
#task-search:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: var(--shadow-pop);
}
.dropdown-item {
  padding: .5rem .8rem;
  cursor: pointer;
  font-size: .87rem;
  border-bottom: 1px solid var(--dd-item-border);
  color: var(--fg);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--dd-item-hover); }
.dropdown-item .item-module { font-size: .75rem; color: var(--fg-muted); display: block; margin-top: 2px; }

/* ── Chips ── */
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 36px; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
  font-size: .82rem;
  color: var(--chip-color);
}
.chip-remove {
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  color: var(--chip-remove);
  background: none;
  border: none;
  padding: 0;
}
.chip-remove:hover { color: var(--error-text); }
.clear-all-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: .75rem;
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 4px;
  align-self: center;
  transition: color var(--t-fast);
}
.clear-all-btn:hover { color: var(--error-text); }

/* ── Logs toolbar ── */
.log-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.log-filter  { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.log-filter label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem; font-weight: var(--w-semibold);
  color: var(--fg-label);
}
.log-filter select, .log-filter input {
  background-color: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: .38rem .65rem; font-size: .85rem;
  outline: none; font-family: inherit;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.log-filter select { padding-right: 2rem; }
.log-filter select:focus, .log-filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.log-count { font-size: .8rem; color: var(--fg-muted); white-space: nowrap; }
.toolbar-actions { display: flex; gap: .5rem; margin-left: auto; }

/* ── Results table ── */
.results-section { display: flex; flex-direction: column; gap: .8rem; }
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}
.results-table th {
  background: var(--surface-2);
  color: var(--fg-label);
  padding: .5rem .8rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-input);
}
.results-table td {
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--border-table);
  vertical-align: middle;
}
.results-table tr:last-child td { border-bottom: none; }
.results-table tbody tr:hover td { background: var(--dd-item-hover); }
@keyframes rowIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.results-table tbody tr { animation: rowIn .18s ease; }
/* Oracle artifacts (task codes, DA-IDs, filenames) read as mono — the
   recurring technical-texture motif. Apply to code-like cells/spans. */
.code-cell, .task-code, td.mono, .mono-cell {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg);
}

/* ── Status / op badges — small lit "indicator" pills ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .6rem .18rem .55rem;
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: var(--w-semibold);
  border: 1px solid transparent;
}
.status-badge::before {
  content: "";
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--border); }
.status-running { background: var(--status-running-bg); color: var(--status-running-fg); border-color: var(--status-running-fg); }
.status-done    { background: var(--status-done-bg);    color: var(--status-done-fg); border-color: var(--status-done-fg); }
.status-warning { background: var(--status-warn-bg);    color: var(--status-warn-fg); border-color: var(--status-warn-fg); }
.status-error   { background: var(--status-error-bg);   color: var(--status-error-fg); border-color: var(--status-error-fg); }
.op-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
}
.op-download { background: var(--op-download-bg); color: var(--op-download-fg); }
.op-upload   { background: var(--op-upload-bg);   color: var(--op-upload-fg); }

/* ── Drag-to-reorder (upload page) ── */
.drag-col { width: 28px; }
.drag-handle {
  color: var(--fg-muted);
  font-size: 1.1rem;
  text-align: center;
  cursor: grab;
  user-select: none;
  line-height: 1;
}
tr[draggable="true"]:hover .drag-handle { color: var(--primary); }
tr.dragging  { opacity: .35; }
tr.drag-over { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── Upload / audit summary ── */
.upload-summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .65rem 0 .3rem;
  font-size: .88rem;
  font-weight: var(--w-semibold);
}
.sum-ok   { color: var(--sum-ok); }
.sum-warn { color: var(--sum-warn); }
.sum-fail { color: var(--sum-fail); }
.sum-sep  { color: var(--border); }

/* ── Download link in table ── */
.dl-link {
  display: inline-block;
  padding: .25rem .65rem;
  background: var(--primary);
  color: var(--fg-on-primary);
  border-radius: 6px;
  text-decoration: none;
  font-size: .8rem;
  font-weight: var(--w-semibold);
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.dl-link:hover { background: var(--primary-hover); }

/* ── Logs error / duration cells ── */
.error-cell {
  color: var(--error-text);
  font-size: .78rem;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duration { color: var(--fg-muted); font-size: .8rem; }

/* ── Drop zone ── */
.drop-zone {
  border: 2px dashed var(--primary);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
  max-width: 560px;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--dd-item-hover);
}
.drop-icon { font-size: 2.4rem; line-height: 0; margin-bottom: .7rem; color: var(--primary); }
.drop-icon svg { display: inline-block; }
.drop-zone p { color: var(--fg); font-size: .9rem; line-height: 1.6; }

/* ── Mode toggle (segmented control, used by the audit page) ── */
.mode-toggle {
  display: inline-flex;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  user-select: none;
}
.mode-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.mode-toggle label {
  padding: .35rem .9rem;
  font-size: .82rem;
  font-weight: var(--w-semibold);
  cursor: pointer;
  color: var(--fg-muted);
  border-right: 1px solid var(--border);
  transition: background var(--t-fast), color var(--t-fast);
}
.mode-toggle label:last-of-type { border-right: none; }
.mode-toggle input[type="radio"]:checked + label {
  background: var(--primary);
  color: var(--fg-on-primary);
}
.mode-toggle input[type="radio"]:focus + label {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Audit findings table: show "Actual" by default; in compare mode show
   URL 1 / URL 2 columns and hide the single "Actual" column. */
.col-compare { display: none; }
body.compare .col-single  { display: none; }
body.compare .col-compare { display: table-cell; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* =====================================================================
   FBDI Data Loader — three-stage flow (upload → review gate → load).
   Built on the cockpit tokens above so it stays on-brand.
   ===================================================================== */

/* select in the credential panel matches the text inputs */
.cred-panel select {
  width: 100%;
  padding: .5rem 2rem .5rem .7rem;
  font: inherit; font-size: var(--t-body-sm);
  color: var(--fg);
  background-color: var(--surface-2);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.cred-panel select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); outline: none; }
.cred-panel select:disabled { background: var(--input-dis-bg); color: var(--input-dis-fg); }

.muted-sub { font-size: var(--t-meta); color: var(--fg-muted); font-weight: var(--w-regular); }

/* Stepper */
.stepper {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.stepper .step {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-micro); font-weight: var(--w-semibold);
  color: var(--fg-muted);
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all var(--t-base) var(--ease);
}
.stepper .step b {
  display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--border); color: var(--fg);
  font-family: var(--font-mono); font-size: var(--t-nano);
}
.stepper .step.active {
  color: var(--fg-on-primary); background: var(--primary); border-color: var(--primary);
  box-shadow: var(--shadow-pop);
}
.stepper .step.active b { background: rgba(6,20,26,.25); color: var(--fg-on-primary); }
.stepper .step.done { color: var(--primary); border-color: var(--chip-border); background: var(--primary-light); }
.stepper .step.done b { background: var(--primary); color: var(--fg-on-primary); }
.stepper .step.done b::after { content: "\2713"; }
.stepper .step.done b { font-size: 0; }
.stepper .step.done b::after { font-size: var(--t-nano); }
.step-rule { flex: 0 0 1.2rem; height: 1px; background: var(--border); }

/* Review gate — visually flagged as the human checkpoint */
.results-section.gate {
  border-left: 3px solid var(--lock-active);
  padding-left: 1rem; margin-left: -1rem;
}
.gate-tag {
  display: inline-block; vertical-align: middle;
  font-size: var(--t-nano); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--ls-loose);
  color: var(--lock-active-fg); background: var(--lock-active);
  padding: .12rem .5rem; border-radius: var(--r-sm); margin: 0 .3rem;
}
.gate-note { font-size: var(--t-meta); color: var(--fg-muted); margin-bottom: .4rem; }

/* Caution / ambiguity panel */
.warn-box {
  font-size: var(--t-body-sm); line-height: 1.55;
  background: var(--status-warn-bg); color: var(--status-warn-fg);
  border: 1px solid var(--status-warn-fg); border-left-width: 3px;
  border-radius: var(--r-md); padding: .7rem .9rem;
}
.warn-box ul { margin: .35rem 0 0 1.1rem; }
.warn-box strong { font-weight: var(--w-bold); }

.review-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .25rem 0 .4rem;
}
.inline-check { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-meta); color: var(--fg-label); cursor: pointer; }
.inline-check input { width: auto; }

/* Mapping table — scrollable with a sticky header (149 columns) */
.table-scroll {
  max-height: 50vh; overflow: auto;
  border: 1px solid var(--border-table); border-radius: var(--r-md);
}
.mapping-table { font-size: var(--t-meta); }
.mapping-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border-input);
}
.mapping-table td, .mapping-table th { padding: .4rem .55rem; }
.mapping-table tbody tr.req-row td { background: color-mix(in srgb, var(--status-warn-bg) 35%, transparent); }
.mapping-table select, .mapping-table input.sm {
  width: 100%; min-width: 7rem;
  padding: .25rem .4rem; font: inherit; font-size: var(--t-micro);
  color: var(--fg); background-color: var(--surface-2);
  border: 1px solid var(--border-input); border-radius: var(--r-sm);
}
.mapping-table select { padding-right: 1.5rem; background-position: right .4rem center; }
.mapping-table input.sm { min-width: 5rem; }

.req { color: var(--error-text); font-style: normal; font-weight: var(--w-bold); }

/* Confidence chips */
.conf {
  font-size: var(--t-nano); font-weight: var(--w-semibold);
  padding: .08rem .4rem; border-radius: var(--r-pill); text-transform: lowercase;
}
.conf-high   { background: var(--status-done-bg);    color: var(--status-done-fg); }
.conf-medium { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.conf-low    { background: var(--status-error-bg);   color: var(--status-error-fg); }

/* Import-parameter grid */
.param-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.param-field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--fg-label); }
.param-field input {
  padding: .45rem .6rem; font: inherit; font-size: var(--t-body-sm); font-weight: var(--w-regular);
  color: var(--fg); background: var(--surface-2);
  border: 1px solid var(--border-input); border-radius: var(--r-md);
  outline: none; transition: border-color var(--t-base), box-shadow var(--t-base);
}
.param-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.param-field .req { margin-left: .15rem; }

/* Per-sheet upload slots (multi-sheet FBDI templates) */
.sheet-upload {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.sheet-upload:last-child { border-bottom: none; }
.sheet-upload label { font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--fg-label); }

/* Per-sheet review blocks */
.sheet-block { margin-bottom: 1.25rem; }
.sheet-title {
  font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--fg);
  margin-bottom: .4rem; padding-bottom: .25rem;
  border-bottom: 2px solid var(--primary);
}

/* ── Delivery Cockpit ─────────────────────────────────────────────────────── */
/* Client roll-up grid (cockpit landing) */
.ck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.ck-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1rem 1.1rem;
  transition: border-color var(--t-base), background var(--t-base);
}
.ck-card:hover { border-color: var(--primary); background: var(--surface-2); }
.ck-card-name { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-h3); margin-bottom: .6rem; }
.ck-stats { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.ck-stat { font-size: var(--t-nano); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ck-stat b { display: block; font-size: var(--t-h3); font-family: var(--font-mono); font-weight: var(--w-semibold); color: var(--fg); letter-spacing: 0; }
.ck-stat.warn b { color: var(--sum-warn); }

/* Lifecycle rail (client view) */
.ck-rail { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.ck-stage {
  flex: 1 1 0; min-width: 104px;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--r-md); padding: .55rem .65rem; background: var(--surface);
}
.ck-stage-name { font-size: var(--t-nano); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ck-stage-state { font-size: var(--t-body-sm); font-weight: var(--w-semibold); margin-top: .15rem; }
.ck-stage-detail { font-size: var(--t-nano); color: var(--text-muted); margin-top: .25rem; line-height: 1.35; }
.ck-stage.is-ready       { border-left-color: var(--sum-ok); }
.ck-stage.is-ready       .ck-stage-state { color: var(--sum-ok); }
.ck-stage.is-blocked     { border-left-color: var(--sum-fail); }
.ck-stage.is-blocked     .ck-stage-state { color: var(--sum-fail); }
.ck-stage.is-in_progress { border-left-color: var(--primary); }
.ck-stage.is-in_progress .ck-stage-state { color: var(--primary); }
.ck-stage.is-not_started .ck-stage-state { color: var(--text-muted); }

/* Decision-quality stat strip (the honest counts) */
.ck-quality { display: flex; gap: 2rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.ck-q b { display: block; font-size: var(--t-h1, 1.8rem); font-family: var(--font-mono); font-weight: var(--w-semibold); line-height: 1.1; }
.ck-q span { font-size: var(--t-meta); color: var(--text-muted); }
.ck-q.warn b { color: var(--sum-warn); }
.ck-q.ok b { color: var(--sum-ok); }

/* Landing entry point into the cockpit */
.cockpit-entry {
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  transition: border-color var(--t-base), background var(--t-base);
}
.cockpit-entry:hover { border-color: var(--primary); background: var(--surface-2); }
.cockpit-entry .tool-icon { color: var(--primary); flex-shrink: 0; }
.cockpit-entry-title { display: block; font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-h3); }
.cockpit-entry-desc { display: block; font-size: var(--t-meta); color: var(--text-muted); }
.cockpit-entry-go { margin-left: auto; color: var(--primary); font-size: 1.5rem; font-weight: var(--w-semibold); }
.sheet-title .muted-sub { font-weight: var(--w-regular); }

/* ── Cache badges (tenant-config cache status) ── */
.cache-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .08rem .4rem;
  font-size: .72rem;
  font-weight: var(--w-medium);
  color: var(--fg-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  vertical-align: middle;
  white-space: nowrap;
}
.config-note {
  display: block;
  font-size: .76rem;
  color: var(--fg-muted);
  margin-top: .2rem;
}

/* ── FBDI TEMPLATE CATALOG ─────────────────────────────────────────────────── */
.fbdi-catalog-nav #fbdi-search {
  width: 100%; margin: .5rem 0 1rem; padding: .5rem .65rem;
  background: var(--surface-2, #15171c); color: var(--text, #e8e8ea);
  border: 1px solid var(--border, #2a2d34); border-radius: 8px; font: inherit;
}
.fbdi-menu { display: flex; flex-direction: column; gap: .75rem; }
.fbdi-product-head {
  font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted, #9aa0aa); margin-bottom: .3rem;
}
.fbdi-submodules { list-style: none; margin: 0; padding: 0; }
.fbdi-submodule {
  position: relative; padding: .4rem .55rem; border-radius: 8px; cursor: default;
  border: 1px solid transparent;
}
.fbdi-submodule:hover, .fbdi-submodule:focus-within {
  background: var(--surface-2, #15171c); border-color: var(--border, #2a2d34);
}
.fbdi-submodule-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.fbdi-flyout {
  display: none; position: absolute; left: 100%; top: 0; min-width: 16rem; max-height: 60vh;
  overflow: auto; z-index: 40; list-style: none; margin: 0; padding: .35rem;
  background: var(--surface-1, #101216); border: 1px solid var(--border, #2a2d34);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.fbdi-submodule:hover > .fbdi-flyout, .fbdi-submodule:focus-within > .fbdi-flyout { display: block; }
.fbdi-file {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  text-align: left; background: none; border: 0; color: var(--text, #e8e8ea);
  padding: .4rem .55rem; border-radius: 6px; font: inherit; cursor: pointer;
}
.fbdi-file:hover { background: var(--accent-soft, #1d2330); }
.fbdi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn, #e0a23b); flex: none; }
.fbdi-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
.fbdi-badge {
  font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--border, #2a2d34);
  color: var(--text-muted, #9aa0aa);
}
.fbdi-badge-ok { color: #7fd99a; border-color: #2f5b3d; }
.fbdi-badge-warn { color: #e0a23b; border-color: #5b4a2f; }
.fbdi-badge-muted { color: var(--text-muted, #9aa0aa); }
.fbdi-facts { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fbdi-facts th { text-align: left; width: 11rem; color: var(--text-muted, #9aa0aa);
  font-weight: 500; padding: .3rem .5rem; vertical-align: top; }
.fbdi-facts td { padding: .3rem .5rem; }
.fbdi-sheet { margin-top: .75rem; }
.fbdi-cols th, .fbdi-cols td { font-size: .8rem; }
.fbdi-cols .req-row td { background: var(--accent-soft, #1d2330); }

/* ── Notification bell + inbox (RBAC Phase 3) ── */
.notif-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--r-lg);
  cursor: pointer; line-height: 0; padding: .4rem; margin-right: .4rem;
  color: var(--fg-muted); flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.notif-bell:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.notif-bell svg { width: 16px; height: 16px; display: block; }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--error-text); color: #fff;
  font: 600 10px/15px var(--font-sans); text-align: center;
}
.notif-menu {
  position: fixed; z-index: 300; width: 320px; max-height: 60vh; overflow-y: auto;
  padding: .3rem; background: var(--drop-bg); color: var(--drop-text);
  border: 1px solid var(--drop-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.notif-empty { padding: .8rem; color: var(--fg-muted); font: 400 .85rem/1.3 var(--font-sans); }
.notif-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .5rem .6rem; border: none; border-bottom: 1px solid var(--dd-item-border);
  background: none; color: inherit;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--dd-item-hover); }
.notif-item.read { opacity: .55; }
.notif-item-subj { display: block; font: 600 .82rem/1.25 var(--font-sans); }
.notif-item-body { display: block; margin-top: .15rem; font: 400 .78rem/1.3 var(--font-sans); color: var(--fg-muted); }
.notif-item-meta { display: block; margin-top: .2rem; font: 400 .7rem/1 var(--font-mono); color: var(--fg-muted); }

/* ── Phase 4: client-view dashboard + governance ──────────────────────────────
   Every colour derives from a theme-aware Cockpit token (as with .ck-rail /
   .ck-quality), so Cockpit-Dark (:root) and Daylight (.cockpit-light) both stay
   legible without a per-theme override. SVG text fill is set through CSS rules
   here and inline style= in cockpit.js — never as a var() SVG presentation
   attribute, which does not resolve. */
.cv-status-badge { display:inline-block; margin-left:.4rem; padding:.1rem .5rem; font-size:.78rem;
  border:1px solid var(--border); border-radius:var(--r-lg); color:var(--fg); background:var(--surface-2); }

/* Dashboard grid: donut cell, per-module bars cell (grows), conflict-tile cell */
.cv-dash { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:flex-start; }
.cv-dash-cell { border:1px solid var(--border); border-radius:var(--r-md); padding:.75rem .9rem; background:var(--surface); }
.cv-dash-grow { flex:1 1 18rem; min-width:16rem; }
.cv-dash-title { font-size:var(--t-nano); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.5rem; }

/* Decision-quality donut (inline SVG). Centre number + sub-label via fill rules. */
.cv-donut text { fill:var(--fg); font-family:var(--font-mono); font-weight:var(--w-semibold); }
.cv-donut text.cv-donut-sub { fill:var(--text-muted); font-family:var(--font-sans); font-weight:var(--w-regular); }
.cv-legend { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.cv-legend-item { font-size:.74rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:.3rem; }
.cv-legend-item i { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* Per-module stacked status bars (CSS flex; each segment is coloured inline). */
.cv-bar-row { display:flex; align-items:center; gap:.5rem; margin:.25rem 0; }
.cv-bar-label { flex:0 0 4rem; font-size:.78rem; color:var(--text-muted); }
.cv-bar { flex:1 1 auto; display:flex; height:14px; border-radius:3px; overflow:hidden; background:var(--surface-2); }
.cv-bar-seg { height:100%; }
.cv-bar-total { flex:0 0 2rem; text-align:right; font-size:.78rem; font-family:var(--font-mono); color:var(--text-muted); }

/* Conflict stat tile (KPI number over a sub-label; red accent when open > 0). */
.cv-tile { text-align:center; padding:.4rem .8rem; }
.cv-tile-num { font-size:2rem; font-family:var(--font-mono); font-weight:var(--w-semibold); color:var(--fg); line-height:1.1; }
.cv-tile.is-danger .cv-tile-num { color:var(--dv-bad); }
.cv-tile-label { font-size:.74rem; color:var(--text-muted); }

/* Governance: collapsible per-module blocks with role-gated action rows/forms. */
.cv-gov-mod { border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:.5rem; }
.cv-gov-head { width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--fg);
  font:inherit; padding:.55rem .7rem; }
.cv-gov-head:hover { background:var(--surface-2); }
.cv-gov-body { padding:.4rem .7rem .6rem; border-top:1px solid var(--border); }
.cvq-chev { display:inline-block; width:1em; color:var(--text-muted); font-size:.8em; }
.cv-gov-row { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:start;
  padding:.4rem 0; border-bottom:1px solid var(--border); }
.cv-gov-row:last-child { border-bottom:none; }
.cv-gov-acts, .cv-conflict-acts { display:flex; gap:.35rem; flex-wrap:wrap; }
.cv-gov-form { grid-column:1 / -1; margin-top:.35rem; }

/* Inline reject / overwrite / raise-conflict forms + the compact governance btn. */
.cv-form-lbl { display:block; font-size:.78rem; font-weight:var(--w-semibold); margin-bottom:.25rem; }
.cv-form-ta { width:100%; margin-bottom:.35rem; padding:.4rem .5rem; font-size:.8rem; background:var(--surface);
  border:1px solid var(--border); border-radius:4px; color:var(--fg); font-family:var(--font-mono); }
.cv-form-btns { display:flex; gap:.4rem; }
.cv-btn { font-size:.76rem; padding:.22rem .55rem; }

/* Needs-rework rows + conflict rows (shared row styling; conflict rows justify). */
.cv-rework-row, .cv-conflict-row { display:flex; align-items:center; gap:.5rem; padding:.35rem 0;
  border-bottom:1px solid var(--border); font-size:.82rem; }
.cv-conflict-row { justify-content:space-between; align-items:flex-start; }
.cv-rework-row:last-child, .cv-conflict-row:last-child { border-bottom:none; }

/* ── Client 360 restructure: summary strip + role-aware tabs + phase lifecycle ──
   Ports the approved variant-A prototype (static/prototypes/client360-restructure)
   onto the app's Cockpit tokens. The existing .cv-dash/.cv-bar/.cv-tile/.cv-gov/
   .cv-conflict renders are REUSED inside the tab panels; only the shell (summary
   strip, tab bar, phase flow, role queue) is new. Both themes inherit via tokens. */

/* Summary strip (persistent, above the tabs) */
.cv-summary { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:1rem 1.15rem; margin:.35rem 0 1rem; }
.cv-sum-top { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.cv-sum-spacer { flex:1; }
.cv-quick { font-size:.8rem; color:var(--text-muted); text-decoration:none; margin-left:.8rem; }
.cv-quick:hover { color:var(--fg); }

/* Lifecycle chevron tiles: done=solid green · now=orange (in-progress step) ·
   here=bold ("you are here") · grey=not reached. PM/admin click .click to advance. */
.cv-flow { display:flex; flex-wrap:wrap; gap:4px; margin:.85rem 0 .15rem; }
.cv-flow-step { flex:0 0 auto; white-space:nowrap; font-size:.8rem; padding:.6rem 1rem .6rem 1.35rem;
  background:var(--surface-2); color:var(--text-muted); border:none; font:inherit; line-height:1.1;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.cv-flow-step:first-child { padding-left:1rem; border-radius:7px 0 0 7px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.cv-flow-step.done { background:#178A54; color:#fff; }
.cv-flow-step.now  { background:var(--dv-warn); color:#241900; font-weight:var(--w-bold); }
.cv-flow-step.here { font-weight:var(--w-bold); }
.cv-flow-step.click { cursor:pointer; }
.cv-flow-step.click:hover { filter:brightness(1.12); }
.cv-flow-hint { font-size:.66rem; color:var(--text-muted); margin:.28rem 0 0; }
.cv-onhold { display:inline-block; margin-left:.5rem; padding:.1rem .5rem; font-size:.7rem;
  border-radius:var(--r-pill); background:var(--status-warn-bg); color:var(--status-warn-fg); }

/* Admin-only status override: small, unobtrusive — a picker + Apply, not a
   second primary flow. Sits right under the advance hint. */
.cv-status-override { display:flex; align-items:center; gap:.4rem; margin:.35rem 0 0; }
.cv-override-lbl { font-size:.66rem; color:var(--text-muted); }
.cv-status-override select { font-size:.76rem; padding:.3rem 1.6rem .3rem .55rem; }

/* KPI tiles */
.cv-kpis { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.85rem; }
.cv-kpi { flex:1 1 120px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:.55rem .7rem; }
.cv-kpi b { font-size:1.25rem; font-family:var(--font-display); display:block; line-height:1.1; }
.cv-kpi span { font-size:.72rem; color:var(--text-muted); }
.cv-kpi.alert b { color:var(--dv-bad); }

/* Tab bar */
.cv-tabs { display:flex; gap:.3rem; flex-wrap:wrap; margin:0 0 .9rem; border-bottom:1px solid var(--border); }
.cv-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted);
  padding:.5rem .8rem; font:inherit; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.cv-tab:hover { color:var(--fg); }
.cv-tab.sel { color:var(--fg); border-bottom-color:var(--primary); font-weight:var(--w-semibold); }
/* number in --fg on a tinted chip (readable in both themes) */
.cv-tab-badge { background:color-mix(in srgb, var(--dv-info) 22%, var(--surface)); color:var(--fg);
  border:1px solid color-mix(in srgb, var(--dv-info) 55%, transparent); border-radius:999px;
  font-size:.66rem; font-weight:var(--w-bold); padding:0 .42rem; min-width:1.15rem; text-align:center; }
.cv-tab-badge.warn { background:color-mix(in srgb, var(--dv-warn) 24%, var(--surface));
  border-color:color-mix(in srgb, var(--dv-warn) 60%, transparent); }

/* Panels — one per tab; JS toggles .sel */
.cv-panel { display:none; }
.cv-panel.sel { display:block; }
.cv-panel h3 { font-family:var(--font-display); font-size:1.05rem; margin:1.2rem 0 .5rem; }
.cv-panel h3:first-child { margin-top:0; }
.cv-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; align-items:start; }
@media (max-width:780px){ .cv-grid2{ grid-template-columns:1fr; } }
.cv-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem 1.1rem; margin-bottom:.9rem; }
.cv-attn { margin:.2rem 0 0 1.1rem; }
.cv-attn li { margin:.3rem 0; font-size:.85rem; }

/* Role-shaped "Your queue" (leads the Decisions tab) */
.cv-queue { border:1px solid var(--primary); border-radius:14px; padding:.9rem 1.1rem; margin-bottom:1rem;
  background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.cv-queue h4 { margin:0 0 .3rem; color:var(--primary); font-size:.95rem; }
.cv-queue-sub { color:var(--text-muted); font-size:.8rem; margin:.55rem 0 .3rem; }
.cv-q-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px dashed var(--border); font-size:.84rem; }
.cv-q-row:last-child { border-bottom:none; }
.cv-q-row code { font-size:.74rem; color:var(--text-muted); }
.cv-q-spacer { flex:1; }

/* §D queue progress bars (rejected-reworked, conflicts-resolved) */
.cv-prog { display:flex; align-items:center; gap:.5rem; margin:.15rem 0 .5rem; font-size:.78rem; }
.cv-prog-lbl { flex:0 0 auto; color:var(--text-muted); min-width:12rem; }
.cv-prog-track { flex:1 1 auto; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.cv-prog-fill { display:block; height:100%; background:var(--dv-ok); }

/* ── Phase 5: EPM landing (category grid + drawer) + user menu + login ─────────
   Scoped .lp-* classes over the existing Cockpit tokens — no token changes, both
   themes inherit automatically. Mirrors docs/superpowers/phase5-prototype-reference.html. */

/* Landing top-bar user menu (the notification bell sits before this) */
.lp-userbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem .3rem .35rem; margin-left: .1rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: none; color: var(--fg); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--t-micro); flex-shrink: 0;
  transition: border-color var(--t-base);
}
.lp-userbtn:hover { border-color: var(--border-input); }
.lp-userbtn .lp-av {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: var(--primary); background: var(--surface-2);
}
.lp-userbtn .lp-av svg { width: 15px; height: 15px; }
.lp-userbtn .lp-caret { color: var(--fg-muted); }

.lp-pop {
  position: fixed; z-index: 300; min-width: 250px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-input);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.lp-pop .lp-uhdr { padding: .85rem .9rem; border-bottom: 1px solid var(--border); }
.lp-pop .lp-un { font-family: var(--font-display); font-weight: var(--w-semibold); }
.lp-pop .lp-ue { font-family: var(--font-mono); font-size: var(--t-nano); color: var(--fg-muted); }
.lp-pop .lp-ubadge {
  display: inline-block; margin-top: .5rem; padding: .12rem .5rem;
  font-family: var(--font-mono); font-size: .6rem; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--r-pill);
}
.lp-pop .lp-pitem {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .7rem .9rem; background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--t-body-sm); color: var(--fg); text-align: left; text-decoration: none;
}
.lp-pop .lp-pitem:hover { background: var(--surface-2); }
.lp-pop .lp-pitem .lp-pico { width: 18px; height: 18px; color: var(--fg-muted); flex-shrink: 0; }
.lp-pop .lp-pitem.lp-danger, .lp-pop .lp-pitem.lp-danger .lp-pico { color: var(--sum-fail); }

/* Category grid (EPM stations) */
.lp-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1rem; align-items: start;
}
.lp-cat {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0; padding: 1.4rem .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  color: var(--fg); text-decoration: none; cursor: pointer; font: inherit;
  transition: transform var(--t-fast), border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.lp-cat:hover { transform: translateY(-3px); border-color: var(--border-input); box-shadow: var(--shadow-elev); }
.lp-cat.sel { border-color: var(--primary); background: var(--surface-2); }
.lp-cat .lp-cico { width: 46px; height: 46px; margin: 0 auto .75rem; color: var(--primary); }
.lp-cat .lp-cico svg { width: 100%; height: 100%; }
.lp-cat .lp-cname { font-family: var(--font-display); font-weight: var(--w-medium); font-size: .9rem; }
.lp-cat .lp-cbadge { font-family: var(--font-mono); font-size: var(--t-nano); color: var(--fg-muted); margin-top: .2rem; }
.lp-cat .lp-more { position: absolute; bottom: .45rem; left: 50%; transform: translateX(-50%);
  color: var(--fg-muted); letter-spacing: 2px; font-size: .6rem; }

/* Full-width drawer inserted after the clicked card's row (JS relocates it) */
.lp-drawer { grid-column: 1 / -1; overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height var(--t-slow) var(--ease), opacity var(--t-base) var(--ease); }
.lp-drawer.open { max-height: 420px; opacity: 1; }
.lp-drawer-inner { display: inline-block; width: fit-content; max-width: 100%;
  position: relative; margin-top: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: 1.1rem; }
/* Speech-bubble caret pointing up at the selected category card. landing.js sets
   --lp-caret-x (the card's centre, relative to this box's left edge) and shifts
   the box under that card, so the tools panel reads as coming from the card. */
.lp-drawer-inner::before { content: ""; position: absolute; top: -7px;
  left: var(--lp-caret-x, 32px); width: 14px; height: 14px; background: var(--surface-2);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  border-top-left-radius: 3px; transform: translateX(-50%) rotate(45deg); }
.lp-drawer-head { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary); margin-bottom: .85rem; }
.lp-tools { display: flex; flex-wrap: wrap; gap: .85rem; }
.lp-tool { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  width: 150px; padding: 1rem .6rem; border-radius: var(--r-lg); color: var(--fg); text-decoration: none;
  transition: background var(--t-fast); }
.lp-tool:hover { background: var(--primary-light); }
.lp-tool .lp-tico { width: 34px; height: 34px; color: var(--primary); }
.lp-tool .lp-tico svg { width: 100%; height: 100%; }
.lp-tool .lp-tname { font-size: var(--t-body-sm); }

/* Landing hidden home for closed drawers (kept out of the flow) */
#lp-drawers { display: none; }

/* Login (mode-aware card) */
.lp-login { position: relative; z-index: 1; min-height: calc(100vh - 62px);
  display: grid; place-items: center; padding: 2rem; }
.lp-login .lp-box { width: 360px; max-width: 92vw; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2.1rem 1.9rem; box-shadow: var(--shadow-elev); }
.lp-login .lp-lmark { width: 52px; height: 52px; color: var(--primary); margin: 0 auto .75rem; }
.lp-login h2 { font-family: var(--font-display); font-weight: var(--w-semibold); text-align: center; font-size: 1.25rem; }
.lp-login .lp-lsub { font-family: var(--font-mono); font-size: var(--t-nano); color: var(--fg-muted); text-align: center; margin-top: .2rem; }
.lp-login label { display: block; font-size: var(--t-body-sm); color: var(--fg-muted); margin: 1rem 0 .4rem; }
.lp-login input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-input);
  border-radius: var(--r-md); padding: .65rem .75rem; color: var(--fg); font: inherit; font-size: var(--t-body); }
.lp-login input:focus { outline: none; border-color: var(--primary); }
.lp-login .lp-signin { width: 100%; margin-top: 1.25rem; background: var(--primary); color: var(--fg-on-primary);
  border: none; border-radius: var(--r-lg); padding: .7rem; font-family: var(--font-display); font-weight: var(--w-semibold);
  font-size: var(--t-body); cursor: pointer; }
.lp-login .lp-signin:hover { background: var(--primary-hover); }
.lp-login .lp-msbtn { width: 100%; margin-top: 1.4rem; display: flex; align-items: center; justify-content: center;
  gap: .65rem; background: #fff; color: #1b1b1b; border: none; border-radius: var(--r-lg); padding: .75rem;
  font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-body); cursor: pointer; text-decoration: none; }
html.cockpit-light .lp-login .lp-msbtn { border: 1px solid var(--primary); }   /* white button needs an edge on light */
.lp-login .lp-ms { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
.lp-login .lp-ms i { display: block; border-radius: 1px; }
.lp-login .lp-divider { display: flex; align-items: center; gap: .65rem; color: var(--fg-muted);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; margin: 1.1rem 0; }
.lp-login .lp-divider::before, .lp-login .lp-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lp-login .lp-devlink { width: 100%; background: none; border: 1px solid var(--border); color: var(--fg-muted);
  border-radius: var(--r-lg); padding: .55rem; font-family: var(--font-mono); font-size: var(--t-body-sm); cursor: pointer; }
.lp-login .lp-devlink:hover { border-color: var(--border-input); color: var(--fg); }
.lp-login .lp-devnote { font-family: var(--font-mono); font-size: .62rem; color: var(--fg-muted);
  margin-top: .75rem; text-align: center; line-height: 1.6; }
.lp-login .lp-error { color: var(--sum-fail); border: 1px solid var(--sum-fail); border-radius: var(--r-md);
  padding: .5rem .7rem; margin-top: 1rem; font-size: var(--t-body-sm); }
.lp-login .lp-devuser { width: 100%; text-align: left; cursor: pointer; margin-bottom: .5rem;
  padding: .7rem .9rem; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface-2); color: inherit; font: inherit; }
.lp-login .lp-devuser:hover { border-color: var(--border-input); }
.lp-login .lp-devuser .lp-due { color: var(--fg-muted); font-size: var(--t-body-sm); }

/* Minimal auth-page top bar (brand only) */
.lp-authbar { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.6rem; border-bottom: 1px solid var(--border); }

@media (max-width: 560px) { .lp-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }