/* ParksAndRec Resident Portal — mobile-first (375px), WCAG 2.1 AA.
   Single-column by default; enhanced at ≥768px. All interactive targets
   ≥44×44px (Shared Requirement 4).

   Palette: "Muted Sage & Slate" (stakeholder-approved redesign).
   • Muted Sage #6B8F71 — brand primary / buttons / accent family.
     White text on raw #6B8F71 is only ~3.6:1 (fails AA), so the
     button/link family is darkened to AA while staying clearly sage:
       resting #5b7960 (4.81:1) · hover #4b644f (6.53:1) ·
       active #3d5241 (8.50:1) · links/focus #4b644f (5.57:1 on bg) ·
       light tint #f0f4f1 for pill nav / avatar / badges.
   • Deep Slate #3D6070 — headings / labels / nav text.
   • Barely Green #EDEEE9 — page background. Cards stay flat white with
     warm-neutral hairline borders #DCE0D8.
   Coral is retained ONLY as the semantic attention/danger color #C0392B. */

:root {
  /* ── Spec-canonical portal tokens (runtime-configurable per tenant) ── */
  --portal-primary:        #5b7960;  /* Muted Sage (AA-derived) — buttons resting */
  --portal-primary-dark:   #4b644f;  /* Sage hover */
  --portal-primary-darker: #3d5241;  /* Sage active/pressed */
  --portal-primary-tint:   #f0f4f1;  /* Light sage tint — pill nav / avatar / badges */
  --portal-bg:             #EDEEE9;  /* Page background — Barely Green */
  --portal-surface-raised: #ffffff;  /* Elevated card / input surface */
  --portal-surface-soft:   #FAFBF8;  /* Soft inset surface (waiver box) */
  --portal-text:           #3D6070;  /* Primary text / headings / labels — Deep Slate */
  --portal-text-body:      #34495a;  /* Body text — deeper slate (8.0:1 on bg) */
  --portal-text-secondary: #54697a;  /* Caption / secondary text (4.9:1 on bg) */
  --portal-sage:           #DCE0D8;  /* Warm-neutral hairline borders / dividers */
  --portal-sage-strong:    #C5CCBF;  /* Stronger border — resting inputs */
  --portal-tint-hover:     #F1F3EE;  /* Header chrome hover wash */
  --portal-error:          #C0392B;  /* Error / attention state */
  --portal-warning:        #F9A319;  /* Warning / Amber */
  --portal-accent:         #4b644f;  /* Links / focus — dark sage */
  --portal-accent-soft:    rgba(107, 143, 113, 0.30); /* Sage focus ring */
  --portal-success:        #1a7f4e;  /* Success green (AA on white) */

  /* ── Component alias tokens — map structural roles to portal tokens ── */
  --color-accent:          var(--portal-accent);         /* links, focus ring */
  --color-heading:         var(--portal-text);           /* headings + labels = Deep Slate */
  --color-text:            var(--portal-text-body);      /* body text */
  --color-text-muted:      var(--portal-text-secondary); /* captions / secondary */
  --color-border:          var(--portal-sage);           /* dividers, borders */
  --color-danger:          var(--portal-error);          /* error = #C0392B */
  --color-success:         var(--portal-success);        /* success text on light bg */
  --color-warning-bg:      #fff8e6;                      /* light Amber tint */
  --color-warning-border:  var(--portal-warning);        /* Amber #F9A319 */
  --color-attention-bg:    #FDEBE8;                      /* light attention/danger tint */

  /* ── Spacing scale (4px base — consistent rhythm / breathing room) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ── Radii — softer rounded corners (14px on all card-like boxes) ── */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Elevation — soft, warm-neutral shadows ── */
  --shadow-sm: 0 1px 2px rgba(45, 58, 51, 0.06);
  --shadow-md: 0 2px 8px rgba(45, 58, 51, 0.08);
  --shadow-lg: 0 10px 24px rgba(45, 58, 51, 0.12);
  --shadow-focus: 0 0 0 3px var(--portal-accent-soft);

  /* ── Typographic weights ── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --touch: 44px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Barely Green is painted on BOTH html and body: with short content the
   body box ends above the viewport bottom and the html canvas shows
   through — if html kept another background it reads as an off-palette
   band. body also fills the viewport so the page is seamless full-bleed. */
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background: var(--portal-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

img, svg, video { max-width: 100%; height: auto; }

/* ── Typographic hierarchy — Deep Slate headings, clear size/weight steps ── */
h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 1.875rem; margin: 0 0 var(--space-3); letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; margin: var(--space-6) 0 var(--space-3); letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-semibold); }
p  { margin: var(--space-2) 0; }

