:root {
  --paper: #f6f1e7;
  --paper-2: #efe7d5;
  --ink: #2b2a27;
  --muted: #7a7368;
  --rule: #d9cfbe;
  --card: #fbf7ee;
  --moss: #5a6b3f;
  --moss-ink: #ffffff;
  --rust: #a8492c;
  --amber: #c98b2c;
  --danger: #b64427;
  /* Category palette — moss is action only; fertilizer + water get their own. */
  --fert: #7d8a4a;
  --water: #3a7aa8;
  --seed: #6b8e5a;
  --shadow: 0 1px 2px rgba(43, 42, 39, 0.06), 0 4px 20px rgba(43, 42, 39, 0.05);
  --radius: 8px;
  --topbar-h: 56px;
  --tap: 44px;
  /* Type scale: minor third (1.2) anchored at 1rem body. */
  --fs-xs: 0.75rem;     /* mono labels, micro meta */
  --fs-sm: 0.85rem;     /* small body, captions, helper */
  --fs-base: 1rem;      /* body */
  --fs-md: 1.2rem;      /* card h2 / sub-display */
  --fs-lg: 1.44rem;     /* h3 emphasized */
  --fs-xl: 1.728rem;    /* section title */
  --fs-2xl: 2.074rem;   /* hero number */
  --fs-3xl: 2.488rem;   /* display */
  /* Editorial letter-spacing: tighter for serif display, wider for mono caps. */
  --tracking-display: -0.018em;
  --tracking-h: -0.012em;
  --tracking-mono-caps: 0.06em;
  --tracking-mono: -0.005em;
}

[data-theme="dark"],
html[data-theme="auto"][data-prefers="dark"] {
  --paper: #1b1a17;
  --paper-2: #23211c;
  --ink: #e9e2d2;
  --muted: #9a928a;
  --rule: #3a352d;
  --card: #22201b;
  --moss: #8ea568;
  --moss-ink: #11140a;
  --rust: #d56e4e;
  --amber: #e0a948;
  --danger: #e0715a;
  --fert: #a5b876;
  --water: #5fa0d0;
  --seed: #8ec078;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --paper: #1b1a17;
    --paper-2: #23211c;
    --ink: #e9e2d2;
    --muted: #9a928a;
    --rule: #3a352d;
    --card: #22201b;
    --moss: #8ea568;
    --moss-ink: #11140a;
    --rust: #d56e4e;
    --amber: #e0a948;
    --danger: #e0715a;
    --fert: #a5b876;
    --water: #5fa0d0;
    --seed: #8ec078;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: var(--tracking-mono); }
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: var(--tracking-h);
  line-height: 1.2;
}
.muted { color: var(--muted); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
@media (min-width: 640px) {
  .topbar { padding: 14px 24px; }
}
.brand { display: flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; }
.brand-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: var(--fs-md); letter-spacing: var(--tracking-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.brand-sub { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
#search-input {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px 8px 32px;
  width: 280px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
#search-input:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 25%, transparent);
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  max-height: 50vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
}
.search-results[hidden] { display: none; }
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.search-result:hover, .search-result:focus { background: var(--paper-2); outline: none; }
.search-result .sr-title { font-weight: 500; }
.search-result .sr-snippet { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.search-result mark { background: color-mix(in srgb, var(--moss) 30%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; }

.icon-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  min-width: 0;
}

.stack > * + * { margin-top: 16px; }
.stack { min-width: 0; }

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.dot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 4px 10px 4px 22px;
  border-radius: 999px;
  position: relative;
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
}
.dot::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--muted);
}
.dot-green::before { background: var(--moss); }
.dot-amber::before { background: var(--amber); }
.dot-red::before { background: var(--danger); }

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow-wrap: anywhere;
}
.card h2 { margin: 0 0 12px; font-size: var(--fs-md); }
.card h3 { margin: 0 0 12px; font-size: var(--fs-base); }

.ytd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ytd-grid .num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}
.ytd-grid .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.benchmark { margin-top: 14px; }
.bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--moss), color-mix(in srgb, var(--moss) 60%, var(--rust)));
  transition: width 300ms ease-out;
}
.bench-label {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.ytd-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.ytd-extra-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--muted);
  white-space: nowrap;
}

.coach-card { display: flex; flex-direction: column; }
.coach-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.coach-head h2 { margin: 0; }
.coach-actions { display: flex; gap: 4px; }
.coach-priority {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  width: fit-content;
}
.coach-priority.p-urgent { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--rule)); }
.coach-priority.p-high { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--rule)); }
.coach-priority.p-normal { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--moss); border: 1px solid color-mix(in srgb, var(--moss) 40%, var(--rule)); }
.coach-priority.p-low { background: var(--paper-2); color: var(--muted); border: 1px solid var(--rule); }
.coach-headline { font-family: 'Fraunces', Georgia, serif; font-weight: 600; margin: 0 0 6px; font-size: var(--fs-lg); line-height: 1.2; letter-spacing: var(--tracking-h); }
.coach-body { margin: 0 0 10px; font-size: var(--fs-base); line-height: 1.55; overflow-wrap: anywhere; }
.coach-products {
  list-style: none;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: var(--paper-2);
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.coach-products li { padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: 0.9rem; overflow-wrap: anywhere; }
.coach-products li:last-child { border-bottom: 0; }
.coach-products .p-name { font-weight: 500; }
.coach-products .p-qty { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.coach-products .p-why { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.coach-reasoning {
  font-style: italic;
  font-size: 0.85rem;
  font-family: 'Fraunces', Georgia, serif;
  margin: 0 0 10px;
}
.coach-defer {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--amber) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--rule));
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0 0 10px;
}
.coach-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.thumbs { display: flex; gap: 4px; }
.thumbs button {
  min-width: 36px;
  font-size: 0.95rem;
  padding: 4px 10px;
}
.thumbs button.is-active { background: color-mix(in srgb, var(--moss) 25%, var(--card)); border-color: var(--moss); }
.coach-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-align: right;
  line-height: 1.3;
}

.bloom-stage {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 4px 0 4px;
}
.bloom-gdd, .bloom-next, .soil-line { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.soil-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); }

.shed-list { list-style: none; padding: 0; margin: 0; }
.shed-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  gap: 10px;
  border-bottom: 1px dashed var(--rule);
  font-size: 0.9rem;
  min-width: 0;
}
.shed-list li:last-child { border-bottom: 0; }
.shed-list .shed-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.shed-list .shed-qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--muted);
  flex-shrink: 0;
}
.shed-list .shed-edit, .shed-list .shed-del {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  font-size: 1rem;
  border-radius: 4px;
}
.shed-list .shed-edit:hover, .shed-list .shed-del:hover { background: var(--paper-2); color: var(--ink); }
.shed-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }

.zones-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.zones-head h2 { margin: 0; }
.btn-small { padding: 6px 12px; min-width: var(--tap); min-height: var(--tap); font-size: 1rem; line-height: 1.2; }
.zones-list { list-style: none; padding: 0; margin: 0; }
.zones-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 0.92rem;
}
.zones-list li:last-child { border-bottom: 0; }
.zones-list .zone-name { font-family: 'Work Sans', sans-serif; }
.zones-list .zone-inches {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.zones-foot {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 8px;
}

.weather-card { margin-top: 16px; padding: 18px; }
.weather-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .weather-grid { grid-template-columns: 1.2fr 1fr 1fr 1.1fr; align-items: start; gap: 24px; }
}
.weather-now h2 { margin: 0 0 6px; font-size: var(--fs-md); }
.now-temp { display: flex; align-items: baseline; gap: 10px; }
.now-temp .num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.now-meta { font-size: 0.85rem; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

.weather-cell { min-width: 0; }
.cell-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-caps);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.cell-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.cell-sub { font-size: 0.8rem; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.weather-cell .bar { margin-top: 6px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--muted);
  white-space: nowrap;
}
.chip.chip-good { color: var(--moss); border-color: color-mix(in srgb, var(--moss) 50%, var(--rule)); }
.chip.chip-warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--rule)); }
.chip.chip-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--rule)); }

.rain-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 18%, var(--card));
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--rule));
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rain-banner .rain-icon { font-size: 1.1rem; }

