/* ==========================================================================
   Aspire Identity: sign-in, account and admin styles.
   Tokens come from the Made by Aspire design library
   (aspire-digital/playbook/public/styles/playbook.css). Light values match
   :root there, dark values match :root[data-theme="dark"], applied here with
   prefers-color-scheme because this host ships no JavaScript.

   CSP is style-src 'self' with no 'unsafe-inline'. Every rule lives in this
   file. Never add <style>, style="" or inline scripts to a page.
   ========================================================================== */

/* -- Fonts: self-hosted (font-src 'self'), variable DM Sans covers 100-1000.
      Metric-matched fallbacks keep layout still while the web font swaps in. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/eb-garamond-italic-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.81%;
  ascent-override: 95.56%;
  descent-override: 29.86%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Serif Display Fallback";
  src: local("Georgia");
  size-adjust: 99.25%;
  ascent-override: 104.38%;
  descent-override: 33.75%;
  line-gap-override: 0%;
}

/* -- Tokens --------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Playbook palette */
  --bg: #FAF0E2;            /* warm cream canvas */
  --bg-alt: #F2EDE6;        /* light surface */
  --bg-night: #1a1f28;      /* deep nav background */
  --text: #1A1A1A;          /* design library --text: near-black */
  --text-sec: #595959;      /* design library --text-muted: AA on cream and white */
  --accent: #C4622D;        /* terracotta: large text, borders, decoration */
  --accent-dark: #A34E1A;   /* hover and button fill under white text */
  --accent-text: #A34E1A;   /* terracotta for small text (AA 5.7:1 on white) */
  --green: #4A7B5A;
  --white: #FFFFFF;         /* card surface */
  --border: #E5E5E5;
  --danger: #A33333;

  /* Derived for this host */
  --btn-fill: #A34E1A;      /* stays the same in dark mode: white on it is 5.7:1 */
  --btn-fill-hover: #8A3F12;
  --field-border: #8C8C8C;  /* 3.3:1 on white, meets non-text contrast */
  --focus: #A34E1A;
  --tint-accent: rgba(196, 98, 45, 0.10);
  --tint-green: #EDF3EE;
  --tint-danger: #FBEDEC;
  --tint-warn: #FBF1DF;
  --warn: #8A5A00;
  --pill-ok-text: #2F5A3C;
  --pill-bg: #F2EDE6;
  --pill-role-text: #8A3F12;

  /* Type */
  --font-display: "DM Serif Display", "DM Serif Display Fallback", Georgia, serif;
  --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  /* Spacing, radii, shadows, motion */
  --space-card: 32px;
  --space-component: 16px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  --ease-out-soft: cubic-bezier(0.19, 1, 0.22, 1);
  --transition-fast: 0.22s ease;
  --transition-slow: 0.45s var(--ease-out-soft);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1b1a;
    --bg-alt: #242524;
    --bg-night: #0f0f0f;
    --text: #e8e6e1;
    --text-sec: #b3b0aa;
    --accent: #e8935a;
    --accent-dark: #c4622d;
    --accent-text: #e8935a;
    --green: #6fa37a;
    --white: #2a2c2a;
    --border: #3a3c3a;
    --danger: #f09a9a;

    --field-border: #85827d;
    --focus: #e8935a;
    --tint-accent: rgba(232, 147, 90, 0.14);
    --tint-green: rgba(111, 163, 122, 0.16);
    --tint-danger: rgba(217, 101, 101, 0.16);
    --tint-warn: rgba(230, 180, 80, 0.14);
    --warn: #e6b450;
    --pill-ok-text: #9fcaa9;
    --pill-bg: #3a3c3a;
    --pill-role-text: #f0a877;

    --shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  }
}

/* -- Reset and base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2 { text-wrap: balance; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
a, button, summary, input, select { -webkit-tap-highlight-color: rgba(196, 98, 45, 0.15); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--btn-fill);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* -- Headings and text ---------------------------------------------------- */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
}
h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.lead { color: var(--text-sec); font-size: 1rem; }
.lead strong { color: var(--text); }
.hint { color: var(--text-sec); font-size: var(--text-small); line-height: 1.5; }
.eyebrow {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Hero eyebrow from madebyaspire.com: green dot + letterspaced caps */
.eyebrow-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.eyebrow-dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 123, 90, 0.18);
}

