/* Glassell Park Community Garden: "seed packet" design system.
   One loud moment (the chard-colored gate block and the lock-code wheels);
   everything else is quiet, legible in sun, and easy to tap. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Palette: rainbow chard */
  --leaf: #1f6b45;
  --leaf-dark: #17543a;
  --leaf-tint: #e7f0ea;
  --chard: #b3366b;
  --chard-dark: #8f2853;
  --gold: #f2b705;
  --gold-tint: #fdf3d0;
  --gold-ink: #6b4e00;
  --ink: #1e2b22;
  --ink-soft: #4f5d53;
  --rule: #d5ddd3;
  --control-edge: #7c8a80;
  --paper: #ffffff;
  --wash: #f4f7f3;
  /* Seed-packet rack: one retro color per part of the garden */
  --marigold: #e39b12;
  --marigold-ink: #8a5a00;
  --tomato: #c8442a;
  --avocado: #5e7a1f;
  --teal: #1c7c82;
  --bluelake: #2e5f99;
  --eggplant: #5a3d6b;
  --eggplant-tint: #f1ecf4;
  /* Hero color changes monthly (core/seasons.py); chard is the fallback */
  --hero: var(--chard);
  --hero-dark: var(--chard-dark);
  /* Text-safe shade of each area color (lighter in dark mode) */
  --chard-ink: var(--chard);
  --avocado-ink: var(--avocado);
  --tomato-ink: var(--tomato);
  --teal-ink: var(--teal);
  --bluelake-ink: var(--bluelake);
  --eggplant-ink: var(--eggplant);
  /* Colors that stay the same in both themes */
  --leaf-fill: #1f6b45;
  --ink-fixed: #1e2b22;
  /* Text on leaf buttons, raised surfaces (menus, dialogs), and shadows */
  --on-leaf: #ffffff;
  --raised: #ffffff;
  --shadow: 30 43 34;
  --wheel: #1e2b22;
  --wheel-edge: transparent;
  /* Functional only: errors and mismatched money */
  --problem: #b42318;
  --problem-tint: #fdecea;

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --t-small: 0.875rem;  /* 15.75px at 18px root */
  --t-body: 1rem;       /* 18px */
  --t-h4: 1.167rem;     /* 21px */
  --t-h3: 1.333rem;     /* 24px */
  --t-h2: 1.667rem;     /* 30px */
  --t-h1: clamp(2rem, 6vw, 2.667rem); /* 36 → 48px */

  /* Shape and space */
  --r-field: 8px;
  --r-control: 10px;
  --r-panel: 14px;
  --r-gate: 22px;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --tap: 2.75rem; /* 44px+ hit area */
  --measure: 40rem;
}

/* ---------- Dark mode ----------
   Night in the garden: deep soil-green ground, lighter shades of each seed-packet
   color for text. Follows the device unless someone picks Light or Dark in the
   menu (stored per device). The two blocks below must stay identical. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --leaf: #7ccc9b;
    --leaf-dark: #a3dfb9;
    --leaf-tint: #1d3328;
    --on-leaf: #0f1a13;
    --chard-ink: #f08bb5;
    --marigold-ink: #f0b84a;
    --avocado-ink: #a8c66a;
    --tomato-ink: #f39079;
    --teal-ink: #6cc8cd;
    --bluelake-ink: #93b6ea;
    --eggplant-ink: #c8a6dc;
    --eggplant-tint: #2c2333;
    --gold-tint: #3a3117;
    --gold-ink: #f2c94c;
    --ink: #e6ece5;
    --ink-soft: #a7b4a9;
    --rule: #334038;
    --control-edge: #6f7d73;
    --paper: #151d18;
    --wash: #1e2822;
    --raised: #1f2a23;
    --shadow: 0 0 0;
    --wheel: #0b110d;
    --wheel-edge: #3d4d43;
    --problem: #ff8f80;
    --problem-tint: #3d201c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --leaf: #7ccc9b;
  --leaf-dark: #a3dfb9;
  --leaf-tint: #1d3328;
  --on-leaf: #0f1a13;
  --chard-ink: #f08bb5;
  --marigold-ink: #f0b84a;
  --avocado-ink: #a8c66a;
  --tomato-ink: #f39079;
  --teal-ink: #6cc8cd;
  --bluelake-ink: #93b6ea;
  --eggplant-ink: #c8a6dc;
  --eggplant-tint: #2c2333;
  --gold-tint: #3a3117;
  --gold-ink: #f2c94c;
  --ink: #e6ece5;
  --ink-soft: #a7b4a9;
  --rule: #334038;
  --control-edge: #6f7d73;
  --paper: #151d18;
  --wash: #1e2822;
  --raised: #1f2a23;
  --shadow: 0 0 0;
  --wheel: #0b110d;
  --wheel-edge: #3d4d43;
  --problem: #ff8f80;
  --problem-tint: #3d201c;
}

/* Area colors. --area fills shapes; --area-ink is safe for text on white;
   --area-on is the text/icon color that sits on top of --area. */
body { --area: var(--chard); --area-ink: var(--chard-ink); --area-on: #fff; --area-line: var(--area); }
/* In dark mode, underlines use the lighter text shade so they show against the ground. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --area-line: var(--area-ink); } }
:root[data-theme="dark"] body { --area-line: var(--area-ink); }
[data-area="hours"], .tone-hours { --area: var(--marigold); --area-ink: var(--marigold-ink); --area-on: var(--ink-fixed); }
[data-area="compost"], .tone-compost { --area: var(--avocado); --area-ink: var(--avocado-ink); --area-on: #fff; }
[data-area="guests"], .tone-guests { --area: var(--tomato); --area-ink: var(--tomato-ink); --area-on: #fff; }
[data-area="meetings"], .tone-meetings { --area: var(--teal); --area-ink: var(--teal-ink); --area-on: #fff; }
[data-area="money"], .tone-money { --area: var(--bluelake); --area-ink: var(--bluelake-ink); --area-on: #fff; }
[data-area="committees"], .tone-committees { --area: var(--eggplant); --area-ink: var(--eggplant-ink); --area-on: #fff; }
[data-area="people"], .tone-people { --area: var(--leaf-fill); --area-ink: var(--leaf); --area-on: #fff; }
.tone-home { --area: var(--chard); --area-ink: var(--chard-ink); --area-on: #fff; }

/* ---------- Base ---------- */

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

html {
  font-size: 112.5%; /* 18px: comfortable outdoors */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 820; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25rem; }

a { color: var(--leaf); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--leaf-dark); text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--leaf-dark); outline-offset: 2px; }

small, .small { font-size: var(--t-small); }
.muted { color: var(--ink-soft); }
.prose { white-space: pre-wrap; max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Page frame ---------- */

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--s4); }

.topbar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 4rem; }

.wordmark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--leaf);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--leaf-dark); text-decoration: none; }
.wordmark .short { display: none; }

.mainnav { display: flex; align-items: center; gap: var(--s1); }
.wordmark, .mainnav a, .mainnav button { white-space: nowrap; }
.mainnav a, .mainnav button {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s3);
  font: 600 var(--t-body) var(--text);
  color: var(--ink); text-decoration: none;
  background: none; border: 0; border-radius: var(--r-control); cursor: pointer;
}
.mainnav a:hover, .mainnav button:hover { background: var(--wash); }
.mainnav a[aria-current="page"] { color: var(--area-ink); box-shadow: inset 0 -4px 0 var(--area-line); border-radius: 0; }
.mainnav .code-btn { color: var(--chard-ink); }

.menu { display: none; position: relative; }
.menu.menu-desktop { display: block; }
.menu summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s3);
  font-weight: 600; cursor: pointer; border-radius: var(--r-control);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--wash); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 20;
  min-width: 15rem; padding: var(--s2);
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-panel);
  box-shadow: 0 12px 32px rgb(var(--shadow) / 0.16);
}
.menu-panel a, .menu-panel button {
  display: flex; width: 100%; align-items: center; min-height: var(--tap); padding: 0 var(--s3);
  font: 600 var(--t-body) var(--text); color: var(--ink); text-decoration: none;
  background: none; border: 0; border-radius: var(--r-field); cursor: pointer; text-align: left;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--wash); }
.menu-panel hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s2) 0; }

main.wrap { padding-top: var(--s5); padding-bottom: var(--s7); }

.tabbar { display: none; }

@media (max-width: 1300px) {
  .wordmark .full { display: none; }
  .wordmark .short { display: inline; }
}
@media (max-width: 1180px) {
  .mainnav { display: none; }
  .menu { display: block; }
  .menu.menu-desktop { display: none; }
}
/* Set by a script in base.html when the full navigation doesn't fit the header. */
.nav-compact .mainnav { display: none; }
.nav-compact .menu { display: block; }
.nav-compact .menu.menu-desktop { display: none; }
@media (max-width: 760px) {
  .wordmark { white-space: normal; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 3.6rem; padding: var(--s1) 0;
    font: 600 0.75rem var(--text); color: var(--ink-soft); text-decoration: none;
    background: none; border: 0; cursor: pointer;
  }
  .tabbar .icon { width: 1.5rem; height: 1.5rem; }
  .tabbar a[aria-current="page"] { color: var(--area-ink); }
  .tabbar .code-btn { color: var(--chard-ink); }
  body.has-tabbar main.wrap { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Page heading ---------- */

.page-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--s3) var(--s4); margin-bottom: var(--s5);
}
.page-head h1 { margin: 0; }

/* Title stamp: the area's color and icon, like the crop picture on a packet */
.stamp {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: var(--area); color: var(--area-on);
}
.stamp .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
h1.stamped { display: flex; align-items: center; gap: var(--s3); }
h1.stamped .stamp { width: 0.95em; height: 0.95em; min-width: 2.5rem; min-height: 2.5rem; border-radius: 0.24em; }
.page-head p { margin: var(--s1) 0 0; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.subnav {
  display: flex; gap: var(--s1); overflow-x: auto; margin: 0 0 var(--s5);
  border-bottom: 1px solid var(--rule); scrollbar-width: none;
}
.subnav a {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3);
  font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--area-ink); box-shadow: inset 0 -4px 0 var(--area-line); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 1.15rem;
  font: 600 var(--t-body) / 1.2 var(--text);
  color: var(--on-leaf); background: var(--leaf);
  border: 1.5px solid var(--leaf); border-radius: var(--r-control);
  text-decoration: none; cursor: pointer;
}
.btn:hover { color: var(--on-leaf); background: var(--leaf-dark); border-color: var(--leaf-dark); text-decoration: none; }
.btn-quiet { color: var(--leaf); background: var(--paper); }
.btn-quiet:hover { color: var(--leaf-dark); background: var(--leaf-tint); }
.btn-small { padding: 0 0.8rem; font-size: var(--t-small); }
.btn-bare {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s2);
  color: var(--ink-soft); background: none; border: 0; border-radius: var(--r-field); cursor: pointer;
  font: 600 var(--t-small) var(--text);
}
.btn-bare:hover { color: var(--problem); background: var(--problem-tint); }
.btn-block { width: 100%; }
form.inline { display: inline; margin: 0; }

/* ---------- The gate (home page hero) ---------- */

.gate {
  background:
    linear-gradient(to bottom, var(--marigold) 0 33.33%, var(--tomato) 33.33% 66.66%, var(--hero-dark) 66.66% 100%)
      bottom / 100% 1.6rem no-repeat,
    var(--hero);
  color: #fff;
  border-radius: var(--r-gate);
  padding: var(--s6) var(--s5) calc(var(--s6) + 1.6rem);
  margin-bottom: var(--s6);
}
.gate :focus-visible { outline-color: #fff; }
.gate-date {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(2.6rem, 10vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
}
.gate-date span { display: block; }
.gate-status { font-size: var(--t-h4); margin: 0 0 var(--s5); max-width: 32rem; }
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.gate .btn { min-height: 3.5rem; padding: 0 var(--s5); font-size: var(--t-h4); border-radius: 14px; }
.gate .btn-checkin { color: var(--hero-dark); background: #fff; border-color: #fff; }
.gate .btn-checkin:hover { background: var(--gold-tint); border-color: var(--gold-tint); color: var(--hero-dark); }
.gate .btn-code { color: #fff; background: transparent; border-color: rgb(255 255 255 / 0.75); }
.gate .btn-code:hover { background: var(--hero-dark); border-color: #fff; }

@media (max-width: 520px) {
  .gate { padding: var(--s5) var(--s4) calc(var(--s5) + 1.6rem); border-radius: 18px; margin-inline: calc(var(--s2) * -1); }
  .gate-actions > * { flex: 1 1 100%; }
  .gate .btn { width: 100%; }
}

/* ---------- Layout helpers ---------- */

.columns { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .columns { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .columns.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns.wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.stack > * + * { margin-top: var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.section-head h2, .section-head h3 { margin-bottom: var(--s3); }

/* ---------- Action list (rows you tap) ---------- */

.action-list { list-style: none; padding: 0; margin: 0 0 var(--s6); border-top: 1px solid var(--rule); }
.action-list li { border-bottom: 1px solid var(--rule); }
.action-list a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 3.5rem; padding: var(--s2) var(--s1);
  font-weight: 600; font-size: var(--t-h4); color: var(--ink); text-decoration: none;
}
.action-list a:hover { color: var(--leaf); background: var(--wash); }
.action-list .stamp { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
.action-list .stamp .icon { width: 1.35rem; height: 1.35rem; }
.action-list .count { margin-left: auto; }
.action-list .count + .chev { margin-left: var(--s2); }
.action-list .chev { margin-left: auto; color: var(--ink-soft); width: 1.1rem; height: 1.1rem; }

/* ---------- Seed-packet fact panel ---------- */

.packet {
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  padding: var(--s4) var(--s5) var(--s3);
  margin-bottom: var(--s6);
}
.packet h2, .packet h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.facts { margin: 0; }
.facts > div { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; }
.facts dt { display: flex; flex: 1; align-items: baseline; min-width: 0; }
.facts dt::after {
  content: ""; flex: 1; min-width: var(--s4);
  margin-left: var(--s2); border-bottom: 2px dotted var(--control-edge);
  transform: translateY(-0.25em);
}
.facts dd { margin: 0; font-weight: 700; text-align: right; }
.facts dd a { font-weight: 700; }

/* ---------- Entries (announcements, notes) ---------- */

.entry { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.entry:first-of-type { padding-top: 0; }
.entry h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.entry .meta { color: var(--ink-soft); font-size: var(--t-small); margin-bottom: var(--s2); }
.entry .prose { margin: 0; }
.pin { color: var(--chard-ink); width: 1rem; height: 1rem; vertical-align: -0.1em; }

.panel {
  background: var(--wash);
  border-radius: var(--r-panel);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.panel > :last-child { margin-bottom: 0; }
.panel h2 { font-size: var(--t-h3); }

/* ---------- Tags ---------- */

.tag {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.05rem 0.6rem; border-radius: 999px;
  font-size: var(--t-small); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--wash); color: var(--ink-soft);
}
.tag-good { background: var(--leaf-tint); color: var(--leaf-dark); }
.tag-wait { background: var(--gold-tint); color: var(--gold-ink); }
.tag-problem { background: var(--problem-tint); color: var(--problem); }

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

.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border-radius: var(--r-field);
  background: var(--leaf-tint);
}
.notice p { margin: 0; }
.notice-error { background: var(--problem-tint); color: var(--problem); font-weight: 600; }
.notice-warning { background: var(--gold-tint); }
.notice-info { background: var(--wash); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin-bottom: var(--s5); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th {
  text-align: left; font-weight: 600; font-size: var(--t-small); color: var(--ink-soft);
  padding: var(--s2) var(--s3); border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tbody tr:hover { background: var(--wash); }
.table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--ink); }
.table .num { text-align: right; white-space: nowrap; }
.table .nowrap, .nowrap { white-space: nowrap; }
.table .empty { color: var(--ink-soft); padding: var(--s5) var(--s3); }
.out { color: var(--problem); }
.in { color: var(--leaf-dark); }

/* Reconciliation: the one table where differences must jump out */
.recon td.diff { font-weight: 700; }
.recon .match { color: var(--leaf); }
.recon .mismatch { color: var(--problem); background: var(--problem-tint); }

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

.form { max-width: 36rem; }
.field { margin-bottom: var(--s4); }
.field > label, .field legend { display: block; font-weight: 600; margin-bottom: var(--s1); }
.field .req { color: var(--chard-ink); }
.help { display: block; color: var(--ink-soft); font-size: var(--t-small); margin-top: var(--s1); }
.errorlist { list-style: none; padding: 0; margin: var(--s1) 0 0; color: var(--problem); font-weight: 600; font-size: var(--t-small); }

input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
select, textarea {
  width: 100%; min-height: 3rem; padding: var(--s2) var(--s3);
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--control-edge); border-radius: var(--r-field);
}
textarea { min-height: 7rem; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--leaf); outline: 3px solid var(--leaf-tint); outline-offset: 0; }
input[type=checkbox], input[type=radio] { width: 1.3rem; height: 1.3rem; accent-color: var(--leaf); margin: 0; flex: none; }
input[type=file] { font: inherit; max-width: 100%; }
input[type=file]::file-selector-button {
  font: 600 var(--t-small) var(--text); padding: var(--s2) var(--s3); margin-right: var(--s3);
  border: 1.5px solid var(--leaf); border-radius: var(--r-field); background: var(--paper); color: var(--leaf); cursor: pointer;
}
[aria-invalid="true"] { border-color: var(--problem) !important; }

.check { display: flex; gap: var(--s3); align-items: center; min-height: var(--tap); font-weight: 600; cursor: pointer; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 var(--s4); }
.checks label { display: flex; gap: var(--s2); align-items: center; min-height: var(--tap); font-weight: 400; cursor: pointer; }
.checks > div > div { display: contents; }
.radios { display: grid; gap: 0; }
.radios label { display: flex; gap: var(--s2); align-items: center; min-height: var(--tap); cursor: pointer; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s5); }
.filters select, .filters input { width: auto; min-width: 8rem; }
.filters input[type=search] { flex: 1 1 12rem; }

.grid-form { display: grid; gap: 0 var(--s4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }

/* Line-item entry table: compact inputs */
.entry-table input:not([type=checkbox]), .entry-table select { min-height: var(--tap); min-width: 7rem; }
.entry-table td { padding: var(--s2); }

/* ---------- Lock code dialog ---------- */

.code-dialog {
  width: min(26rem, calc(100% - 2rem));
  padding: 0; border: 0; border-radius: var(--r-gate);
  color: var(--ink); background: var(--raised);
  box-shadow: 0 24px 64px rgb(var(--shadow) / 0.35);
}
.code-dialog::backdrop { background: rgb(var(--shadow) / 0.6); }
.code-dialog .inner { padding: var(--s5); }
.code-dialog .close { position: absolute; top: var(--s2); right: var(--s2); }
.code-dialog h2 { font-size: var(--t-h3); margin: 0 var(--s6) var(--s4) 0; }
.code-dialog h2:focus { outline: none; }

.wheels { display: flex; justify-content: center; gap: var(--s2); margin: var(--s2) 0 var(--s5); flex-wrap: wrap; }
.wheel {
  display: grid; place-items: center;
  width: 3.4rem; height: 4.6rem; border-radius: 12px;
  background: var(--wheel); color: #fff; border: 1px solid var(--wheel-edge);
  font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 800; font-size: 2.6rem; line-height: 1;
  box-shadow: inset 0 10px 10px -8px rgb(255 255 255 / 0.25), inset 0 -10px 10px -8px rgb(0 0 0 / 0.5);
}
.code-dialog p { text-align: center; margin-bottom: var(--s3); }
.code-dialog .upcoming { background: var(--gold-tint); border-radius: var(--r-field); padding: var(--s3); color: var(--ink); }
.code-dialog .foot { border-top: 1px solid var(--rule); padding: var(--s3) var(--s5); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .code-dialog[open] .wheel { animation: wheel-roll 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
  .code-dialog[open] .wheel:nth-child(2) { animation-delay: 70ms; }
  .code-dialog[open] .wheel:nth-child(3) { animation-delay: 140ms; }
  .code-dialog[open] .wheel:nth-child(4) { animation-delay: 210ms; }
  .code-dialog[open] .wheel:nth-child(5) { animation-delay: 280ms; }
  .code-dialog[open] .wheel:nth-child(n+6) { animation-delay: 350ms; }
  @keyframes wheel-roll {
    from { transform: translateY(-55%) rotateX(80deg); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

.matched { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.matched + .matched { margin-top: var(--s1); }
.matched .btn-bare { min-height: 2rem; min-width: 2rem; padding: 0 var(--s1); }

/* ---------- Files ---------- */

.file-list { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.file-list li { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.file-list a { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 600; }

/* ---------- Pagination ---------- */

.pagination { display: flex; gap: var(--s4); justify-content: center; align-items: center; margin-top: var(--s5); }

/* ---------- Login ---------- */

.login { max-width: 26rem; margin: var(--s6) auto; }
.login h1 { color: var(--leaf); }
.section-gap { margin-top: var(--s6); }
.section-gap-sm { margin-bottom: var(--s5); }
.measure { max-width: var(--measure); }
.login .form + p { margin-top: var(--s4); }

/* ---------- Counts (things waiting on you) ---------- */

.count {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--chard); color: #fff;
  font: 700 0.8rem/1 var(--text);
}

/* ---------- Committees ---------- */

.tag-committee { background: var(--eggplant-tint); color: var(--eggplant-ink); }
.tag .icon { width: 0.9em; height: 0.9em; }

.committee-rows .row-text { display: flex; flex-direction: column; line-height: 1.25; }
.committee-rows .count { margin-left: auto; }
.committee-rows .count + .chev { margin-left: var(--s2); }
.committee-card { display: flex; justify-content: space-between; gap: var(--s4); align-items: flex-start; }
.committee-card .prose { margin: 0; }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.decline-form { display: flex; gap: var(--s2); align-items: center; flex: 1 1 18rem; }
.decline-form input { min-height: var(--tap) !important; }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--area); color: var(--area-on);
  font: 700 0.85rem/1 var(--text); letter-spacing: 0.02em;
}

.pinned { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.pinned-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r-panel);
  background: var(--eggplant-tint);
}
.pinned-item > .icon { color: var(--eggplant-ink); margin-top: 0.2rem; }
.pinned-item p { margin: var(--s1) 0 0; }

.feed {
  max-height: min(60vh, 40rem); overflow-y: auto;
  border: 2px solid var(--ink); border-radius: var(--r-panel);
  padding: var(--s3) var(--s4);
  overscroll-behavior: contain;
}
.feed-day { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0; color: var(--ink-soft); font-size: var(--t-small); font-weight: 600; }
.feed-day::before, .feed-day::after { content: ""; flex: 1; border-top: 2px dotted var(--rule); }
.feed-empty { margin: var(--s5) 0; text-align: center; }
.post { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; }
.post-body { flex: 1; min-width: 0; }
.post-meta { margin: 0 0 2px; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; }
.post-meta time { color: var(--ink-soft); font-size: var(--t-small); }
.post-text { overflow-wrap: anywhere; }
.post-announcement .post-body { background: var(--eggplant-tint); border-radius: var(--r-field); padding: var(--s2) var(--s3); }
.post-delete { opacity: 0; }
.post:hover .post-delete, .post:focus-within .post-delete { opacity: 1; }
@media (hover: none) { .post-delete { opacity: 1; } }

.composer { margin-top: var(--s3); }
.composer textarea { min-height: 4.5rem; resize: vertical; }
.composer-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: flex-end; margin-top: var(--s2); }
.composer-row .check { margin-right: auto; min-height: 0; }
.add-member .composer-row { justify-content: flex-start; flex-wrap: nowrap; }
.add-member label { font-weight: 600; }

.people { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.people li { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.people .person { flex: 1; }
.person-menu { display: block; }
.person-menu summary { min-height: var(--tap); padding: 0 var(--s2); }
.person-menu .menu-panel { min-width: 13rem; }
.people + form, .add-member + form { margin-top: var(--s4); }
.downloads { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Invites ---------- */

.invite-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); align-items: flex-start; }
.invite-row .invite-who { flex: 1 1 24rem; min-width: 0; }
.invite-row .review-actions { margin-top: 0; }
.copy-link { margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--leaf-tint); border-radius: var(--r-field); }
.copy-link label { display: block; font-weight: 600; font-size: var(--t-small); margin-bottom: var(--s1); }
.copy-link .composer-row { flex-wrap: nowrap; margin-top: 0; }
.copy-link input { font-size: var(--t-small) !important; min-height: var(--tap) !important; }
.copy-link .btn { white-space: nowrap; }

/* ---------- Theme switch (in the menus) ---------- */

.theme-switch { padding: var(--s2) var(--s3) var(--s1); }
.theme-switch p { margin: 0 0 var(--s1); font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.theme-switch .options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: var(--r-field); background: var(--wash); }
.menu-panel .theme-switch button {
  justify-content: center; min-height: 2.25rem; padding: 0 var(--s2);
  font-size: var(--t-small); border-radius: 6px;
}
.menu-panel .theme-switch button[aria-pressed="true"] { background: var(--leaf-tint); color: var(--leaf-dark); box-shadow: inset 0 0 0 1.5px var(--leaf); }
.menu-panel .theme-switch button:hover { background: var(--raised); }

/* ---------- Language switch ---------- */

.lang-switch { margin: 0; }
.lang-switch .options { grid-template-columns: repeat(2, 1fr); }
/* On the login page it sits above the card, as a quiet pair of buttons. */
.login-lang { display: flex; justify-content: flex-end; gap: var(--s1); margin-bottom: var(--s4); }
.login-lang button {
  min-height: 2.25rem; padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--r-field);
  font: 600 var(--t-small) var(--text); color: var(--leaf); background: none; cursor: pointer;
}
.login-lang button[aria-pressed="true"] { color: var(--ink); border-color: var(--rule); background: var(--wash); }

/* ---------- Forms: grouped fields, destructive actions ---------- */

.form-group { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0 0; padding: var(--s4) 0 0; }
.form-group legend { font: 700 var(--t-h4) var(--display); padding: 0; margin-bottom: var(--s1); }
.form-group > .help { margin: 0 0 var(--s4); }
.form-actions .push-right { margin-left: auto; }
.btn-danger { background: var(--problem); border-color: var(--problem); color: var(--paper); }
.btn-danger:hover { background: var(--problem); border-color: var(--problem); color: var(--paper); filter: brightness(0.9); }

/* ---------- Documents ---------- */

.doc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.doc-list li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.doc-icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--area-ink); }
.doc-text { min-width: 0; }
.doc-title { font-weight: 700; font-size: var(--t-h4); }
.doc-text .prose { margin: var(--s1) 0 0; color: var(--ink-soft); }
.doc-text .meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--ink-soft); }

/* ---------- Votes ---------- */

.vote-rows a { padding-block: var(--s3); }
.vote-rows .row-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vote-rows .tag { margin-left: auto; flex: none; }
.vote-rows .tag + .chev { margin-left: var(--s2); }

/* The ballot: three big choices, like boxes on a paper ballot. */
.ballot { margin-bottom: var(--s6); }
.ballot fieldset { border: 0; margin: 0; padding: 0; }
.ballot legend { padding: 0; }
.ballot legend h2 { margin-bottom: var(--s3); }
.ballot-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.ballot-choice {
  display: flex; align-items: center; gap: var(--s3); min-height: 4rem; padding: 0 var(--s4);
  border: 2px solid var(--control-edge); border-radius: var(--r-control); background: var(--paper);
  font: 700 var(--t-h4) var(--display); cursor: pointer;
}
.ballot-choice:hover { background: var(--wash); }
.ballot-choice:has(input:checked) { border-color: var(--leaf); background: var(--leaf-tint); box-shadow: inset 0 0 0 1px var(--leaf); }
.ballot-choice:has(input:focus-visible) { outline: 3px solid var(--leaf); outline-offset: 2px; }
.ballot .help { margin-bottom: var(--s4); max-width: var(--measure); }
@media (max-width: 520px) { .ballot-choices { grid-template-columns: minmax(0, 1fr); } }

.ballot-cast { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); border-radius: var(--r-panel); background: var(--wash); }
.ballot-cast .stamp { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 10px; }
.ballot-cast h2 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.ballot-cast p:last-child { margin-bottom: 0; }

/* Results: the yes share as a bar, with the passing line marked on it. */
.result { margin-bottom: var(--s6); }
.verdict { font-size: var(--t-h2); margin-bottom: var(--s3); }
.verdict-passed { color: var(--leaf); }
.verdict-failed { color: var(--problem); }
.result-bar { position: relative; margin: var(--s5) 0 calc(var(--s6) + var(--s3)); max-width: var(--measure); }
.result-bar .bar { height: 1.75rem; border-radius: var(--r-field); background: var(--rule); overflow: hidden; }
.result-bar .bar-yes { display: block; height: 100%; width: var(--yes); background: var(--leaf-fill); }
.result-bar .bar-line {
  position: absolute; top: -0.4rem; bottom: -0.4rem; left: var(--needed);
  width: 3px; background: var(--ink); transform: translateX(-50%);
}
.result-bar .bar-line::after {
  content: attr(data-label); position: absolute; top: calc(100% + 0.3rem); left: 50%; transform: translateX(-50%);
  font-size: var(--t-small); font-weight: 700; white-space: nowrap; color: var(--ink);
}
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0 0 var(--s4); max-width: var(--measure); }
.tally > div { border-top: 3px solid var(--rule); padding-top: var(--s2); }
.tally-yes { border-top-color: var(--leaf-fill) !important; }
.tally dt { font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.tally dd { margin: 0; font: 760 var(--t-h2) var(--display); }
.tally dd .small { font: 600 var(--t-small) var(--text); }

/* A vote waiting for you, on the home page */
.vote-call { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.vote-call .stamp { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 10px; }
.vote-call > div { flex: 1 1 16rem; min-width: 0; }
.vote-call h2 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.vote-call p { margin: 0; color: var(--ink-soft); }