.afd-section {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}
/* AFD owns its own internal padding via .afd-summary + .afd-body — never
   let a tier modifier (.tier-ambient) cut into the dark masthead. */
.afd-section.card,
.afd-section.tier-ambient { padding: 0; }
/* Reversed-ink "masthead" header — the AFD is a forecaster's column;
   give it the editorial weight of one. */
.afd-summary {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius) var(--radius) 0 0;
}
.afd-section:not([open]) .afd-summary { border-radius: var(--radius); }
.afd-summary::-webkit-details-marker { display: none; }
.afd-summary::before {
  content: '▸';
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: 0.85rem;
  display: inline-block;
  transition: transform 120ms;
  margin-right: 6px;
}
.afd-section[open] .afd-summary::before { transform: rotate(90deg); }
.afd-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-md);
  flex: 1;
  min-width: 0;
  letter-spacing: var(--tracking-h);
}
.afd-title .glossary { color: var(--paper); }
.afd-title .glossary::after { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.afd-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  letter-spacing: var(--tracking-mono);
}
.afd-body {
  padding: 14px 18px 18px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.afd-body h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-caps);
  color: var(--muted);
  margin: 12px 0 4px;
}
.afd-body h4:first-child { margin-top: 0; }

.alerts-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert-item {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--amber) 14%, var(--card));
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert-item.alert-severe {
  background: color-mix(in srgb, var(--danger) 16%, var(--card));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--rule));
}
.alert-item .alert-icon { font-size: 1.1rem; line-height: 1; padding-top: 2px; }
.alert-item .alert-body { flex: 1; min-width: 0; }
.alert-item .alert-event {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  margin: 0 0 2px;
}
.alert-item .alert-headline { font-size: 0.9rem; overflow-wrap: anywhere; }
.alert-item .alert-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
}

.upcoming-cal-section { margin-top: 28px; }
.upcoming-cal-card { padding: 12px; }
.upcoming-cal-body { display: flex; flex-direction: column; gap: 6px; }
.upcoming-day {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: 8px;
  border-left: 3px solid transparent;
  align-items: center;
  min-height: 56px;
  min-width: 0;
}
.upcoming-day.is-today {
  border-left-color: var(--moss);
  background: var(--card);
}
.upcoming-day.band-fert { background: color-mix(in srgb, var(--fert) 14%, var(--paper-2)); }
.upcoming-day.band-weed { background: color-mix(in srgb, var(--rust) 10%, var(--paper-2)); }
.upcoming-day.band-grub { background: color-mix(in srgb, var(--amber) 10%, var(--paper-2)); }
.upcoming-day.band-aerate { background: color-mix(in srgb, #8e7a3f 10%, var(--paper-2)); }
.upcoming-day.band-seed { background: color-mix(in srgb, #6b8e5a 10%, var(--paper-2)); }
.upcoming-day.band-observe { background: color-mix(in srgb, var(--muted) 8%, var(--paper-2)); }

.upcoming-date { display: flex; flex-direction: column; line-height: 1; }
.upcoming-dow {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}
.upcoming-dom {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 3px;
}
.upcoming-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}
.upcoming-tasks:empty::before {
  content: '—';
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.task-pill {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.35;
  cursor: default;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.task-pill.source-coach { cursor: help; }
.task-pill.priority-urgent {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  font-weight: 500;
}
.task-pill.priority-high {
  border-color: var(--amber);
  color: color-mix(in srgb, var(--amber) 80%, var(--ink));
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.task-pill.priority-normal {
  border-color: var(--moss);
  color: var(--moss);
}
.task-pill.priority-low {
  color: var(--muted);
}
.task-pill.source-projection {
  font-style: italic;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}
.task-pill.source-alert {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  font-weight: 500;
}
.upcoming-band-legend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  line-height: 1.5;
}

.diagnose-section { margin-top: 28px; }
.diagnose-card { display: flex; flex-direction: column; gap: 14px; }
.diagnose-picker { display: inline-block; }
.diagnose-picker .btn { cursor: pointer; }
.diagnose-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diagnose-preview {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: block;
  margin: 0 auto;
}
.diagnose-controls { display: flex; flex-direction: column; gap: 8px; }
.diagnose-controls input[type=text] {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
}
.diagnose-controls input[type=text]:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 25%, transparent);
}

.diagnose-result {
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: 8px;
  border-left: 3px solid var(--moss);
}
.diagnose-result.sev-severe { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--paper-2)); }
.diagnose-result.sev-moderate { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--paper-2)); }
.diagnose-result.sev-mild { border-left-color: var(--moss); }
.diagnose-result.sev-none { border-left-color: var(--muted); }
.diagnose-result h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.diagnose-result .dx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  margin-bottom: 8px;
}
.diagnose-result .dx-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.diagnose-result .dx-action { font-size: 0.95rem; margin: 0 0 8px; }
.diagnose-result .dx-notes { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 0; }