/* -- Sign-in stage: optional side panel + soft brand background -------- */
.auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Soft sage and terracotta glows on the cream canvas: decoration only */
.auth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 28rem at 8% 18%, rgba(143, 175, 138, 0.22), transparent 70%),
    radial-gradient(34rem 26rem at 96% 88%, rgba(196, 98, 45, 0.12), transparent 70%);
}
.auth-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 72px;
}
.auth-stage > .card { flex: none; }
/* Phones and narrow windows: the panel stacks under the sign-in card so the
   form stays first. From 820px it sits beside the card. */
.auth.has-aside .auth-stage { flex-direction: column; align-items: center; gap: 40px; }
.auth-aside { order: 2; width: 100%; max-width: 440px; padding: 0 4px; }
@media (min-width: 820px) {
  .auth.has-aside .auth-stage { flex-direction: row; max-width: 1040px; gap: 48px; justify-content: space-between; align-items: center; }
  .auth.has-aside { padding: 72px 32px 24px; }
  .auth-aside { order: 0; flex: 1; max-width: 470px; padding: 0; }
}
@media (min-width: 1100px) {
  .auth.has-aside { padding-top: 88px; }
  .auth.has-aside .auth-stage { gap: 72px; }
}
.aside-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  text-wrap: balance;
  letter-spacing: -0.01em;
  color: var(--text);
}
.aside-title em {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--green); /* large text: 4.4:1 on cream passes AA-large */
}
.aside-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.aside-list li { display: flex; gap: 14px; align-items: flex-start; }
.aside-list strong { display: block; font-weight: 600; color: var(--text); }
.aside-list li > span:last-child { color: var(--text-sec); line-height: 1.5; }
.aside-icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--green);
}
.aside-icon svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) {
  .auth::before {
    background:
      radial-gradient(38rem 28rem at 8% 18%, rgba(143, 175, 138, 0.10), transparent 70%),
      radial-gradient(34rem 26rem at 96% 88%, rgba(232, 147, 90, 0.08), transparent 70%);
  }
  .aside-title em { color: #8FAF8A; }
}

/* -- Auth page frame ------------------------------------------------------ */
.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 66px);
  min-height: calc(100dvh - 66px);
  padding: 32px 16px 24px;
}
/* Top bar: the madebyaspire.com header. Navy band, white logo, and the
   2px green-to-terracotta rule the site draws under its header. */
.auth-top {
  position: relative;
  background: #1a1f28;
  color: #FAF0E2;
}
.auth-top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, #4A7B5A 0%, #C4622D 55%, transparent 100%);
}
.auth-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0 16px;
  border-bottom: 1px solid rgba(250, 240, 226, 0.06);
}
.auth-brand {
  display: inline-flex;
  border-radius: var(--radius-sm);
}
.auth-brand img { width: 132px; height: auto; }
.auth-top-help {
  color: rgba(250, 240, 226, 0.85);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  padding: 10px 2px;
}
.auth-top-help:hover { color: #FAF0E2; text-decoration: underline; text-underline-offset: 3px; }
.auth-top a:focus-visible { outline-color: #e8935a; }
.card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: 28px 22px;
}
.card > * + * { margin-top: 20px; }
.card-head > * + * { margin-top: 6px; }
.card-head.center { text-align: center; }
.auth-foot {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
  color: var(--text-sec);
  font-size: var(--text-small);
}
.auth-foot p + p { margin-top: 4px; }
.auth-foot a { color: var(--accent-text); text-underline-offset: 3px; }
.auth-legal { display: flex; justify-content: center; gap: 8px; }
.auth-legal a { color: var(--text-sec); }

/* Credit badge: design library #credit-link, Option D (cream footer variant) */
.auth-foot .credit-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(44, 51, 64, 0.18);
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(44, 51, 64, 0.45);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.auth-foot .credit-badge-pill:hover {
  color: rgba(44, 51, 64, 0.9);
  border-color: rgba(44, 51, 64, 0.4);
  background: rgba(44, 51, 64, 0.04);
}
.credit-badge-pill img { display: inline-block; height: 9px; width: auto; flex-shrink: 0; }
.credit-badge-pill .credit-sep { display: inline-block; width: 1px; height: 8px; background: rgba(44, 51, 64, 0.2); flex-shrink: 0; }
@media (prefers-color-scheme: dark) {
  /* Dark footer variant */
  .auth-foot .credit-badge-pill { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.45); }
  .auth-foot .credit-badge-pill:hover { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); }
  .credit-badge-pill .credit-sep { background: rgba(255, 255, 255, 0.2); }
}

@media (min-width: 600px) {
  .auth { padding-top: 64px; }
  .auth-top-in { min-height: 84px; padding: 0 32px; }
  .auth-brand img { width: 150px; }
  .card { padding: var(--space-card) 36px; }
  h1 { font-size: 2.25rem; }
}

/* Icon badge above a heading (sent, error, consent) */
.badge-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint-accent);
  color: var(--accent-text);
  margin: 0 auto 14px;
}
.badge-icon svg { width: 28px; height: 28px; }
.badge-icon.danger { background: var(--tint-danger); color: var(--danger); }

/* -- Forms ---------------------------------------------------------------- */
.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label, .label {
  font-weight: 600;
  font-size: 0.9375rem;
}
.field .hint { margin-top: -2px; }
input, select, textarea { font: inherit; color: inherit; }
input[type="email"], input[type="password"], input[type="text"], select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-size: 1rem; /* 16px stops iOS zooming into the field */
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input::placeholder { color: var(--text-sec); opacity: 0.85; }
input:hover, select:hover { border-color: var(--text); }
input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--tint-accent), 0 0 0 1px var(--focus);
  border-radius: var(--radius-md);
}
select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 6-digit code: one input, large monospaced digits */
.code-input {
  font-family: var(--font-mono) !important;
  font-size: 1.75rem !important;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 12px 8px 12px calc(8px + 0.4em) !important;
  min-height: 60px !important;
  font-variant-numeric: tabular-nums;
}

