/* Sow by Season site styles. Tokens follow the Sow by Season design system
   (one sprout, four seasons): https://claude.ai/artifact/QbQret4yuTQSZTV9gsCFYf
   The whole page switches season with data-season on <html>. */

:root, [data-season="fall"] {
  --ground: #FBF1EA; --surface: #FFFFFF; --ink: #2B1D16; --accent: #A3461F; --on-accent: #FFFFFF;
  --tile: #2B1D16; --leaf-1: #C8642F; --leaf-2: #E3A04F; --chip: #F5DCCB;
}
[data-season="spring"] {
  --ground: #F4FAF1; --surface: #FFFFFF; --ink: #1C2B22; --accent: #2F7D3A; --on-accent: #FFFFFF;
  --tile: #1C2B22; --leaf-1: #5DAE4F; --leaf-2: #A8D88E; --chip: #E1F1DA;
}
[data-season="summer"] {
  --ground: #FFF8E8; --surface: #FFFFFF; --ink: #2A2414; --accent: #9A5A00; --on-accent: #FFFFFF;
  --tile: #2A2414; --leaf-1: #7FCB7A; --leaf-2: #E9A23B; --chip: #FCE9C2;
}
[data-season="winter"] {
  --ground: #EEF4F8; --surface: #FFFFFF; --ink: #12263A; --accent: #2F5F86; --on-accent: #FFFFFF;
  --tile: #12263A; --leaf-1: #9CC9E3; --leaf-2: #FFFFFF; --chip: #DCE8F0;
}
:root {
  color-scheme: light;
  --f-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-7: 28px; --space-9: 36px; --space-12: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --border-card: 2px; --border-cell: 1px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--f-body);
  transition: background-color .3s; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto;
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); } }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.section { padding-block: var(--space-9); }
.mono, .data { font-family: var(--f-mono); font-weight: 500; font-size: 14px; line-height: 1.45; }
.label { font: 500 12px/16px var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 1.12rem; max-width: 62ch; }
.muted { opacity: .85; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: 18px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand span { font: 800 24px/1 var(--f-display); letter-spacing: -0.5px; }
.sprout { width: 44px; height: 44px; flex: none; }
.sprout .t { fill: var(--tile); } .sprout .s { stroke: var(--ground); } .sprout .l1 { fill: var(--leaf-1); } .sprout .l2 { fill: var(--leaf-2); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-6); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 0; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.town-btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: var(--border-card) solid var(--ink);
  background: var(--surface); color: var(--ink); font: 500 14px var(--f-mono); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; }

/* buttons, chips */
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-7);
  border-radius: var(--radius-pill); font: 700 16px var(--f-body); text-decoration: none; cursor: pointer;
  border: var(--border-card) solid var(--accent); background: var(--accent); color: var(--on-accent); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn.small { min-height: 44px; padding: 0 var(--space-6); font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip { display: inline-flex; align-items: center; padding: 6px var(--space-3); border-radius: var(--radius-pill);
  background: var(--chip); color: var(--ink); font: 700 14px/20px var(--f-body); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
a.chip { text-decoration: none; min-height: 44px; padding: 0 16px; }
.toggle { min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: var(--border-card) solid var(--ink);
  background: var(--surface); color: var(--ink); font: 700 14px var(--f-body); cursor: pointer; }
.toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* cards */
.card { background: var(--surface); border: var(--border-card) solid var(--ink); border-radius: var(--radius-lg);
  padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.card.dark { background: var(--tile); color: var(--ground); border-color: var(--tile); }
.card.dark .label { color: var(--leaf-1); }
.card.dark .btn { background: var(--ground); color: var(--tile); border-color: var(--ground); }
.grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { padding: 20px; gap: 6px; }
.stat .big { font: 800 28px/1.1 var(--f-display); }
.stat .sub { font: 500 13px/1.4 var(--f-mono); }

/* month strip */
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); max-width: 720px; }
.months span { height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  font: 500 13px var(--f-mono); border: var(--border-cell) solid var(--ink); }
.months span.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* hero */
.hero { padding-block: 40px 48px; display: flex; flex-direction: column; gap: var(--space-7); }
.hero h1 { max-width: 15ch; }
.hero .label { font-size: 14px; letter-spacing: 0; text-transform: none; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.field label, .field .legend { font-weight: 700; font-size: 15px; }
input[type="text"], input[type="search"] { min-height: 52px; width: 100%; padding: 0 var(--space-4); font: 400 17px var(--f-body);
  color: var(--ink); background: var(--surface); border: var(--border-card) solid var(--ink); border-radius: var(--radius-md); }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: var(--border-card) solid var(--ink); border-radius: var(--radius-md); max-height: 320px; overflow: auto; }
.suggest li { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--chip); }
.suggest .where { font: 500 13px var(--f-mono); }
.crop-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crop-group { display: flex; flex-direction: column; gap: var(--space-2); }
.crop-group h3 { font: 600 16px var(--f-display); }
.note { padding: 12px 16px; border-radius: var(--radius-md); background: var(--chip); font-size: 15px; }

/* tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: var(--border-card) solid var(--ink); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; padding: 16px 20px; border-bottom: var(--border-card) solid var(--ink); font-weight: 700; white-space: nowrap; }
td { padding: 14px 20px; border-bottom: var(--border-cell) solid var(--ink); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.d { font: 500 14px/1.5 var(--f-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
td.crop { font-weight: 700; min-width: 9rem; }
.warn { display: inline-block; margin-top: 4px; font: 500 12px/1.4 var(--f-mono); color: var(--accent); }

/* chart */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid-line { stroke: var(--chip); stroke-width: 1; }
.chart-svg .axis { stroke: var(--ink); stroke-width: 1.5; }
.chart-svg text { font: 500 12px var(--f-mono); fill: var(--ink); }
.chart-svg .dot { fill: var(--leaf-1); }
.chart-svg .trend { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--leaf-1); margin-right: 8px; vertical-align: -1px; }
.legend b { display: inline-block; width: 20px; height: 3px; background: var(--accent); margin-right: 8px; vertical-align: 3px; }
details summary { cursor: pointer; font-weight: 700; color: var(--accent); }
details table { font-size: 14px; }

/* planner results */
.plan-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--space-4); align-items: start;
  padding-block: var(--space-4); border-top: var(--border-cell) solid var(--ink); }
.plan-row:first-child { border-top: 0; }
.plan-row h3 { font-size: 1.1rem; }
.year { position: relative; height: 28px; border-radius: var(--radius-sm); background: var(--ground); border: var(--border-cell) solid var(--ink); overflow: hidden; }
.year .bar { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; }
.year .bar.indoor { background: var(--leaf-2); border: 1px solid var(--ink); }
.year .bar.out { background: var(--accent); }
.year .bar.harvest { background: var(--leaf-1); }
.year .bar.pause { background: repeating-linear-gradient(45deg, var(--chip), var(--chip) 4px, var(--surface) 4px, var(--surface) 8px); border: 1px dashed var(--ink); }
.year .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .15; }
.year .today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.year-axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font: 500 11px var(--f-mono); margin-top: 4px; }
.year-axis span { padding-left: 2px; }
.events { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.events b { font-weight: 700; }
.events .d { font: 500 14px var(--f-mono); }
.key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.key span::before { content: ""; display: inline-block; width: 18px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.key .k-indoor::before { background: var(--leaf-2); border: 1px solid var(--ink); }
.key .k-out::before { background: var(--accent); }
.key .k-harvest::before { background: var(--leaf-1); }
.key .k-pause::before { background: repeating-linear-gradient(45deg, var(--chip), var(--chip) 4px, var(--surface) 4px, var(--surface) 8px); border: 1px dashed var(--ink); }
@media (max-width: 640px) { .plan-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

/* region lists */
.town-list { columns: 3 220px; column-gap: var(--space-7); list-style: none; padding: 0; margin: 0; }
.town-list li { break-inside: avoid; padding: 6px 0; }
.town-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.town-list a:hover { color: var(--accent); text-decoration: underline; }
.crumbs { font: 500 13px var(--f-mono); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--accent); }

/* season-specific blocks: only the current season's is shown */
[data-for-season] { display: none; }
[data-season="spring"] [data-for-season~="spring"], [data-season="summer"] [data-for-season~="summer"],
[data-season="fall"] [data-for-season~="fall"], [data-season="winter"] [data-for-season~="winter"] { display: revert; }
[data-show-when] { display: none; }
[data-state~="first"] [data-show-when="first"], [data-state~="returning"] [data-show-when="returning"] { display: revert; }
/* shown blocks keep their own layout (display: revert would drop flex/grid) */
[data-season="spring"] .grid[data-for-season~="spring"], [data-season="summer"] .grid[data-for-season~="summer"],
[data-season="fall"] .grid[data-for-season~="fall"], [data-season="winter"] .grid[data-for-season~="winter"] { display: grid; }
[data-season="spring"] .card[data-for-season~="spring"], [data-season="summer"] .card[data-for-season~="summer"],
[data-season="fall"] .card[data-for-season~="fall"], [data-season="winter"] .card[data-for-season~="winter"] { display: flex; }
[data-state~="first"] .hero[data-show-when="first"], [data-state~="returning"] .hero[data-show-when="returning"] { display: flex; }

/* footer */
.site-footer { border-top: var(--border-card) solid var(--ink); margin-top: var(--space-12); }
.site-footer .wrap { padding-block: var(--space-7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-7); font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { body { transition: none; } }