/* ══════════════════════════════════════════════════════════════
   SortiDoc Design System
   Token layer + shared component primitives.
   Both themes live here; <html data-theme="dark|light"> switches.
   The UI face (Selawik) is self-hosted below; JetBrains Mono is still
   loaded via the <link> tags in each HTML file.
   ══════════════════════════════════════════════════════════════ */

/* ── UI typeface ──────────────────────────────────────────────
   Selawik is Microsoft's open-source (SIL OFL 1.1) metric-compatible
   substitute for Segoe UI: same widths and vertical metrics, so the
   layout is identical to Segoe UI without the proprietary font, which
   has no web licence.  Self-hosted so every platform renders the same
   face rather than falling through to SF Pro / Arial.

   Three faces only: the UI uses weights 400, 500, 600 and 700, and
   Selawik ships no 500, so CSS font matching resolves 500 down to the
   400 face, which is exactly what Segoe UI does on Windows.

   Each weight needs its own @font-face: the shipped files declare
   themselves as separate families ("Selawik Semibold" with subfamily
   "Regular"), so 600 will not resolve off the regular face on its own.
   Without the 600 block below the browser synthesises a fake bold,
   which is most of this UI.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Selawik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/selawik-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Selawik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/selawik-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Selawik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/selawik-bold.woff2') format('woff2');
}

/* ── Theme tokens ─────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg-app:     #0c0d10;
  --bg-panel:   #111318;
  --bg-surface: #181b22;
  --bg-hover:   #1d2130;
  /* Sidebar is the recessed surface: darker than the working area so the
     nav reads as chrome, not content. Its own text ramp is lifted to
     compensate for the darker ground. */
  --bg-sidebar:        #030409;
  --tx-sidebar-label:  #8f99ad;
  --tx-sidebar-muted:  #5c6579;

  --bd-subtle:  #1c2030;
  --bd-default: #252b38;
  --bd-strong:  #323c52;

  --tx-muted:     #7a8499;
  /* Placeholders stay below the text ramp on purpose: an empty field must
     not read as filled. The <label> carries the accessible name. */
  --tx-placeholder: #626b80;
  --tx-secondary: #99a3b6;
  --tx-primary:   #c0c8d8;
  --tx-emphasis:  #f2f5fa;

  --ac-default: #3b6cd4;
  --ac-hover:   #2f5ab8;
  /* --ac-default is dark enough to carry white button labels but too dark
     to BE text on a dark ground. --ac-text is the same hue lifted for that
     job; never use it as a background. */
  --ac-text:    #5b8cf0;
  --ac-subtle:  rgba(59, 108, 212, 0.10);
  --ac-ring:    rgba(59, 108, 212, 0.25);

  --s-clear-bg:     #091a10;
  --s-clear-bd:     #174026;
  --s-clear-tx:     #3cb865;

  --s-review-bg:    #181408;
  --s-review-bd:    #382c08;
  --s-review-tx:    #c9951a;

  --s-flagged-bg:   #180d0d;
  --s-flagged-bd:   #481818;
  --s-flagged-tx:   #dc5c5c;

  --s-neutral-bg:   #111318;
  --s-neutral-bd:   #252b38;
  --s-neutral-tx:   #99a3b6;

  --s-sanctions-bg: #1f0808;
  --s-sanctions-bd: #611212;
  --s-sanctions-tx: #e54d4d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 3px 8px rgba(0,0,0,0.40);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.50);

  /* One height for every control that sits on a form row (inputs, selects,
     dropdown triggers and buttons) so nothing is a pixel taller than its
     neighbour.  Not theme-dependent, so it is only declared here. */
  --ctl-h:    32px;
  --ctl-h-sm: 26px;
  --ctl-h-lg: 40px;   /* auth pages: bigger target, 14px type */

  /* Selawik (self-hosted, @font-face above) renders on every platform.  Real
     Segoe UI follows for Windows, metrically identical, so the layout does not
     shift either way; the rest is a safety net for a failed font load. */
  --font-ui:   'Selawik', 'Segoe UI', system-ui, -apple-system,
               BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

[data-theme="light"] {
  --bg-app:     #f2f3f6;
  --bg-panel:   #ffffff;
  --bg-surface: #f7f8fb;
  --bg-hover:   #eef0f4;
  --bg-sidebar:        #e2e5ec;
  --tx-sidebar-label:  #454d5e;
  --tx-sidebar-muted:  #6f7889;

  --bd-subtle:  #e5e7ec;
  --bd-default: #d2d6de;
  --bd-strong:  #b8bec8;

  --tx-muted:     #69707f;
  --tx-placeholder: #8f97a5;
  --tx-secondary: #4d5566;
  --tx-primary:   #2a3040;
  --tx-emphasis:  #0a0f1a;

  --ac-default: #1d4ed8;
  --ac-hover:   #1a45c4;
  /* On light grounds the accent already clears AA as text, so --ac-text
     matches --ac-default and nothing shifts. */
  --ac-text:    #1d4ed8;
  --ac-subtle:  rgba(29, 78, 216, 0.08);
  --ac-ring:    rgba(29, 78, 216, 0.20);

  --s-clear-bg:     #f0faf4;
  --s-clear-bd:     #86cfaa;
  --s-clear-tx:     #166534;

  --s-review-bg:    #fffbf0;
  --s-review-bd:    #fcd34d;
  --s-review-tx:    #854d0e;

  --s-flagged-bg:   #fff1f1;
  --s-flagged-bd:   #fca5a5;
  --s-flagged-tx:   #991b1b;

  --s-neutral-bg:   #f7f8fb;
  --s-neutral-bd:   #d2d6de;
  --s-neutral-tx:   #4d5566;

  --s-sanctions-bg: #fee2e2;
  --s-sanctions-bd: #f87171;
  --s-sanctions-tx: #7f1d1d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 3px 8px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Reset ────────────────────────────────────────────────── */

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

html { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tx-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  height: 100%;
}

/* ── App shell ────────────────────────────────────────────── */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */

.sidebar {
  width: 216px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--bd-strong);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 0;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--bd-subtle);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.brand-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--ac-subtle);
  border: 1px solid var(--ac-default);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-text);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.brand-text { min-width: 0; }
.brand-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-emphasis);
  letter-spacing: -0.2px;
  display: block;
}
.brand-sub {
  font-size: 10px;
  color: var(--tx-sidebar-muted);
  display: block;
  margin-top: 1px;
}

/* ── Sidebar nav items (.tab keeps its name for JS compat) ── */

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-sidebar-label);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.tab:hover { background: var(--bg-hover); color: var(--tx-primary); }
.tab.active {
  background: var(--ac-subtle);
  border-color: rgba(59, 108, 212, 0.20);
  color: var(--tx-emphasis);
}
[data-theme="light"] .tab.active {
  border-color: rgba(29, 78, 216, 0.20);
}
.tab.active .nav-icon { opacity: 1; color: var(--ac-text); }
.tab:focus-visible { outline: 2px solid var(--ac-default); outline-offset: 1px; }

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.1s;
}
.tab:hover .nav-icon { opacity: 0.9; }
.tab.active .nav-icon { opacity: 1; }

.nav-label { flex: 1; }

.nav-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--s-flagged-bd);
  color: var(--s-flagged-tx);
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── Sidebar footer (user + theme toggle) ─────────────────── */

.sidebar-footer {
  border-top: 1px solid var(--bd-subtle);
  padding-top: 12px;
  flex-shrink: 0;
}

