/**
 * 911 Bulletin — Design System
 *
 * :root custom properties are the design contract inherited by Phases 2–4.
 * Values copied verbatim from 01-UI-SPEC.md Component Token Summary.
 * DO NOT change token values — they are locked design decisions.
 */

:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-surface: #F4F6F9;
  --color-accent: #2B4A8A;
  --color-text: #1A1A1A;
  --color-text-muted: #4B5563;
  --color-text-on-accent: #FFFFFF;
  --color-destructive: #991B1B;
  --color-border: #D1D9E6;
  --color-focus: #2B4A8A;

  /* Typography */
  --text-body: 18px;
  --text-label: 20px;
  --text-heading: 24px;
  --text-display: 28px;
  --font-regular: 400;
  --font-bold: 700;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing (8-point grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-stack);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── App Shell: Sticky Header ──────────────────────────────────────────────── */

/* UI-SPEC Screen 4: 64px height, --color-surface, bottom border, sticky */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--space-3xl); /* 64px */
  padding: 0 var(--space-md);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-header__wordmark {
  font-size: var(--text-label); /* 20px */
  font-weight: var(--font-bold);
  color: var(--color-accent);
  text-decoration: none;
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-md); /* 16px between session text and button */
}

/* Full session indicator — hidden on very small screens (< 400px) */
.app-header__session-full {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Short fallback (Unit X) — only shown < 400px */
.app-header__session-short {
  display: none;
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

@media (max-width: 399px) {
  .app-header__session-full {
    display: none;
  }
  .app-header__session-short {
    display: inline;
  }
}

/* Sign Out button — outlined style, not accent-filled */
.app-header__logout-form {
  margin: 0;
}

.btn-sign-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-2xl); /* 48px tap target */
  padding: 0 var(--space-md);
  font-family: var(--font-stack);
  font-size: var(--text-body); /* 18px */
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.btn-sign-out:hover,
.btn-sign-out:active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-sign-out:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ─── App Shell: Almanac Bar (Phase 3) ─────────────────────────────────────── */

/* Phase 3 override: column layout, auto height. background-color and          */
/* border-bottom are unchanged from Phase 1 and re-declared for clarity.       */
/* .almanac-bar__text is removed — AlmanacBar content replaces the placeholder.*/

.almanac-bar {
  display: flex;
  flex-direction: column;  /* stack rows vertically on mobile */
  height: auto;            /* override Phase 1 fixed 48px */
  padding: 0;              /* rows carry their own padding */
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ── Row 1: Date + Day-of-Year ─────────────────────────────────────────────── */

.almanac-bar__date {
  padding: 10px var(--space-md);  /* 10px top/bottom (documented grid exception) */
  font-size: var(--text-body);    /* 18px */
  color: var(--color-text);
}

/* ── Row 2: Weather (tappable anchor linking to NWS) ──────────────────────── */

.almanac-bar__weather {
  display: flex;
  align-items: center;
  min-height: var(--space-2xl);  /* 48px tap target */
  padding: 0 var(--space-md);
  font-size: var(--text-body);   /* 18px */
  color: var(--color-accent);
  text-decoration: none;
}

.almanac-bar__weather:hover {
  text-decoration: underline;
}

.almanac-bar__weather:active {
  filter: brightness(0.9);
}

.almanac-bar__weather:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Row 3: Puget Sound tides ───────────────────────────────────────────────── */
/* Rendered only when both nextHigh and nextLow exist. Hidden (no fallback       */
/* text) when tides=[] or only one tide type is present.                         */

.almanac-bar__tides {
  padding: var(--space-sm) var(--space-md);  /* 8px top/bottom, 16px sides */
  font-size: var(--text-body);               /* 18px */
  color: var(--color-text);
}

/* ── Row 4: 3-Day Forecast Strip ──────────────────────────────────────────── */
/* Rendered only when weather !== null. Three tiles side-by-side.              */

.almanac-bar__forecast {
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);                      /* 4px between tiles */
  padding: var(--space-sm) var(--space-md);  /* 8px top/bottom, 16px sides */
}

/* Individual forecast tile ── flex child, centred column layout */
.almanac-bar__forecast-tile {
  flex: 1;
  min-width: 80px;                /* 3 tiles at 320px: (288 − 8) / 3 = ~93px */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-xs);  /* 8px top/bottom, 4px sides */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* Tile day label: "Today", "Mon", "Tue" — bold */
.almanac-bar__forecast-tile-day {
  font-size: var(--text-body);   /* 18px */
  font-weight: var(--font-bold); /* 700 */
  color: var(--color-text);
}

/* Tile hi/lo: "75°/58°" */
.almanac-bar__forecast-tile-temps {
  font-size: var(--text-body);      /* 18px */
  font-weight: var(--font-regular); /* 400 */
  color: var(--color-text);
}

/* Tile short condition: "Clear", "Cloudy", etc. */
.almanac-bar__forecast-tile-cond {
  font-size: var(--text-body);      /* 18px */
  font-weight: var(--font-regular); /* 400 */
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Row 5: Good News / Quote ──────────────────────────────────────────────── */
/* Shared base for both headline anchor and quote fallback variants.            */
/* Security T-3-09: no CSS property injects HTML; only layout and color.        */

.almanac-bar__news {
  display: flex;
  align-items: center;
  min-height: var(--space-2xl);  /* 48px tap target (headline) / consistent rhythm (quote) */
  padding: 0 var(--space-md);    /* 0px top/bottom, 16px sides */
  font-size: var(--text-body);   /* 18px */
  text-decoration: none;
  color: var(--color-accent);    /* #2B4A8A — used for headline anchor; overridden for quote */
}

/* Headline anchor hover/active/focus states (anchor variant only) */
a.almanac-bar__news:hover {
  text-decoration: underline;
}

a.almanac-bar__news:active {
  filter: brightness(0.9);
}

a.almanac-bar__news:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Headline text: 2-line clamp on mobile */
.almanac-bar__news-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Quote fallback variant — muted italic, no tap-feedback */
.almanac-bar__news--quote {
  color: var(--color-text-muted);  /* #4B5563 */
  font-style: italic;
  cursor: default;
}

/* ── Row 6: Attribution (CC-BY 4.0 — 16px exception per UI-SPEC) ──────────── */

.almanac-bar__attr {
  padding: var(--space-sm) var(--space-md);  /* 8px top/bottom, 16px sides */
  font-size: 16px;                           /* documented 16px typography exception */
  color: var(--color-text-muted);
}

.almanac-bar__attr a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ── Desktop (≥ 640px): horizontal strip ──────────────────────────────────── */

@media (min-width: 640px) {
  .almanac-bar {
    flex-direction: row;
    flex-wrap: wrap;          /* allow second line if content is very wide */
    align-items: center;
    min-height: var(--space-3xl);  /* 64px */
    padding: 0 var(--space-md);
    gap: var(--space-md);          /* 16px between sections */
    height: auto;
  }

  .almanac-bar__date {
    padding: 0;
  }

  /* Tides row: remove vertical padding in horizontal desktop strip */
  .almanac-bar__tides {
    padding: 0;
  }

  /* Forecast strip: remove vertical padding in horizontal desktop strip */
  .almanac-bar__forecast {
    padding: 0;
  }

  /* News row: flex:1 so it expands and pushes attribution right */
  .almanac-bar__news {
    flex: 1;
    min-height: var(--space-2xl);  /* still 48px tap target on desktop */
    padding: 0;
  }

  /* Headline text: truncate to 1 line on desktop (bar is 64px, single-line strip) */
  .almanac-bar__news-text {
    -webkit-line-clamp: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .almanac-bar__attr {
    margin-left: auto;  /* float attribution to the right on desktop */
    padding: 0;
    white-space: nowrap;
  }
}

/* ─── App Shell: Main Content Container ─────────────────────────────────────── */

/* UI-SPEC Screen 4: max-width 640px, centered, 24px/16px padding */

.main-content {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md); /* 24px top/bottom, 16px sides */
  background-color: var(--color-bg);
}

/* ─── Placeholder Feed (empty board state) ───────────────────────────────────── */

.feed-empty__heading {
  font-size: var(--text-heading); /* 24px */
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.feed-empty__body {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── Login Page Layout ─────────────────────────────────────────────────────── */

/* UI-SPEC Screen 1: vertically centered, single-column, 480px max-width card */

.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-md);
  background-color: var(--color-bg);
}

.login-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-lg); /* 24px on mobile */
}

@media (min-width: 640px) {
  .login-card {
    padding: var(--space-xl); /* 32px on desktop */
  }
}

/* ─── Login Identity Block ───────────────────────────────────────────────────── */

.login-identity {
  text-align: center;
  margin-bottom: var(--space-xl); /* 32px below identity block */
}

.login-identity__wordmark {
  display: block;
  font-size: var(--text-label); /* 20px */
  font-weight: var(--font-bold);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.login-identity__heading {
  font-size: var(--text-display); /* 28px */
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}

.login-identity__address {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Form Fields ────────────────────────────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg); /* 24px between fields */
}

.form-field__label {
  font-size: var(--text-label); /* 20px */
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.form-field__input {
  width: 100%;
  min-height: 56px; /* input height per UI-SPEC (48px tap target + visible border) */
  padding: 0 var(--space-md);
  font-family: var(--font-stack);
  font-size: var(--text-body); /* 18px */
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  appearance: none;
}

.form-field__input:focus-visible,
.form-field__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus);
  outline: none;
}

/* ─── Turnstile widget container ─────────────────────────────────────────────── */

.turnstile-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}

/* ─── Error block ────────────────────────────────────────────────────────────── */

/* UI-SPEC Screen 1: destructive color, left border, warning icon */

.error-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 12px var(--space-md);
  margin-top: var(--space-md);
  background-color: #FEF2F2;
  border-left: 4px solid var(--color-destructive);
  border-radius: 0 4px 4px 0;
}

.error-block__text {
  font-size: var(--text-body); /* 18px */
  color: var(--color-destructive);
  line-height: 1.5;
  margin: 0;
}

/* ─── Primary CTA Button (Enter Board / Sign In) ─────────────────────────────── */

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px; /* larger tap target for primary CTA */
  padding: 0 var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-stack);
  font-size: var(--text-label); /* 20px */
  font-weight: var(--font-bold);
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.1s ease;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-primary:active {
  filter: brightness(0.9);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Double-submit prevention — set by onclick="this.form.dataset.submitting='true'" */
[data-submitting] button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── Admin sign-in link (below Enter Board) ─────────────────────────────────── */

.login-admin-link {
  display: block;
  text-align: center;
  margin-top: var(--space-md);
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  text-decoration: none;
  /* Minimum 48px tap target */
  display: inline-block;
  padding: 12px 8px;
  min-height: var(--space-2xl); /* 48px */
  width: 100%;
  text-align: center;
}

.login-admin-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.login-admin-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Admin login card modifier (narrower than resident: 400px vs 480px) ───── */

/* UI-SPEC Screen 2: admin login card is max-width 400px */
.login-card--admin {
  max-width: 400px;
}

/* Admin heading — 24px (--text-heading) not the 28px display used on resident login */
.login-identity__heading--admin {
  font-size: var(--text-heading); /* 24px */
}

/* ─── Admin back-to-resident link ────────────────────────────────────────────── */

/* UI-SPEC Screen 2: "← Back to resident login" — accent color, 48px tap target */
.admin-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-md);
  font-size: var(--text-body); /* 18px */
  font-weight: var(--font-regular);
  color: var(--color-accent);
  text-decoration: none;
  min-height: var(--space-2xl); /* 48px tap target */
  width: 100%;
  text-align: center;
}

.admin-back-link:hover {
  text-decoration: underline;
}

.admin-back-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Admin Panel (authenticated admin pages) ───────────────────────────────── */

/* Container for admin landing page and password change form */
.admin-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-lg); /* 24px on mobile */
}

@media (min-width: 640px) {
  .admin-panel {
    padding: var(--space-xl); /* 32px on desktop */
  }
}

.admin-panel__title {
  font-size: var(--text-heading); /* 24px bold */
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.admin-panel__body {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.admin-panel__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-body); /* 18px */
  color: var(--color-accent);
  text-decoration: none;
  min-height: var(--space-2xl); /* 48px tap target */
}

.admin-panel__link:hover {
  text-decoration: underline;
}

.admin-panel__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Admin password change form ────────────────────────────────────────────── */

/* The form-field, form-field__label, form-field__input, btn-primary, and
   error-block classes are reused from the login form section above. No
   additional overrides needed — the admin password inputs match the spec:
   min-height 56px, 20px bold labels, 48px+ tap targets. */

.admin-password-form {
  margin-top: var(--space-lg); /* 24px gap between panel header and form */
}

/* ─── Success block (password change confirmation) ───────────────────────────── */

.success-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 12px var(--space-md);
  margin-top: var(--space-md);
  background-color: #F0FDF4;
  border-left: 4px solid #15803D;
  border-radius: 0 4px 4px 0;
}

.success-block__text {
  font-size: var(--text-body); /* 18px */
  color: #15803D;
  line-height: 1.5;
  margin: 0;
}

/* ─── Phase 2: Feed — New Post button modifier ───────────────────────────────── */

/* .btn-primary is the base; .btn-new-post overrides for <a> element */
.btn-new-post {
  display: flex;           /* <a> needs flex to center text like <button> */
  text-decoration: none;   /* override <a> default underline */
  margin-top: 0;           /* override btn-primary margin-top: --space-md */
}

/* ─── Phase 2: Feed — Category filter strip ─────────────────────────────────── */

.category-filter {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm); /* 8px between tabs */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-sm); /* 8px — prevents clip on scroll */
  margin-bottom: var(--space-lg); /* 24px below the strip, before the post list */
}

.category-filter::-webkit-scrollbar {
  display: none;
}

.category-filter__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-2xl); /* 48px tap target */
  padding: 0 var(--space-md); /* 0 16px */
  font-size: var(--text-body); /* 18px */
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px; /* pill shape */
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.1s ease, color 0.1s ease;
}

.category-filter__tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.category-filter__tab:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 24px;
}

.category-filter__tab--active {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-bold);
  border-color: var(--color-accent);
}

/* ─── Phase 2: Feed — Post list ─────────────────────────────────────────────── */

.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 16px between cards */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Phase 2: Feed — Post card ─────────────────────────────────────────────── */

.post-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-lg); /* 24px all sides */
}

.post-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs); /* 4px between chip and pinned badge */
  margin-bottom: var(--space-sm); /* 8px below */
  flex-wrap: wrap;
}

.post-card__title {
  font-size: var(--text-heading); /* 24px */
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-xs); /* 4px below */
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a:hover {
  text-decoration: underline;
}

.post-card__title a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.post-card__meta {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-sm); /* 8px below */
}

.post-card__body-preview {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text);
  line-height: 1.6;
  /* 3-line clamp — natural wrapping (no pre-wrap on feed preview per UI-SPEC) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--space-md); /* 16px below */
}

.post-card__footer {
  display: flex;
  align-items: center;
}

.post-card__comment-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-2xl); /* 48px tap target */
  font-size: var(--text-body); /* 18px */
  color: var(--color-accent);
  text-decoration: none;
}

.post-card__comment-link:hover {
  text-decoration: underline;
}

.post-card__comment-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ─── Phase 2: Category chip (decorative, used on feed, detail, compose) ─────── */

.category-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-body); /* 18px — meets accessibility minimum */
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px; /* pill */
  padding: 4px 12px;
  white-space: nowrap;
}

/* ─── Phase 2: Pinned badge ──────────────────────────────────────────────────── */

.pinned-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-body); /* 18px */
  font-weight: var(--font-bold);
  color: var(--color-accent);
  background: transparent;
  border: none;
  padding: 4px 0;
}

/* ─── Phase 2: Back link (compose + detail pages) ───────────────────────────── */

.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-md); /* 16px above */
  font-size: var(--text-body); /* 18px */
  color: var(--color-accent);
  text-decoration: none;
  min-height: var(--space-2xl); /* 48px tap target */
  width: 100%;
  text-align: center;
}

.back-link:hover {
  text-decoration: underline;
}

.back-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Phase 2: Compose form ──────────────────────────────────────────────────── */

.compose-heading {
  font-size: var(--text-heading); /* 24px */
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

.compose-form__textarea {
  min-height: 144px; /* ~6 lines at 18px × 1.6 line-height */
  padding: 12px var(--space-md);
  resize: vertical;
  word-break: break-word;
}

/* ─── Phase 2: Category picker (compose page) ───────────────────────────────── */

.category-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 8px between options */
  margin-bottom: var(--space-lg);
}

/* Hide the actual <input type="radio">; style the label as a tap target */
.category-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.category-btn {
  display: flex;
  align-items: center;
  min-height: var(--space-2xl); /* 48px tap target */
  padding: 0 var(--space-md);
  font-size: var(--text-body); /* 18px */
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
}

.category-btn:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: var(--font-bold);
}

.category-btn:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ─── Phase 2: Post detail ───────────────────────────────────────────────────── */

.post-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.post-detail__title {
  font-size: var(--text-display); /* 28px */
  font-weight: var(--font-bold);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.post-detail__meta {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-md);
}

/* .post-body applies pre-wrap for full post body on detail page */
.post-body {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ─── Phase 2: Section divider ───────────────────────────────────────────────── */

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0; /* 32px top and bottom */
}

/* ─── Phase 2: Comment section ───────────────────────────────────────────────── */

/* Wrapper for the replies section below the section-divider */
.comment-section {
  margin-top: 0;
}

.comment-section__heading {
  font-size: var(--text-heading); /* 24px */
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.comment-section__heading--empty {
  font-size: var(--text-body); /* 18px */
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 8px between comments */
  list-style: none;
  margin: 0 0 var(--space-xl); /* 32px below list, before reply form */
  padding: 0;
}

.comment {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md);
}

.comment__meta {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-sm);
}

/* .comment__body is the layout class; .comment-body provides pre-wrap (applied together) */
.comment__body {
  margin: 0;
}

/* .comment-body applies pre-wrap for comment text on detail page */
.comment-body {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ─── Phase 2: Comment/reply form ────────────────────────────────────────────── */

/* Reply form container — always rendered below the comment list (or empty-state heading) */
.comment-form {
  margin-top: var(--space-lg); /* 24px gap between comment list and reply form */
}

.comment-form__heading {
  font-size: var(--text-label); /* 20px */
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.comment-form__textarea {
  min-height: 96px; /* ~4 lines at 18px × 1.6 line-height */
  padding: 12px var(--space-md);
  resize: vertical;
  word-break: break-word;
}

/* ─── Phase 2: Post meta (shared, from RESEARCH §6c) ────────────────────────── */

.post-meta {
  font-size: var(--text-body); /* 18px */
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ─── Phase 4: Photos ────────────────────────────────────────────────────────── */

/* Hint text below form field label (compose photo picker) */
.form-field__hint {
  display: block;
  font-size: var(--text-body);       /* 18px — meets accessibility minimum */
  color: var(--color-text-muted);    /* #4B5563, 8.22:1 on white */
  line-height: 1.4;
}

/* File input: tap target, font inheritance */
.form-field__input-file {
  display: block;
  width: 100%;
  min-height: var(--space-2xl);      /* 48px tap target */
  padding: var(--space-sm) 0;        /* 8px top/bottom */
  font-family: var(--font-stack);
  font-size: var(--text-body);       /* 18px */
  color: var(--color-text);
}

/* Inline preview — hidden until JS shows it after resize */
.photo-preview {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: var(--space-sm);       /* 8px above; below file input */
}

/* Feed card thumbnail — crops to fill, max 240px tall */
.post-card__photo {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--space-md);    /* 16px before .post-card__footer */
}

/* Detail page full-size image — natural aspect ratio, no cropping */
.post-photo {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-top: var(--space-md);       /* 16px below post body text */
}

/* ─── Phase 5: Admin moderation action buttons ──────────────────────────────── */
/*                                                                               */
/* Used in: post-card footer (Pin/Unpin + Delete), post-detail header            */
/* (Pin/Unpin + Delete Post), and comment rows (Delete Reply).                   */
/* Both classes added to markup in 05-01; sized here (05-03) to satisfy UX-02:  */
/*   • min-height >= 44 px (48 px via --space-2xl — matches all other controls) */
/*   • font-size >= 18 px (via --text-body)                                      */
/*                                                                               */
/* Accessibility audit (Task 1 — 05-03):                                         */
/* All other interactive controls in the app already meet the 48 px / 18 px     */
/* thresholds via existing tokens. One DOCUMENTED sub-18px exception remains:    */
/*   • .almanac-bar__attr (16px) — CC-BY 4.0 attribution footnote; non-body      */
/*     metadata, not resident-facing content. Owner sign-off in SMOKE-TEST.md.   */

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-2xl);      /* 48px tap target — UX-02 */
  padding: 0 var(--space-md);        /* 0 16px horizontal */
  margin-left: var(--space-sm);      /* 8px gap from adjacent control */
  font-family: var(--font-stack);
  font-size: var(--text-body);       /* 18px — UX-02 */
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.admin-action-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.admin-action-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Danger variant — Delete Post / Delete Reply */
.admin-action-btn--danger {
  color: var(--color-destructive);   /* #991B1B */
  border-color: var(--color-destructive);
}

.admin-action-btn--danger:hover {
  background-color: #FEF2F2;         /* light red tint (matches .error-block bg) */
  border-color: var(--color-destructive);
  color: var(--color-destructive);
}