/* E4C Sacramento — app styles, built against The-Design-System's tokens
   (public/css/tokens/, vendored from The-Design-System/tokens/). Token
   files define custom properties only; this file is where they're
   actually used. See docs/architecture/phase1-design.md and
   The-Design-System/readme.md for the rules this follows. */

.page-container {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter-phone) var(--space-16);
}

@media (min-width: 640px) {
  .page-container {
    padding-left: var(--gutter-tablet);
    padding-right: var(--gutter-tablet);
  }
}

/* ---------- App bar + flag ribbon ---------- */

.app-bar {
  background: var(--red-600);
  color: var(--text-inverse);
}

.app-bar-inner {
  max-width: 640px;
  margin: 0 auto;
  min-height: var(--app-bar-h);
  padding: 0 var(--gutter-phone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.app-bar-brand {
  display: inline-flex;
  text-decoration: none;
}

.auth-hero {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0 var(--space-4);
}

.app-bar nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.app-bar nav a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font: var(--type-body-sm);
}

.app-bar nav a:hover {
  color: var(--text-inverse);
}

.ribbon {
  height: var(--ribbon-h);
  background: var(--ribbon);
}

/* ---------- Bottom nav (member pages) ---------- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-nav-h);
  background: var(--surface-card);
  border-top: var(--border-hair) solid var(--border-subtle);
  display: flex;
  z-index: 10;
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-normal);
}

.bottom-nav a.active {
  color: var(--action-primary-bg);
}

.bottom-nav svg {
  width: 22px;
  height: 22px;
}

body.has-bottom-nav .page-container {
  padding-bottom: calc(var(--bottom-nav-h) + var(--space-6));
}

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

.card {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.card-ribbon {
  height: var(--ribbon-h);
  background: var(--ribbon);
}

.card-body {
  padding: var(--space-5);
}

.card h2 {
  margin: 0 0 var(--space-2);
  font: var(--type-heading);
}

.card p {
  margin-bottom: var(--space-2);
}

.card p:last-child {
  margin-bottom: 0;
}

/* Panel-within-a-card — cards never nest (design system rule). Use this
   for a distinct sub-section inside a card body instead. */
.panel-sunken {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.panel-sunken:last-child {
  margin-bottom: 0;
}

.hint {
  color: var(--text-secondary);
  font: var(--type-body-sm);
}

/* ---------- Alerts (replaces plain "notice") ---------- */

.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border-radius: var(--radius-md);
  border: var(--border-hair) solid;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font: var(--type-body-sm);
}

.alert svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert-title {
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
  display: block;
}

.alert--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); }
.alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.alert--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }

.alert ul {
  margin: 0;
  padding-left: 1.1em;
}

/* ---------- Badges (status) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font: var(--type-label);
  white-space: nowrap;
}

.badge--none { background: var(--status-membership-none-bg); color: var(--status-membership-none-fg); }
.badge--pending { background: var(--status-membership-pending-bg); color: var(--status-membership-pending-fg); }
.badge--payment { background: var(--status-membership-payment-bg); color: var(--status-membership-payment-fg); }
.badge--active { background: var(--status-membership-active-bg); color: var(--status-membership-active-fg); }
.badge--waived { background: var(--status-membership-waived-bg); color: var(--status-membership-waived-fg); }
.badge--expiring { background: var(--status-membership-expiring-bg); color: var(--status-membership-expiring-fg); }
.badge--expired { background: var(--status-membership-expired-bg); color: var(--status-membership-expired-fg); }
.badge--demo { background: var(--surface-sunken); color: var(--text-secondary, inherit); border: 1px dashed currentColor; }

.badge--eq-available { background: var(--status-equipment-available-bg); color: var(--status-equipment-available-fg); }
.badge--eq-reserved { background: var(--status-equipment-reserved-bg); color: var(--status-equipment-reserved-fg); }
.badge--eq-out { background: var(--status-equipment-out-bg); color: var(--status-equipment-out-fg); }
.badge--eq-overdue { background: var(--status-equipment-overdue-bg); color: var(--status-equipment-overdue-fg); }
.badge--eq-maintenance { background: var(--status-equipment-maintenance-bg); color: var(--status-equipment-maintenance-fg); }
.badge--eq-unavailable { background: var(--status-equipment-unavailable-bg); color: var(--status-equipment-unavailable-fg); }
.badge--eq-retired { background: var(--status-equipment-retired-bg); color: var(--status-equipment-retired-fg); }

/* ---------- Buttons ---------- */

.btn,
form button,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-lg);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid transparent;
  font: var(--type-subheading);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition-control);
}

.btn:last-child,
form button:last-child {
  margin-bottom: 0;
}

.btn,
form button,
.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

.btn:hover,
form button:hover,
.btn--primary:hover {
  background: var(--action-primary-bg-hover);
}

.btn--secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
  border-color: var(--action-secondary-border);
}

.btn--secondary:hover {
  background: var(--action-secondary-bg-hover);
}

.btn--danger {
  background: var(--surface-card);
  color: var(--danger-fg);
  border-color: var(--danger-border);
}

.btn--danger:hover {
  background: var(--danger-bg);
}

.btn--sm {
  min-height: var(--control-sm);
  width: auto;
  padding: 0 var(--space-4);
  font: var(--type-body-sm);
  font-weight: var(--weight-semibold);
}

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

.field {
  margin-bottom: var(--space-4);
}

.field label,
.field legend {
  display: block;
  font: var(--type-label);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.field input:not([type="checkbox"]),
.field textarea,
.field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--control-lg);
  padding: 0 var(--space-4);
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: var(--transition-control);
}

.field textarea {
  min-height: 88px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

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

.field .field-hint {
  margin-top: var(--space-1);
  font: var(--type-body-sm);
  color: var(--text-secondary);
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field-checkbox input[type="checkbox"] {
  width: var(--tap-min);
  height: var(--tap-min);
  margin: 0;
  accent-color: var(--action-primary-bg);
}

.field-checkbox label {
  font: var(--type-body);
}

/* ---------- Empty state ---------- */

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}

.empty-state svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.empty-state-title {
  font: var(--type-subheading);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

/* ---------- List rows ---------- */

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-hair) solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
}

.list-row:last-child {
  border-bottom: none;
}

.list-row-main {
  flex: 1;
  min-width: 0;
}

.list-row-title {
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.list-row-subtitle {
  font: var(--type-body-sm);
  color: var(--text-secondary);
}

.list-row-trailing {
  flex-shrink: 0;
}

/* ---------- Bilingual pairs ---------- */

.bilingual-ti {
  display: block;
  font-family: var(--font-ethiopic);
}

.bilingual-en + .bilingual-ti {
  margin-top: 2px;
  color: var(--text-secondary);
}

/* ---------- Misc ---------- */

.language-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- Admin console (separate desktop-first shell — the member
   shell above is phone-first; the design system specifies these as two
   distinct layouts, not one responsive one) ---------- */

.admin-console {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border-right: var(--border-hair) solid var(--border-subtle);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin-sidebar-logo {
  padding: var(--space-2);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sand-700);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
}

.admin-nav a.active {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.admin-nav a:hover:not(.active) {
  background: rgba(0, 0, 0, 0.03);
}

/* Log out is a form (POST), styled to match the links around it. */
.admin-nav form { margin: 0; }

.admin-nav .admin-nav-logout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--sand-700);
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.admin-nav .admin-nav-logout:hover { background: rgba(0, 0, 0, 0.03); }

.admin-nav hr {
  border: 0;
  border-top: var(--border-hair) solid var(--border-subtle);
  margin: var(--space-2) 0;
}

.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  flex-shrink: 0;
  background: var(--surface-card);
  border-bottom: var(--border-hair) solid var(--border-subtle);
  padding: var(--space-4) var(--space-6);
}

.admin-topbar p {
  margin: 2px 0 0;
  color: var(--text-secondary);
}

.admin-content {
  flex: 1;
  padding: var(--space-6);
  max-width: 1040px;
}