.user-info {
  padding: 0 4px 8px;
}
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-email {
  font-size: 11px;
  color: var(--tx-sidebar-muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.user-role-wrap { margin-top: 5px; }

/* ── Main content area ────────────────────────────────────── */

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-width: 0;
  background: var(--bg-app);
}

/* ── Panels ───────────────────────────────────────────────── */

.panel { display: none; }
.panel.active { display: block; }

/* ── Status pills ─────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.pill-clear     { background: var(--s-clear-bg);     border-color: var(--s-clear-bd);     color: var(--s-clear-tx); }
.pill-review    { background: var(--s-review-bg);    border-color: var(--s-review-bd);    color: var(--s-review-tx); }
.pill-flagged   { background: var(--s-flagged-bg);   border-color: var(--s-flagged-bd);   color: var(--s-flagged-tx); }
.pill-neutral   { background: var(--s-neutral-bg);   border-color: var(--s-neutral-bd);   color: var(--s-neutral-tx); }
.pill-sanctions { background: var(--s-sanctions-bg); border-color: var(--s-sanctions-bd); color: var(--s-sanctions-tx); font-weight: 700; }
.pill-accent    { background: var(--ac-subtle);      border-color: var(--ac-default);     color: var(--ac-text); }

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ctl-h);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 0 12px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
.btn:focus-visible { outline: 2px solid var(--ac-default); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--ac-default);
  border-color: var(--ac-default);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--ac-hover); border-color: var(--ac-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--bd-default);
  color: var(--tx-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--bd-strong); color: var(--tx-primary); }

/* A ghost button that stays visibly pressed (the "Not needed" expiry flag).
   Matches .entity-chip.selected so a chosen state reads the same everywhere. */
.btn-ghost.is-on,
.btn-ghost.is-on:hover:not(:disabled) {
  background: var(--ac-subtle);
  border-color: var(--ac-default);
  color: var(--ac-text);
}

.btn-danger {
  background: var(--s-flagged-bg);
  border-color: var(--s-flagged-bd);
  color: var(--s-flagged-tx);
}
.btn-danger:hover:not(:disabled) { background: var(--s-flagged-bd); color: var(--tx-emphasis); }

.btn-success {
  background: var(--s-clear-bg);
  border-color: var(--s-clear-bd);
  color: var(--s-clear-tx);
}
.btn-success:hover:not(:disabled) { background: var(--s-clear-bd); color: var(--tx-emphasis); }

.btn-sm {
  height: var(--ctl-h-sm);
  font-size: 12px;
  padding: 0 9px;
}

/* Square icon-only button, same height as the row it sits on. */
.btn-icon { width: var(--ctl-h); padding: 0; }
.btn-sm.btn-icon { width: var(--ctl-h-sm); }

/* ── Form elements ────────────────────────────────────────── */

label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-secondary);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

input, select, textarea {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--tx-primary);
  background: var(--bg-surface);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ac-default);
  box-shadow: 0 0 0 2px var(--ac-ring);
}
input::placeholder, textarea::placeholder { color: var(--tx-placeholder); }
input[type="file"] { display: none; }
input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--ac-default);
  cursor: pointer;
}
select { cursor: pointer; }
/* A field switched off on purpose still has to look switched off. */
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg-app);
}
textarea { resize: vertical; min-height: 60px; line-height: 1.5; width: 100%; }

/* ── Cards ────────────────────────────────────────────────── */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
}
.card:last-child { margin-bottom: 0; }

.card h3, .card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-emphasis);
  margin-bottom: 12px;
}

/* ── Tables ───────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.45px;
  text-align: left;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--bd-default);
  white-space: nowrap;
}

tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--bd-subtle);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-hover); }

/* ── Alerts / Messages ────────────────────────────────────── */

.msg, .alert {
  border-radius: 0;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid;
}
.msg { margin-top: 8px; }

.msg-ok,  .alert-ok     { background: var(--s-clear-bg);   border-color: var(--s-clear-bd);   color: var(--s-clear-tx); }
.msg-err, .alert-err    { background: var(--s-flagged-bg); border-color: var(--s-flagged-bd); color: var(--s-flagged-tx); }
.msg-info,.alert-info   { background: var(--ac-subtle);    border-color: var(--ac-default);   color: var(--ac-text); }
.msg-warn,.alert-warn   { background: var(--s-review-bg);  border-color: var(--s-review-bd);  color: var(--s-review-tx); }

.alert { display: none; }
.alert.show { display: block; }

/* ── Two-column grid ──────────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ── Form helpers ─────────────────────────────────────────── */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.fg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

hr, hr.divider {
  border: none;
  border-top: 1px solid var(--bd-subtle);
  margin: 12px 0;
}

/* ── Status board ─────────────────────────────────────────── */

.status-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  align-items: stretch;
}
@media (max-width: 700px) { .status-board { grid-template-columns: 1fr; } }

