/* Relative path: static/css/quantum.css */
/* Last update: 2026-08-03 */

/* =========================================================
   Quantum design tokens + shared components

   This is the first authored stylesheet in this repo. Until now every
   rule lived in an inline <style> block: 417 lines across 7 templates,
   ~90 distinct hex literals, zero CSS custom properties, and four
   unreconciled palettes (portal navy #0b3d91, demo purple #667eea,
   login sky #2b8bf0, staff slate #1e3a5f). The portal shell and the
   staff console shared exactly one selector — `body` — and disagreed
   even there (#f6f7f9 vs #f8f9fa).

   The token names below deliberately match ApoScript's static/style.css
   so the two apps describe the same things with the same words. The
   brand navy is the value both apps already used for their primary
   chrome, so unifying on it changes the portal and login pages, not the
   staff console.
   ========================================================= */

:root {
  /* --- Brand -------------------------------------------------- */
  --brand-navy: #1e3a5f;
  --brand-navy-light: #2c5282;
  --brand-navy-dark: #162b46;
  --brand-gradient: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
  --brand-on-navy: #f5f5f5;

  /* --- Surfaces & text ---------------------------------------- */
  --theme-bg-primary: #f8f9fa;
  --theme-bg-card: #ffffff;
  --theme-text-primary: #212529;
  --theme-text-secondary: #6c757d;
  --theme-border-color: #e3e6ea;
  --theme-table-head-bg: #f1f3f5;
  --theme-focus-ring: #0d6efd;

  /* --- Status -------------------------------------------------- */
  --theme-success-bg: #d1e7dd;
  --theme-success-text: #0f5132;
  --theme-success-border: #badbcc;
  --theme-danger-bg: #f8d7da;
  --theme-danger-text: #842029;
  --theme-danger-border: #f5c2c7;
  --theme-warning-bg: #fff3cd;
  --theme-warning-text: #664d03;
  --theme-warning-border: #ffecb5;
  --theme-info-bg: #cff4fc;
  --theme-info-text: #055160;
  --theme-info-border: #b6effb;
  --theme-impersonation-bg: #fde68a;
  --theme-impersonation-text: #92400e;

  /* --- Spacing scale (4px base) -------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- Typography ---------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.4rem;
  --font-size-2xl: 1.6rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Radii ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------------ */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 2px 12px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* --- Stacking layers ------------------------------------------ */
  --z-skip-link: 1100;

  --transition-fast: 120ms ease;
}

/* =========================================================
   Base
   ========================================================= */

body {
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font-family: var(--font-sans);
}

/* Skip link — the staff console has a 36-entry mega-nav, so without this
   every keyboard user tabs the whole thing on every page. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  z-index: var(--z-skip-link);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-2);
  color: #fff;
}

*:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}
/* A blue focus ring is invisible against the navy nav — use white there. */
.qc-nav *:focus-visible,
.qc-header *:focus-visible {
  outline-color: #fff;
}

/* =========================================================
   Portal shell (templates/base.html)
   ========================================================= */

.qc-header {
  background: var(--brand-gradient);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}
.qc-header a { color: #fff; text-decoration: none; }

.qc-card {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
  padding: var(--space-6) 2.25rem;
  max-width: 32rem;
  margin: var(--space-7) auto;
}
.qc-card h1, .qc-card h2 { color: var(--brand-navy); margin-top: 0; }

.qc-footer {
  text-align: center;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--space-5) 0;
}
.qc-footer-version { opacity: 0.7; }

button[type="submit"], .btn-primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
button[type="submit"]:hover, .btn-primary:hover {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
}

/* =========================================================
   Staff console shell (staff_console/base.html)
   ========================================================= */

.qc-nav { background: var(--brand-gradient); }
.qc-nav .navbar-brand,
.qc-nav .nav-link { color: var(--brand-on-navy); }
.qc-nav .nav-link:hover,
.qc-nav .nav-link:focus,
.qc-nav .dropdown-item:active { color: #fff; }
.qc-nav .navbar-brand { font-weight: var(--font-weight-bold); letter-spacing: 0.2px; }

/* Active nav item. Without this the console gave no indication at all of
   which of its ~26 reachable pages you were on. */
.qc-nav .nav-link.active,
.qc-nav .nav-link[aria-current="page"] {
  color: #fff;
  font-weight: var(--font-weight-semibold);
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
}
/* A dropdown whose current page is inside it — subtler than the item itself. */
.qc-nav .nav-item.has-active > .nav-link {
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.7);
}
.qc-nav .dropdown-item.active,
.qc-nav .dropdown-item[aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

.card {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
}
.card-header {
  background: var(--theme-bg-card);
  border-bottom: 1px solid #eef0f2;
  font-weight: var(--font-weight-semibold);
}

/* APO-1831: without an auto inline margin this is a LEFT-PINNED 1320px block,
   so on displays wider than 1320px every centred child (the login card's
   `justify-content: center`) centres inside a left-pinned box and reads as
   off-centre. Only visible on wide screens, which is why it looked fine on
   laptops and narrow windows. */
main { max-width: 1320px; margin-inline: auto; }
main h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
main h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-top: 1.2rem;
}

/* --- Page header ------------------------------------------------
   Pages previously used four different <h1> spacing variants
   (mb-0/mb-1/mb-3/none). This is the one treatment. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.page-subtitle {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  margin: var(--space-1) 0 0;
  max-width: 70ch;
}
.page-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb { font-size: var(--font-size-sm); margin-bottom: var(--space-3); }

/* --- Tables ------------------------------------------------------ */
.table { vertical-align: middle; }
.table thead th {
  background: var(--theme-table-head-bg);
  border-bottom: 2px solid #e9ecef;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #495057;
}
/* Legacy compat: un-classed tables on pages that were never migrated to
   Bootstrap markup still render on-theme. Pages fixed to use .table drop
   out of this selector automatically. */
main table:not(.table) {
  width: 100%;
  border-collapse: collapse;
  background: var(--theme-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevation-2);
}
main table:not(.table) th,
main table:not(.table) td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid #eef0f2;
  text-align: left;
  font-size: 0.9rem;
  vertical-align: middle;
}
main table:not(.table) th { background: var(--theme-table-head-bg); color: #495057; }
main table:not(.table) tbody tr:hover td { background: var(--theme-bg-primary); }

/* --- Empty states ------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--theme-text-secondary);
}
.empty-state__title {
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-primary);
  margin-bottom: var(--space-1);
}
.empty-state__body { margin: 0 auto; max-width: 48ch; }

/* --- Stat cards --------------------------------------------------- */
.stat-card .stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--brand-navy);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text-secondary);
}

code { color: #0b5ed7; }

.impersonation-banner {
  background: var(--theme-impersonation-bg);
  color: var(--theme-impersonation-text);
  font-weight: var(--font-weight-semibold);
}

/* --- Flash messages ------------------------------------------------
   Maps the legacy .msg classes onto a Bootstrap-alert look. Kept because
   the message markup in base.html is pinned by test_staff_console_a11y. */
.msg {
  padding: 0.6rem 0.9rem;
  margin: var(--space-2) 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.msg.success { background: var(--theme-success-bg); color: var(--theme-success-text); border-color: var(--theme-success-border); }
.msg.error   { background: var(--theme-danger-bg);  color: var(--theme-danger-text);  border-color: var(--theme-danger-border); }
.msg.warning { background: var(--theme-warning-bg); color: var(--theme-warning-text); border-color: var(--theme-warning-border); }
.msg.info    { background: var(--theme-info-bg);    color: var(--theme-info-text);    border-color: var(--theme-info-border); }

form.inline { display: inline; }

/* --- Forms ----------------------------------------------------------
   Renders raw Django form fields as Bootstrap-looking controls without
   pulling in crispy-forms. */
.qc-form label { font-weight: var(--font-weight-medium); margin-bottom: var(--space-1); display: inline-block; }
.qc-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
.qc-form select,
.qc-form textarea {
  display: block;
  width: 100%;
  max-width: 520px;
  padding: 0.4rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background: var(--theme-bg-card);
  font-size: 0.95rem;
}
.qc-form input:focus,
.qc-form select:focus,
.qc-form textarea:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.qc-form .form-text { font-size: 0.8rem; color: var(--theme-text-secondary); }
.qc-form ul { list-style: none; padding-left: 0; }
.qc-form .field-error { color: var(--theme-danger-text); font-size: var(--font-size-sm); }
.qc-flag-form { max-width: 680px; }

/* --- Product / action cards ---------------------------------------- */
.product-card,
.product-tile {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card:hover,
a.product-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  text-decoration: none;
}
.product-card { cursor: pointer; }
.product-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  color: #fff;
  font-size: 1.1rem;
}

/* =========================================================
   Launchpad (templates/portal/launchpad.html)
   ========================================================= */

.launchpad-wrapper { max-width: 64rem; margin: 2.5rem auto; padding: 0 var(--space-4); }
.launchpad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.launchpad-header h1 { color: var(--brand-navy); margin: 0; font-weight: var(--font-weight-semibold); }
.launchpad-header small { color: var(--theme-text-secondary); }
.launchpad-actions { display: flex; align-items: center; gap: var(--space-4); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.25rem;
}
.product-tile {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5) 1.75rem;
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}
.product-tile h2 {
  color: var(--brand-navy);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}
.product-tile .org-line { color: var(--theme-text-secondary); font-size: 0.85rem; margin-bottom: var(--space-2); }
.product-tile .org-sep { color: #c8cdd4; }
.product-tile .meta { margin-top: auto; padding-top: var(--space-4); display: flex; gap: var(--space-2); font-size: var(--font-size-xs); }
.meta-pill {
  background: #f0f3f8;
  color: var(--brand-navy);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
}
/* Coming-soon card: visibly present but plainly not actionable. It is a
   <div>, so it gets none of the <a> hover lift above. */
.product-tile--soon { background: #f7f8fa; border-style: dashed; box-shadow: none; cursor: default; }
.product-tile--soon h2 { color: var(--theme-text-secondary); }
.meta-pill--soon { background: #e9ecef; color: var(--theme-text-secondary); }

.launchpad-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--theme-text-secondary);
  background: var(--theme-bg-card);
  border: 1px dashed #c8cdd4;
  border-radius: var(--radius-lg);
}
.launchpad-empty h2 { color: var(--brand-navy); }

.logout-link {
  color: var(--theme-text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.logout-link:hover { color: var(--brand-navy); }

/* =========================================================
   Store select (templates/portal/store_select.html)
   ========================================================= */

.store-card { max-width: 34rem; }
.store-card h1 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.store-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.store-option:hover { border-color: var(--brand-navy); background: #f8fafc; }
.store-option .store-name { font-weight: var(--font-weight-semibold); color: var(--brand-navy); }
.store-option .store-meta { color: var(--theme-text-secondary); font-size: 0.85rem; }
.switch-org { font-size: 0.85rem; }


/* =========================================================
   Public demo pages (templates/demo_hub.html, demo_denied.html)

   These are the only public, unauthenticated surfaces in the repo, so they
   keep a distinct "marketing" treatment — a full-bleed gradient rather than
   the flat app chrome. What changed is that the gradient is now the brand
   navy instead of a fourth, unrelated purple (#667eea -> #764ba2) that
   matched nothing else in the portfolio, and the accent is the shared
   brand blue rather than Google's #1a73e8.
   ========================================================= */

.demo-page {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
  color: #333;
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-page * { box-sizing: border-box; }
.demo-container {
  background: var(--theme-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: var(--space-7) 2.5rem;
  max-width: 62rem;
  width: 100%;
}
.demo-container--narrow { max-width: 34rem; text-align: center; }
.demo-container--narrow h1 { color: var(--brand-navy); font-size: var(--font-size-xl); margin: var(--space-3) 0; }
.demo-container--narrow p { color: var(--theme-text-secondary); margin-bottom: var(--space-5); }
.demo-header { text-align: center; margin-bottom: var(--space-6); }
.demo-brand {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--brand-navy);
  letter-spacing: -0.02em;
}
.demo-subtitle { color: var(--theme-text-secondary); margin-top: var(--space-2); }
.demo-badge {
  display: inline-block;
  margin-top: var(--space-3);
  background: #e8f0fe;
  color: var(--brand-navy);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5);
}
.demo-card {
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.demo-card:hover { transform: translateY(-3px); box-shadow: var(--elevation-3); }
.demo-card h2 { color: var(--brand-navy); font-size: 1.4rem; margin: var(--space-3) 0 var(--space-1); }
.demo-card .tagline { color: var(--theme-text-secondary); font-size: 0.9rem; margin-bottom: var(--space-3); }
.demo-card p { margin-bottom: var(--space-3); }
.demo-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.demo-card ul li { position: relative; padding-left: 1.35rem; margin-bottom: var(--space-2); font-size: 0.9rem; }
.demo-card ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand-navy-light); font-weight: var(--font-weight-bold); }
.demo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: 1.3rem;
  background: var(--brand-gradient);
}
/* MARCUS keeps a green accent so the two products stay distinguishable. */
.demo-card--marcus .demo-icon { background: linear-gradient(135deg, #17a673, #23c48a); }
.demo-card--marcus h2 { color: #14795a; }

.demo-btn {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  background: var(--brand-navy);
  transition: background var(--transition-fast);
}
.demo-btn:hover { background: var(--brand-navy-dark); color: #fff; }
.demo-card--marcus .demo-btn { background: #17a673; }
.demo-card--marcus .demo-btn:hover { background: #14795a; }

.demo-gate {
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  text-align: center;
}
.demo-gate h3 { color: var(--brand-navy); margin-bottom: var(--space-2); }
.demo-gate p { color: var(--theme-text-secondary); font-size: 0.9rem; margin-bottom: var(--space-3); }
.demo-gate form { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.demo-gate input[type="text"] {
  padding: var(--space-2) var(--space-3);
  border: 1px solid #ced4da;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-base);
}
.demo-gate button {
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand-navy);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.demo-gate button:hover { background: var(--brand-navy-dark); }
.demo-gate--active {
  background: var(--theme-success-bg);
  color: var(--theme-success-text);
  border-color: var(--theme-success-border);
  font-weight: var(--font-weight-semibold);
}
.demo-gate-error { color: var(--theme-danger-text); font-size: var(--font-size-sm); margin-top: var(--space-3); }

.demo-footer-note {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
}
.demo-footer-note i { color: var(--brand-navy-light); margin-right: var(--space-1); }

@media (max-width: 680px) {
  .demo-container { padding: var(--space-5) var(--space-4); }
  .demo-brand { font-size: 1.6rem; }
}

/* =========================================================
   Passkeys — the enrollment offer, and the security page

   Shared by templates/passkeys/setup.html and security.html. The login
   panel keeps its own page-local .qc-login scale (it is a standalone
   centred card on a gradient, not part of this shell), so the passkey
   button there is styled by the login template, not from here.
   ========================================================= */

/* --- Buttons ---------------------------------------------------- */
.passkey-btn,
.qc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.passkey-btn:disabled,
.qc-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.passkey-btn--primary,
.qc-btn--primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.passkey-btn--primary:hover:not(:disabled),
.qc-btn--primary:hover:not(:disabled) { background: var(--brand-navy-light); color: #fff; }

.passkey-btn--ghost {
  background: transparent;
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}
.passkey-btn--ghost:hover:not(:disabled) { background: var(--theme-bg-primary); }

.passkey-btn--danger,
.qc-btn--danger {
  background: transparent;
  border-color: var(--theme-danger-border);
  color: var(--theme-danger-text);
}
.passkey-btn--danger:hover:not(:disabled) { background: var(--theme-danger-bg); }

.passkey-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.passkey-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--theme-text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}
.passkey-link:hover { color: var(--theme-text-primary); }

/* --- Status messages -------------------------------------------- */
/* Empty by default so the aria-live region can exist from first paint
   without drawing a blank box before there is anything to announce. */
.passkey-msg,
.qc-msg {
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}
.passkey-msg:not(:empty),
.qc-msg:not(:empty) { margin: var(--space-3) 0; }
.passkey-msg--info,
.passkey-msg--success,
.passkey-msg--error,
.qc-msg--info,
.qc-msg--success,
.qc-msg--error {
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
}
.passkey-msg--info {
  background: var(--theme-info-bg);
  border-color: var(--theme-info-border);
  color: var(--theme-info-text);
}
.passkey-msg--success {
  background: var(--theme-success-bg);
  border-color: var(--theme-success-border);
  color: var(--theme-success-text);
}
.passkey-msg--error {
  background: var(--theme-danger-bg);
  border-color: var(--theme-danger-border);
  color: var(--theme-danger-text);
}

/* --- The post-login offer --------------------------------------- */
.passkey-offer {
  display: flex;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
}
.passkey-offer__card {
  width: 100%;
  max-width: 560px;
  padding: var(--space-6);
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
}
.passkey-offer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--theme-bg-primary);
  color: var(--brand-navy);
}
.passkey-offer__card h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.passkey-offer__lead {
  margin: 0 0 var(--space-5);
  color: var(--theme-text-secondary);
}
.passkey-offer__points {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.passkey-offer__points li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--theme-border-color);
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}
.passkey-offer__points strong { color: var(--theme-text-primary); }

.passkey-offer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.passkey-offer__actions .passkey-btn--primary { width: 100%; }
.passkey-offer__skip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
}
.passkey-offer__skip .passkey-btn--ghost { flex: 1; }
.passkey-offer__unsupported { display: grid; gap: var(--space-3); }

/* --- Security page ---------------------------------------------- */
.passkey-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.passkey-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.passkey-page__header h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.passkey-page__lead { margin: 0; color: var(--theme-text-secondary); }

.passkey-card {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}
.passkey-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.passkey-card__head h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.passkey-count { font-size: var(--font-size-sm); color: var(--theme-text-secondary); }

.passkey-list { margin: 0; padding: 0; list-style: none; }
.passkey-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--theme-border-color);
}
.passkey-list__main { display: grid; gap: var(--space-1); min-width: 0; }
.passkey-list__name { font-weight: var(--font-weight-semibold); }
.passkey-list__meta { font-size: var(--font-size-xs); color: var(--theme-text-secondary); }
.passkey-list__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.passkey-list__actions form { margin: 0; }
.passkey-rename { display: flex; gap: var(--space-2); }

.passkey-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  background: var(--theme-bg-card);
  color: var(--theme-text-primary);
}
.passkey-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}
.passkey-add {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--theme-border-color);
}
.passkey-add__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.passkey-add .passkey-input { min-width: 220px; }

.passkey-tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-color);
  font-size: var(--font-size-xs);
  color: var(--theme-text-secondary);
  white-space: nowrap;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 680px) {
  .launchpad-header { flex-direction: column; align-items: flex-start; }
  .qc-card { margin: var(--space-4) var(--space-3); padding: var(--space-5); }
  .passkey-page__header { flex-direction: column; }
  .passkey-list__item { align-items: flex-start; flex-direction: column; }
  .passkey-add { flex-direction: column; align-items: stretch; }
  .passkey-add .passkey-input { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Staff-console utility classes (APO-935)

   These replace one-off inline ``style="…"`` attributes in the staff-console
   templates. They previously lived in an inline <style> block in
   staff_console/base.html; that block was retired when the theme moved here
   (APO-934), so the classes are defined here or they resolve to nothing.
   ========================================================= */

.qc-prewrap    { white-space: pre-wrap; }
.qc-mono       { font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace); }
.qc-break-all  { word-break: break-all; overflow-wrap: anywhere; }
.qc-form-narrow { max-width: 600px; }

/* ─────────────────────────────────────────────────────────────────────────
   Account settings hub (APO-1831)

   Quantum had no settings surface at all before this — only /passkeys/
   security/. These are the layout primitives for /account/*; buttons and
   messages deliberately reuse the passkey rules above (qc-btn / qc-msg are
   aliased onto them) so the two pages stay one design system.
   ───────────────────────────────────────────────────────────────────────── */

.qc-settings { padding: var(--space-6) var(--space-5); }

.qc-settings__header { margin-bottom: var(--space-5); }
.qc-settings__lead {
  color: var(--theme-text-secondary);
  margin: var(--space-2) 0 0;
}

.qc-settings__body {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: var(--space-6);
  align-items: start;
}

.qc-settings__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qc-settings__tab {
  padding: var(--space-3) var(--space-4);
  color: var(--theme-text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-left: 3px solid transparent;
}
.qc-settings__tab:hover { background: var(--theme-bg-primary); }
.qc-settings__tab.is-active {
  background: var(--theme-bg-primary);
  border-left-color: var(--brand-navy);
  font-weight: var(--font-weight-semibold);
}
.qc-settings__tab--back {
  margin-top: var(--space-2);
  border-top: 1px solid var(--theme-border-color);
  color: var(--theme-text-secondary);
}

.qc-settings__content { min-width: 0; }
.qc-settings__hint {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  margin: var(--space-2) 0 var(--space-4);
}
.qc-settings__empty {
  color: var(--theme-text-secondary);
  font-style: italic;
}

/* Panels group one concern each on the Security tab. */
.qc-panel {
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.qc-panel h3 { margin-top: 0; }

/* Forms */
.qc-form { max-width: 34rem; }
.qc-form__row { margin-bottom: var(--space-4); }
.qc-form__row label {
  display: block;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}
.qc-form__row input[type="text"],
.qc-form__row input[type="email"],
.qc-form__row input[type="password"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
}
.qc-form__row input:disabled { opacity: 0.6; cursor: not-allowed; }
.qc-form__help {
  display: block;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}
.qc-form__group {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.qc-form__group legend {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: 0;
  margin-bottom: var(--space-3);
}
.qc-form__actions { display: flex; gap: var(--space-3); align-items: center; }

.qc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}
.qc-check input { margin-top: 0.2em; flex: none; }

/* Tables (sessions, organizations) */
.qc-table-wrap { overflow-x: auto; }
.qc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.qc-table th,
.qc-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--theme-border-color);
}
.qc-table th { font-weight: var(--font-weight-semibold); color: var(--theme-text-secondary); }

.qc-badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm, 4px);
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-color);
  font-size: var(--font-size-sm);
}
.qc-badge--ok {
  background: var(--theme-success-bg, #e6f4ea);
  border-color: var(--theme-success-border, #b7dfc4);
  color: var(--theme-success-text, #1e6b34);
}

/* Single column once the sidebar would crowd the content. */
@media (max-width: 720px) {
  .qc-settings__body { grid-template-columns: 1fr; }
  .qc-settings__nav { flex-direction: row; flex-wrap: wrap; }
  .qc-settings__tab { border-left: none; border-bottom: 3px solid transparent; }
  .qc-settings__tab.is-active { border-left: none; border-bottom-color: var(--brand-navy); }
}