/* StayAwhile — warm, calm, letter-inspired UI */
:root {
  --paper: #fbf7ef;
  --paper-2: #f4ecdd;
  --ink: #2f2a24;
  --ink-soft: #6d655a;
  --accent: #b5654a;      /* warm terracotta */
  --accent-dark: #8f4d38;
  --sage: #6f8567;
  --sage-dark: #566a4f;
  --line: #e4d8c4;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(60, 45, 30, 0.10);
  --radius: 14px;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Georgia', serif;
  --sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --maxw: 1080px;

  /* Type scale — every heading/label size on the site is one of these, so
     two elements playing the same role (e.g. "a letter's subject line" in
     the compose thread, the staff queue, and the staff detail view) always
     render at the same size instead of drifting to a nearby-but-different
     value chosen independently in each place. */
  --fs-h1: 2.3rem;      /* full page titles */
  --fs-h2: 1.7rem;      /* section headings, incl. equal-weight two-up sections */
  --fs-h3: 1.3rem;      /* card/list-item headings */
  --fs-subject: 1.2rem; /* a letter's subject line, wherever it's shown */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(circle at 12% 8%, #fff7e9 0, transparent 40%),
                    radial-gradient(circle at 90% 0%, #f2ede0 0, transparent 35%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.main { flex: 1 0 auto; padding-top: 28px; padding-bottom: 56px; }

/* Staff and admins are almost always at a computer with a lot more screen than a phone, and their pages
   (queues, tables, the Overview's stat cards) genuinely use extra width well; volunteers mostly use a
   phone, so their pages -- and every public/marketing page -- keep the narrower, phone-tuned measure above.
   `.wrap` is `width: 100%` first, so this only ever matters once the viewport is wide enough to reach it —
   a staff member on a narrow screen sees no difference. */
body.is-staff, body.is-admin { --maxw: 1800px; }
body.is-staff .site-header .wrap, body.is-admin .site-header .wrap { max-width: 1800px; }
/* .auth-card (single-record forms: My Profile, Add/Edit Volunteer, Add/Edit Facility, Add Facility Member...)
   keeps its own, narrower cap even here -- a single column of labeled inputs doesn't read better at 1800px,
   it just leaves the fields stranded in a sea of blank margin -- but it's still noticeably roomier than the
   440-620px a volunteer or a public page gets. Login/signup/forgot-password/contact also use .auth-card, but
   are only ever rendered signed out (body.is-public), so they are never affected by this. */
body.is-staff .auth-card, body.is-admin .auth-card { max-width: 780px; }
body.is-staff .profile-edit, body.is-admin .profile-edit { max-width: 920px; }
/* The form inside grows to match (a little short of the card, so it never touches the edges) and is centered
   -- it has no `margin: auto` normally because it never needed one: every other place that uses it, the card
   around it is already narrower than the form's own cap, so the form simply fills it edge to edge. */
body.is-staff .stacked-form, body.is-admin .stacked-form { max-width: 700px; margin: 0 auto; }

a { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); line-height: 1.2; }
h1 { font-size: var(--fs-h1); margin: 0 0 .4em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.muted { color: var(--ink-soft); }
.lede { font-size: 1.2rem; color: var(--ink-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--accent); font-weight: 700; margin: 0 0 .3em; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header / nav ---------- */
.site-header { background: rgba(251,247,239,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { max-width: 1440px; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: nowrap; }
.brand, .identity-bar { flex-shrink: 0; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.brand-mark { color: var(--accent); font-size: 1.4rem; }
/* justify-content: flex-end keeps a wrapped second row (e.g. the staff
   portal's longer Pending/Approved/.../Conversation History tab set)
   right-aligned under the first row, instead of collapsing to the far
   left — so it still reads as one right-aligned nav block, matching pages
   whose shorter nav never wraps. */
.site-nav { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; min-width: 0; }
.site-nav a { text-decoration: none; color: var(--ink); padding: 7px 8px; border-radius: 8px; font-size: .95rem; white-space: nowrap; }
.site-nav a:hover { background: var(--paper-2); }
.site-nav a.active { color: var(--accent-dark); font-weight: 700; }
.nav-account { color: var(--ink-soft); font-size: .9rem; padding: 0 6px; }
.inline-form { display: inline; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; cursor: pointer; }

/* ---------- buttons ---------- */
.btn, .button, button, .card-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 999px;
  padding: 10px 20px; cursor: pointer; text-decoration: none;
  transition: transform .05s, background .15s, box-shadow .15s;
  background: transparent; border-color: var(--line); color: var(--ink);
}
.btn:active, .button:active { transform: translateY(1px); }
/* Plain <button type="submit"> with none of our explicit variant classes
   defaults to primary styling (most bare submit buttons in the app are the
   "main" action); .btn-ghost/.btn-warn/.btn-danger/.link-button always win
   over that default regardless of selector order, since :not() here lists
   every variant class instead of relying on source order to break the tie. */
.btn-primary, .button-primary,
button[type="submit"]:not(.link-button):not(.btn-ghost):not(.btn-warn):not(.btn-danger) {
  background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(181,101,74,.3); border-color: transparent;
}
.btn-primary:hover, .button-primary:hover,
button[type="submit"]:not(.link-button):not(.btn-ghost):not(.btn-warn):not(.btn-danger):hover {
  background: var(--accent-dark);
}
.btn-ghost, .button { background: transparent; border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn-ghost:hover, .button:hover { background: var(--paper-2); }
.btn-warn { background: #d8a13a; color: #3a2c07; box-shadow: none; }
.btn-danger { background: #c05046; color: #fff; box-shadow: none; }
.btn-sm, .button-small { padding: 6px 14px; font-size: .9rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.button-add::before { content: '+ '; }
.link-button { border: none; background: none; text-decoration: underline; color: var(--ink); padding: 0; font-size: 0.9rem; border-radius: 0; box-shadow: none; }
.link-button:hover { background: none; }

/* ---------- flash ---------- */
.flash { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; border: 1px solid; }
.flash-success, .flash-ok { background: #eef4ea; border-color: #cfe0c4; color: #3c5233; }
.flash-error { background: #fbeae7; border-color: #edc6bf; color: #8f3527; }
.flash-info { background: #eef1f6; border-color: #cdd6e6; color: #3a4864; }
.impersonation-banner { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 32px 0 12px; }
.hero h1 { font-size: 3.6rem; margin: .1em 0 .25em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero-card { display: flex; justify-content: center; }
.letter-preview { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 30px 28px; box-shadow: var(--shadow); font-family: var(--serif); max-width: 340px; transform: rotate(-1.5deg); background-image: repeating-linear-gradient(transparent, transparent 31px, #f0e7d6 32px); }
.letter-preview p { margin: 0 0 14px; }
.lp-date { color: var(--ink-soft); font-style: italic; }
.lp-sign { text-align: right; margin-top: 22px; }

/* ---------- steps ---------- */
.steps { margin: 56px 0; }
.steps h2 { text-align: center; margin-bottom: 28px; }
.step-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: #fff; font-weight: 700; font-family: var(--serif); margin-bottom: 10px; }
.step-grid h3 { margin: 6px 0; }
.step-grid p { margin: 0; color: var(--ink-soft); }

.callout { text-align: center; margin: 40px 0; }
.callout-card {
  max-width: 720px; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 44px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.callout-card h2 { margin: 0; }

/* ---------- pillars flashcard slider ---------- */
.pillars { margin: 56px 0; }
.pillars h2 { text-align: center; margin-bottom: 28px; }
.flashcard-slider { max-width: 640px; margin: 0 auto; }
.slider-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.slider-tab {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--ink-soft);
}
.slider-tab:hover { background: var(--paper-2); }
.slider-tab.active { background: var(--accent); color: #fff; border-color: transparent; }
.flashcard-viewport { overflow: hidden; border-radius: var(--radius); }
.flashcard-track { display: flex; transition: transform .35s ease; }
.flashcard {
  flex: 0 0 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: var(--radius); padding: 44px 40px; min-height: 100px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.flashcard p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.6; margin: 0; color: var(--ink); }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.slider-arrow {
  background: var(--card); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow);
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--accent-dark);
}
.slider-arrow:hover { background: var(--paper-2); }
.slider-dots { display: flex; align-items: center; gap: 8px; }
.slider-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: var(--line); border: none; box-shadow: none; cursor: pointer; }
.slider-dots button.active { background: var(--accent); }

/* ---------- prose ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--ink); }
.ticks { list-style: none; padding: 0; }
.ticks li { padding: 8px 0 8px 34px; position: relative; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: var(--sage-dark); font-weight: 700; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
.why-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.why-card h3 { margin-top: 0; }
.about-photo, .about-photo-preview { display: block; max-width: 320px; border-radius: var(--radius); margin: 1rem auto; box-shadow: var(--shadow); }

/* A boxed content section — a card around a chunk of prose instead of a
   long unbroken wall of text (used on About and Why Us). .content-card-heading
   fixes its heading to one shared size regardless of tag, so e.g. About's
   two sections (h1 "About Us", h2 "Our Mission") read as equal, parallel
   sections rather than a title-and-subheading. */
.content-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px 36px; margin-bottom: 24px;
}
.content-card:last-child { margin-bottom: 0; }
.content-card p { margin: 0 0 1em; }
.content-card p:last-child { margin-bottom: 0; }
.content-card-heading { font-size: var(--fs-h2); margin: 0 0 0.6em; }

/* ---------- auth ---------- */
.auth-card { max-width: 440px; margin: 20px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.9rem; }
.stacked-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.stacked-form label, .field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.stacked-form input, .stacked-form textarea, .stacked-form select,
.field input, .field textarea, .field select,
.compose-form input, .compose-form textarea, .compose-form select,
.content-form input, .content-form textarea, .content-form select,
.review-form input, .review-form textarea, .search-bar input, .search-bar select, .search-form select {
  font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; color: var(--ink); font-weight: 400;
}
/* A rich-text edit screen (admin site content, staff's resident-reply
   form) — same card treatment as .auth-card, but without its 440px cap,
   so the editor inside gets the same roomy width a volunteer's own letter
   composer gets instead of being squeezed into a login-form-sized box. */
.content-card { max-width: none; margin: 0 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.content-card h1, .content-card h2 { margin-top: 0; }
.content-form { display: flex; flex-direction: column; gap: 16px; max-width: none; }
/* Every dropdown reads at the same size as the text inputs (browsers
   default a bare <select> to a much smaller system font), including the
   list of options when it's opened. Compact variants set their own size on a
   more specific selector (e.g. .tb-select select in the letter composer). */
select, select option { font-family: inherit; font-size: 1rem; }
.search-bar select, .search-form select, .admin-letters-filters select { min-height: 48px; }
input:focus, textarea:focus, select:focus, [contenteditable]:focus { outline: 3px solid rgba(111,133,103,.4); outline-offset: 1px; border-color: var(--sage); }
.hint { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.auth-alt { margin-top: 18px; text-align: center; color: var(--ink-soft); }
.checkbox, .checkbox-row, .stacked-form label.checkbox, .content-form label.checkbox { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; }
.checkbox input, .checkbox-row input { width: 22px; height: 22px; margin-top: 3px; }
.consent-form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; max-width: 620px; }

/* ---------- directory ---------- */
.page-head { margin-bottom: 20px; }
.page-subhead { margin: 2px 0 8px; font-size: 1.2rem; font-weight: 600; color: var(--ink-soft); }
.page-cta { margin-top: 32px; }
.search-bar, .search-form { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.search-bar input, .search-form input { flex: 1; min-width: 220px; }
.resident-grid, .dashboard-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 1.5rem; }
.resident-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: transform .1s, box-shadow .1s; }
.resident-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60,45,30,.16); }
.resident-card h3 { margin: 0; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.avatar-lg { width: 84px; height: 84px; font-size: 2.4rem; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; color: var(--ink-soft); }
.card-cta { margin-top: auto; color: var(--accent-dark); font-weight: 600; font-size: .92rem; }
.empty, .empty-state { text-align: center; color: var(--ink-soft); padding: 40px 0; }
.empty-state { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.facility-name { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- profile ---------- */
.back-link { display: inline-block; margin-bottom: 16px; text-decoration: none; color: var(--ink-soft); }
.profile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.profile-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.profile-head h1 { margin: 0; }
.profile-details, .resident-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; margin: 0 0 26px; }
.profile-details dt, .resident-detail dt { font-weight: 700; color: var(--sage-dark); font-family: var(--serif); }
.profile-details dd, .resident-detail dd { margin: 4px 0 0; }
.profile-edit { max-width: 620px; }

/* ---------- compose / editor ---------- */
.compose-form { display: flex; flex-direction: column; gap: 16px; }
/* Same label/field rhythm as every other form (staff's reply form shares it). */
.compose-form > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
/* A roomy writing area: the letter sheet fills the card, and the page has room to write. */
.compose-form .letter-sheet { min-height: 420px; }
.compose-form .letter-editor { min-height: 340px; }
/* Compose toolbar: two visually separate rows instead of one long wrapping
   strip — formatting buttons on top, stationery pickers (each labeled
   above its own select, like a small form) below a divider, with the
   large-font toggle set apart on the same row. */
.editor-controls { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.toolbar-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.style-row { border-top: 1px solid var(--line); padding-top: 12px; column-gap: 24px; row-gap: 10px; }
.rich-toolbar { display: flex; gap: 0.4rem; }
.tb, .rich-toolbar button { background: #fffdf8; border: 1px solid var(--line); border-radius: 8px; min-width: 40px; padding: 6px 10px; cursor: pointer; font-size: 1rem; }
.tb:hover, .rich-toolbar button:hover { background: var(--paper-2); }
.tb-select {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.tb-select select { font: 0.95rem var(--sans); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); padding: 6px 10px; }
.tb-check { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; margin-left: auto; align-self: center; }
.letter-sheet { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 34px 38px; min-height: 320px; }
.editor, .editor-static, .letter-editor, .letter-body {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.9; min-height: 260px; outline: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem;
}
.letter-body { min-height: 0; }
.letter-editor:focus { outline: 3px solid rgba(111,133,103,.4); }
.large-font .editor, .large-font.editor, .large-font.editor-static, .letter-body.large-font { font-size: 1.4rem; line-height: 2; }
.editor:empty::before { content: attr(data-placeholder); color: #b8ac97; }
.site-content-editor { min-height: 140px; }
.site-content-editor h2, .site-content-editor h3, .pillar-preview h2, .pillar-preview h3 { margin: 0.4em 0 0.2em; }
.pillar-preview { max-width: 60ch; }
.pillar-preview p { margin: 0.3em 0; }
.compose-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.fineprint { font-size: .85rem; color: var(--ink-soft); }
.error-stack { font-family: monospace; font-size: .8rem; white-space: pre-wrap; overflow-x: auto; background: var(--paper-2); padding: 10px; border-radius: 8px; max-height: 240px; overflow-y: auto; }

/* stationery colors — a member's independent "Color" pick */
.stationery-garden { background: #f3f7ef; border-color: #d7e4cd; }
.stationery-ocean { background: #eaf3f7; }
.stationery-sunset { background: #f7ede0; }
.stationery-kraft { background: #f1e6d3; }

/* stationery border styles — a second, independent choice, loosely
   inspired by 20th-century paper goods (telegram forms, floral notepaper,
   newsprint columns, deckle-edged writing paper). */
.border-telegram { border: 2px dashed var(--accent-dark) !important; }
.border-floral { border: 3px double var(--accent) !important; border-radius: 16px; }
.border-newsprint { border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 3px solid var(--ink) !important; border-bottom: 3px solid var(--ink) !important; }
.border-deckle { box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line); }

/* stationery font styles — a third, independent choice. Web-safe only (fonts every device already has; nothing
   is downloaded). "script" is a clear handwriting stack -- Bradley Hand on Apple devices, Segoe Print on Windows,
   then Chalkboard SE / Comic Sans -- chosen because it stays easy to read, unlike a brush script.
   Must stay in sync with the same rules in print.css, so the on-screen
   compose/thread preview always matches what actually gets printed.
   .font-serif isn't listed since it's already the shared default set by
   .editor/.letter-editor/.letter-body/.bubble-body above. */
.font-typewriter { font-family: 'Courier New', Courier, monospace; }
.font-script { font-family: 'Noteworthy', 'Bradley Hand', 'Chalkboard SE', 'Segoe Print', 'Comic Sans MS', 'Comic Neue', cursive; }
.font-newsprint { font-family: 'Times New Roman', Times, serif; letter-spacing: 0.02em; }
.font-rounded { font-family: Verdana, 'Trebuchet MS', sans-serif; }
/* .bubble-body sets its own default font-family further down the sheet, and
   would win over the plain .font-* rules above by source order -- so every
   read-only letter body repeats them with higher specificity. That's what
   makes the font the writer picked show up when the letter is read (in
   every role's view), not just in the composer. */
.bubble-body.font-serif { font-family: var(--serif); }
.bubble-body.font-typewriter { font-family: 'Courier New', Courier, monospace; }
.bubble-body.font-script { font-family: 'Noteworthy', 'Bradley Hand', 'Chalkboard SE', 'Segoe Print', 'Comic Sans MS', 'Comic Neue', cursive; }
.bubble-body.font-newsprint { font-family: 'Times New Roman', Times, serif; letter-spacing: 0.02em; }
.bubble-body.font-rounded { font-family: Verdana, 'Trebuchet MS', sans-serif; }

.nav-badge {
  display: inline-block; background: var(--accent-dark); color: #fff;
  border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.75rem; margin-left: 0.3rem; font-weight: bold;
}

/* Letter Ideas & Tips — always open beside the compose form on wide screens (a plain <details>, forced open
   below, regardless of its actual open/closed state -- so it behaves exactly like the always-visible <aside>
   this used to be). On a narrow screen the whole compose form (subject, toolbar, stationery pickers, the
   letter itself) is tall, so stacking the tips below it the same way pushed them out of sight below a long
   scroll -- someone on a phone, which is how most volunteers use this, would likely never see them. There it
   is a real collapsible instead, closed by default, so it is the first thing seen on opening the composer and
   a tap reaches it without hunting for it. */
.compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.tips-panel {
  position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto;
  background: #fdf6d8; border: 2px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding: 1.25rem;
}
.tips-panel h2 { margin: 0; font-size: 1.3rem; }
.tips-panel > summary { cursor: pointer; }
@media (min-width: 901px) {
  /* The heading (inside <summary>, so the same markup works as the mobile toggle's label) stays visible, but
     with no marker or pointer cursor -- there is nothing to click here, since the content below is always
     shown regardless of <details>'s own open/closed state. Its content is always exactly one or two
     .tips-content blocks (see LETTER_TIPS_HTML/REPLY_TIPS_HTML and aboutResidentTips) -- naming the real
     class, rather than a catch-all ":not(summary)", means this can't also flatten some future direct child's
     own flex/grid layout back to block. */
  .tips-panel > summary { cursor: default; list-style: none; }
  .tips-panel > summary::-webkit-details-marker { display: none; }
  .tips-panel > .tips-content { display: flex !important; }
}
@media (max-width: 900px) {
  .compose-layout { grid-template-columns: 1fr; }
  .tips-panel { position: static; max-height: none; order: -1; }
}
.tips-content { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.tips-block h3 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.tips-chips { gap: 5px; }
.tips-chips li { background: #fff; font-size: .78rem; }
.tips-questions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tips-questions li {
  background: #fff; border-left: 3px solid var(--sage); border-radius: 8px;
  padding: 8px 12px; font-size: .88rem; line-height: 1.4;
}
.tips-ticks li { padding: 4px 0 4px 26px; font-size: .9rem; }
.tips-ticks li::before { top: 4px; }

/* ---------- my letters ---------- */
.conv-list, .letters-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.conv-item, .letter-row { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.conv-item:hover, .letter-row:hover { background: var(--paper-2); }
/* The staff conversation's reply form, tucked behind a Reply button. */
.reply-toggle { margin: 0 0 20px; }
.reply-toggle > summary { list-style: none; cursor: pointer; }
.reply-toggle > summary::-webkit-details-marker { display: none; }
.reply-toggle[open] > summary { margin-bottom: 14px; }
.conv-body { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; gap: 10px; }
.conv-date { color: var(--ink-soft); font-size: .85rem; }
.conv-snip { display: block; margin: 4px 0 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- thread / bubbles ---------- */
.thread, .letter-thread { display: flex; flex-direction: column; gap: 18px; }
.thread-compact { max-height: 340px; overflow-y: auto; margin-bottom: 20px; padding-right: 6px; }
.bubble, .letter-message { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); max-width: 78%; background: var(--card); }
.bubble.from-me, .letter-message-member { align-self: flex-end; }
.bubble.from-resident, .letter-message-resident { align-self: flex-start; background: var(--paper-2); border-left: 4px solid var(--accent); }
.bubble-head, .letter-message header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .85rem; color: var(--ink-soft); justify-content: space-between; }
.bubble-who, .letter-from { font-weight: 700; color: var(--ink); }
.bubble-date { margin-left: auto; }
.bubble-dates { margin: 0 0 6px; font-size: .85rem; color: var(--ink-soft); }
.bubble-subject { font-weight: 700; font-family: var(--serif); font-size: var(--fs-subject); margin: 2px 0 8px; }
/* Even padding on all four sides of the letter text (the stationery
   colour/border sits on this element, so the text never touches its edge).
   Shared by every role's view of a letter; layout stays a left/right
   back-and-forth conversation (.from-me right, .from-resident left).
   Inside a .bubble the horizontal padding is cancelled by an equal negative
   margin, so the text lines up with the sender name and subject above it
   while a coloured stationery box still has even space around the text. */
.bubble-body { font-family: var(--serif); font-size: 1.05rem; line-height: 1.8; padding: 14px; border-radius: 8px; overflow-wrap: anywhere; }
.bubble .bubble-body { margin-inline: -14px; }
.bubble-body > :first-child { margin-top: 0; }
.bubble-body > :last-child { margin-bottom: 0; }
.bubble.large .bubble-body { font-size: 1.3rem; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-draft, .badge-inactive { background: #e6e1d6; color: #5b5346; }
.badge-pending, .badge-flagged { background: #f6e6c4; color: #7a5a12; }
.badge-approved, .badge-delivered { background: #d9ead0; color: #3c5233; }
.badge-rejected, .badge-removed { background: #f4d6d0; color: #8f3527; }
.badge-active { background: #d9ead0; color: #3c5233; }
.badge-suspended { background: #f6e6c4; color: #7a5a12; }
.letter-status { font-size: .8rem; color: var(--ink-soft); }

/* ---------- staff ---------- */
.stat-row { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow); color: var(--ink-soft); font-weight: 600; }
.stat-n { display: block; font-size: 2rem; font-family: var(--serif); color: var(--accent-dark); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 24px; }
.tab { text-decoration: none; color: var(--ink-soft); padding: 10px 16px; border-radius: 8px 8px 0 0; font-weight: 600; }
.tab:hover { background: var(--paper-2); }
.tab.active { color: var(--accent-dark); background: var(--card); border: 2px solid var(--line); border-bottom: 2px solid var(--card); margin-bottom: -2px; }
.tab-n { display: inline-block; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .75rem; margin-left: 4px; }
.panel { min-height: 200px; }
.review-list, .res-manage { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.review-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); }
.review-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 6px; }
.review-subject { font-family: var(--serif); font-weight: 700; font-size: var(--fs-subject); margin: 4px 0; }
.review-snip { color: var(--ink-soft); margin: 4px 0 12px; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.res-manage li { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); flex-wrap: wrap; }
.res-manage li p { margin: 4px 0 0; }
.review-detail { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.rd-head { display: flex; align-items: center; gap: 14px; }
.rd-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-soft); margin: 8px 0; }
.rd-subject { font-family: var(--serif); font-weight: 700; font-size: var(--fs-subject); }
.review-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.staff-note { background: #fff8e8; border: 1px dashed #e0c583; border-radius: 10px; padding: 12px 16px; margin-top: 14px; font-size: .92rem; font-style: italic; }

/* ---------- guardian / signup ---------- */
/* A fieldset group (guardian details, account recovery, password change…)
   is laid out exactly like the rest of the form: no inset box, so its
   inputs line up with every other field, and its legend reads like a
   field label instead of a differently-coloured box heading. */
.guardian-box, .guardian-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.guardian-box legend, .guardian-fieldset legend { font-weight: 600; padding: 0; margin: 0 0 8px; color: inherit; }

/* Titled sections inside a long form (sign-up): the heading is clearly a
   level above the field labels, and a rule + spacing separates groups. */
.form-section { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 4px; }
.form-section-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; margin: 0; color: var(--sage-dark); }
.form-section-tag { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-2); border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; }
.form-section-help { margin: -8px 0 0; font-size: .92rem; color: var(--ink-soft); }

/* Required-field marker (added automatically by layout() in render.js). */
.req { color: #b3261e; font-weight: 700; margin-left: 2px; }
.required-note { font-size: .85rem; color: var(--ink-soft); margin: 0 0 14px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px; box-shadow: var(--shadow); }
.faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--serif); font-size: 1.1rem; padding: 10px 0; }
.faq-item p { margin: 0 0 12px; color: var(--ink-soft); }
.how-steps { margin-top: 26px; }

/* ---------- report box ---------- */
.report-box, .report-details { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 18px; box-shadow: var(--shadow); }
.report-box summary, .report-details summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); padding: 10px 0; }
.report-box .stacked-form, .report-details .stacked-form { padding-bottom: 16px; max-width: 480px; }

/* ---------- admin ---------- */
.admin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-actions input[type="text"] { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.admin-letters-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.footer-links { margin: 6px 0; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--accent-dark); }
.queue-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.queue-table th, .queue-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.queue-table tr:last-child td { border-bottom: none; }
.queue-table th { color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- footer ---------- */
.site-footer { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--paper-2); padding: 26px 0; margin-top: auto; }
.site-footer p { margin: 4px 0; }

/* ---------- responsive ---------- */
/* Keep the nav on one line at desktop widths: tighten links as the
   viewport narrows instead of wrapping (below 900px the hamburger takes over). */
@media (max-width: 1280px) {
  .site-nav a { padding: 7px 6px; font-size: .88rem; }
  .brand { font-size: 1.2rem; }
  .header-inner { gap: 10px; }
}
@media (max-width: 1080px) {
  .site-nav a { padding: 6px 4px; font-size: .82rem; }
  .nav-account { font-size: .8rem; }
}
/* The admin menu has the most items (and now a count on Reports): between the hamburger's breakpoint and about
   1120px it drops onto its own line rather than running under the logo. */
@media (min-width: 901px) and (max-width: 1120px) {
  body.is-admin .header-inner { flex-wrap: wrap; padding-bottom: 6px; }
  body.is-admin .site-nav { width: 100%; margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-card { order: -1; }
  .hero h1 { font-size: 2.8rem; }
  .step-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .profile-details, .resident-detail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 10px 0; }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: .95rem; padding: 7px 8px; }
  .header-inner { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 10px 0; }
  .site-nav.open { display: flex; }
  .header-inner { flex-wrap: wrap; }
  .step-grid, .why-grid { grid-template-columns: 1fr; }
  .bubble, .letter-message { max-width: 100%; }
  .letter-sheet { padding: 22px; }
  .compose-actions { justify-content: stretch; }
  .compose-actions .btn, .compose-actions .button { flex: 1; }
}

/* ---------- staff: facility bar, staff notes ---------- */
.facility-bar { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 6px 0; font-size: .95rem; color: var(--ink-soft); }
.facility-bar strong { color: var(--ink); }
.review-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; width: 100%; }
.review-form textarea { width: 100%; min-height: 96px; font-size: 1.05rem; resize: vertical; }
.staff-note { font-size: 1.05rem; }
.staff-only-hint { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }

/* ---------- choice groups (replace <select> dropdowns) ----------
   A native dropdown's option list is drawn by the operating system at a small
   size that page CSS can't change. A choice group shows every option as a large
   tappable pill or card instead (see choiceGroup() in render.js): real radio
   buttons underneath, so keyboard, screen readers and form submission all work
   as before. */
.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group > legend { font-weight: 600; padding: 0; margin: 0 0 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-cards .choices { flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.stacked-form label.choice, .content-form label.choice, .choice { position: relative; display: block; flex-direction: row; gap: 0; margin: 0; font-weight: 400; }
.choice input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
  border: 0; background: none;
}
.choice-text {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px;
  font-size: 1.05rem; line-height: 1.35; color: var(--ink); background: #fffdf8;
  border: 2px solid var(--line); border-radius: 999px; transition: border-color .12s, background .12s;
}
.choice-cards .choice-text { border-radius: 12px; padding: 12px 16px; }
.choice-cards .choice-text::before {
  content: ''; flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--ink-soft); border-radius: 50%; background: #fff;
}
.choice:hover .choice-text { border-color: var(--sage); }
.choice input:checked + .choice-text { border-color: var(--sage-dark); background: #eef4ea; color: var(--sage-dark); font-weight: 600; }
.choice-pills .choice input:checked + .choice-text::before { content: '✓'; font-weight: 700; }
.choice-cards .choice input:checked + .choice-text::before { border-color: var(--sage-dark); background: radial-gradient(circle, var(--sage-dark) 0 45%, #fff 50%); }
.choice input:focus-visible + .choice-text { outline: 3px solid rgba(111,133,103,.55); outline-offset: 2px; }

/* The letter composer's Color / Border / Font pickers: smaller pills, each
   colour shown in its own stationery colour and each font in its own typeface. */
.style-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 28px; border-top: 1px solid var(--line); padding-top: 12px; }
.choice-compact .choices { gap: 8px; }
.choice-compact .choice-text { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.choice-text.stationery-classic { background: #fffdf8; }
.choice-text.stationery-garden { background: #f3f7ef; }
.choice-text.stationery-ocean { background: #eaf3f7; }
.choice-text.stationery-sunset { background: #f7ede0; }
.choice-text.stationery-kraft { background: #f1e6d3; }
.choice input:checked + .choice-text.stationery-garden,
.choice input:checked + .choice-text.stationery-ocean,
.choice input:checked + .choice-text.stationery-sunset,
.choice input:checked + .choice-text.stationery-kraft,
.choice input:checked + .choice-text.stationery-classic { color: var(--ink); border-color: var(--sage-dark); }

/* Filter rows (search box + status/sort/facility choices). */
.search-bar .choice-filter { flex: 1 1 100%; }
.admin-letters-filters { align-items: flex-start; }

/* Notifications: the Show-dismissed toggle, and dismissed rows shown muted. */
.notif-filter { margin: 0 0 14px; }
.notif-filter .checkbox { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.res-manage li.is-dismissed { opacity: .65; background: var(--paper-2); }

/* Pagination (long lists such as the audit log). */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 8px; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
a.page-link:hover { background: var(--paper-2); border-color: var(--sage); }
.page-link.is-current { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.page-link.is-disabled { opacity: .45; }
.page-gap { color: var(--ink-soft); padding: 0 2px; }
/* The composer's "Large font" toggle sits beside its checkbox, not under it. */
.stacked-form label.tb-check, .compose-form label.tb-check { flex-direction: row; align-items: center; gap: 10px; margin-left: 0; font-size: 1rem; }
.tb-check input { width: 22px; height: 22px; }


/* Volunteer composer: a card like the staff reply form and the site's other edit screens, with the tips beside it. */
.compose-layout > .compose-main { margin: 0; }
.compose-main h2 { margin: 0 0 16px; }
/* "About <resident>" in the tips panel. */
.tips-about { margin-top: 1rem; margin-bottom: 1.5rem; }
.tips-label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.tips-facts { margin: 10px 0 0; display: grid; gap: 4px; font-size: .9rem; }
.tips-facts dt { font-weight: 700; margin-top: 6px; }
.tips-facts dd { margin: 0; }

/* A small "New letter" tag inside a list box, at its right end. It is part of the
   row (never overhanging the box's edge), so it can't overlap the name or date. */
.new-letter-tag {
  flex: 0 0 auto; margin-left: auto; align-self: center; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}


/* Conversation list rows (conversationRow() in render.js) -- one layout for staff and
   volunteers: name + date on the first line; the meta text with the Reply button right
   beside it on the second. The name link is stretched over the whole row so the entire box
   is clickable; the Reply button is its own link, lifted above the stretch. */
/* position: relative is what keeps the stretched link inside its own row. */
.conv-row { position: relative; }
.conv-row .conv-row-link { color: inherit; text-decoration: none; }
.conv-row .conv-row-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.conv-row .conv-snip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; white-space: normal; overflow: visible; margin-top: 8px; }
.conv-row .conv-snip .btn { position: relative; z-index: 1; }

/* The conversation page (staff and volunteer) -- identical layout for both: the Reply button, then
   (when it is open) the write/reply form with its tips panel beside it, then the whole
   conversation so far underneath, full width. The form and the conversation are never squeezed
   side by side, so each has its full width. */
.thread-panel h2 { font-size: var(--fs-h2); margin: 0 0 14px; }

/* Admin Reports: each report is a card -- the details, then a full-width notes box with the
   Dismiss / Resolve buttons at the bottom of it (right-aligned, like the other forms). */
.res-manage li.report-item { flex-direction: column; align-items: stretch; }
.report-item .review-form { margin-top: 4px; }
.report-item .review-form textarea { min-height: 150px; }
.report-item .compose-actions { margin-top: 2px; }

/* Automatic letter-check warnings (staff/admin), the policy line in the facility bar, and the policy help box. */
.letter-flags { margin: 8px 0 0; padding: 8px 12px; background: #fff3d6; border: 1px solid #e6c46a; border-radius: 10px; font-size: .92rem; color: #6b4b00; }
.facility-policy { font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
.policy-help { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: .92rem; }
.policy-help ul { margin: 6px 0 0; padding-left: 20px; }
.policy-help li { margin: 4px 0; }

/* Email templates (admin) */
.token-instructions h2 { margin-top: 0; }
.token-instructions code, .email-template code { background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3rem; }
.email-template { margin-bottom: 1.5rem; }
.email-preview { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; font-family: inherit; overflow-x: auto; }
.email-preview-frame { display: block; width: 100%; height: 26rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Admin overview */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1.5rem; }
.stat-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.stat-card a { display: contents; color: inherit; text-decoration: none; }
.stat-number { font-size: 1.7rem; line-height: 1.1; }
.stat-label { font-weight: 600; }
.stat-note { font-size: 0.85rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.data-table meter { width: 12rem; max-width: 100%; }
.table-scroll { overflow-x: auto; }


.status-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.status-list li { padding: .3rem 0; }

.setup-steps li { margin-bottom: .8rem; }
.setup-key code { font-size: 1.3rem; letter-spacing: .08em; word-break: break-all; }
.setup-link { width: 100%; font-family: monospace; font-size: .8rem; }
.recovery-codes { list-style: none; padding: 0; columns: 2; font-size: 1.1rem; }
.recovery-codes li { margin-bottom: .4rem; }

/* Admin overview trend charts */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; margin: 0.75rem 0 1.5rem; }
.chart { margin: 0; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; }
.chart figcaption { margin-bottom: 0.3rem; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-bar { fill: var(--accent, #7a5c3e); }
.chart-base { stroke: var(--line); stroke-width: 1; }
.chart-value, .chart-axis { fill: currentColor; font-size: 12px; }
.chart-axis { opacity: 0.7; font-size: 11px; }
.chart-data { margin-top: 0.4rem; }
.chart-data summary { cursor: pointer; font-size: 0.9rem; }

/* Reports: reopen and admin-only notes */
.report-closed { display: flex; align-items: center; gap: 0.6rem; }
.report-admin-notes { margin-top: 0.6rem; }
.report-admin-notes textarea { width: 100%; min-height: 4.5rem; font: inherit; }

/* Email templates: one email per tab */
.tab-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.tab-strip a { text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--card, #fff); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.92rem; }
.tab-strip a:hover { background: var(--paper-2); }
.tab-strip a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tab-flag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; margin-left: 0.15rem; }
details.token-instructions { margin-bottom: 1rem; }
details.token-instructions > summary { cursor: pointer; }