@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.5rem; }
}

a {
  color: var(--color-accent);
  text-underline-offset: 2px;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--portal-primary-darker); }

/* Inline text links inside running prose get a 44px effective touch box via
   padding without disturbing line layout. */
p a, .meta a, dd a, li a {
  display: inline-block;
  padding: 0.65rem 0.15rem;
  margin: -0.65rem -0.15rem;
}

/* ── Accessibility helpers ─────────────────────────────────────── */

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--portal-primary-dark); color: #fff;
  padding: 0.75rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* ── Header / nav — white bar, Deep Slate brand, pill-style active nav ── */

.site-header {
  background: var(--portal-surface-raised);
  color: var(--portal-text);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--portal-sage);
  box-shadow: var(--shadow-sm);
}

.nav-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  max-width: 1100px; margin: 0 auto;
}

.brand {
  color: var(--portal-text); text-decoration: none; font-weight: var(--weight-bold);
  font-size: 1.125rem; flex: 1; letter-spacing: -0.01em;
  min-height: var(--touch); display: inline-flex; align-items: center;
  overflow-wrap: anywhere;
}

.nav-toggle {
  min-width: var(--touch); min-height: var(--touch);
  background: transparent; color: var(--portal-text);
  border: 1px solid var(--portal-sage-strong);
  border-radius: var(--radius-sm); font-size: 1.2rem; cursor: pointer;
  transition: background 0.15s var(--ease);
}
.nav-toggle:hover { background: var(--portal-tint-hover); }

.cart-link {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--portal-text); text-decoration: none; font-size: 1.25rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease);
}
.cart-link:hover { background: var(--portal-tint-hover); }

.nav-links {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--portal-surface-raised);
  border-bottom: 1px solid var(--portal-sage);
  flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3);
  box-shadow: var(--shadow-lg);
}
.nav-links.open { display: flex; }

.nav-links a, .nav-links .link-button {
  color: var(--portal-text); text-decoration: none;
  min-height: var(--touch); display: inline-flex; align-items: center;
  padding: 0 var(--space-3); border-radius: var(--radius-pill);
  background: none; border: none; font-size: 1rem; cursor: pointer;
  font-weight: var(--weight-medium);
  text-align: left; width: 100%;
  transition: background 0.15s var(--ease);
}
.nav-links a:hover, .nav-links .link-button:hover { background: var(--portal-tint-hover); }
.nav-links a.active {
  background: var(--portal-primary-tint);  /* light sage pill */
  color: var(--portal-primary-dark);
  font-weight: var(--weight-semibold);
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex; position: static;
    flex-direction: row; gap: var(--space-1); background: transparent; padding: 0;
    border-bottom: none;
    box-shadow: none;
  }
  .nav-links a, .nav-links .link-button { width: auto; }
}

/* ── User menu — avatar button + dropdown ─────────────────────── */

.user-menu { position: relative; display: inline-flex; }

.avatar-btn {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 0.15s var(--ease);
}
.avatar-btn:hover { background: var(--portal-tint-hover); }
.avatar-btn:focus-visible {
  outline: 2px solid var(--portal-primary-dark); outline-offset: 2px;
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--portal-primary-tint); color: var(--portal-primary-darker);
  font-size: 0.8125rem; font-weight: var(--weight-bold);
  letter-spacing: 0.02em; line-height: 1;
  border: 1px solid var(--portal-accent-soft);
}

/* Transparent capture layer: clicking anywhere outside the open dropdown
   closes it (sits above the page, below the dropdown). */
.user-menu-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: transparent; border: none; padding: 0; margin: 0;
  cursor: default;
}

