/*
 * Colophon integration bridge.
 *
 * theme.css is the designer's package, kept pristine so a later handoff can
 * replace it wholesale. This file is ours: it lets the Colophon shell host the
 * app's still-Bootstrap page bodies during the staged re-skin, tints Bootstrap
 * to the Colophon palette so unconverted pages cohere, and makes the sidebar
 * usable on small screens. Loaded after theme.css.
 */

/* --- Accent: navy, per design direction (2026-08-19) — the sky and the bright
       trust-blue both read too light. Light theme carries true navy; dark moves
       one step brighter so a navy button does not sink into the navy-dark
       ground, and links lighten where they sit on dark. Overriding the tokens
       here cascades everywhere and keeps the designer's theme.css pristine. --- */
:root {
  --accent: #1e3a8a;
  --link: #1e40af;
}
:root[data-theme="dark"] {
  --accent: #2563eb;
  --link: #93c5fd;
}

/* --- Theme switcher (Light / Dark / System) in the sidebar. --- */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--soft);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 2px;
}
.theme-switch button {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.theme-switch button.active {
  background: var(--card);
  color: var(--link);
  box-shadow: var(--shadow);
}

/* --- Legacy shared patterns, themed once so every not-yet-converted page
       reads Colophon without per-page edits: Bootstrap breadcrumbs become the
       slash-separated line the converted pages use, and legacy page headers
       take the h1.page scale. --- */
.breadcrumb {
  font-size: 13.5px;
  margin-bottom: 14px;
  background: transparent;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--muted);
}
.breadcrumb-item.active { color: var(--muted); }
.page-header h1, .page-header .h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.page-header .page-subtitle, .page-header p.text-muted { color: var(--muted); }
.card-header { font-weight: 700; background: var(--card); border-color: var(--border-soft); }

/* --- Pill variants beyond the mockup's ready/review pair: the article pages
       need a warning state and a muted/neutral one. Same shape, theme-aware. --- */
.pill.warn { background: rgba(217, 119, 6, .14); color: #b45309; }
:root[data-theme="dark"] .pill.warn { color: #fbbf24; }

/* --- Dark-mode remaps for shared status components the re-skin left on light
   values (found reviewing Article detail, 2026-08-20). Shared classes, so the
   fix lands on every page that uses them; the app always stamps data-theme
   explicitly, so this variant is the one that applies. --- */
:root[data-theme="dark"] .pill.ready  { background: rgba(52,211,153,.14); color: #34d399; }
:root[data-theme="dark"] .pill.review { background: rgba(248,113,113,.14); color: #f87171; }

/* Operator workflow stepper badges kept light !important backgrounds, so they
   glowed as bright chips on the dark page. */
:root[data-theme="dark"] .badge.sp-workflow-complete,
:root[data-theme="dark"] .badge.sp-workflow-needs-attention {
  background-color:#123524 !important; color:#4ade80 !important; border-color:#1c5236 !important;
}
:root[data-theme="dark"] .badge.sp-workflow-not-started,
:root[data-theme="dark"] .badge.sp-workflow-deferred {
  background-color:#1e293b !important; color:#94a3b8 !important; border-color:#334155 !important;
}
:root[data-theme="dark"] .badge.sp-workflow-blocked {
  background-color:#3a1519 !important; color:#f87171 !important; border-color:#7f1d1d !important;
}
:root[data-theme="dark"] .badge.sp-workflow-info {
  background-color:#12233a !important; color:#93c5fd !important; border-color:#1e3a5f !important;
}

/* The operator stepper's hover and active-step highlights were hardcoded light
   tints (#f8fafc / #eff6ff / #93c5fd), so on the dark page the current step read
   as a pale near-white/light-blue box on a dark card. Remap to dark-native tints;
   the light theme keeps the original values (found finalizing Metadata edit,
   2026-08-20). */
:root[data-theme="dark"] .sp-operator-stepper-link:hover {
  background: var(--row-hover);
  border-color: var(--border);
}
:root[data-theme="dark"] .sp-operator-stepper-item.is-current .sp-operator-stepper-link {
  background: rgba(96,165,250,.10);
  border-color: #3a5578;
}

/* btn-outline-secondary: Bootstrap keeps its dim grey in dark mode (~3.3:1 on
   a dark card). Brighten text + border so Download / Replace / Edit read. */
:root[data-theme="dark"] :where(.btn).btn-outline-secondary {
  color:#cbd5e1; border-color:#3a4a63;
}
:root[data-theme="dark"] :where(.btn).btn-outline-secondary:hover {
  background-color:#1c2740; color:#e6ebf5;
}
/* btn-outline-success / -danger / -warning: Bootstrap's light-theme inks
   (#198754 green, #dc3545 red, #664d03 warning-emphasis brown) land on the
   dark card at 1.9–3.6:1 — "Normalize to Vancouver" and "Accept all complete
   structured…" on the references page were near-invisible (2026-08-26). Same
   treatment as outline-secondary above: Bootstrap's own dark-emphasis inks,
   dimmer matching borders, subtle dark hover tint. */
:root[data-theme="dark"] :where(.btn).btn-outline-success {
  color:#75b798; border-color:#2f6b4f;
}
:root[data-theme="dark"] :where(.btn).btn-outline-success:hover {
  background-color:#12291e; color:#9fd3b7; border-color:#3e8a66;
}
:root[data-theme="dark"] :where(.btn).btn-outline-danger {
  color:#ea868f; border-color:#843d44;
}
:root[data-theme="dark"] :where(.btn).btn-outline-danger:hover {
  background-color:#2c1518; color:#f1a7ae; border-color:#a54e57;
}
:root[data-theme="dark"] :where(.btn).btn-outline-warning {
  color:#ffda6a; border-color:#8a6d1f;
}
:root[data-theme="dark"] :where(.btn).btn-outline-warning:hover {
  background-color:#2a2210; color:#ffe28f; border-color:#b08a2a;
}
:root[data-theme="dark"] .badge.sp-badge-muted { background-color: #1e293b !important; color: #94a3b8 !important; }
.pill.muted { background: var(--row-hover); color: var(--muted); }
.pill.accent { background: var(--soft); color: var(--link); }

/* --- The little "?" help affordance (2026-08-20). Replaces inline helper
       prose: the page stays uncluttered and the explanation is one hover away
       (data-tip / data-help + colophon-help.js). Token colours, both themes. --- */
.sp-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  margin-inline-start: .35rem;
  user-select: none;
  flex: none;
}
.sp-help:hover,
.sp-help:focus-visible {
  color: var(--link);
  border-color: var(--link);
  outline: none;
}
/* Info variant: the classic italic-serif "i". Same affordance, different glyph —
   "?" for how-to help, "i" for an informational note (owner, 2026-08-20). */
.sp-help.sp-info {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

/* --- Contextual help popovers ([data-help] + colophon-help.js). --- */
.help-pop {
  display: none;
  position: absolute;
  z-index: 1080;
  max-width: 300px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(2, 6, 23, .18);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.help-pop-title { font-weight: 700; margin-bottom: 4px; }
.help-pop-text { color: var(--text2); }
.help-pop-more { display: inline-block; margin-top: 8px; font-size: 12.5px; }
[data-help] { cursor: help; }

/* --- Language picker beside the theme switch. --- */
.lang-switch {
  border: 1px solid var(--border-soft);
  background: var(--soft);
  color: var(--text2);
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
}

/* --- RTL (fa, ar): the shell mostly mirrors itself via flexbox, but the
       physical borders and margins need their logical equivalents. --- */
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border-soft); }
[dir="rtl"] .side-nav a { text-align: right; }

/* --- Bootstrap page bodies live inside .main; don't let their container
       re-constrain or double-pad the Colophon padding. --- */
.main > .container,
.main > .container-fluid,
.main > .container-lg,
.main > .container-md,
.main > .container-sm,
.main > .container-xl {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* --- Tint Bootstrap 5.3 to the Colophon accent + font, so a page we have not
       yet converted still reads as the same product. Bootstrap 5.3 is driven by
       CSS variables, so this needs no per-component overrides. --- */
:root {
  --bs-primary: var(--accent);
  --bs-primary-rgb: 14, 165, 233;
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 2, 132, 199;
  --bs-link-hover-color: var(--accent);
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--text);
  --bs-border-radius: 12px;
}
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #172e6e;
  --bs-btn-hover-border-color: #172e6e;
  --bs-btn-active-bg: #172e6e;
  --bs-btn-active-border-color: #172e6e;
}
:root[data-theme="dark"] .btn-primary {
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1d4ed8;
  --bs-btn-active-border-color: #1d4ed8;
}
.btn-outline-primary {
  --bs-btn-color: var(--link);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
}
/* Bootstrap's default outline-warning is yellow text on white — a 1.6:1 ratio.
   Use the warning-emphasis ink for the label and keep the yellow as the border. */
.btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis);
}
/* Bootstrap cards and tables sit on the Colophon surfaces, not white-on-white. */
.card { background: var(--card); border-color: var(--border); }
.table { --bs-table-bg: transparent; color: var(--text); }

/* --- Dark mode over the not-yet-converted legacy pages. scholars-pilot.css
       hardcodes light surfaces (#fff, #f8fafc), which do not follow the theme
       tokens; until a page is converted to Colophon components, remap its most
       common surface classes so dark mode is coherent rather than white cards on
       a dark ground. Converted pages use the tokens directly and ignore this. --- */
:root[data-theme="dark"] .sp-card,
:root[data-theme="dark"] .sp-stat-card,
:root[data-theme="dark"] .card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
  background: var(--card);
  border-color: var(--border-soft);
  color: var(--text);
}
:root[data-theme="dark"] .stat-label { color: var(--muted); }
:root[data-theme="dark"] .stat-value { color: var(--text); }
/* The legacy footer paints --sp-card (always light); in the shell the footer
   sits on the page ground, so let the ground through in both themes. */
footer.sp-footer { background: transparent; }
/* Bootstrap's bg-light/bg-white utilities hardcode light with !important and
   are used ~190 times across the legacy pages; in dark they held light panels
   under light text. Remap them to the theme surfaces. */
:root[data-theme="dark"] .bg-light { background-color: var(--row-hover) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
/* The legacy danger red (#9b2c2c) is ink-dark; on dark surfaces it vanishes.
   And the legacy navy (--sp-primary #1a365d) is used both as heading text and
   as small backgrounds, so dark gets a middle blue readable in both roles. */
:root[data-theme="dark"] {
  --sp-danger: #f87171;
  --sp-primary: #3b82f6;
}
/* Bootstrap's .text-bg-light badge is hardcoded light-with-dark-ink; on dark
   pages it sat as a light chip whose secondary text resolved light. */
:root[data-theme="dark"] .badge.text-bg-light {
  background-color: var(--row-hover) !important;
  color: var(--text2) !important;
}

/* --- The button collision. Colophon's theme.css styles bare `.btn` as a
       solid-accent button, but Bootstrap uses `.btn` as the base class for every
       variant — so without this every Bootstrap button (outline, secondary,
       small) was painted accent-solid and forced to one padding. Hand any button
       carrying a Bootstrap variant back to Bootstrap's own variable-driven
       styling; :where() keeps specificity at one class so Bootstrap's :hover /
       :disabled states still win. Plain `.btn` (sidebar, converted pages) keeps
       the Colophon look. --- */
:where(.btn)[class*="btn-outline-"],
:where(.btn).btn-primary, :where(.btn).btn-secondary, :where(.btn).btn-success,
:where(.btn).btn-danger, :where(.btn).btn-warning, :where(.btn).btn-info,
:where(.btn).btn-light, :where(.btn).btn-dark, :where(.btn).btn-link {
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color);
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  border-radius: var(--bs-btn-border-radius);
}

/* --- Dark mode: legacy component text that hardcodes light-theme colours would
       otherwise sit dark-on-dark. The grays become the theme text tokens; the
       link blues move to the lighter accent; the confidence green lifts for
       contrast. (body text already follows the token via theme.css.) --- */