.sb-row {
  padding: 5px 8px;
  border-radius: 0;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tx-secondary);
}
.sb-row.satisfied   { background: var(--s-clear-bg);   color: var(--s-clear-tx); }
.sb-row.unsatisfied { background: var(--s-flagged-bg); color: var(--s-flagged-tx); }
.sb-row.orphaned    { background: var(--s-neutral-bg); color: var(--s-neutral-tx); border: 1px solid var(--bd-subtle); }

/* ── Score bar ────────────────────────────────────────────── */

.score-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.score-bar {
  flex: 1;
  height: 6px;
  background: var(--bd-default);
  border-radius: 0;
  overflow: hidden;
}
.score-fill { height: 100%; border-radius: 0; transition: width 0.4s; }
.score-num {
  font-size: 20px;
  font-weight: 700;
  width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Discrepancies ────────────────────────────────────────── */

.disc-row {
  border-left: 3px solid var(--bd-default);
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: start;
}
.disc-row.sev-BLOCKING { border-left-color: var(--s-flagged-tx); }
.disc-row.sev-WARNING  { border-left-color: var(--s-review-tx); }
.disc-row.sev-INFO     { border-left-color: var(--bd-default); }
.disc-row.resolved     { opacity: 0.50; }

.disc-field   { font-size: 11px; font-weight: 600; color: var(--tx-emphasis); margin-bottom: 3px; }
.disc-desc    { font-size: 11px; color: var(--tx-secondary); margin-bottom: 4px; }
.disc-vals    { font-size: 11px; color: var(--ac-text); }
.disc-val-row { margin-bottom: 2px; }
.disc-doc     { color: var(--tx-secondary); }
.disc-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.disc-sev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  border: 1px solid;
}
.sev-badge-BLOCKING { background: var(--s-flagged-bg); border-color: var(--s-flagged-bd); color: var(--s-flagged-tx); }
.sev-badge-WARNING  { background: var(--s-review-bg);  border-color: var(--s-review-bd);  color: var(--s-review-tx); }
.sev-badge-INFO     { background: var(--s-neutral-bg); border-color: var(--s-neutral-bd); color: var(--s-neutral-tx); }

.disc-rule { font-size: 10px; color: var(--tx-muted); margin-top: 3px; }

/* ── Searchable dropdown ──────────────────────────────────── */

.sd-wrap { position: relative; }

.sd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-surface);
  color: var(--tx-primary);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  font-weight: 400;
  transition: border-color 0.12s;
}
.sd-trigger:hover { border-color: var(--bd-strong); }
.sd-trigger.open  { border-color: var(--ac-default); box-shadow: 0 0 0 2px var(--ac-ring); }

.sd-arrow { font-size: 10px; color: var(--tx-muted); margin-left: 6px; flex-shrink: 0; }

.sd-list {
  display: none;
  position: absolute;
  z-index: 500;
  width: 100%;
  min-width: 180px;
  top: calc(100% + 3px);
  left: 0;
  background: var(--bg-panel);
  border: 1px solid var(--bd-strong);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.sd-list.open { display: flex; flex-direction: column; }

.sd-search {
  background: var(--bg-surface);
  color: var(--tx-primary);
  border: none;
  border-bottom: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  width: 100%;
}
.sd-search:focus { border-bottom-color: var(--ac-default); }

.sd-options { max-height: 200px; overflow-y: auto; }

.sd-option {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tx-primary);
  border-bottom: 1px solid var(--bd-subtle);
}
.sd-option:last-child { border-bottom: none; }
.sd-option:hover  { background: var(--bg-hover); color: var(--tx-emphasis); }
.sd-option.sd-sel { color: var(--ac-text); }
/* Keyboard cursor. Matches :hover so arrow keys and the mouse read the same. */
.sd-option.sd-active { background: var(--bg-hover); color: var(--tx-emphasis); }

.sd-empty { padding: 8px 10px; font-size: 12px; color: var(--tx-secondary); }

/* <optgroup> label, carried across when a native <select> is upgraded.
   Not clickable, so it is deliberately quieter than .sd-option. */
.sd-group {
  padding: 7px 10px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--bd-subtle);
  cursor: default;
  user-select: none;
}
.sd-group:first-child { padding-top: 8px; }

/* An upgraded <select> stays in the DOM as the source of truth for
   every existing .value read/write; only its native chrome goes away. */
select[data-sd-done] { display: none; }

/* Inline "create new" action pinned to the bottom of a dropdown */
.sd-create {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--ac-text);
  background: var(--bg-surface);
  border: none;
  border-top: 1px solid var(--bd-default);
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.sd-create:hover { background: var(--bg-hover); }

/* ── Version dropdowns ────────────────────────────────────── */

.ver-toggle {
  background: var(--ac-subtle);
  color: var(--ac-text);
  border: 1px solid var(--ac-default);
  border-radius: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  font-family: var(--font-ui);
}
.ver-toggle:hover { background: var(--bg-hover); }

.ver-dropdown {
  display: none;
  position: absolute;
  z-index: 100;
  top: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
}
.ver-dropdown.open { display: block; }

.ver-item {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--bd-subtle);
  font-size: 11px;
}
.ver-item:last-child { border-bottom: none; }

.ver-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-primary);
}
.ver-item-date { color: var(--tx-secondary); white-space: nowrap; flex-shrink: 0; }

.ver-set-primary {
  background: var(--s-clear-bg);
  color: var(--s-clear-tx);
  border: 1px solid var(--s-clear-bd);
  border-radius: 0;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-ui);
}
.ver-set-primary:hover { background: var(--s-clear-bd); }
.ver-set-primary.is-primary {
  background: var(--s-review-bg);
  color: var(--s-review-tx);
  border-color: var(--s-review-bd);
  cursor: default;
}

/* ── Extraction viewer ────────────────────────────────────── */

#extractionViewer {
  display: none;
  margin-top: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--bd-strong);
  border-radius: 0;
  padding: 14px;
}
#extractionViewer pre {
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ac-text);
  font-family: var(--font-mono);
}

/* ── Compare panel ────────────────────────────────────────── */

.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.cmp-col h4 { font-size: 11px; color: var(--ac-text); margin: 0 0 6px; }

.cmp-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--bd-subtle);
  font-size: 11px;
}
.cmp-field-name { color: var(--tx-secondary); flex-shrink: 0; margin-right: 8px; }
.cmp-field-val  { color: var(--tx-primary); text-align: right; }

.cmp-diff {
  background: var(--s-review-bg);
  border-radius: 0;
  padding: 4px 8px;
  margin: 2px 0;
}
.cmp-diff .cmp-field-name { color: var(--s-review-tx); }

.cmp-sev-BLOCKING { border-left: 3px solid var(--s-flagged-tx); padding-left: 6px; }
.cmp-sev-WARNING  { border-left: 3px solid var(--s-review-tx);  padding-left: 6px; }
.cmp-sev-INFO     { border-left: 3px solid var(--bd-default);   padding-left: 6px; }

/* ── File picker ──────────────────────────────────────────── */

.file-pick-btn {
  background: var(--bg-surface);
  color: var(--tx-secondary);
  border: 1px dashed var(--bd-default);
  border-radius: 0;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
  font-family: var(--font-ui);
}
.file-pick-btn:hover { border-color: var(--ac-default); color: var(--tx-primary); }

.file-chosen {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 4px 8px 4px 10px;
  font-size: 12px;
  color: var(--tx-primary);
  max-width: 260px;
}
.file-chosen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-clear {
  background: none;
  border: none;
  color: var(--tx-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.file-clear:hover { color: var(--s-flagged-tx); }

/* ── Entity chips ─────────────────────────────────────────── */

.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--bd-default);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  margin: 2px;
  transition: border-color 0.12s, color 0.12s;
}
.entity-chip:hover { border-color: var(--ac-default); color: var(--tx-emphasis); }
.entity-chip.selected { background: var(--ac-subtle); border-color: var(--ac-default); color: var(--ac-text); }

/* ── Primary star marker ──────────────────────────────────── */

.primary-star { color: var(--s-review-tx); font-size: 12px; margin-right: 4px; }

/* ── Spinner ──────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
[data-theme="light"] .spinner {
  border-color: rgba(0,0,0,0.15);
  border-top-color: currentColor;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Password strength bar ────────────────────────────────── */

.strength {
  margin-top: 5px;
  height: 3px;
  border-radius: 0;
  background: var(--bd-default);
  overflow: hidden;
}
.strength-bar { height: 100%; width: 0; transition: width 0.2s, background 0.2s; }

/* ── Utilities ────────────────────────────────────────────── */

.dim       { color: var(--tx-secondary); }
.muted     { color: var(--tx-muted); }
.emphasis  { color: var(--tx-emphasis); }
.nowrap    { white-space: nowrap; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabnum    { font-variant-numeric: tabular-nums; }
.mono      { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Auth page layout ─────────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 60px;
  background: var(--bg-app);
}

.auth-wrap { width: 100%; max-width: 400px; }

.auth-brand { text-align: center; margin-bottom: 28px; }

.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--ac-subtle);
  border: 1px solid var(--ac-default);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-text);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.auth-brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--tx-emphasis);
  letter-spacing: -0.3px;
}
.auth-brand p { font-size: 13px; color: var(--tx-secondary); margin-top: 4px; }

.auth-card {
  background: var(--bg-panel);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 28px;
}

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  color: var(--tx-muted);
}

.theme-toggle-corner {
  position: fixed;
  top: 16px;
  right: 16px;
}

/* Auth form specifics */
.auth-field { margin-bottom: 16px; }
.auth-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-primary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  font-size: 14px;
}
.auth-field input.no-icon { padding-right: 12px; }
.auth-field input.err { border-color: var(--s-flagged-tx); }
.auth-field input:focus.err { box-shadow: 0 0 0 2px rgba(212, 78, 78, 0.20); }

.input-wrap { position: relative; }
.toggle-vis {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tx-secondary);
  padding: 2px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.toggle-vis:hover { color: var(--tx-primary); }

.auth-btn {
  width: 100%;
  background: var(--ac-default);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  font-family: var(--font-ui);
  margin-top: 4px;
}
.auth-btn:hover:not(:disabled) { background: var(--ac-hover); }
.auth-btn:disabled { opacity: 0.50; cursor: not-allowed; }
.auth-btn:focus-visible { outline: 2px solid var(--ac-default); outline-offset: 2px; }

.auth-divider { border: none; border-top: 1px solid var(--bd-subtle); margin: 20px 0; }

.auth-link { font-size: 12px; color: var(--ac-text); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-hint { font-size: 12px; color: var(--tx-secondary); text-align: center; }

.inline-err {
  font-size: 11px;
  color: var(--s-flagged-tx);
  margin-top: 4px;
  display: none;
}
.inline-err.show { display: block; }

.auth-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}

.forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* Plan stub on signup page */
.plan-stub {
  background: var(--bg-panel);
  border: 1px solid var(--bd-default);
  border-radius: 0;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.plan-details { flex: 1; min-width: 0; }
.plan-name { font-size: 13px; font-weight: 600; color: var(--tx-emphasis); }
.plan-desc { font-size: 12px; color: var(--tx-secondary); margin-top: 2px; }

/* Invalid state (invite/reset pages) */
.invalid-state { text-align: center; padding: 20px 0; }
.invalid-state p { font-size: 13px; color: var(--tx-secondary); line-height: 1.6; }

/* Invite banner */
.invite-banner {
  background: var(--ac-subtle);
  border: 1px solid var(--ac-default);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ac-text);
  margin-bottom: 20px;
  display: none;
}
.invite-banner.show { display: block; }
.invite-banner strong { color: var(--tx-emphasis); }

.hint { font-size: 11px; color: var(--tx-secondary); margin-top: 4px; }

/* ── Control sizing ───────────────────────────────────────────
   Last block in the file on purpose: every single-line control on a
   form row is exactly --ctl-h tall, and this has to win over the
   per-component padding declared above (.sd-trigger, .file-pick-btn).
   Fixed height + zero vertical padding means <select>'s browser
   defaults and the flex-laid-out dropdown trigger cannot drift a pixel
   or two away from a plain <input>.  Textareas, checkboxes and the
   hidden file input are deliberately excluded.
   ─────────────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="file"]),
select,
.sd-trigger,
.file-pick-btn,
.file-chosen {
  height: var(--ctl-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}

/* Login / signup fields stay on their own larger scale, so this needs one
   more class than the rule above to outrank it. */
.auth-field input:not([type="checkbox"]):not([type="file"]) {
  height: var(--ctl-h-lg);
}