/* ---------------------------------------------------------------------------
   Harvhills Payroll — design tokens
   Navy + white (from the Harvhills logo) with a brass/gold accent introduced
   for this pass — a considered navy+gold institutional pairing (think ledger,
   vault, audited statement), not a rebrand: navy stays dominant, gold is used
   sparingly for signature moments (active nav rule, stepper, stat accents).
   Money and key figures render in a tabular monospace throughout — the
   product's whole promise is payroll precision, so the numbers themselves
   look audited. Light palette on :root; dark overrides under
   prefers-color-scheme, contrast checked independently for each. The sidebar
   is a fixed dark navy in BOTH modes (its own --sidebar-* tokens).
--------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg: #f2f5fb;
  --color-bg-inset: #e9eef8;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e1e7f2;
  --color-border-strong: #c7d2e6;

  /* Text */
  --color-text: #101c34;
  --color-text-muted: #5a6b8c;
  /* Was #8b98b5 (2.9:1 on white — failed WCAG AA for text). #5b6c8d is 4.5:1+ on
     every surface (page, inset, white), so this "faint" tier now sits very close to
     muted: AA leaves no room for a paler grey that is still readable text. */
  --color-text-faint: #5b6c8d;
  --color-on-primary: #ffffff;
  /* Form-control boundary: WCAG 1.4.11 needs 3:1 against the surface so people can
     see where a field is. --color-border-strong (1.5:1) stays for decorative rules. */
  --color-input-border: #7a89a8;
  /* Text on the gold "Recommended" badge */
  --color-badge-bg: var(--color-gold-deep);
  --color-badge-text: #ffffff;

  /* Brand — navy */
  --color-primary: #1c3861;
  --color-primary-hover: #152a4e;
  --color-primary-active: #0f1f3d;
  --color-primary-tint: #e7ecf6;
  --color-primary-tint-strong: #cbd8ef;
  --color-accent: #2f5590;
  --color-accent-tint: #eaf0fa;

  /* Brand — brass/gold (signature secondary, used sparingly) */
  --color-gold: #b1782f;
  --color-gold-bright: #dba85c;
  --color-gold-deep: #7a531f;
  --color-gold-tint: #faf1e0;

  /* Semantic (functional, not brand — kept distinct from navy primary) */
  --color-danger: #c0362a;
  --color-danger-tint: #fbeae8;
  --color-success: #16803e;
  --color-success-tint: #e8f7ee;
  --color-warning: #a15c07;
  --color-warning-tint: #fdf1de;
  --color-info: #0a6f94; /* was #0e7fa8: 4.0:1 on its tint; now 5.0:1 */
  --color-info-tint: #e5f4f9;

  /* Sidebar — always dark navy, independent of light/dark mode */
  --sidebar-bg: #0b1730;
  --sidebar-bg-2: #0e1d3d;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
  --sidebar-text: #aab6d6;
  --sidebar-text-faint: #7d8cb4; /* was #62719a: 3.7:1 on the navy; now 5.3:1 */
  --sidebar-active-bg: #ffffff;
  --sidebar-active-text: #0b1730;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-gold: #dba85c;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(10, 20, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 20, 40, 0.09), 0 1px 2px rgba(10, 20, 40, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(10, 20, 40, 0.22), 0 2px 6px rgba(10, 20, 40, 0.07);
  --shadow-lg: 0 20px 44px -16px rgba(10, 20, 40, 0.28), 0 4px 10px rgba(10, 20, 40, 0.08);
  --shadow-focus: 0 0 0 3px var(--color-primary-tint-strong);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Type — a considered display/body/figure system, not the raw system stack:
     Space Grotesk carries personality on headings and the brand; Inter is the
     quiet workhorse for body/data text; IBM Plex Mono (tabular figures) is
     reserved for money and key stats — see file header. */
  --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a1122;
    --color-bg-inset: #101a30;
    --color-surface: #10192e;
    --color-surface-raised: #142140;
    --color-border: #223257;
    --color-border-strong: #304870;

    --color-text: #e8edf9;
    --color-text-muted: #94a3c4;
    --color-text-faint: #7d8db4; /* was #64749c: 3.8–4.0:1; now 4.8:1+ everywhere */
    --color-on-primary: #0a1122;
    --color-input-border: #5d73a0;
    --color-badge-bg: var(--color-gold);
    --color-badge-text: #0a1122;

    --color-primary: #5285dd;
    --color-primary-hover: #6f9ce5;
    --color-primary-active: #3d6cc4;
    --color-primary-tint: #16233f;
    --color-primary-tint-strong: #1d2e52;
    --color-accent: #6f9ce5;
    --color-accent-tint: #16233f;

    --color-gold: #dba85c;
    --color-gold-bright: #eec78b;
    --color-gold-deep: #c68a3a; /* was #b1782f: 4.45:1 on its tint; now 5.6:1 */
    --color-gold-tint: #241d10;

    --color-danger: #f2897d;
    --color-danger-tint: #2c1a18;
    --color-success: #4ade80;
    --color-success-tint: #132a1d;
    --color-warning: #f0b94e;
    --color-warning-tint: #2c2410;
    --color-info: #5fc9e8;
    --color-info-tint: #0f2530;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 44px -16px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-focus: 0 0 0 3px var(--color-primary-tint-strong);

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
h1 { font-size: 1.6rem; margin: 0 0 20px; line-height: 1.2; }
h2 { font-size: 1.0625rem; margin: 0 0 12px; line-height: 1.3; }
h3 { font-size: 0.9375rem; margin: 0 0 8px; }

p { margin: 0 0 12px; }

/* Tabular, audited-looking figures — the product's signature typographic
   device (file header). Apply to any money amount or key numeric stat. */
.num, .figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--color-primary-tint-strong); }

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */
label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="file"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  margin-bottom: 16px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea { min-height: 88px; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--color-text-muted); }

/* The dropdown chevron is a hard-coded light-theme grey; lighten it on dark. */
@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0 8px 0 0;
  accent-color: var(--color-primary);
  vertical-align: -3px;
}

/* A form as its own padded surface (not bare fields floating on the page
   background), with fields arranged in 2-3 responsive columns rather than one
   long single-column stack. Group related fields with .field so each one
   occupies exactly one grid cell; span a field across every column with
   .field-wide (e.g. a textarea or a field that reads oddly split). */
.form-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 28px 20px;
  box-shadow: var(--shadow-xs);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px 20px;
}
.form-grid .field { min-width: 0; }
.form-grid .field-wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1.5px solid transparent;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

button:hover, .btn:hover { background: var(--color-primary-hover); text-decoration: none; }
button:active, .btn:active { background: var(--color-primary-active); transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-bg-inset); border-color: var(--color-text-faint); }
.btn-secondary:active { background: var(--color-border); }

.btn-danger { background: var(--color-danger); }
.btn-danger:hover { filter: brightness(0.92); background: var(--color-danger); }

.btn-success { background: var(--color-success); }
.btn-success:hover { filter: brightness(0.92); background: var(--color-success); }

/* Quiet, low-emphasis action — for utility links that shouldn't compete with
   the primary call to action next to them (e.g. a page header's secondary
   links vs. its main "New X" button). */
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg-inset); color: var(--color-text); border-color: transparent; }
.btn-ghost:active { background: var(--color-border); }

.btn-sm { min-height: 34px; padding: 6px 14px; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-block { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   Dropdown menu — a <details><summary class="btn ..."> button that reveals a
   small floating menu of links/actions (e.g. Export, Bulk Entries).
--------------------------------------------------------------------------- */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { background: var(--color-bg-inset); border-color: var(--color-text-faint); }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  min-width: 180px; z-index: 20; overflow: hidden;
}
.dropdown-menu a { display: block; padding: 8px 14px; font-size: 0.8125rem; color: var(--color-text); text-decoration: none; }
.dropdown-menu a:hover { background: var(--color-bg-inset); }

/* ---------------------------------------------------------------------------
   Alerts
--------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.alert svg { flex-shrink: 0; margin-top: 1px; }

.alert-danger { background: var(--color-danger-tint); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }
.alert-success { background: var(--color-success-tint); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.alert-warning { background: var(--color-warning-tint); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); }
.alert-info { background: var(--color-info-tint); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 25%, transparent); }

.hint { color: var(--color-text-muted); font-size: 0.8125rem; margin: -10px 0 16px; }

/* A subtitle directly under a page title needs real breathing room before the
   body content starts (dashboard/list/detail pages) — deliberately scoped to
   this one adjacency so a .hint used under a form field elsewhere is untouched. */
h1 + .hint { margin-bottom: 30px; }

/* ---------------------------------------------------------------------------
   Cards & sections
--------------------------------------------------------------------------- */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
}

.section-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   FAQ page — one <details> per question inside a .card, no JS.
---------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--color-text); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; display: inline-block; width: 16px; color: var(--color-primary); font-weight: 700; }
.faq-item[open] summary::before { content: "\2212"; }
.faq-answer { margin: 10px 0 0 16px; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; max-width: 680px; }
.faq-answer code { background: var(--color-bg-inset); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }

/* ---------------------------------------------------------------------------
   Auth shell
--------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--sidebar-bg);
}

/* A quiet ledger-line watermark behind the card — the only decorative flourish
   on the page, evoking a bank statement/vault rather than a generic blob
   gradient. Respects reduced-motion (it is static regardless). */
.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-gold) 22%, transparent), transparent 40%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 45%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 34px);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}

/* A few extra fields (website/phone/address) make the default 420px feel
   cramped on Create Company specifically — every other auth screen keeps the
   default width. */
.auth-card--wide {
  max-width: 480px;
}

.brand-mark {
  display: inline-block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.brand-sub {
  color: var(--color-text-muted);
  font-size: 0.83rem;
  margin-bottom: 26px;
}

.auth-footer {
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   App shell (post-login) — dark navy sidebar, light content area.
--------------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.app-sidebar {
  width: 252px;
  background: linear-gradient(190deg, var(--sidebar-bg-2), var(--sidebar-bg) 55%);
  padding: 22px 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
}

.app-sidebar .brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 28px;
}

.app-sidebar .brand-mark {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 9px;
  box-shadow: none;
}
.app-sidebar .brand { font-size: 1.02rem; margin-bottom: 0; line-height: 1.2; color: #fff; }
.app-sidebar .brand-sub { font-size: 0.72rem; margin-bottom: 0; line-height: 1.2; color: var(--sidebar-text-faint); }

.app-sidebar nav { display: flex; flex-direction: column; gap: 3px; }

.nav-group-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sidebar-text-faint);
  padding: 16px 12px 6px;
}
.nav-group-label:first-child { padding-top: 4px; }

.app-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-full);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 42px;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}

.app-sidebar nav a svg { flex-shrink: 0; opacity: 0.9; }

.app-sidebar nav a:hover { background: var(--sidebar-bg-hover); color: #fff; text-decoration: none; }

.app-sidebar nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: var(--shadow-sm);
}

.app-sidebar nav a.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--sidebar-gold);
}

.nav-divider { height: 1px; background: var(--sidebar-border); margin: 12px 10px; }

.app-main { flex: 1; padding: 26px 40px 48px; min-width: 0; background: var(--color-bg); }

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: -26px -40px 28px;
  padding: 18px 40px;
  gap: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.user-chip { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--color-text-muted); }

.role-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

/* Topbar FAQ/help icon — a small pulsing dot draws the eye to it without being a
   flashing/blinking element (harder to read, more distracting) — the icon itself
   stays static, only the dot behind its corner animates. */
.faq-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.faq-bell:hover { background: var(--color-bg-inset); color: var(--color-primary); }
.faq-bell-dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent);
  animation: faq-bell-pulse 2.2s ease-out infinite;
}
@keyframes faq-bell-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); }
}

/* Guided page tour (page-tour.js) — a highlight ring whose own oversized box-shadow
   dims the rest of the page (a "spotlight cutout": no shadow falls inside the ring's
   own border, so the target stays undimmed) plus a floating card. No separate
   backdrop element, and pointer-events stay off so the page underneath is still
   usable while a tour is running. */
.tour-ring {
  position: absolute;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4000px color-mix(in srgb, #0b1730 32%, transparent);
  z-index: 9991;
  pointer-events: none;
  transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
}
.tour-card {
  position: absolute;
  z-index: 9992;
  width: min(320px, calc(100vw - 24px));
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  transition: top 160ms ease, left 160ms ease;
}
.tour-counter { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.tour-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-text); margin-bottom: 6px; }
.tour-text { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); margin-bottom: 14px; }
.tour-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-skip { background: transparent; border: none; color: var(--color-text-faint); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; min-height: 0; text-decoration: underline; }
.tour-skip:hover { color: var(--color-text-muted); }
.tour-nav { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .tour-card { width: calc(100vw - 24px); }
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* The registered company's name in the topbar — a small workspace identifier,
   distinct from the fixed "Harvhills Payroll" product brand in the sidebar. */
.company-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.company-chip svg { color: var(--color-primary); flex-shrink: 0; }
.company-chip-logo { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; flex-shrink: 0; background: var(--color-bg-inset); }

/* A pill-style search input — used on the Employees list, the one place a
   free-text search is real functionality, not decoration. */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-inset);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  padding: 0 14px;
  min-width: 240px;
  flex: 1;
  max-width: 360px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.searchbar:focus-within { background: var(--color-surface); border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.searchbar svg { color: var(--color-text-faint); flex-shrink: 0; }
.searchbar input {
  border: none;
  min-height: 40px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
}
.searchbar input:focus { box-shadow: none; }

/* Filter row (search + select + button) sitting above a list/table — a
   slightly raised strip rather than bare fields on the page background. */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.filter-bar .searchbar { background: var(--color-bg-inset); }
.filter-bar select { width: auto; flex: 0 0 auto; margin-bottom: 0; min-width: 160px; }
.filter-bar button { flex: 0 0 auto; }

@media (max-width: 860px) {
  .app-topbar { margin: -14px -14px 20px; padding: 14px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .searchbar { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Status badges
--------------------------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-neutral { background: var(--color-bg-inset); color: var(--color-text-muted); }
.status-info { background: var(--color-info-tint); color: var(--color-info); }
.status-success { background: var(--color-success-tint); color: var(--color-success); }
.status-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.status-danger { background: var(--color-danger-tint); color: var(--color-danger); }

/* ---------------------------------------------------------------------------
   Lifecycle stepper — for a real ordered state machine (e.g. a payroll run's
   Draft -> Calculated -> Review -> Approved -> Locked -> Paid -> Reconciled
   progression, docs/03-domain-model.md §4), not decorative step numbering.
   Use only where the underlying content genuinely has that shape.
--------------------------------------------------------------------------- */
.stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 4px; }

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 84px;
  flex: 1;
  position: relative;
}

.stepper-track {
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}
.stepper-step:first-child .stepper-track { display: none; }

.stepper-step.is-complete .stepper-track,
.stepper-step.is-current .stepper-track { background: var(--color-gold); }

.stepper-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-faint);
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 1;
  flex-shrink: 0;
}

.stepper-step.is-complete .stepper-dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.stepper-step.is-current .stepper-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-tint);
}

.stepper-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.3;
}
.stepper-step.is-complete .stepper-label,
.stepper-step.is-current .stepper-label { color: var(--color-text); }

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  border-bottom: 1.5px solid var(--color-border);
  white-space: nowrap;
}

td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  vertical-align: middle;
}

tbody tr:hover td { background: var(--color-bg-inset); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.row-clickable { cursor: pointer; }

/* Key/value tables (no <thead>) get a lighter treatment for the label column */
table:not(:has(thead)) th {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  width: 220px;
  border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   Misc components
--------------------------------------------------------------------------- */
.mfa-qr {
  display: flex;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

.mfa-qr svg {
  max-width: 220px;
  height: auto;
}

code.secret {
  display: block;
  background: var(--color-bg-inset);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 1.5px;
  word-break: break-all;
  margin-bottom: 16px;
  color: var(--color-text);
}

.recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
}
.recovery-codes div {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Stat cards (dashboard, payroll run) — white card, icon badge, big tabular
   figure. A thin navy-to-gold top accent ties the signature color into every
   stat without overusing it.
--------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.stat-icon.tone-primary { background: var(--color-primary-tint); color: var(--color-primary); }
.stat-icon.tone-info { background: var(--color-info-tint); color: var(--color-info); }
.stat-icon.tone-success { background: var(--color-success-tint); color: var(--color-success); }
.stat-icon.tone-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.stat-icon.tone-gold { background: var(--color-gold-tint); color: var(--color-gold-deep); }

.stat-card .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
  line-height: 1.15;
}
.stat-card .stat-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 5px;
}
.stat-card .stat-note { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 6px; }

/* Activity feed (dashboard "Recent Activity") */
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-row:last-child { border-bottom: none; padding-bottom: 0; }
.activity-row .activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 6px;
  flex-shrink: 0;
}
.activity-row .activity-text { font-size: 0.875rem; color: var(--color-text); }
.activity-row .activity-meta { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 2px; }

details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { color: var(--color-text-muted); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }

/* ---------------------------------------------------------------------------
   Layout grids — collapse to a single column on narrow screens instead of
   overflowing (used in place of inline grid-template-columns so the
   breakpoint below can actually apply).
--------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; }

.button-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Public pages (Pricing) — no sidebar, meant to be seen logged-out. Reuses the
   auth-shell's navy/ledger-line language for the hero only; the rest of the
   page sits on the ordinary light --color-bg, same surfaces as the app itself.
--------------------------------------------------------------------------- */
.public-page { background: var(--color-bg); }

.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 40px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.public-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  text-decoration: none;
}
.public-brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.public-nav { display: flex; align-items: center; gap: 18px; }
.public-nav a:not(.btn) { color: var(--color-text-muted); font-weight: 600; font-size: 0.9rem; }
.public-nav a:not(.btn):hover { color: var(--color-text); }

.public-footer {
  text-align: center;
  padding: 28px 20px 40px;
  color: var(--color-text-faint);
  font-size: 0.8rem;
}

.pricing-hero {
  position: relative;
  overflow: hidden;
  background: var(--sidebar-bg);
  padding: 64px 24px 56px;
  text-align: center;
}
.pricing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--color-gold) 20%, transparent), transparent 42%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 45%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 34px);
  pointer-events: none;
}
.pricing-hero h1 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.pricing-hero p {
  position: relative;
  color: var(--sidebar-text);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

.pricing-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 290px;
  margin: -18px auto 28px;
  padding: 4px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pricing-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pricing-toggle-btn.is-active {
  background: var(--color-primary);
  color: #fff;
}
.pricing-toggle-save {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-tint);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.pricing-toggle-btn.is-active .pricing-toggle-save {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}
/* .pricing-grid's own -36px pull-up is tuned for sitting directly under the hero
   — when the Monthly/Yearly toggle comes between them instead, that same pull-up
   drags the grid (and a recommended card's badge, which already sticks up its own
   -13px above the card) into the toggle. Override it to plain, positive spacing
   whenever a toggle precedes the grid. */
.pricing-toggle + .pricing-grid {
  margin-top: 32px;
}

.pricing-grid {
  max-width: 1080px;
  margin: -36px auto 60px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  position: relative;
}

.pricing-card {
  position: relative;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.pricing-card.is-recommended {
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}
.pricing-card .pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.pricing-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 4px 0 4px;
  color: var(--color-text);
}
.pricing-card .pricing-price {
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 10px 0 2px;
}
.pricing-card .pricing-price small { font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); }
/* The VAT-inclusive total is the number a buyer will actually pay — shown at normal
   size and full text colour, not as a faint footnote. */
.pricing-card .pricing-vat-note { font-size: 0.9rem; color: var(--color-text); margin-top: -8px; margin-bottom: 12px; }
.pricing-card .pricing-vat-note .pricing-total-amount { font-weight: 700; }
.pricing-card .pricing-vat-note .pricing-total-label { color: var(--color-text-muted); }
.pricing-card .pricing-savings { font-size: 0.75rem; font-weight: 600; color: var(--color-success); background: var(--color-success-tint); display: inline-block; padding: 3px 9px; border-radius: var(--radius-full); margin: -6px 0 12px; }
.pricing-card .pricing-savings[hidden] { display: none; }
.pricing-card .pricing-description { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.55; margin-bottom: 18px; min-height: 42px; }
.pricing-card .pricing-limits { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.pricing-card .pricing-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pricing-card .pricing-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--color-text); }
.pricing-card .pricing-features li.is-off { color: var(--color-text-faint); }
.pricing-card .pricing-features svg { flex-shrink: 0; margin-top: 2px; }
.pricing-card .pricing-features li.is-off svg { color: var(--color-text-faint); }
.pricing-card .pricing-features li:not(.is-off) svg { color: var(--color-success); }
.pricing-card .btn { width: 100%; }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; padding: 14px; border-right: none; border-bottom: 1px solid var(--sidebar-border); }
  .app-sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .app-sidebar nav a { padding: 8px 12px; }
  .app-sidebar nav a.active::before { display: none; }
  .nav-group-label { width: 100%; padding: 10px 12px 2px; }
  .app-main { padding: 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .searchbar { max-width: none; }
  .public-header { padding: 14px 18px; }
  .pricing-hero { padding: 48px 18px 44px; }
  .pricing-grid { grid-template-columns: 1fr; margin-top: -24px; padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Accessibility helpers, legal pages, cookie notice, consent checkbox
   (added 2026-10-28 — compliance pass)
--------------------------------------------------------------------------- */

/* Text that screen readers read but sighted users don't see (table captions,
   "opens in a new tab", labels whose meaning is clear from context). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First Tab stop on every page: jumps keyboard users past the navigation. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--color-gold-bright); outline-offset: 2px; }

/* <main> is focusable (tabindex="-1") only so the skip link can move focus into it;
   it shouldn't draw a ring around the whole page. */
main[tabindex="-1"]:focus { outline: none; }

/* The default focus ring is navy — invisible on the navy sidebar and auth backdrop. */
.app-sidebar :focus-visible, .auth-shell .auth-legal :focus-visible { outline-color: #ffffff; }

/* Links inside running text must not rely on colour alone to be recognisable. */
p a, li a, .hint a, .alert a, .auth-footer a, .legal-doc a { text-decoration: underline; text-underline-offset: 2px; }

/* Consent checkbox (signup / invite): unticked by default, label is the click target. */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; }
.consent input[type="checkbox"] { margin: 3px 0 0; flex-shrink: 0; width: 18px; height: 18px; }
.consent label { margin: 0; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }

/* Legal links (footer of every layout) */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 0.8125rem; }
.legal-links a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-links a:hover { color: var(--color-text); }
.public-footer .legal-links { margin-bottom: 8px; }
.app-legal { padding: 8px 40px 28px; background: var(--color-bg); }
.auth-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.auth-legal .legal-links a { color: var(--sidebar-text); }
.auth-legal .legal-links a:hover { color: #ffffff; }

/* Cookie notice — informational, bottom of the screen, never blocks the page */
.cookie-notice {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 900;
  max-width: 720px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1; font-size: 0.875rem; }
.cookie-notice .btn { flex-shrink: 0; }
@media (max-width: 560px) { .cookie-notice { flex-direction: column; align-items: stretch; } }

/* Legal documents */
.legal-doc { max-width: 780px; margin: 0 auto; padding: 36px 20px 72px; }
.legal-doc h1 { font-size: 1.9rem; margin-bottom: 10px; }
.legal-doc h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.legal-doc p, .legal-doc li { line-height: 1.7; }
.legal-doc ul { padding-left: 22px; margin: 0 0 14px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc code { background: var(--color-bg-inset); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.legal-tabs a { padding: 6px 14px; border: 1px solid var(--color-input-border); border-radius: var(--radius-full); font-size: 0.85rem; color: var(--color-text); text-decoration: none; }
.legal-tabs a:hover { background: var(--color-bg-inset); }
.legal-tabs a.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 600; }
.legal-updated { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 22px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 10px 0 18px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--color-border-strong); }
.legal-table thead th { background: var(--color-bg-inset); }
.legal-table tbody th { font-weight: 500; }

/* Show / hide password eye button (public/assets/js/password-toggle.js) */
.password-field { position: relative; }
.password-field input[type="password"],
.password-field input[type="text"] { padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 44px; /* same height as the input (min-height: 44px) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.password-toggle:hover { color: var(--color-text); background: transparent; }
.password-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Plan badge colour variants (chosen per plan on the Plans page). All are white text
   on a deep background (>= 6:1, WCAG AA) in both light and dark mode; the default
   "gold" badge keeps its theme-aware tokens. */
.pricing-card .pricing-badge--green { background: #166534; color: #ffffff; }
.pricing-card .pricing-badge--red { background: #b42318; color: #ffffff; }
.pricing-card .pricing-badge--blue { background: #1d4ed8; color: #ffffff; }
.pricing-card .pricing-badge--neutral { background: #475569; color: #ffffff; }

/* Promotional-badge field group on the Plans admin forms */
.badge-fields { border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 12px 14px 4px; margin: 0 0 16px; }
.badge-fields legend { font-weight: 600; font-size: 0.875rem; padding: 0 6px; }


/* ---------------------------------------------------------------------------
   Modal dialog — a native <dialog class="modal"> opened with [data-dialog-open]
   (public/assets/js/dialog-modal.js). Centered over a dimmed backdrop; the body
   scrolls if the content is taller than the window.
--------------------------------------------------------------------------- */
.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(10, 18, 40, 0.55); }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--color-border);
}
.modal-head h2 { margin: 0; font-size: 1.125rem; }
.modal-close {
  min-height: 36px; min-width: 36px; padding: 0; font-size: 1.5rem; line-height: 1;
  background: transparent; color: var(--color-text-muted, var(--color-text)); border: 1px solid transparent; border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--color-bg-inset); }
.modal-body { padding: 18px 22px 22px; overflow-y: auto; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.modal-grid .field { margin: 0; }
.modal-wide { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.modal-section { padding: 14px 0; border-top: 1px solid var(--color-border); }
.modal-section:first-child { padding-top: 0; border-top: 0; }
.modal-section h3 { margin: 0 0 4px; font-size: 0.9375rem; }
.modal-section .hint { margin: 0 0 10px; }
.modal-section .field { margin-bottom: 10px; }
@media (max-width: 520px) {
  .modal-grid { grid-template-columns: 1fr; }
}