:root[data-theme="dark"] .sp-preview-card-value,
:root[data-theme="dark"] .jats-bibr-tooltip { color: var(--text); }
:root[data-theme="dark"] .sp-preview-card-meta,
:root[data-theme="dark"] .sp-preview-card-status,
:root[data-theme="dark"] .jats-bibr-tooltip-text { color: var(--text2); }
:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .ref-confidence-medium,
:root[data-theme="dark"] .ref-ext-link,
:root[data-theme="dark"] .jats-bibr-cite-link,
:root[data-theme="dark"] .jats-bibr-tooltip-links a { color: var(--link); }
:root[data-theme="dark"] .ref-identifier-present,
:root[data-theme="dark"] .ref-confidence-high { color: #34d399; }

/* Bootstrap/base alerts ship solid light backgrounds (#fef3c7 amber, #eff6ff
   blue, etc.) that never got a dark variant, so a warnings or info box glowed
   as a bright card on the dark page (found finalizing Metadata edit,
   2026-08-20). Remap all four to dark-native tints; the text-colour rule for
   .alert-info above still applies. Shared classes — this lands on every page. */
:root[data-theme="dark"] .alert-warning {
  background-color: rgba(251,191,36,.12); border-color: rgba(251,191,36,.34); color: #fcd34d;
}
:root[data-theme="dark"] .alert-info {
  background-color: rgba(96,165,250,.12); border-color: rgba(96,165,250,.34);
}
:root[data-theme="dark"] .alert-danger {
  background-color: rgba(248,113,113,.12); border-color: rgba(248,113,113,.34); color: #fca5a5;
}
:root[data-theme="dark"] .alert-success {
  background-color: rgba(52,211,153,.12); border-color: rgba(52,211,153,.34); color: #6ee7b7;
}

/* --- Metadata edit: per-tab issue routing (2026-08-20). A tab wears a dot when
       a readiness issue belongs to a field it owns — red for must-fix, amber for
       a soft warning — and the messages sit as quiet coloured lines at the top of
       that tab instead of in a stack of boxes. --- */
.sp-tab-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  margin-inline-start: .4rem;
  vertical-align: middle;
}
.sp-tab-dot-danger { background: var(--bad); }
.sp-tab-dot-warning { background: #d97706; }
.sp-tab-alerts { margin-top: -.15rem; }
.sp-tab-alert { line-height: 1.4; margin-bottom: .3rem; }
.sp-tab-alert-mark { font-size: .6em; padding-top: .4em; }
.sp-tab-alert-danger { color: var(--bad); }
.sp-tab-alert-warning { color: #b45309; }
:root[data-theme="dark"] .sp-tab-dot-warning { background: #fbbf24; }
:root[data-theme="dark"] .sp-tab-alert-warning { color: #fcd34d; }

/* --- Flash messages: keep them legible on the Colophon page background. --- */
#app-flash-messages { margin-bottom: 18px; }

/* --- Small screens: the fixed 260px rail becomes a stacked top bar. The issue
       list and credit box are secondary there and collapse to keep the fold
       for content; everything stays reachable by scrolling the bar open. --- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .sidebar .brand { padding: 8px 12px; }
  .sidebar .brand .tag { display: none; }
  .sidebar .side-label,
  .sidebar .issue-list,
  .sidebar .credit-box { display: none; }
  .sidebar .side-nav { margin-top: 0; flex-direction: row; flex-wrap: wrap; }
  .sidebar .userchip { margin-left: auto; padding: 0; }
  .main { padding: 20px 18px 32px; }
}

/* --- Sidebar layout (2026-08-19, owner-directed): the menu reads from the
   top, directly under the brand — theme.css anchors .side-nav to the bottom
   with margin-top:auto, which made the whole menu float mid-sidebar. The
   bottom block (theme switch + user chip) carries its own margin-top:auto in
   the template, so it stays pinned where a sidebar footer belongs. --- */
.side-nav { margin-top: 0; }

/* The brand is a wordmark, not a card: no tinted box in either theme.
   The box itself came from Bootstrap: its highlight rule is `.mark, mark`,
   so the brand's CLASS caught <mark>'s yellow background — the same species
   of collision as the .btn one above. */
.brand { background: transparent; border: none; }
:root[data-theme="dark"] .brand { background: transparent; border: none; }
.brand .mark { background: transparent; padding: 0; color: inherit; }

/* The page footer sits at the bottom of the viewport even on short pages,
   instead of floating up under the last card. */
.main { display: flex; flex-direction: column; }
.main > * { flex-shrink: 0; }
.sp-footer { margin-top: auto !important; padding-top: 16px; }

/* --- Collapsible sidebar (2026-08-20, owner-directed). The collapsed class
   sits on <html> and is applied pre-paint from localStorage, so there is no
   layout flash. Collapsed = the sidebar leaves entirely; a small fixed opener
   brings it back. --- */
.sidebar { position: relative; }

/* --- The sidebar stays with the viewport, not with the page (2026-08-21).
   `.shell` is a flex row and `.sidebar` stretched to the full page height, so
   on any page taller than the window the footer of the rail — the theme
   switch, the language selector and the log-out chip, all anchored with
   margin-top:auto — sat at the bottom of the *document*. On My Workspace
   (1012px of content in a 745px window) that put every one of them below the
   fold: the only way to change theme or sign out was to scroll the whole
   conversation to its end. Sticky pins the rail to the top of the viewport and
   caps it at the window height, so the footer is where a footer belongs and
   the rail scrolls on its own if it ever outgrows the screen.

   Desktop only: under 900px the rail is already a stacked top bar (above), and
   a 100vh sticky element there would eat the screen. --- */
@media (min-width: 901px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
  }
}
.sidebar-toggle {
  position: absolute; top: 10px; inset-inline-end: 8px;
  background: transparent; border: 1px solid var(--border-soft);
  border-radius: 8px; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px;
}
.sidebar-toggle:hover { color: var(--text2); }
.sidebar-opener {
  display: none; position: fixed; top: 12px; inset-inline-start: 12px; z-index: 60;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text2); cursor: pointer;
  font: inherit; font-size: 15px; padding: 6px 10px; box-shadow: var(--shadow);
}
:root.sidebar-collapsed .sidebar { display: none; }
:root.sidebar-collapsed .sidebar-opener { display: block; }
:root[data-theme="dark"] .badge.sp-badge-working { background-color: #1e3a5f !important; color: #93c5fd !important; }
.sp-spin { display:inline-block; width:11px; height:11px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:sp-rotate .8s linear infinite; vertical-align:-1px; margin-inline-end:5px; }
@keyframes sp-rotate { to { transform: rotate(360deg); } }
.sp-cta-danger { border-color: #fca5a5 !important; color: #b91c1c !important; }
.sp-cta-danger:hover { background: #fef2f2 !important; }
:root[data-theme="dark"] .sp-cta-danger { border-color: #7f1d1d !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .sp-cta-danger:hover { background: #450a0a !important; }
.dash-article-row:last-child { border-bottom: none !important; }
@media (max-width: 900px) { .help-two-col { grid-template-columns: 1fr !important; } }
details > summary::-webkit-details-marker { display: none; }

/* Right-hand slide-over drawers on the Help hub — the mockup's 390/410px
   panels: chat (the real workspace, embedded) and the ticket form. */
.sp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -18px 0 50px rgba(2, 6, 23, .25);
  display: flex; flex-direction: column; max-width: 94vw;
}
.sp-drawer[hidden] { display: none; }
[dir="rtl"] .sp-drawer { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border); box-shadow: 18px 0 50px rgba(2,6,23,.25); }



/* --- Article production stepper (2026-08-20): a full-width segmented status
   bar that replaces the old white pills + separate progress bar. Border-based
   segments so it is theme-aware; the status colour lives on the bottom edge and
   the icon, and a thin track under it fills to the canonical progress percent. */
.sp-stagebar-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-stagebar-nav { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 8px; color: var(--text2); background: transparent; border: 1px solid var(--border); cursor: pointer; text-decoration: none; }
.sp-stagebar-nav:hover { background: var(--row-hover); color: var(--text); }
.sp-stagebar-nav.is-active { border-color: var(--accent); color: var(--link); }
.sp-stagebar-steps { display: flex; gap: 3px; }
.sp-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 6px 7px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 9px 9px 0 0;
  background: transparent; color: var(--text2); text-decoration: none; font-size: 12px; text-align: center; transition: background .12s; }
.sp-step:hover { background: var(--row-hover); color: var(--text); }
.sp-step[aria-current="page"] { background: var(--soft); }
.sp-step-ico { font-size: 14px; font-weight: 800; line-height: 1; }
.sp-step-lbl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; }
.sp-step[data-state="complete"] { border-bottom-color: var(--good); } .sp-step[data-state="complete"] .sp-step-ico { color: var(--good); }
.sp-step[data-state="warning"]  { border-bottom-color: #d97706; }      .sp-step[data-state="warning"]  .sp-step-ico { color: #d97706; }
.sp-step[data-state="blocked"]  { border-bottom-color: var(--bad); }   .sp-step[data-state="blocked"]  .sp-step-ico { color: var(--bad); }
.sp-step[data-state="progress"] { border-bottom-color: var(--accent); } .sp-step[data-state="progress"] .sp-step-ico { color: var(--accent); }
.sp-step[data-state="pending"]  { border-bottom-color: var(--border); } .sp-step[data-state="pending"]  .sp-step-ico { color: var(--muted); }
.sp-stagebar-track { height: 4px; border-radius: 0 0 99px 99px; background: var(--border); overflow: hidden; margin-top: 0; }
.sp-stagebar-track > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .2s; }
@media (max-width: 720px) { .sp-step-lbl { display: none; } .sp-step { padding: 10px 4px; } }

/* Log out as an icon, not a word (2026-08-20): a subtle utility button that
   picks up the accent on hover; the label lives in aria-label + title. */
.sp-logout-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted); }
.sp-logout-btn:hover { color: var(--bad, #dc2626); border-color: var(--bad, #dc2626); background: var(--row-hover); }
.sp-logout-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }