/* /when-to-plant/<state>/ — Figma Ezina Site 1459:8967 (desktop), 1478:8310 (mobile).
   Built by scripts/seed/when-to-plant/build.py. Colours are the Figma tokens:
   Green/2 #c5dcc4, Green/5 #477c51 (--green), Blue/2 #b1c2e9, Blue/6 #324c86,
   Yellow/3 #f9cf4b, Red/2 #f4ad9a, the blue box #d7e0f4. */
.wtp {
  --wtp-green-2: #c5dcc4;
  --wtp-green-5: var(--green);
  --wtp-blue-2: #b1c2e9;
  --wtp-blue-6: #324c86;
  --wtp-yellow-3: #f9cf4b;
  --wtp-red-2: #f4ad9a;
  --wtp-box: #d7e0f4;
  --wtp-name: 360px;
}
.wtp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 13 px uppercase labels (Figma "Label 13": Cabinet Grotesk Extrabold 13, 8%) */
.wtp-filter__label, .wtp-table thead th, .wtp-pill, .wtp-chart__group, .wtp-chart__months span, .wtp-cal__months span,
.wtp-table td::before, .wtp-today__tag, .wtp-cal__region, .wtp .fp-facts__row dt {
  font-family: var(--f-sans); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
}
.wtp-aside-note { color: var(--muted); margin-bottom: var(--s4); }

/* § 010 frost table */
.wtp-search { display: block; max-width: 545px; margin-bottom: var(--s5); }
.wtp-search input {
  width: 100%; font: 18px/1.4 var(--f-serif); color: var(--ink); background: var(--card-light); border: 0; border-radius: 12px;
  padding: 16px 20px 16px 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23755c47' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 20px center;
}
.wtp-search input::placeholder { color: var(--muted); }
.wtp-table { width: 100%; border-collapse: collapse; font: 16px/1.55 var(--f-serif); color: var(--ink); }
.wtp-table thead th { text-align: left; padding: 0 12px 12px 0; color: var(--ink); }
.wtp-table tbody tr { border-top: 1px solid var(--hairline); }
.wtp-table th[scope="row"], .wtp-table td { text-align: left; padding: 16px 12px 16px 0; vertical-align: top; font-weight: 400; }
.wtp-table th[scope="row"] { width: 32%; }
.wtp-city { display: block; }
.wtp-station { display: block; font-size: 13px; color: var(--muted); text-transform: uppercase; }
.wtp-table td.wtp-tender { font: 800 16px/1.55 var(--f-sans); color: var(--ink); }
.wtp-long { display: none; }
.wtp-table .wtp-nearest td, .wtp-table .wtp-nearest th { background: var(--manila); }
.wtp-note, .wtp-empty { font: 16px/1.55 var(--f-serif); color: var(--muted); max-width: 900px; margin-top: var(--s5); }
.wtp-region-note { color: var(--ink); }
.wtp-region-note a { color: inherit; }
#wtp-cities tr[data-region] { cursor: pointer; }

/* § 020 filters */
.wtp-filters { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s6); }
.wtp-filter { display: flex; align-items: center; gap: var(--s2); }
.wtp-filter__label { color: var(--muted); min-width: 110px; }
.wtp-pills { display: flex; gap: var(--s2); }
.wtp-chip {
  font: 800 16px/1 var(--f-sans); color: var(--ink); background: var(--card-light); border: 0; border-radius: 999px;
  padding: 12px 16px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: var(--s2); align-items: baseline;
}
.wtp-chip.is-on { background: var(--brown-band); color: var(--paper); }
.wtp-count { font: 400 13px/1 var(--f-serif); color: var(--muted); }
.wtp-chip.is-on .wtp-count { color: var(--paper); }
.wtp-link { margin: 0; font: 13px/1.4 var(--f-serif); }
.wtp-link a { color: var(--ink); }
.wtp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; font: 13px/1.4 var(--f-serif); color: var(--ink); }
.wtp-legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.wtp-key { width: 24px; height: 12px; border-radius: 4px; display: inline-block; }
.wtp-key--fall, .wtp-bar--fall { background: var(--wtp-green-5); }
.wtp-key--spring, .wtp-bar--spring { background: var(--wtp-green-2); }
.wtp-pill { display: inline-block; border-radius: 999px; padding: 4px 12px; color: var(--ink); white-space: nowrap; }
.wtp-pill--tender { background: var(--wtp-red-2); }
.wtp-pill--cool { background: var(--wtp-green-2); }
.wtp-pill--succession { background: var(--wtp-blue-2); }
.wtp-pill--overwinters, .wtp-pill--perennial { background: var(--wtp-yellow-3); }

/* the month chart: a 12-column track; bars start (wtp-sN) and span (wtp-nN) by month */
.wtp-chart { position: relative; }
.wtp-chart__months, .wtp-chart__row { display: grid; grid-template-columns: var(--wtp-name) 1fr; align-items: center; }
.wtp-chart__months { padding-bottom: 12px; color: var(--muted); }
.wtp-chart__track { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; row-gap: 4px; }
.wtp-chart__months .wtp-chart__track > span { padding-left: 4px; }
.wtp-chart__rows { list-style: none; margin: 0; padding: 0; }
.wtp-chart__group { padding: 24px 0 8px; color: var(--muted); }
.wtp-chart__row { border-top: 1px solid var(--hairline); padding: 12px 0; column-gap: 0; }
.wtp-chart__row .wtp-pill { justify-self: start; grid-column: 1; grid-row: 1; margin-left: 150px; }
.wtp-chart__name { grid-column: 1; grid-row: 1; font: 16px/1.55 var(--f-serif); color: var(--ink); text-decoration: none; }
.wtp-chart__row .wtp-chart__track { grid-column: 2; grid-row: 1; }
.wtp-bar { height: 12px; border-radius: 4px; margin: 0 4px; grid-row: 1; }
.wtp-s1 { grid-column-start: 1; } .wtp-s2 { grid-column-start: 2; } .wtp-s3 { grid-column-start: 3; } .wtp-s4 { grid-column-start: 4; }
.wtp-s5 { grid-column-start: 5; } .wtp-s6 { grid-column-start: 6; } .wtp-s7 { grid-column-start: 7; } .wtp-s8 { grid-column-start: 8; }
.wtp-s9 { grid-column-start: 9; } .wtp-s10 { grid-column-start: 10; } .wtp-s11 { grid-column-start: 11; } .wtp-s12 { grid-column-start: 12; }
.wtp-n1 { grid-column-end: span 1; } .wtp-n2 { grid-column-end: span 2; } .wtp-n3 { grid-column-end: span 3; } .wtp-n4 { grid-column-end: span 4; }
.wtp-n5 { grid-column-end: span 5; } .wtp-n6 { grid-column-end: span 6; } .wtp-n7 { grid-column-end: span 7; } .wtp-n8 { grid-column-end: span 8; }
.wtp-n9 { grid-column-end: span 9; } .wtp-n10 { grid-column-end: span 10; } .wtp-n11 { grid-column-end: span 11; } .wtp-n12 { grid-column-end: span 12; }
.wtp-bar--fall { position: relative; z-index: 1; }
.wtp-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brown-band); z-index: 2; pointer-events: none; }
.wtp-today__tag { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: var(--brown-band); color: var(--paper); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
[data-region][hidden], .wtp-bar[hidden] { display: none; }

/* § 030 crop entries: two columns of photo + detail */
.wtp-crops .wtp-legend { margin-bottom: var(--s6); }
.wtp-crop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 160px; row-gap: var(--s8); }
.wtp-crop { scroll-margin-top: 24px; }
.wtp-crop__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.wtp-crop__name { font: 800 28px/1.2 var(--f-sans); color: var(--ink); margin: 0; }
.wtp-crop__sci { font: italic 16px/1.4 var(--f-serif); color: var(--muted); margin: 0; }
.wtp-crop__body { display: grid; grid-template-columns: 302px 1fr; gap: var(--s5); }
.wtp-crop__photo { margin: 0; }
.wtp-crop__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.wtp-crop__photo figcaption { font: 400 12px/1.3 var(--f-sans); color: var(--muted); margin-top: 4px; }   /* photo captions may go below 13 px (Corbin, 2026-09-29) */
.wtp-crop__detail { display: flex; flex-direction: column; gap: var(--s2); }
.wtp-crop__text { font: 16px/1.55 var(--f-serif); color: var(--ink); margin: 0; }
.wtp-crop__source { font: 13px/1.5 var(--f-serif); color: var(--muted); margin: 0; }
.wtp-cal { margin-bottom: var(--s2); }
.wtp-cal__months { display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; color: var(--muted); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.wtp-cal__row { margin-top: 6px; }
.wtp-cal__region { display: block; color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.wtp-cal__track { display: grid; grid-template-columns: repeat(12, 1fr); }
.wtp-cal .wtp-bar { height: 8px; margin: 0 2px; }
.wtp-crop[hidden], .wtp-chart__row[hidden], .wtp-chart__group[hidden], .wtp-table tr[hidden] { display: none; }

/* the /when-to-plant/ index */
.wtp-states { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--s7); font: 20px/1.9 var(--f-serif); }
.wtp-states a { color: var(--ink); }

@media (max-width: 980px) {
  .wtp { --wtp-name: 220px; }
  .wtp-crop-list { grid-template-columns: 1fr; }
  .wtp-states { columns: 2; }
}

/* Mobile: Figma 1478:8310 */
@media (max-width: 720px) {
  .wtp-filter { display: block; }
  .wtp-filter__label { display: block; margin-bottom: var(--s2); }
  /* pill rows scroll sideways and run to both screen edges */
  .wtp-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .wtp-scroll::-webkit-scrollbar { display: none; }
  .wtp-pills { width: max-content; }

  .wtp-table thead { display: none; }
  .wtp-table, .wtp-table tbody, .wtp-table tr { display: block; }
  .wtp-table tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; padding: 16px 0; }
  .wtp-table th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0 0 8px; }
  .wtp-table td { display: block; padding: 0; font-size: 13px; }
  .wtp-table td::before { content: attr(data-label); display: block; color: var(--muted); margin-bottom: 4px; }
  /* "Plant tender crops from" runs across the card on one baseline, in green */
  .wtp-table td.wtp-tender { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; font-size: 16px; }
  .wtp-table td.wtp-tender::before { color: var(--wtp-green-5); margin: 0; }
  .wtp-short { display: none; }
  .wtp-long { display: inline; }
  /* the average last frost sits in the blue box */
  .wtp-table td:nth-of-type(1) { background: var(--wtp-box); padding: 4px; margin: -4px 0 -4px -4px; }
  .wtp-table td:nth-of-type(1)::before { color: var(--wtp-blue-6); }

  .wtp-chart { --wtp-name: 0px; }
  .wtp-chart__months, .wtp-chart__row { grid-template-columns: 1fr; }
  .wtp-chart__months > span:first-child { display: none; }
  .wtp-chart__months .wtp-chart__track > span { padding: 0; text-align: center; }
  .wtp-rest { display: none; }
  .wtp-chart__row { row-gap: 4px; padding: 8px 0; }
  .wtp-chart__name { grid-row: 1; }
  .wtp-chart__row .wtp-pill { grid-row: 1; margin-left: auto; justify-self: end; }
  .wtp-chart__row .wtp-chart__track { grid-column: 1; grid-row: 2; }
  .wtp-bar { height: 8px; margin: 0 2px; }

  .wtp-crop__body { grid-template-columns: 1fr; gap: var(--s1); }
  .wtp-crop__photo img { aspect-ratio: 3 / 2; }
  .wtp-crop__detail { padding-top: 4px; }
  .wtp-states { columns: 1; }
}