/* =====================================================================
   COMPONENT LAYER

   Added when the seventeen views still running M1-era scaffold CSS were
   moved onto the design system. Before this, eight of twenty-five
   templates loaded tokens.css and the rest declared
   `font-family: system-ui` with hardcoded hex, which meant the
   coordinator half of the product and the volunteer half did not look
   related to each other.

   Rule for what lives here rather than in a view's own <style>: if two
   templates need it, it is here. The Compass's 1fr/360px grid, the
   invitation's dark two-panel layout and the Flash Team role scroller
   stay in their own files, unchanged.
   ===================================================================== */

/* ---------- Page shells ---------- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-20);
}
.page-narrow { max-width: 680px; }
.page-form   { max-width: 460px; }

@media (max-width: 639px) {
  .page { padding: var(--space-6) var(--space-4) var(--space-16); }
}

.page-head { margin-bottom: var(--space-6); }
.page-head h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  margin: var(--space-2) 0 var(--space-2);
}
.page-head .lede {
  margin: 0;
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
  max-width: 62ch;
}

@media (max-width: 639px) {
  .page-head h1 { font-size: var(--text-2xl); }
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  text-decoration: none;
}

/* ---------- Section headings ---------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-4);
}
.section-head h2 {
  font-size: var(--text-lg);
  margin: var(--space-1) 0 0;
  line-height: var(--lh-snug);
}
.section-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.section-head .section-head-action { font-size: var(--text-sm); white-space: nowrap; }

/* ---------- Cards ---------- */

.card-pad    { padding: var(--space-6); }
.card-pad-sm { padding: var(--space-4) var(--space-5); }
.card-bordered { border: 1px solid var(--border-subtle); }
.card-cream  { background: var(--paper-cream); }

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.card-link:hover {
  color: inherit;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-stack { display: grid; gap: var(--space-3); }

/* ---------- Stats ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}
.stat-block { padding: var(--space-5); }
.stat-block .stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.stat-block .stat-label {
  display: block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  margin-top: var(--space-1);
}

/* ---------- Status pills ----------
   Section 5.5 measured every pair here: success-700 on success-50 is
   7.11:1, warning-700 on warning-50 is 5.11:1, danger-700 on danger-50 is
   8.55:1, info-700 on info-50 is 9.42:1. Do not swap any of them for the
   -500 step, which is where the contrast floor gets breached. */

.pill-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--fg-muted);
  white-space: nowrap;
}
.pill-status.is-good   { background: var(--success-50); color: var(--success-700); }
.pill-status.is-warn   { background: var(--warning-50); color: var(--warning-700); }
.pill-status.is-danger { background: var(--danger-50);  color: var(--danger-700); }
.pill-status.is-info   { background: var(--info-50);    color: var(--info-700); }
.pill-status.is-brand  { background: var(--bg-brand-soft); color: var(--iris-700); }

/* ---------- Forms ---------- */

.field { margin-bottom: var(--space-5); }
.field > label,
.field-legend {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.field .field-help {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: var(--space-2) 0 0;
  line-height: var(--lh-normal);
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-standard);
}
.field textarea { min-height: 96px; line-height: var(--lh-relaxed); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-400); }

.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-6);
}

/* A radio or checkbox row that is really a choice card. */
.choice-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.choice:hover { border-color: var(--iris-300); background: var(--iris-50); }
.choice input { margin-top: 2px; flex-shrink: 0; accent-color: var(--iris-500); }
.choice .choice-body { min-width: 0; }
.choice .choice-title { font-weight: var(--weight-semibold); display: block; }
.choice .choice-note {
  display: block;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
  margin-top: var(--space-1);
}
.choice:has(input:checked) { border-color: var(--iris-500); background: var(--iris-50); }

/* ---------- Tables ----------
   Always inside .table-scroll, because PRD section 5.2's rule that holds
   at every width is "any element that scrolls horizontally does so inside
   its own container; the page body never scrolls sideways." */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Notices ---------- */

.notice {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-5);
}
.notice-info    { background: var(--info-50);    color: var(--info-700); }
.notice-success { background: var(--success-50); color: var(--success-700); }
.notice-warn    { background: var(--warning-50); color: var(--warning-700); }
.notice-flash   { background: var(--bg-brand-soft); color: var(--iris-700); }
.notice p:first-child { margin-top: 0; }
.notice p:last-child  { margin-bottom: 0; }