.admin-content .card {
  max-width: none;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-tile {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}

.stat-tile-icon {
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.stat-tile-value {
  font: var(--type-title);
  color: var(--text-primary);
  display: block;
}

.stat-tile-label {
  font: var(--type-body-sm);
  color: var(--text-secondary);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table th {
  text-align: left;
  padding: var(--space-2) var(--space-5);
  font: var(--type-eyebrow);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-bottom: var(--border-hair) solid var(--border-subtle);
}

.admin-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-hair) solid var(--border-subtle);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 860px) {
  .admin-console {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: none;
    border-bottom: var(--border-hair) solid var(--border-subtle);
  }

  .admin-nav {
    flex-direction: row;
  }

  .admin-nav hr {
    display: none;
  }

  .admin-content {
    padding: var(--space-4);
  }
}

.language-options label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body);
}

/* ---------- PWA install banner ---------- */

.pwa-install-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-bottom: var(--border-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.pwa-install-banner__message {
  flex: 1;
  font: var(--type-body-sm);
  color: var(--text-primary);
}

.pwa-install-banner__close {
  background: none;
  border: none;
  padding: var(--space-2);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.pwa-install-banner__close:hover {
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .pwa-install-banner {
    left: auto;
    right: var(--space-4);
    top: var(--space-4);
    max-width: 360px;
    border-radius: var(--radius-md);
    border: var(--border-hair) solid var(--border-subtle);
  }
}

/* Admin > Demo Data: the shared demo password, large enough to read off the screen */
.demo-password {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-lg, 1.25rem);
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: 6px;
  user-select: all;
}

/* ---------- Polls (Phase 4) ---------- */

.poll-question {
  border: 0;
  margin: 0;
  padding: 0;
}

.poll-question legend {
  font: var(--type-label);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.poll-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: var(--border-hair) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.poll-choice:has(input:checked) {
  border-color: var(--action-primary-bg);
  background: var(--surface-sunken);
}

.poll-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--action-primary-bg);
}

.poll-result {
  margin-bottom: var(--space-3);
}

.poll-result-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font: var(--type-body-sm);
  margin-bottom: var(--space-1);
}

.poll-result-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.poll-result-bar span {
  display: block;
  height: 100%;
  background: var(--action-primary-bg);
}

.poll-quote {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border-default);
  color: var(--text-primary);
}

/* Admin > Votes: locked settings shown read-only once voting has started */
.vote-locked {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  font: var(--type-body);
}

.vote-locked dt {
  color: var(--text-secondary);
}

.vote-locked dd {
  margin: 0;
}

/* ---------- Recurring events & online meetings ---------- */

[data-show-when][hidden] { display: none !important; }

.badge--online { background: var(--info-bg); color: var(--info-fg); border: var(--border-hair) solid var(--info-border); }
.badge--repeat { background: var(--surface-sunken); color: var(--text-primary); }

.repeat-fields {
  border: var(--border-hair) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  min-width: 0;
}

.repeat-fields legend {
  font: var(--type-label);
  color: var(--text-primary);
  padding: 0 var(--space-1);
}

.repeat-fields input[type="radio"] {
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0 var(--space-2) 0 0;
}

.field-label {
  display: block;
  font: var(--type-label);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.weekday-options,
.scope-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.scope-options { flex-direction: column; }

.weekday-options label,
.scope-options label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font: var(--type-body);
}

.scope-options input[type="radio"] { width: auto; min-height: 0; margin: 0; }

.meeting-details {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: var(--border-hair) solid var(--info-border);
  border-radius: var(--radius-md);
}

.meeting-details .btn { width: auto; display: inline-flex; margin-bottom: var(--space-2); }

.reminder-preview {
  white-space: pre-wrap;
  font: var(--type-body-sm);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-wrap: anywhere;
}

/* ---------- Required fields & validation errors ---------- */

.required-mark { color: var(--danger-fg); font-weight: var(--weight-semibold); }

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

.field--error input:not([type="checkbox"]):not([type="radio"]),
.field--error select,
.field--error textarea {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 1px var(--danger-border);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  font: var(--type-body-sm);
  color: var(--danger-fg);
}

/* ---------- Home page ---------- */

.slide-theme--red { background: linear-gradient(135deg, var(--red-500), var(--red-800)); color: var(--text-inverse); }
.slide-theme--green { background: linear-gradient(135deg, var(--green-600), var(--green-900)); color: var(--text-inverse); }
.slide-theme--blue { background: linear-gradient(135deg, var(--blue-500), var(--blue-800)); color: var(--text-inverse); }
.slide-theme--gold { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); color: var(--ink); }

.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
}

/* Slides share one grid cell, so the banner is as tall as its tallest slide and nothing jumps. */
.hero-slides { display: grid; }

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darken the bottom of a photo so white text stays readable on any picture. */
.hero-slide.has-image { color: var(--text-inverse); }
.hero-slide.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(20, 18, 15, 0.55) 0%, rgba(20, 18, 15, 0) 70%),
    linear-gradient(to top, rgba(20, 18, 15, 0.85) 0%, rgba(20, 18, 15, 0.45) 45%, rgba(20, 18, 15, 0.05) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--space-10) var(--gutter-phone) calc(var(--space-16) + var(--space-2));
}

.hero-headline {
  color: inherit;
  margin: 0 0 var(--space-3);
  font: var(--type-title);
  font-family: var(--font-display);
  max-width: 22ch;
  text-wrap: balance;
}

.hero-body {
  color: inherit;
  margin: 0 0 var(--space-5);
  font: var(--type-body);
  max-width: 48ch;
  opacity: 0.95;
}

.btn.hero-button {
  width: auto;
  background: var(--surface-card);
  color: var(--red-700);
}

.btn.hero-button:hover { background: var(--red-50); }
.slide-theme--gold:not(.has-image) .btn.hero-button { background: var(--red-600); color: var(--text-inverse); }

.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  width: max-content;
  margin: 0 auto;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(20, 18, 15, 0.4);
}

.hero-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-inverse);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}


.hero-controls button:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -6px; border-radius: var(--radius-pill); }

.hero-dots { display: flex; }

.hero-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--text-inverse);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: var(--transition-control);
}

.hero-dot.is-active::before { background: var(--text-inverse); width: 24px; border-radius: var(--radius-pill); }

.home-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter-phone) var(--space-16);
}

body.has-bottom-nav .home-container { padding-bottom: calc(var(--bottom-nav-h) + var(--space-8)); }

.home-section { margin-bottom: var(--space-10); }

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.home-section-head h2 { margin: 0; font: var(--type-heading); }
.home-section-head a { font: var(--type-body-sm); font-weight: var(--weight-semibold); color: var(--text-link); white-space: nowrap; }

.home-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.home-grid > .card { margin-bottom: 0; }

.home-note { margin: var(--space-4) 0 0; color: var(--text-secondary); }

.event-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

a.event-card { transition: var(--transition-control); }
a.event-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.event-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--red-50);
  color: var(--red-700);
}

.event-date-month { font: var(--type-eyebrow); text-transform: uppercase; }
.event-date-day { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }

.event-card-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.event-card-title { font: var(--type-subheading); font-weight: var(--weight-semibold); }
.event-card-meta { font: var(--type-body-sm); color: var(--text-secondary); }
.event-card-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.event-card-badges:empty { display: none; }

.announcement-card h3,
.involve-card h3 { margin: 0 0 var(--space-2); font: var(--type-subheading); font-weight: var(--weight-semibold); }

.announcement-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font: var(--type-body-sm);
  color: var(--text-secondary);
}

.announcement-message {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.home-about p { margin: 0; font: var(--type-body); max-width: var(--measure); }

.involve-card .card-body { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.involve-card p { flex: 1; margin: 0 0 var(--space-4); color: var(--text-secondary); }

.involve-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
}

@media (min-width: 640px) {
  .hero-slide { min-height: 380px; }
  .hero-content { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
  .hero-headline { font: var(--type-hero); font-family: var(--font-display); }
  .home-container { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
  .home-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .hero-slide { min-height: 440px; }
  .home-grid { grid-template-columns: repeat(3, 1fr); }
  .home-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transition: none; }
}

/* Admin: home page banner */

.slide-thumb {
  flex: none;
  width: 72px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

.slide-actions form { margin: 0; }

.slide-preview {
  display: block;
  max-width: 100%;
  width: 360px;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.theme-options { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.field .theme-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body);
  margin: 0;
  cursor: pointer;
}

.slide-swatch { width: 24px; height: 24px; border-radius: 50%; }

.involve-card .btn { min-height: var(--control-md); font: var(--type-body-sm); font-weight: var(--weight-semibold); }