.sent-to {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
}
.sent-to strong { overflow-wrap: anywhere; }

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
label.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  background: var(--white);
}
label.check:hover { border-color: var(--text); }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--btn-fill); }
label.check:has(input:checked) { background: var(--tint-accent); border-color: var(--accent); }
label.check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* -- Buttons (playbook .btn: pill, 600 weight, scaleX fill on hover) ------ */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--field-border);
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition-slow);
}
.btn:hover { color: var(--bg); border-color: var(--text); }
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { border-radius: var(--radius-full); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn.primary {
  background: var(--btn-fill);
  border-color: var(--btn-fill);
  color: #fff;
  box-shadow: 0 2px 8px rgba(163, 78, 26, 0.22);
}
.btn.primary::before { background: var(--btn-fill-hover); }
.btn.primary:hover { color: #fff; border-color: var(--btn-fill-hover); box-shadow: 0 8px 24px rgba(163, 78, 26, 0.35); }

/* Design library arrow-circle pill (#buttons), as the madebyaspire.com
   header CTA ("Schedule a consult"): terracotta pill, label on the left,
   white circle with a terracotta arrow on the right; on hover the charcoal
   fill slides out of the circle across the button. Sign-in pages only, pure
   CSS so the markup and CSP stay untouched. */
.auth .btn.primary {
  justify-content: flex-start;
  min-height: 56px;
  padding: 8px 64px 8px 26px;
  border: 2px solid var(--btn-fill);
  text-align: left;
}
.auth .btn.primary::before {
  inset: 5px 5px 5px calc(100% - 47px);
  border-radius: var(--radius-full);
  background: #2C3340;
  transform: none;
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.auth .btn.primary:hover { border-color: var(--btn-fill); }
.auth .btn.primary:hover::before { left: 5px; transform: none; }
.auth .btn.primary::after {
  content: "\2192";
  position: absolute;
  top: 50%; right: 5px;
  width: 42px; height: 42px;
  margin-top: -21px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: #C4622D;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.45s var(--ease-out-soft);
}
.auth .btn.primary:hover::after { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .auth .btn.primary::before, .auth .btn.primary::after { transition: none; }
}

.btn.block { width: 100%; }

/* Social sign-in: calm outlined rows, brand mark on the left */
.btn.provider {
  width: 100%;
  justify-content: center;
  border-color: var(--field-border);
}
.btn.provider::before { background: var(--bg-alt); }
.btn.provider:hover { color: var(--text); border-color: var(--text); }
/* Google's button guidelines: light = white fill, #747775 stroke, #1F1F1F text;
   dark = #131314 fill, #8E918F stroke, #E3E3E3 text. Facebook sits at equal weight. */
.btn.provider { background: #FFFFFF; border-color: #747775; color: #1F1F1F; }
.btn.provider:hover { color: #1F1F1F; border-color: #1F1F1F; }
.btn.provider::before { background: #F2F2F2; }
@media (prefers-color-scheme: dark) {
  .btn.provider { background: #131314; border-color: #8E918F; color: #E3E3E3; }
  .btn.provider:hover { color: #E3E3E3; border-color: #E3E3E3; }
  .btn.provider::before { background: #242526; }
}

/* Text-style button (real <button>, looks like a link) */
.btn.link {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--accent-text);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.btn.link::before { display: none; }
.btn.link:hover { color: var(--accent-text); text-decoration-thickness: 2px; }
.btn.link:focus-visible { border-radius: var(--radius-sm); }

.btn-row { display: grid; gap: 10px; }
.btn-row.two { grid-template-columns: 1fr 1fr; }
.center-row { display: flex; justify-content: center; }

/* -- Social providers + divider ------------------------------------------ */
.providers { display: grid; gap: 10px; }
.providers form { margin: 0; }
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-sec);
  font-size: var(--text-small);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* -- Disclosure (details/summary, no JS) ---------------------------------- */
.disclosure {
  border-top: 1px solid var(--border);
}
.card > .disclosure + .disclosure { margin-top: 0; }
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 2px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--transition-fast);
}
.disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.disclosure > summary:hover { color: var(--accent-text); }
.disclosure > .stack { padding: 4px 0 20px; }

/* -- Notices (inline alerts) ---------------------------------------------- */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice.error { background: var(--tint-danger); border-color: var(--danger); }
.notice.error svg { color: var(--danger); }
.notice.info { background: var(--tint-green); border-color: var(--green); }
.notice.info svg { color: var(--green); }

/* -- Lists: scopes, orgs --------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--green); }

.org-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.org-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.org-list .org-name { font-weight: 700; }
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }

.who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--btn-fill);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.who p { min-width: 0; }
.who .name { display: block; font-weight: 700; font-size: 1.0625rem; }
.who .email { display: block; }
.who .email strong { color: var(--text); font-weight: 600; }
.who .email { color: var(--text-sec); font-size: 0.9375rem; overflow-wrap: anywhere; }

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.section-title + * { margin-top: 10px; }

/* -- Pills ----------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--pill-bg);
  color: var(--text);
  white-space: nowrap;
}
.pill.wrap { white-space: normal; overflow-wrap: anywhere; }
.pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}
.pill.plain::before { display: none; }
.pill.ok { background: var(--tint-green); color: var(--pill-ok-text); }
.pill.wait { background: var(--tint-warn); color: var(--warn); }
.pill.bad { background: var(--tint-danger); color: var(--danger); }
.pill.role { background: var(--tint-accent); color: var(--pill-role-text); }
.pill.role::before { display: none; }

/* ==========================================================================
   Aspire admin shell: left nav on desktop, top bar on mobile.
   Reusable for any Aspire staff tool on this host.
   ========================================================================== */
.shell { min-height: 100vh; min-height: 100dvh; }
.shell-nav {
  position: relative;
  z-index: 5;
  background: var(--bg-night);
  color: #f3f1ec;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 8px;
}
.shell-brand { display: inline-flex; border-radius: var(--radius-sm); }
.shell-brand img { width: 132px; height: auto; }
.shell-tag {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0a877;
}
.shell-links {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.shell-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  color: #e8e6e1;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.shell-links a svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.shell-links a:hover { background: rgba(255, 255, 255, 0.08); }
.shell-links a[aria-current="page"] { background: #A34E1A; color: #fff; }
.shell-links a:focus-visible { outline-color: #f0a877; border-radius: var(--radius-full); }
.shell-user { display: none; }

.shell-main {
  width: 100%;
  max-width: 1120px;
  padding: 24px 16px 48px;
}
.page-head { margin-bottom: 24px; }
.page-head > * + * { margin-top: 6px; }
.page-head h1 { font-size: 2rem; }
.page-head .back { display: inline-flex; font-weight: 600; font-size: 0.9375rem; margin-bottom: 4px; }

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: 20px 16px;
}
.panel + .panel, .panel-stack > * + * { margin-top: 20px; }
.panel > * + * { margin-top: 14px; }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}
.panel-head h2, .panel-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.section-gap { margin-top: 36px; }
.section-gap > h2 { margin-bottom: 14px; }
.admin-notice { margin-bottom: 20px; }

.form-grid { display: grid; gap: 16px; }

/* Tables: real tables on wide screens, stacked cards at 600px and under */
.table-wrap { width: 100%; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
table.data th {
  text-align: left;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sec);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td.nowrap { white-space: nowrap; }
table.data code { color: var(--text-sec); }

@media (max-width: 600px) {
  table.data thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr { padding: 14px 0; border-bottom: 1px solid var(--border); }
  table.data tr:first-child { padding-top: 4px; }
  table.data tr:last-child { border-bottom: 0; padding-bottom: 0; }
  table.data td {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    border: 0;
  }
  table.data td:empty { display: none; }
  table.data td.nowrap { white-space: normal; }
  table.data td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-sec);
  }
  /* The first cell becomes the row title, full width, no label */
  table.data td:first-child { display: block; font-weight: 600; padding-bottom: 6px; }
  table.data td:first-child::before { content: none; }
  table.data td > .pill, table.data td > .pill-group { justify-self: start; }
}

/* Outbox messages */
.outbox { list-style: none; padding: 0; display: grid; gap: 16px; }
.outbox li > * + * { margin-top: 10px; }
.outbox .meta { color: var(--text-sec); font-size: var(--text-small); }
.outbox .delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--text-sec); }
.outbox pre {
  margin: 0;
  padding: 14px;
  max-height: 320px;
  overflow: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.outbox > .panel + .panel { margin-top: 0; }
.outbox .h-subject { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.4; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-sec);
  border: 1px dashed var(--field-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 601px) {
  .panel { padding: 24px; }
  .form-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .form-grid .span-2 { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    /* Paint the nav column the full page height, even past the sticky nav */
    background: linear-gradient(to right, var(--bg-night) 248px, transparent 248px);
  }
  .shell-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
  .shell-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 22px 22px;
  }
  .shell-brand img { width: 150px; }
  .shell-links {
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    overflow: visible;
  }
  .shell-links a { border-radius: var(--radius-md); width: 100%; }
  .shell-links a:focus-visible { border-radius: var(--radius-md); }
  .shell-user {
    display: block;
    margin-top: auto;
    padding: 18px 22px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--text-small);
    color: #c9c6c0;
  }
  .shell-user strong { display: block; color: #f3f1ec; overflow-wrap: anywhere; font-weight: 600; }
  .shell-main { padding: 40px 40px 64px; }
  .page-head h1 { font-size: 2.5rem; }
}

/* -- Motion and print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

@media (forced-colors: active) {
  .btn, .notice, .pill, .card, .panel { border: 1px solid CanvasText; }
  .btn::before { display: none; }
}

@media print {
  .shell-nav, .skip-link { display: none; }
  .card, .panel { box-shadow: none; }
}