.user-dropdown {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  min-width: 12rem;
  background: var(--portal-surface-raised);
  border: 1px solid var(--portal-sage);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  display: flex; flex-direction: column;
  z-index: 60;
}

.user-dropdown-item {
  display: flex; align-items: center; width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; text-align: left;
  color: var(--portal-text); text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.user-dropdown-item:hover,
.user-dropdown-item:focus-visible {
  background: var(--portal-primary-tint); color: var(--portal-primary-darker); outline: none;
}

.user-dropdown-sep {
  height: 1px; margin: var(--space-1) var(--space-2);
  background: var(--portal-sage);
}
.user-dropdown-signout { color: var(--portal-error); }
.user-dropdown-signout:hover,
.user-dropdown-signout:focus-visible {
  background: var(--color-attention-bg); color: var(--portal-error);
}

/* ── Page scaffolding ──────────────────────────────────────────── */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-align: center; padding: var(--space-5) var(--space-4); font-size: 0.9rem;
  margin-top: var(--space-6);
}

/* ── Forms (single-column, touch-friendly) ─────────────────────── */

.form-field { margin-bottom: var(--space-4); display: flex; flex-direction: column; }
.form-field label {
  font-weight: var(--weight-semibold); margin-bottom: var(--space-2);
  color: var(--color-heading); font-size: 0.9rem; letter-spacing: 0.01em;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="time"],
input[type="number"], input[type="search"], select, textarea {
  min-height: var(--touch);
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
  border: 1px solid var(--portal-sage-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  background: var(--portal-surface-raised);
  color: var(--color-text);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--portal-text-secondary);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--portal-primary-dark);
  box-shadow: var(--shadow-focus);
}

.checkbox-row {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: var(--touch); cursor: pointer;
  color: var(--color-heading); font-weight: var(--weight-medium);
}
.checkbox-row input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  accent-color: var(--portal-primary);
}

/* ── Buttons — Muted Sage primary, AA white label ──────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: var(--touch);
  padding: 0.6rem 1.25rem;
  font-size: 1rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  width: 100%;
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease),
              transform 0.05s var(--ease), border-color 0.15s var(--ease);
}
@media (min-width: 768px) { .btn { width: auto; } }

/* .btn-primary is sometimes an anchor (<a class="btn btn-primary">), so the
   generic a:hover color rule above would otherwise repaint the label
   dark-sage on the dark-sage hover bg (illegible). Pin the label to white
   across all interaction states. */
.btn-primary, a.btn-primary,
.btn-primary:hover, a.btn-primary:hover,
.btn-primary:active, a.btn-primary:active,
.btn-primary:focus, a.btn-primary:focus { color: #fff; }
.btn-primary { background: var(--portal-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--portal-primary-dark); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--portal-primary-darker); box-shadow: none; transform: translateY(1px); }

.btn-secondary, a.btn-secondary,
.btn-secondary:hover, a.btn-secondary:hover { color: var(--portal-primary-dark); }
.btn-secondary {
  background: var(--portal-surface-raised);
  border-color: var(--portal-primary);
}
.btn-secondary:hover { background: var(--portal-primary-tint); }
.btn-secondary:active { transform: translateY(1px); }

.btn-danger { background: var(--color-danger); color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: #a53022; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

.link-button-inline {
  background: none; border: none; color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 1rem;
  min-height: var(--touch); padding: 0 0.25rem;
  transition: color 0.15s var(--ease);
}
.link-button-inline:hover { color: var(--portal-primary-darker); }

/* ── Cards & lists — flat white, warm hairline, 14px radius ────── */

.card-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin: var(--space-5) 0;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  border: 1px solid var(--portal-sage);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--portal-surface-raised);
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin: 0; }
.card h3 a, .responsive-table a {
  display: inline-flex; align-items: center;
  min-height: var(--touch);
}
.card .meta { color: var(--color-text-muted); font-size: 0.92rem; }