.diagnose-history-wrap { margin-top: 12px; }
.diagnose-history-wrap summary { cursor: pointer; padding: 8px 0; font-size: 0.85rem; }
.diagnose-history {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.diagnose-history li {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 6px;
  font-size: 0.88rem;
}
.diagnose-history .dx-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.history-cal-section { margin-top: 28px; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cal-swatch-rain { background: var(--water); }
.cal-swatch-water { background: color-mix(in srgb, var(--water) 80%, var(--moss)); }
.history-cal-card { padding: 12px; overflow-x: auto; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-dow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-align: center;
  color: var(--muted);
  padding: 4px 0;
}
.cal-cell {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid transparent;
  padding: 3px 4px 4px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  transition: background 100ms, border-color 100ms;
}
.cal-cell:hover { background: var(--card); border-color: var(--rule); }
.cal-cell:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }
.cal-empty { background: transparent; cursor: default; pointer-events: none; min-height: 60px; }
.cal-cell.is-today { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 8%, var(--paper-2)); }
.cal-cell.has-data { background: var(--card); }
.cal-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}
.cal-cell.is-today .cal-day { font-weight: 700; color: var(--moss); }
.cal-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  flex: 1;
}
.cal-bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; }
.cal-bar.cal-rain { background: color-mix(in srgb, #3a7aa8 80%, transparent); }
.cal-bar.cal-water { background: color-mix(in srgb, var(--water) 75%, transparent); }
.cal-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 3px;
  min-height: 8px;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.cal-dot.cat-fert { background: var(--fert); }
.cal-dot.cat-weed { background: var(--rust); }
.cal-dot.cat-grub { background: var(--amber); }
.cal-dot.cat-seed { background: var(--seed); }
.cal-dot.cat-water { background: var(--water); }
.cal-dot.cat-other { background: var(--muted); }
.cal-dot.ms-mow { background: var(--moss); }
.cal-dot.ms-mow-first { background: var(--rust); box-shadow: 0 0 0 1px var(--paper-2); }
.cal-dot.ms-sprinklers_on, .cal-dot.ms-sprinklers_off { background: var(--water); }
.cal-dot.ms-aeration, .cal-dot.ms-dethatch, .cal-dot.ms-overseed { background: #8e7a3f; }
.cal-dot.ms-lime, .cal-dot.ms-soil_test, .cal-dot.ms-other { background: var(--muted); }

.cal-detail {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: toast-in 180ms ease-out;
}
.cal-detail-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow);
}
.cal-detail-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  width: var(--tap);
  height: var(--tap);
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
}
.cal-detail-close:hover { background: var(--paper-2); color: var(--ink); }
.cal-detail-card h3 { margin: 0 40px 12px 0; font-size: 1.1rem; }
.cal-detail-card h4 {
  margin: 14px 0 4px;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.cal-detail-card ul { list-style: none; padding: 0; margin: 0; }
.cal-detail-card li { padding: 3px 0; font-size: 0.92rem; }
.cal-detail-stats .cal-detail-key {
  display: inline-block;
  width: 60px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.cal-detail-first-mow { color: var(--rust); font-style: italic; font-size: 0.8rem; }

.milestones-section { margin-top: 28px; }
.milestone-card { padding: 16px; }
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .milestone-grid { grid-template-columns: repeat(2, 1fr); }
}
.ms-btn {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 10px;
  min-height: 64px;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.ms-btn:hover { background: var(--card); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.ms-btn.hero {
  background: var(--moss);
  color: var(--moss-ink);
  border-color: color-mix(in srgb, var(--moss) 70%, black);
  grid-column: span 3;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  min-height: 72px;
}
@media (max-width: 480px) {
  .ms-btn.hero { grid-column: span 2; }
}
.ms-btn.hero:hover { background: color-mix(in srgb, var(--moss) 88%, black); }

.milestone-custom {
  margin-top: 14px;
  border-top: 1px dashed var(--rule);
  padding-top: 10px;
}
.milestone-custom summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', monospace;
  list-style: none;
}
.milestone-custom summary::-webkit-details-marker { display: none; }
.milestone-custom summary::before { content: '+ '; margin-right: 4px; color: var(--moss); }
.milestone-custom[open] summary::before { content: '− '; }
.milestone-form { margin-top: 10px; }
.milestone-form .field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.milestone-form label { font-size: 0.8rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.milestone-form input, .milestone-form select, .milestone-form textarea {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
}
.milestone-form input:focus, .milestone-form select:focus, .milestone-form textarea:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 25%, transparent);
}

.milestone-history { margin-top: 16px; padding: 16px; }
.ms-history-title { margin: 0 0 10px; font-size: 1rem; }
.milestone-list { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; }
.milestone-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  gap: 10px;
  min-width: 0;
}
.milestone-list li:last-child { border-bottom: 0; }
.milestone-list .ms-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 78px;
}
.milestone-list .ms-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.milestone-list .ms-label strong { font-weight: 500; }
.milestone-list .ms-label small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.log-section { margin-top: 28px; }
.log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.log-section h2 { font-size: 1.25rem; margin: 0; }
.log-meta { display: flex; align-items: baseline; gap: 12px; }
.export-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.export-link:hover { background: var(--paper-2); color: var(--ink); border-color: var(--moss); }
.export-link:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
@media (min-width: 960px) {
  .log-grid { grid-template-columns: 340px minmax(0, 1fr); }
}

.add-form .field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.nl-field {
  padding: 10px 12px;
  margin: 0 -12px 14px;
  background: color-mix(in srgb, var(--moss) 8%, var(--card));
  border-left: 3px solid var(--moss);
  border-radius: 0 6px 6px 0;
}
.nl-wrap { display: flex; flex-direction: column; gap: 6px; }
.nl-wrap textarea { min-height: 3em; }
.nl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.nl-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  margin-top: 6px;
}
.nl-status.nl-error { color: var(--danger); }
.nl-status.nl-success { color: var(--moss); }
#nl-mic.is-listening {
  background: var(--rust);
  color: white;
  border-color: color-mix(in srgb, var(--rust) 70%, black);
}

.nl-label-preview {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  align-items: flex-start;
}
.nl-label-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--paper-2);
}
.nl-label-body { flex: 1; min-width: 0; }
.nl-label-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.nl-label-facts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.nl-label-facts .fact-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.nl-label-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.add-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.add-form label { font-size: 0.8rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.add-form input, .add-form select, .add-form textarea {
  font: inherit;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  min-width: 0;
}
.add-form input:focus, .add-form select:focus, .add-form textarea:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 25%, transparent);
}
.add-form textarea { resize: vertical; min-height: 2.5em; }
.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.form-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.btn {
  font: inherit;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: inherit;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.btn:hover { background: var(--card); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.btn-primary {
  background: var(--moss);
  color: var(--moss-ink);
  border-color: color-mix(in srgb, var(--moss) 70%, black);
}
.btn-primary:hover { background: color-mix(in srgb, var(--moss) 85%, black); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--rule)); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.log-table-wrap { padding: 0; overflow: hidden; max-width: 100%; }
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.log-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.log-table th, .log-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.log-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--paper-2);
  position: sticky;
  top: var(--topbar-h);
  z-index: 1;
}
.log-table td .cat {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--muted);
  text-transform: lowercase;
}
.log-table td .cat.cat-fert { color: var(--fert); border-color: color-mix(in srgb, var(--fert) 50%, var(--rule)); }
.log-table td .cat.cat-weed { color: var(--rust); border-color: color-mix(in srgb, var(--rust) 50%, var(--rule)); }
.log-table td .cat.cat-grub { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--rule)); }
.log-table td .cat.cat-seed { color: var(--seed); border-color: color-mix(in srgb, var(--seed) 50%, var(--rule)); }
.log-table td .cat.cat-water { color: var(--water); border-color: color-mix(in srgb, var(--water) 50%, var(--rule)); }
.log-table td.num-col { text-align: right; font-family: 'JetBrains Mono', monospace; }
.log-table th.num-col { text-align: right; }
.log-table th.actions-col { width: 48px; }
.log-table tr.log-empty td { color: var(--muted); text-align: center; padding: 24px; }
.log-table tr.row-deleting { opacity: 0.35; }
.row-delete {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 0;
}
.row-delete:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.row-delete:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }

.toast-region {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 180ms ease-out;
  min-width: 260px;
}
.toast.toast-error { background: var(--danger); color: white; }
.toast .t-body { flex: 1; }
.toast button {
  font: inherit;
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.toast button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.toast .countdown { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; opacity: 0.75; width: 2ch; text-align: right; }

@keyframes toast-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.push-section { margin-top: 28px; padding: 0; }
.push-summary {
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  flex-wrap: wrap;
}
.push-summary::-webkit-details-marker { display: none; }
.push-summary::before {
  content: '▸';
  color: var(--moss);
  font-size: 0.85rem;
  margin-right: 6px;
  transition: transform 120ms;
}
.push-section[open] .push-summary::before { transform: rotate(90deg); }
.push-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
  min-width: 0;
}
.push-body { padding: 0 18px 16px; border-top: 1px dashed var(--rule); padding-top: 14px; }
.push-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.push-topic {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 0;
}
.push-topic input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--moss); }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 640px) {
  .wrap { padding: 16px; }
  #search-input { width: 140px; padding: 8px 10px 8px 30px; }
  .search-results {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 360px);
  }
  .brand-sub { display: none; }
  .topbar-actions { gap: 6px; }
}
@media (max-width: 480px) {
  .log-table th:nth-child(4),
  .log-table td:nth-child(4),
  .log-table th:nth-child(6),
  .log-table td:nth-child(6) {
    display: none;
  }
}
@media (max-width: 400px) {
  .ytd-grid { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .ytd-grid > *:last-child { grid-column: span 2; }
  .brand-title { font-size: 1.05rem; }
}

/* Glossary tooltips — see web/assets/glossary.js for the data dictionary.
   Two patterns:
   1. Inline text: <span class="glossary" data-glossary="key">term</span>
      → dotted underline + tiny ? glyph
   2. Themed elements (chips, buttons): just data-glossary attribute, no class
      → cursor: help only; visual treatment comes from the host class
*/
[data-glossary] { cursor: help; }
.glossary {
  border-bottom: 1px dotted color-mix(in srgb, currentColor 50%, transparent);
  position: relative;
  padding-right: 0.85em;
  display: inline;
}
.glossary::after {
  content: '?';
  position: absolute;
  top: 0;
  right: 0;
  width: 0.75em;
  height: 0.75em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65em;
  line-height: 0.75em;
  text-align: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--moss) 30%, var(--paper-2));
  color: var(--moss);
  font-weight: 600;
  vertical-align: super;
  margin-left: 2px;
  margin-top: -2px;
}
.glossary:hover, .glossary:focus-visible {
  outline: none;
  border-bottom-color: currentColor;
}
.glossary:focus-visible::after {
  background: var(--moss);
  color: var(--moss-ink);
}

.glossary-popover {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: toast-in 180ms ease-out;
}
.glossary-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow);
}
.glossary-close {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  width: var(--tap);
  height: var(--tap);
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
}
.glossary-close:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.glossary-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 40px 10px 0;
  letter-spacing: -0.01em;
}
.glossary-body {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── Settings drawer ──────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
}
.drawer[hidden] { display: none; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.42);
  backdrop-filter: blur(2px);
  animation: drawer-fade 160ms ease-out;
}
.drawer-panel {
  position: relative;
  width: min(440px, 92vw);
  max-width: 100vw;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: drawer-slide 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
@keyframes drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.drawer-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.drawer-close { color: var(--ink); }
.drawer-section {
  padding: 18px 18px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.drawer-section:last-of-type { border-bottom: 0; }
.drawer-h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}
.drawer-h3-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.drawer-h3-row .drawer-h3 { margin: 0; }
.drawer-h3-meta { font-size: 0.78rem; }
.drawer-help {
  font-size: 0.85rem;
  margin: 0 0 10px;
  line-height: 1.5;
}
.drawer-help code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.theme-picker {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  padding: 3px;
  background: var(--paper-2);
  gap: 2px;
}
.theme-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  transition: background 120ms, color 120ms;
}
.theme-opt[aria-checked="true"] {
  background: var(--moss);
  color: var(--moss-ink);
  font-weight: 500;
}
.theme-opt:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}
.ics-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ics-url {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  padding: 8px 10px;
  background: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 6px;
  color: var(--ink);
  overflow-x: auto;
  text-overflow: ellipsis;
}
.ics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 480px) {
  .drawer-panel { width: 100vw; }
  .drawer-section { padding: 16px 16px 4px; }
  .drawer-head { padding: 14px 16px 10px; }
}

/* ── Plan / Activity section wrappers (9.3 IA merge) ──────────────────── */
.plan-section,
.activity-section { margin-top: 28px; min-width: 0; }
.plan-section > * + *,
.activity-section > * + * { margin-top: 14px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 6px;
  min-width: 0;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.section-sub { font-size: var(--fs-sm); color: var(--muted); }

.activity-tabs {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  padding: 3px;
  background: var(--paper-2);
  gap: 2px;
}
.activity-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  transition: background 120ms, color 120ms;
}
.activity-tab[aria-selected="true"] {
  background: var(--moss);
  color: var(--moss-ink);
  font-weight: 500;
}
.activity-tab:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* Inside .plan-section the .upcoming-cal-card no longer needs the
   surrounding section wrapper margin/padding rules; tighten it up. */
.plan-section .upcoming-cal-card { padding: 14px; margin: 0; }
.plan-section .coach-card { margin: 0; }

/* ── Bottom tab nav (mobile) + scroll-spy active state ────────────────── */
.tabnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
.tabnav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 50px;
  transition: color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.tabnav-item svg { stroke: currentColor; }
.tabnav-item.active { color: var(--moss); }
.tabnav-item.active .tabnav-label { font-weight: 600; }
.tabnav-item:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: -2px;
  border-radius: 6px;
}
.tabnav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 720px) {
  .tabnav { display: flex; }
  /* Reserve scroll bottom so the last card isn't hidden behind the tabs. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}

/* ── Visual tiers (10.3) ──────────────────────────────────────────────────
   Hero    — weather, coach. More padding, deeper shadow, accent edge.
   Default — every other .card.
   Ambient — shed, zones, history-cal, AFD. Lighter shadow, thin border,
             slightly tighter padding so they recede behind the heroes. */
.card.tier-hero {
  padding: 22px 22px 20px;
  box-shadow:
    0 1px 2px rgba(43, 42, 39, 0.07),
    0 8px 32px rgba(43, 42, 39, 0.07);
  border-left: 3px solid color-mix(in srgb, var(--moss) 70%, transparent);
}
[data-theme="dark"] .card.tier-hero,
html[data-theme="auto"][data-prefers="dark"] .card.tier-hero {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.28);
}
.card.tier-ambient {
  padding: 14px 14px 12px;
  box-shadow: 0 1px 0 rgba(43, 42, 39, 0.04);
  background: color-mix(in srgb, var(--card) 88%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
[data-theme="dark"] .card.tier-ambient,
html[data-theme="auto"][data-prefers="dark"] .card.tier-ambient {
  background: color-mix(in srgb, var(--card) 80%, var(--paper));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.card.tier-ambient h2,
.card.tier-ambient h3 { font-size: var(--fs-base); }