/* SPDX-License-Identifier: Apache-2.0 */

/* LeashPass — minimal hand-rolled CSS, no framework, no build step.
   Uses CSS custom properties for the palette so future theming is a
   one-block change.

   Design system overview (Phase 1b.LP+):
     - Brand palette: deep navy (--primary) + lime (--accent) + slate
       neutrals. Exposed as --primary, --primary-bright, --accent,
       --accent-bright, --neutral-* at :root so both marketing and app
       contexts share them.
     - App pages: light surface with deep-navy text and lime CTAs.
     - Marketing pages (`body.marketing` selectors below): dark surface
       with the same accents.
     - Existing app variable names (--bg, --ink, --muted, --border,
       --accent-2, --error-bg, --error-ink) are kept as aliases that
       map onto the unified palette so legacy class rules still work.

   Contrast rules: lime backgrounds always use dark navy text
   (--primary), never white. Verified with the WCAG AA formula in the
   Phase 1b.LP commit message. */

:root {
  /* ── Brand palette (shared across marketing + app) ── */
  --primary:         #0f1e3d;
  --primary-bright:  #1e3a8a;
  --accent:          #84cc16;
  --accent-bright:   #a3e635;

  /* Slate neutral scale */
  --neutral-900:     #0f172a;
  --neutral-800:     #1e293b;
  --neutral-700:     #334155;
  --neutral-600:     #475569;
  --neutral-500:     #64748b;
  --neutral-400:     #94a3b8;
  --neutral-300:     #cbd5e1;
  --neutral-200:     #e2e8f0;
  --neutral-100:     #f1f5f9;
  --neutral-50:      #f8fafc;

  /* Semantic */
  /* Danger reds tuned for high contrast with white text:
       #991b1b on white = 6.66:1 (AA Large + AA normal text)
       #7f1d1d on white = 8.27:1 (AAA normal text) — used for hover */
  --danger:          #991b1b;
  --danger-hover:    #7f1d1d;
  --danger-bg:       #fee2e2;
  --danger-ink:      #7f1d1d;
  --warn-bg:         #fef3c7;
  --warn-ink:        #78350f;
  --success-bg:      #d1fae5;
  --success-ink:     #065f46;
  --info-bg:         #dbeafe;
  --info-ink:        #1e40af;

  /* App-page surface tokens (light theme) */
  --bg:        var(--neutral-50);
  --surface:   #ffffff;
  --ink:       var(--primary);
  --muted:     var(--neutral-600);
  --border:    var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* Legacy aliases — kept so old class rules keep compiling. */
  --accent-2:  var(--primary-bright);
  --error-bg:  var(--danger-bg);
  --error-ink: var(--danger-ink);

  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15,30,61,0.06);
  --shadow-md: 0 4px 14px rgba(15,30,61,0.08);

  --font:      system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ──────────────────────────────────────────────────────────────
     Phase 2.3 chat-pattern design tokens.

     The workflow widget proved the structured-pattern approach;
     Phase 2.3 codifies the palette + spacing so every chat
     pattern (review-queue-table, priority-callout, action-prompt,
     summary-card, status badges) shares one source of truth.

     Naming:
       --lp-status-*  : semantic per-status color pair
                        (badge background + foreground)
       --lp-urgency-* : red/amber/green tier for callouts
       --lp-pattern-* : tokens specific to pattern surface
                        chrome (cards, borders, dividers)

     Color contrast: status badge pairings all check at least
     4.5:1 (AA normal text) against the badge background;
     verified with WebAIM contrast checker.

     Existing chat CSS keeps its hardcoded fallbacks for now
     (`var(--neutral-300, #d4d4d4)` etc) so a Phase 2.3 rev that
     touches one component doesn't force a full CSS audit — new
     patterns reference the tokens; the workflow widget can
     adopt them incrementally. */
  --lp-status-submitted-bg:    #e3f2fd;
  --lp-status-submitted-ink:   #1565c0;
  --lp-status-under-review-bg: #fff3e0;
  --lp-status-under-review-ink:#e65100;
  --lp-status-needs-info-bg:   #fff8e1;
  --lp-status-needs-info-ink:  #f57f17;
  --lp-status-approved-bg:     #e8f5e9;
  --lp-status-approved-ink:    #2e7d32;
  --lp-status-rejected-bg:     #ffebee;
  --lp-status-rejected-ink:    #c62828;
  --lp-status-service-bg:      #f3e5f5;
  --lp-status-service-ink:     #6a1b9a;
  --lp-status-skipped-bg:      var(--neutral-100);
  --lp-status-skipped-ink:     var(--neutral-500);

  /* Urgency tiers — left accent for callouts + row badges.
     The pair (bg, ink) is for the small inline urgency pill;
     the solo --lp-urgency-*-edge is for the left-border
     accent on cards and table rows. */
  --lp-urgency-high-edge:    #dc2626;
  --lp-urgency-high-bg:      #fee2e2;
  --lp-urgency-high-ink:     #7f1d1d;
  --lp-urgency-medium-edge:  #f59e0b;
  --lp-urgency-medium-bg:    #fef3c7;
  --lp-urgency-medium-ink:   #78350f;
  --lp-urgency-low-edge:     #16a34a;
  --lp-urgency-low-bg:       #d1fae5;
  --lp-urgency-low-ink:      #065f46;

  /* Pattern surface chrome — bordered cards, hover row tint,
     row dividers. References neutrals so dark-mode would only
     need one token swap. */
  --lp-pattern-surface:        #ffffff;
  --lp-pattern-surface-muted:  var(--neutral-50);
  --lp-pattern-border:         var(--neutral-200);
  --lp-pattern-border-strong:  var(--neutral-300);
  --lp-pattern-row-hover:      var(--neutral-50);
  --lp-pattern-divider:        var(--neutral-100);

  /* Action-prompt destructive accent. The non-destructive
     action prompt uses --primary / --accent; destructive
     borrows the danger pair. */
  --lp-action-destructive-edge: var(--danger);
  --lp-action-destructive-bg:   #fff5f5;
  --lp-action-destructive-ink:  var(--danger-ink);
  --lp-action-default-edge:     var(--primary);
  --lp-action-default-bg:       #f0f9ff;
  --lp-action-default-ink:      var(--primary);

  /* Compact spacing scale for chat patterns — tighter than
     the page-level spacing to maximise scannability when
     reviewing many items. */
  --lp-space-xs: 0.25rem;
  --lp-space-sm: 0.5rem;
  --lp-space-md: 0.75rem;
  --lp-space-lg: 1rem;
  --lp-space-xl: 1.25rem;

  /* Compact font sizes for chat patterns. */
  --lp-font-xs:   0.75rem;
  --lp-font-sm:   0.85rem;
  --lp-font-base: 0.95rem;
  --lp-font-lg:   1.05rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  color: var(--primary);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(1.6rem, 1vw + 1.4rem, 2rem); margin-top: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

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

/* Keyboard-only focus rings — lime accent against light backgrounds
   gives ~6:1 contrast vs the page bg which clears AA Non-text. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Visually hidden but available to screen readers and focus
   traversal. Used for the table actions header and any other
   labels-without-visible-text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-main link for keyboard users. Truly hidden until focused
   (the older `top: -40px` trick was fragile — at non-default zoom or
   in some browsers the link could leak below the viewport edge and
   show up as a small lime sliver in the header area). This uses the
   modern "visually-hidden until focused" pattern. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.6rem 1rem;
  overflow: visible;
  clip: auto;
  background: var(--accent);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
  box-shadow: var(--shadow-md);
}

/* ── App header ────────────────────────────────────────────────
   Mirrors the marketing header so brand identity is consistent.
   Sticky dark bar with the LeashPass mark on the left and nav on
   the right. Class names kept (.topbar, .brand, .nav, .link-button)
   so existing templates render unchanged. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: rgba(15, 30, 61, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--neutral-100);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  font-size: 1.05rem;
}
/* If a template sets the legacy <img>-only brand, scale it down. */
.brand img { height: 32px; width: auto; border-radius: 6px; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a,
.nav .link-button {
  color: var(--neutral-300);
  text-decoration: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav a:hover,
.nav .link-button:hover {
  color: #fff;
  text-decoration: none;
}
.nav .nav-cta {
  background: var(--accent);
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.nav .nav-cta:hover {
  background: var(--accent-bright);
  color: var(--primary);
}
.nav .nav-user {
  color: var(--neutral-400);
  font-size: 0.85rem;
}

.logout-form { display: inline; }

@media (max-width: 640px) {
  .topbar { padding: 0.75rem 1rem; }
  .nav { gap: 1rem; }
  .nav .nav-user { display: none; }
}

.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.container--narrow { max-width: 720px; }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Forms ───────────────────────────────────────────────────── */

label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.92rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
  font: inherit;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: var(--neutral-400);
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18);
}

label small {
  color: var(--muted);
  font-weight: 400;
}

/* ── Buttons (primary / secondary / danger) ─────────────────────
   Class names kept for backwards compat. Lime backgrounds use
   --primary text per the WCAG fix. Text is set to 700 weight so the
   dark navy reads unmistakably even against an electric-lime fill
   (technical contrast is ~9.3:1, but the visual impression of
   "muddy" thin text is what we want to avoid). */

button.primary,
.button,
.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: var(--primary);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
button.primary:hover,
.button:hover,
.primary-link:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--primary);
  transform: translateY(-1px);
  text-decoration: none;
}
button.primary:active,
.button:active,
.primary-link:active { transform: translateY(0); }
button.primary:disabled,
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-secondary,
button.secondary,
.secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  padding: 0.6rem 1.1rem;
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.button-secondary:hover,
button.secondary:hover,
.secondary-link:hover {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--primary);
  text-decoration: none;
}

.error {
  background: var(--danger-bg);
  color: var(--danger-ink);
  border: 1px solid rgba(127, 29, 29, 0.2);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* ── Section dividers ─────────────────────────────────────────
   Used as a soft separator between major sections of a card or
   detail page. Replaces the older inline `style="margin:2rem 0"`. */
hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

/* ── Definition / key-value list ──────────────────────────────── */

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.kv dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}
.kv dd { margin: 0; color: var(--primary); }

.muted { color: var(--muted); }

/* ── Inline link-style nav lists (admin landing) ──────────────── */

.nav-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.nav-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.nav-list li:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.nav-list li a {
  font-weight: 600;
  font-size: 0.98rem;
}

.footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

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

.table-wrap {
  /* Horizontal scroll for narrow viewports rather than letting a wide
     table push the layout. The inner table keeps full width. */
  overflow-x: auto;
  margin: 1rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* `.data` is the original class; `.data-table` is the alias used by a
   handful of admin templates. Keeping both compiles cleanly without a
   template churn. */
table.data,
table.data-table {
  width: 100%;
  border-collapse: collapse;
}
table.data th, table.data td,
table.data-table th, table.data-table td {
  text-align: left;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tr:last-child td,
table.data-table tr:last-child td { border-bottom: none; }
table.data th,
table.data-table th {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-strong);
}
table.data tbody tr:hover,
table.data-table tbody tr:hover { background: rgba(132, 204, 22, 0.04); }
table.data a,
table.data-table a { color: var(--primary-bright); font-weight: 600; }

/* When a table-style table sits outside a .table-wrap (some admin
   pages were written without the wrap), still give it a clean
   border + radius so it looks like a card. */
.page-header + table.data,
.page-header + table.data-table,
h2 + table.data,
h2 + table.data-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 1.5rem;
}

/* ── Inline code ─────────────────────────────────────────────── */

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  color: var(--primary);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ── Badges ──────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
/* Tuned to harmonise with the navy + lime palette while preserving
   semantic distinctness against a light background. */
.badge-active   { background: rgba(132,204,22,0.14); color: #3f6212; border-color: rgba(132,204,22,0.35); }
.badge-revoked  { background: var(--danger-bg);     color: var(--danger-ink); border-color: rgba(127,29,29,0.18); }
.badge-expired  { background: var(--warn-bg);       color: var(--warn-ink);   border-color: rgba(120,53,15,0.18); }
.badge-archived { background: var(--neutral-100);   color: var(--neutral-700);border-color: var(--border-strong); }

/* Inline link-styled buttons used inside tables and detail pages
   (Resend, Revoke, Archive, Remove, Delete, etc.). The intent is
   "looks like a link, behaves like a POST form button" — strip the
   default OS button chrome so they read as text actions next to the
   surrounding row content. The .nav .link-button rule above wins by
   specificity inside the topbar (logout); this base rule applies
   everywhere else. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary-bright);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
}
.link-button:hover { color: var(--primary); text-decoration: underline; }
.link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.link-button[disabled] {
  color: var(--neutral-500);
  cursor: not-allowed;
  text-decoration: none;
}

.link-button.danger {
  color: var(--danger);
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
}
.link-button.danger:hover {
  color: var(--danger-hover);
  background: none;
  text-decoration: underline;
}

.inline { display: inline; }

fieldset.scopes {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--neutral-50);
}
fieldset.scopes legend { font-weight: 600; padding: 0 0.4rem; color: var(--primary); }

.form-hint {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0.35rem 0;
  font-size: 0.95rem;
}

/* ── Callout (bootstrap one-time-token, key-minted page) ───── */

.callout {
  background: rgba(132, 204, 22, 0.08);
  border: 1px solid rgba(132, 204, 22, 0.4);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.callout strong { color: var(--primary); }
.callout pre {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--primary);
  margin: 0.75rem 0;
}

/* ── Property assignments list ───────────────────────────────── */

.assignment-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.assignment-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.assignment-list li .role-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--neutral-100);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.action-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .container { padding: 0 1rem; margin: 1rem auto; }
  .card { padding: 1.25rem; }
  table.data { font-size: 0.9rem; }
  table.data th, table.data td { padding: 0.55rem 0.7rem; }
  .form-row { flex-direction: column; }
  .action-bar { flex-direction: column; align-items: stretch; }
  .action-bar > * { width: 100%; justify-content: center; }
}

/* No animations today, but if any land later, honour the user's
   reduced-motion preference at source. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Auth-flow card / form-card ────────────────────────────────
   Used by /login, /bootstrap, /forgot-password, /reset-password,
   /accept-invitation. Centered narrow card with the brand mark
   above. The optional .auth-card--wide modifier handles bootstrap
   which has more fields. */

.auth-card {
  max-width: 460px;
  margin: 3rem auto 1rem;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.auth-card--wide { max-width: 560px; }
.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.auth-card > p:first-of-type {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Centered brand mark above the heading. */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
}
.auth-brand img { width: 36px; height: 36px; border-radius: 8px; }
.auth-brand:hover { color: var(--primary); text-decoration: none; }

/* Within an auth-card, form-card is borderless (don't double-border) */
.auth-card .form-card {
  border: 0;
  padding: 0;
  box-shadow: none;
  max-width: 100%;
  background: transparent;
}

/* Below-card link row ("Forgot password?", "Back to sign in"). */
.auth-aux {
  text-align: center;
  margin: 0.5rem auto 3rem;
  max-width: 460px;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-aux a { font-weight: 600; }

/* ── Demo-credentials panel (Phase 1f.2) ───────────────────────
   Rendered below the login card when the server is in non-
   production mode AND the database contains seeded data. The
   panel is visually subordinate to the form (lighter weight,
   muted accent) so it never looks like the primary call to
   action. Mobile: stacks identical to the login card. */
.demo-credentials {
  max-width: 540px;
  margin: 0.5rem auto 3rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.demo-credentials-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.demo-credentials-header h2 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--primary);
}
.demo-credentials-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-bright);
  background: rgba(30, 58, 138, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.demo-credentials-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.demo-credentials-sub code {
  font-size: 0.8rem;
  background: var(--neutral-100, #f3f4f6);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.demo-credentials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.demo-credentials-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--neutral-100, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.demo-credentials-meta {
  flex: 1;
  min-width: 0;
}
.demo-credentials-role {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--primary);
  margin-bottom: 0.3rem;
}
.demo-credentials-fields {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
}
.demo-credentials-label {
  color: var(--muted);
  min-width: 4rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.demo-credentials-fields code {
  font-size: 0.82rem;
  word-break: break-all;
  color: var(--ink);
}
.demo-credentials-prefill {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
}
@media (max-width: 560px) {
  .demo-credentials-row {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-credentials-prefill {
    width: 100%;
  }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  max-width: 720px;
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: flex;
  gap: 1rem;
}
.form-row .form-group { flex: 1; }

/* Three-column field layout for compact address-style fieldsets. */
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--primary);
  font-size: 0.92rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  width: 100%;
}
/* Focus state already handled by the global input:focus rule above. */

.form-static { margin: 0; color: var(--muted); }
.form-note   { color: var(--muted); font-size: 0.9rem; }

.form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.required { color: var(--danger); font-weight: 700; }
.optional  { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--primary);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  background: var(--neutral-50);
}
legend {
  font-weight: 600;
  padding: 0 0.4rem;
  color: var(--primary);
}

/* ── Phase 1f.4 site-settings form ────────────────────────────
   Shared form primitives for radio-row / field-hint /
   advanced-info. Sized to read alongside the existing form-card
   pattern; the spacing aligns with the .form-group rhythm above. */

.site-settings-form fieldset {
  margin-bottom: 1.25rem;
}

.site-settings-form .field-hint {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}

.site-settings-form .field {
  display: block;
}

.site-settings-form .field textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  resize: vertical;
  min-height: 4.5rem;
}

.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.radio-row input[type="radio"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.radio-row span { line-height: 1.45; }
.radio-row strong { color: var(--primary); }

/* "How these settings interact with the base prompt" disclosure. */
.advanced-info {
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--neutral-50);
  font-size: 0.92rem;
}
.advanced-info summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  list-style: none; /* hide default disclosure triangle on WebKit */
}
.advanced-info summary::-webkit-details-marker { display: none; }
.advanced-info summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.advanced-info[open] summary::before { content: "▾ "; }
.advanced-info > div {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}
.advanced-info ol { padding-left: 1.2rem; }
.advanced-info ol li { margin-bottom: 0.35rem; }

/* ── Alerts ───────────────────────────────────────────────────
   All alerts use a left border + soft background, harmonised
   with the neutral surface. Semantic distinctness preserved. */

.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: 0.95rem;
}
.alert-error   { background: var(--danger-bg);  color: var(--danger-ink);  border-color: rgba(127,29,29,0.2);  border-left-color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success-ink); border-color: rgba(6,95,70,0.2);    border-left-color: var(--success-ink); }
.alert-warning { background: var(--warn-bg);    color: var(--warn-ink);    border-color: rgba(120,53,15,0.2);  border-left-color: #f59e0b; }
.alert-info    { background: var(--info-bg);    color: var(--info-ink);    border-color: rgba(30,64,175,0.18); border-left-color: var(--primary-bright); }

.empty-state {
  color: var(--muted);
  text-align: center;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--neutral-50);
  font-style: normal;
}
.empty-state p { margin: 0 0 0.75rem; }
.empty-state p:last-child { margin-bottom: 0; }

/* The .card rule is defined once at the top of this file with the
   modern lg-radius + shadow. Don't redefine it here. */

/* ── Phase 1b.3: Pet + Profile UI ──────────────────────────────── */

/* Status badges — semantic colors tuned to read on the light surface
   while staying distinct from the navy-and-lime brand palette. */
.status-badge {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.status-draft        { background: var(--neutral-100); color: var(--neutral-700); border-color: var(--border-strong); }
.status-submitted    { background: var(--info-bg);     color: var(--info-ink);    border-color: rgba(30,64,175,0.18); }
.status-under_review { background: var(--warn-bg);     color: var(--warn-ink);    border-color: rgba(120,53,15,0.18); }
.status-approved     { background: rgba(132,204,22,0.14); color: #3f6212;         border-color: rgba(132,204,22,0.35); }
.status-rejected     { background: var(--danger-bg);   color: var(--danger-ink);  border-color: rgba(127,29,29,0.18); }
.status-needs_info   { background: #fde68a;            color: #78350f;            border-color: rgba(120,53,15,0.18); }

/* ── Dashboard two-column grid ───────────────────────────────── */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.dashboard-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.dashboard-section h2 { font-size: 1.1rem; margin: 0; }

/* ── Item list (pets, profiles, residents) ───────────────────── */

.item-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.item-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.item-row:last-child { border-bottom: none; }
.item-main { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.item-main a { font-weight: 600; color: var(--primary-bright); }
.item-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Documents (Phase 1b.4) ────────────────────────────────────
   Used on the resident profile-edit page (with upload form) and
   the manager profile-show page (read-only). Same row markup so
   one CSS rule serves both contexts. */

.docs-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.docs-header h2 { margin: 0 0 0.25rem; }

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.doc-row:last-child { border-bottom: none; }
.doc-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.doc-main strong { color: var(--primary); }
.doc-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* Compact file input — vanilla browser styling but constrained so a
   long filename doesn't break the form-row layout. */
.doc-upload input[type="file"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
}
.doc-upload input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.doc-upload input[type="file"]::file-selector-button:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

@media (max-width: 640px) {
  .doc-row { flex-direction: column; align-items: flex-start; }
  .doc-actions { width: 100%; justify-content: flex-end; }
}

/* ── Review-actions panel within a profile detail card ──────── */

.review-actions {
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: none;
}
.review-actions h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0; }
.review-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.review-form:last-child { margin-bottom: 0; }
.review-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 4rem;
}

/* Danger button (destructive: reject, revoke, delete).
   Deep red (#991b1b, red-800) + white text = 6.66:1 — well above AA.
   Hover deepens to red-900 for a clear pressed-feeling state. Bold
   weight so the action is unmistakably destructive at a glance. */
button.danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  padding: 0.6rem 1.1rem;
  background: var(--danger);
  color: #fff;
  border: 1.5px solid var(--danger);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
button.danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
}

/* "Secondary" used as a button alongside review-form actions. */
button.secondary {
  /* Inherits the .button-secondary look defined above. */
}

/* ── Section / page header (title + right-aligned action) ─────
   .section-header and .page-header are synonyms — keeping both so
   neither set of templates needs to be churned. */

.section-header,
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.section-header h1, .section-header h2,
.page-header h1, .page-header h2 { margin: 0; }
.page-header > .action-bar {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Filter pill bar ────────────────────────────────────────── */

.filter-bar {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.filter-link {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  text-decoration: none;
  color: var(--primary);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.filter-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.filter-link.active:hover { color: #fff; }
.filter-link:hover:not(.active) { border-color: var(--primary); background: var(--neutral-50); }

.hint { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0; }

/* ════════════════════════════════════════════════════════════════════
   Phase 1b.LP — MARKETING / PUBLIC PAGES
   ────────────────────────────────────────────────────────────────────
   All marketing styles are scoped under `body.marketing` so the app
   palette and layout above are untouched. Class-name prefix `m-` makes
   it obvious which rules belong to the public surface.
   ════════════════════════════════════════════════════════════════════ */

body.marketing {
  /* Dark blue + lime palette per the brief. */
  --m-primary:        #0f1e3d;
  --m-primary-bright: #1e3a8a;
  --m-accent:         #84cc16;
  --m-accent-bright:  #a3e635;
  --m-n-900:          #0f172a;
  --m-n-800:          #1e293b;
  --m-n-700:          #334155;
  --m-n-600:          #475569;
  --m-n-300:          #cbd5e1;
  --m-n-100:          #e2e8f0;
  --m-n-50:           #f8fafc;
  --m-radius:         10px;
  --m-radius-lg:      16px;
  --m-shadow:         0 10px 40px -10px rgba(0,0,0,0.5);

  background: var(--m-n-900);
  color: var(--m-n-100);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

body.marketing a            { color: var(--m-accent-bright); }
body.marketing a:hover      { color: #fff; }
body.marketing a:focus-visible,
body.marketing button:focus-visible {
  outline: 2px solid var(--m-accent-bright);
  outline-offset: 3px;
}

body.marketing h1, body.marketing h2, body.marketing h3 {
  color: #fff;
  letter-spacing: -0.01em;
  font-weight: 700;
}
body.marketing h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.15; margin: 0 0 1rem; }
body.marketing h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); line-height: 1.2;  margin: 0 0 1rem; }
body.marketing h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
body.marketing p  { color: var(--m-n-300); margin: 0 0 1rem; }
body.marketing strong { color: #fff; }

/* ── layout primitives ─────────────────────────────────────────── */

.m-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.m-section {
  padding: 5rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.m-section:first-of-type { border-top: none; }
.m-section--muted { background: var(--m-primary); }
.m-section--dark  { background: #0a1428; }

@media (max-width: 640px) {
  .m-section { padding: 3rem 0; }
}

/* ── header / nav ─────────────────────────────────────────────── */

.m-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 30, 61, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.m-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.m-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.m-logo img { width: 28px; height: 28px; border-radius: 6px; }
.m-nav { display: flex; align-items: center; gap: 1.75rem; }
.m-nav a {
  color: var(--m-n-300);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.m-nav a:hover { color: #fff; }

@media (max-width: 640px) {
  .m-nav { gap: 1rem; }
  .m-nav a:not(.m-cta) { display: none; }
}

/* ── buttons / CTAs ───────────────────────────────────────────── */

.m-cta, .m-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--m-radius);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
/* Lime CTAs: dark deep-blue text on the lime background.
   Selector is intentionally `body.marketing .m-cta--primary` (specificity
   0,2,1) so it wins over `body.marketing a` (0,1,2) — without that bump,
   the link-color inheritance paints lime-bright text on a lime button
   and contrast drops to ~1.4:1 (failing WCAG AA). With dark blue
   (#0f1e3d) on lime (#84cc16), measured contrast is ~8.7:1 — clears
   AAA for normal text. */
body.marketing .m-cta--primary,
body.marketing .m-btn--primary {
  background: var(--m-accent);
  color: var(--m-primary);
  border-color: var(--m-accent);
}
body.marketing .m-cta--primary:hover,
body.marketing .m-btn--primary:hover {
  background: var(--m-accent-bright);
  color: var(--m-primary);
  border-color: var(--m-accent-bright);
  transform: translateY(-1px);
}
body.marketing .m-cta--secondary,
body.marketing .m-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
body.marketing .m-cta--secondary:hover,
body.marketing .m-btn--secondary:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.05);
  color: #fff;
}

/* ── hero ─────────────────────────────────────────────────────── */

.m-hero {
  padding: 5rem 0 6rem;
  background: linear-gradient(180deg, var(--m-primary) 0%, var(--m-n-900) 100%);
}
.m-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.m-hero-text { max-width: 580px; }
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(132, 204, 22, 0.12);
  color: var(--m-accent-bright);
  border: 1px solid rgba(132, 204, 22, 0.4);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.m-pill-dot {
  width: 6px; height: 6px;
  background: var(--m-accent-bright);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--m-accent-bright);
}
.m-hero p.m-lede {
  font-size: 1.2rem;
  color: var(--m-n-300);
  margin-bottom: 2rem;
  max-width: 520px;
}
.m-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.m-hero-image {
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  box-shadow: var(--m-shadow);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.m-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 900px) {
  .m-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── trust strip ──────────────────────────────────────────────── */

.m-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.m-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--m-n-300);
  font-size: 0.95rem;
}
.m-trust-item svg {
  width: 22px; height: 22px;
  color: var(--m-accent-bright);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .m-trust { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* ── feature columns / cards ──────────────────────────────────── */

.m-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.m-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) {
  .m-grid-3 { grid-template-columns: 1fr; }
  .m-grid-2 { grid-template-columns: 1fr; gap: 2.5rem; }
}

.m-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--m-radius-lg);
  padding: 2rem;
}
.m-card h3 { font-size: 1.15rem; }
.m-card-icon {
  width: 36px; height: 36px;
  margin-bottom: 1rem;
  color: var(--m-accent-bright);
}

.m-perspective {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
}
.m-perspective-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}
.m-perspective-body { padding: 1.75rem; }
.m-perspective-body h3 { color: #fff; margin-bottom: 0.6rem; }
.m-perspective-body a {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
}

/* ── code blocks ──────────────────────────────────────────────── */

.m-code {
  background: #0a1426;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--m-radius);
  padding: 1.25rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--m-n-100);
  overflow-x: auto;
  line-height: 1.6;
  margin: 1rem 0;
}
.m-code code { background: none; padding: 0; color: inherit; font-family: inherit; }
.m-code .m-tok-comment { color: #64748b; font-style: italic; }
.m-code .m-tok-keyword { color: #a3e635; }
.m-code .m-tok-string  { color: #fbbf24; }
.m-code .m-tok-prompt  { color: #475569; user-select: none; }

/* ── inline code ──────────────────────────────────────────────── */
body.marketing :not(pre) > code {
  background: rgba(132, 204, 22, 0.1);
  color: var(--m-accent-bright);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.9em;
}

/* ── tabs (CSS-only via radio + label) ───────────────────────── */

.m-tabs { margin: 2rem 0; }
.m-tabs input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.m-tab-labels {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0;
}
.m-tab-labels label {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  color: var(--m-n-300);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.m-tab-labels label:hover { color: #fff; }

.m-tab-panels > div { display: none; padding-top: 1.25rem; }

#m-tab-rest:checked ~ .m-tab-labels label[for="m-tab-rest"],
#m-tab-mcp:checked  ~ .m-tab-labels label[for="m-tab-mcp"],
#m-tab-host:checked ~ .m-tab-labels label[for="m-tab-host"] {
  color: #fff;
  border-bottom-color: var(--m-accent-bright);
}
#m-tab-rest:checked ~ .m-tab-panels .m-tab-rest,
#m-tab-mcp:checked  ~ .m-tab-panels .m-tab-mcp,
#m-tab-host:checked ~ .m-tab-panels .m-tab-host {
  display: block;
}

/* ── feature lists with check icons ──────────────────────────── */

.m-checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.m-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--m-n-300);
}
.m-checklist svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--m-accent-bright);
  margin-top: 0.2rem;
}
.m-checklist li.m-todo { color: var(--m-n-600); }
.m-checklist li.m-todo svg { color: var(--m-n-700); }

/* ── FAQ ──────────────────────────────────────────────────────── */

.m-faq details {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0;
}
.m-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.m-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--m-accent-bright);
  font-weight: 400;
  margin-left: 1rem;
  transition: transform 0.15s;
}
.m-faq details[open] summary::after { content: "−"; }
.m-faq details > p {
  margin-top: 0.75rem;
  color: var(--m-n-300);
}

/* ── diagram for "why MCP" ───────────────────────────────────── */

.m-diagram {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--m-radius-lg);
  padding: 2rem;
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}
.m-diagram svg { width: 100%; max-width: 600px; height: auto; }

/* ── footer ───────────────────────────────────────────────────── */

.m-footer {
  background: var(--m-n-900);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 4rem 0 2rem;
  color: var(--m-n-300);
  font-size: 0.9rem;
}
.m-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.m-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}
.m-footer ul { list-style: none; padding: 0; margin: 0; }
.m-footer li { margin-bottom: 0.5rem; }
.m-footer a {
  color: var(--m-n-300);
  text-decoration: none;
}
.m-footer a:hover { color: #fff; }
.m-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--m-n-600);
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .m-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .m-footer-grid { grid-template-columns: 1fr; }
}

/* ── markdown-rendered docs ─────────────────────────────────── */

.m-docs {
  max-width: 820px;
  margin: 0 auto;
}
.m-docs h1 { font-size: 2.2rem; margin-bottom: 1rem; }
.m-docs h2 {
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.m-docs h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; color: #fff; }
.m-docs p, .m-docs li { color: var(--m-n-300); }
.m-docs ul, .m-docs ol { padding-left: 1.5rem; }
.m-docs li { margin-bottom: 0.5rem; }
.m-docs pre {
  background: #0a1426;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--m-radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.m-docs pre code {
  background: none;
  padding: 0;
  color: var(--m-n-100);
  font-family: var(--mono);
}
.m-docs blockquote {
  border-left: 3px solid var(--m-accent);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  color: var(--m-n-300);
  background: rgba(132, 204, 22, 0.04);
}
.m-docs table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.m-docs th, .m-docs td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.6rem 0.9rem;
  text-align: left;
}
.m-docs th { background: rgba(255,255,255,0.03); color: #fff; }
.m-docs hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 2.5rem 0; }

/* Phase 1c — score card. Bordered block with a colour cue keyed on the
   score (1 = red, 5 = green) so reviewers can scan a queue at a glance. */
.score-card {
  border-left: 4px solid var(--score-color, #888);
  background: rgba(255,255,255,0.04);
  padding: 0.9rem 1rem;
  border-radius: 4px;
  margin: 1rem 0;
}
.score-card-1 { --score-color: #c0392b; }
.score-card-2 { --score-color: #e67e22; }
.score-card-3 { --score-color: #f1c40f; }
.score-card-4 { --score-color: #2ecc71; }
.score-card-5 { --score-color: #16a085; }
.score-headline { margin: 0 0 0.4rem; font-size: 1.05rem; }
.score-meta { font-size: 0.85rem; margin: 0 0 0.6rem; }
.score-display-name { font-weight: 600; }
.score-label { font-style: italic; }
.score-breakdown { margin-top: 0.5rem; }
.score-breakdown summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.score-rules { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.score-rule {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.4rem 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: baseline;
}
.score-rule:first-child { border-top: none; }
.score-rule-points { font-variant-numeric: tabular-nums; font-weight: 600; }
.score-rule-desc { font-weight: 500; }
.score-rule-rule { font-size: 0.8rem; }
.score-rule-rationale { display: block; grid-column: 2; font-size: 0.85rem; }

/* Phase 1c — duplicate document badge. */
.doc-row-duplicate { background: rgba(241, 196, 15, 0.08); }
.status-badge.status-warning { background: #f1c40f; color: #000; }