.badge {
  display: inline-block; padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.badge-open { background: var(--portal-primary-tint); color: var(--portal-primary-darker); }
.badge-full { background: var(--color-attention-bg); color: var(--color-danger); }
.badge-neutral { background: #EAECE6; color: var(--color-heading); }

.price { font-weight: var(--weight-bold); font-size: 1.1rem; color: var(--color-heading); }

/* ── Alerts & notices ──────────────────────────────────────────── */

.alert {
  border-radius: var(--radius); padding: var(--space-4) var(--space-4); margin: var(--space-3) 0;
  border: 1px solid;
  box-shadow: var(--shadow-sm);
}
.alert-error { background: var(--color-attention-bg); border-color: var(--color-danger); color: var(--portal-error); }
.alert-success { background: #e6f4e6; border-color: var(--color-success); color: var(--portal-text); }
.alert-info { background: var(--portal-primary-tint); border-color: var(--portal-primary); color: var(--portal-text); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: #7c3500; }

/* ── Tables — rounded white cards on desktop, stacked rows on mobile ── */

/* Data tables render as rounded white cards (match .card radius):
   border-collapse:separate + overflow:hidden lets the 14px corners clip
   the white rows. */
.responsive-table {
  width: 100%;
  background: var(--portal-surface-raised);
  border: 1px solid var(--portal-sage);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.responsive-table caption { text-align: left; font-weight: var(--weight-bold); margin-bottom: var(--space-2); color: var(--color-heading); }
.responsive-table th {
  text-align: left; padding: 0.6rem 0.5rem;
  border-bottom: 2px solid var(--color-border);
  vertical-align: top; color: var(--color-heading);
  font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.responsive-table td {
  text-align: left; padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.responsive-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 639px) {
  .responsive-table thead { display: none; }
  .responsive-table tr {
    display: block; border: 1px solid var(--portal-sage);
    border-radius: var(--radius); margin-bottom: var(--space-3); padding: var(--space-3);
    background: var(--portal-surface-raised); box-shadow: var(--shadow-sm);
  }
  .responsive-table td {
    display: flex; justify-content: space-between; gap: var(--space-3);
    border: none; padding: 0.35rem 0.25rem;
    overflow-wrap: anywhere;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: var(--weight-semibold); color: var(--color-heading);
    flex-shrink: 0;
  }
}

/* ── Cart / checkout ───────────────────────────────────────────── */

.cart-summary {
  position: sticky; bottom: 0;
  background: var(--portal-surface-raised); border-top: 3px solid var(--portal-primary);
  padding: var(--space-4); margin: var(--space-5) calc(-1 * var(--space-4)) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .cart-summary {
    position: static; border: 1px solid var(--portal-sage); border-top: 3px solid var(--portal-primary);
    border-radius: var(--radius); margin: var(--space-5) 0 0; box-shadow: var(--shadow-md);
  }
}

.total-row { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: var(--weight-bold); color: var(--color-heading); }
.line-row { display: flex; justify-content: space-between; gap: var(--space-2); }
.discount { color: var(--color-success); }

.waiver-box {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  max-height: 12rem; overflow-y: auto; padding: var(--space-4);
  background: var(--portal-surface-soft); font-size: 0.95rem;
  white-space: pre-wrap;
}

/* ── Facility calendar ─────────────────────────────────────────── */

.calendar-week {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-4) 0;
}
@media (min-width: 768px) { .calendar-week { grid-template-columns: repeat(7, 1fr); } }

.calendar-day {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2); min-height: var(--touch);
  background: var(--portal-surface-raised);
}
.calendar-day.blackout { background: var(--color-attention-bg); }
.calendar-day .day-name { font-weight: var(--weight-bold); font-size: 0.9rem; color: var(--color-heading); }
.calendar-day .slot { font-size: 0.85rem; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* ── Misc ──────────────────────────────────────────────────────── */

.empty-state {
  text-align: center; padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--portal-sage-strong); border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  background: var(--portal-surface-raised);
}

.filter-bar {
  display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5);
}
@media (min-width: 768px) {
  .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .filter-bar .form-field { margin-bottom: 0; flex: 1; min-width: 10rem; }
}

.section-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

dl.detail-list { margin: 0; }
dl.detail-list dt { font-weight: var(--weight-semibold); color: var(--color-heading); margin-top: var(--space-3); font-size: 0.9rem; letter-spacing: 0.01em; }
dl.detail-list dd { margin: 0.15rem 0 0; }