/* ---------- Definition rows ---------- */

.def-rows { display: grid; gap: var(--space-3); margin: 0; }
.def-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.def-row:last-child { border-bottom: 0; padding-bottom: 0; }
.def-row dt { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }
.def-row dd { margin: 0; font-weight: var(--weight-medium); text-align: right; }

/* ---------- Inline actions ---------- */

.action-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-6);
}

/* A submit button that reads as a link but still needs a real 44px hit
   area (section 5.1). Padding expands the target, the negative margin
   stops it shoving the row around. */
.btn-link {
  background: none;
  border: none;
  color: var(--fg-link);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: underline;
  padding: var(--space-3) var(--space-1);
  margin: calc(var(--space-3) * -1) calc(var(--space-1) * -1);
  min-height: 44px;
}
.btn-link:hover { color: var(--fg-link-hover); }

.btn-danger { background: var(--danger-500); color: #fff; }
.btn-danger:hover { background: var(--danger-700); }

/* ---------- Progress ---------- */

.meter-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: var(--iris-500);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slowest) var(--ease-out);
}

/* ---------- Helpers ---------- */

.muted   { color: var(--fg-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack    > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* =====================================================================
   APP CHROME
   PRD section 5.2 draws a sidebar at wide, a 72px icon rail at medium and
   a five-item bottom bar at compact. What shipped through M9 was a line
   of text links repeated, differently, in four templates. This is the
   middle of that: one bar, one partial, a real bottom bar under 640px
   (which is the breakpoint the spec is most specific about, and the one
   most volunteers are on) and a horizontal top bar above it. The full
   left sidebar stays a later change, because it moves every page's grid.
   ===================================================================== */

.app-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
}
.app-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 60px;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-md);
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.app-brand:hover { color: var(--fg); }

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.app-nav a:hover { background: var(--bg-muted); color: var(--fg); }
.app-nav a[aria-current="page"] { color: var(--iris-600); background: var(--bg-brand-soft); }
.app-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-nav .nav-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  background: var(--iris-500);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  line-height: 1.5;
}

@media (max-width: 899px) {
  .app-nav a .nav-label { display: none; }
  .app-nav a { padding: 0 var(--space-3); }
}

/* Compact: the bar becomes a bottom bar, per section 5.2. Labels come
   back because a five-item bottom bar with no words is a guessing game. */
@media (max-width: 639px) {
  .app-bar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(26, 23, 29, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .app-bar-inner { padding: 0 var(--space-2); min-height: 58px; }
  .app-brand { display: none; }
  .app-nav { margin-left: 0; width: 100%; justify-content: space-around; gap: 0; }
  .app-nav a {
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-1);
    font-size: 10px;
    min-width: 56px;
    justify-content: center;
  }
  .app-nav a .nav-label { display: block; }
  .app-nav svg { width: 20px; height: 20px; }
  .app-nav .nav-count { position: absolute; transform: translate(14px, -10px); }
  .app-nav a { position: relative; }
  /* Keep the last card clear of the fixed bar. */
  body { padding-bottom: 66px; }
}

/* =====================================================================
   PUBLIC CHROME (brochure, sign-in, request, 404)
   ===================================================================== */

.site-header {
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-muted);
  font-weight: var(--weight-medium);
}
.site-nav a:hover { color: var(--fg); background: var(--bg-muted); }
.site-nav a.btn { color: var(--fg-on-brand); }
.site-nav a.btn:hover { background: var(--iris-600); color: var(--fg-on-brand); }

@media (max-width: 379px) {
  .site-header .app-brand { font-size: 0; gap: 0; }
}
@media (max-width: 639px) {
  .site-header-inner { padding: var(--space-2) var(--space-4); }
  .site-nav a.site-nav-plain { display: none; }
  /* .app-brand is hidden at this width for the signed-in bottom nav; the public
     header has no bottom nav, so it has to keep its logo. */
  .site-header .app-brand { display: inline-flex; }
  .site-nav { gap: 0; }
}

.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg);
  margin-top: var(--space-20);
}
.site-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.site-footer-inner a { color: var(--fg-muted); text-decoration: none; }
.site-footer-inner a:hover { color: var(--fg-link); text-decoration: underline; }
.site-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }