/* src/styles/features/season.css — season outlook (src/app/features/season-ui.js): leaf chips, the day strip, the
   season sheets, the place block and the Toolkit › Season page. Tokens only, no raw colours. Foliage uses the
   --leaf-* tokens (never shu); regions use .tone-*. Sheets mount outside the views, so nothing is view-scoped.
   Visual rules: docs/research/2026-09-29-visual-language.txt (MOMIJI, amended for the season outlook). */

/* ── Colour families ───────────────────────────────────────────────────────────
   --lf fill (peak blocks), --lf-ink text, --lf-wash tint, --lf-line outlines and glyphs on paper.
   The ginkgo gold is too light for a hairline on washi, so its line darkens towards its ink. */
.leaf-red {
  --lf: var(--leaf-red); --lf-ink: var(--leaf-red-ink); --lf-wash: var(--leaf-red-wash); --lf-line: var(--leaf-red);
}
.leaf-yellow {
  --lf: var(--leaf-yellow); --lf-ink: var(--leaf-yellow-ink); --lf-wash: var(--leaf-yellow-wash);
  --lf-line: var(--leaf-yellow-ink);
  --lf-line: color-mix(in srgb, var(--leaf-yellow) 55%, var(--leaf-yellow-ink));
}
.leaf-bloom { --lf: var(--text-2); --lf-ink: var(--text-2); --lf-wash: var(--surface-inset); --lf-line: var(--line-strong); }
.leaf-red, .leaf-yellow {
  --lf-soft: var(--lf-wash);
  --lf-soft: color-mix(in srgb, var(--lf) 28%, var(--lf-wash));
  --lf-mid: var(--lf-wash);
  --lf-mid: color-mix(in srgb, var(--lf) 48%, var(--lf-wash));
  --lf-strong: var(--lf);
  --lf-strong: color-mix(in srgb, var(--lf) 66%, var(--lf-wash));
}

/* ── Leaf chip: glyph + stage word ─────────────────────────────────────────────
   peak: filled wash + filled glyph · colouring / nearly / falling: outline · green / bare: faint.
   Dashed only when the stage and its alternative straddle peak. 28 px: the height of the weather pills it sits with. */
.leaf-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 7px; flex: none;
  border: 1px solid var(--lf-line); border-radius: var(--r-pill); background: transparent; color: var(--lf-ink);
  font: 500 var(--fs-caption)/1 var(--font-sans); letter-spacing: .005em; white-space: nowrap;
}
.leaf-chip .icon { color: var(--lf-line); }
/* The peak edge is a quiet mix of the line and the wash, so the chip keeps a rim on any tint; on tinted rows (today)
   it takes the full line (see .stt-row.is-today below and the itinerary's today card). */
.leaf-chip.is-peak { background: var(--lf-wash); border-color: var(--lf-wash); border-color: color-mix(in srgb, var(--lf-line) 38%, var(--lf-wash)); font-weight: 600; }
.leaf-chip.is-peak .icon { fill: currentColor; }
.leaf-chip.is-faint { border-color: var(--line-strong); color: var(--text-3); }
.leaf-chip.is-faint .icon { color: var(--text-3); }
.leaf-chip.is-dashed { border-style: dashed; }
.leaf-chip.is-peak.is-dashed { border-color: var(--lf-line); }
.leaf-chip.leaf-bloom { color: var(--text-2); }
.leaf-chip.leaf-bloom .icon { color: var(--text-2); }
.leaf-chip-sm { height: 22px; padding: 0 8px 0 5px; gap: 4px; font-size: var(--fs-micro); }
/* Quiet (tables): green and bare as a bare glyph + word, so a column of 'Green' does not stack pills. */
.leaf-chip.is-quiet { height: 18px; padding: 0; border: 0; background: none; }

/* ── Day strip (under a day header): one 44 px button ──────────────────────── */
.season-strip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-min); max-width: 100%;
  margin: 0; padding: 0 2px 0 0; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.season-strip-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 4px 0; }
.season-strip-chev { flex: none; color: var(--text-3); transition: transform var(--dur-1) var(--ease-out); }
.season-strip:hover .season-strip-chev { color: var(--text-2); transform: translateX(2px); }
.season-strip:active .season-strip-chips { opacity: .8; }
.season-strip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }

/* ── Shared bits: weather values, intros, captions ─────────────────────────── */
.swx-temp { color: var(--text); font-weight: 600; }
.swx-sep, .swx-low { color: var(--text-2); font-weight: 400; }
.swx-rain, .swx-sun { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); }
.swx-rain .icon, .swx-sun .icon { color: var(--text-3); }
.season-intro { margin: 0 0 var(--s-3); max-width: 60ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.season-intro-key { display: inline-flex; align-items: baseline; gap: 2px; color: var(--lf-ink); font-weight: 600; white-space: nowrap; }
.season-intro-key .icon { align-self: center; color: var(--lf-line); }
.season-caption { margin: var(--s-3) 0 0; max-width: 60ch; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* ── Season sheets (day and spot) ──────────────────────────────────────────── */
.season-sheet { display: grid; gap: var(--s-5); }
.season-sheet .section-head { margin: 0 0 var(--s-2); }
/* The eyebrow rides a paper bar pinned to the top of the sheet's scroll: rows slide under it, never under the close
   button (44 px, top right). It spans the body's side padding; the next block tucks up into the grid gap. */
.ss-bar {
  position: sticky; top: -4px; z-index: 2; display: flex; align-items: center; min-height: 40px;   /* −4: the body's top padding */
  margin: -4px calc(-1 * var(--s-5)) 0; padding: 4px 56px 0 var(--s-5); background: var(--surface);
}
.ss-bar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
  background: linear-gradient(var(--surface), transparent);
}
.ss-bar + .ss-head { margin-top: calc(var(--s-1) - var(--s-5)); }
/* The sheet's close button (z-index 1, before the body) must stay above the bar, visible and tappable. */
.sheet:has(> .sheet-body > .season-sheet) .sheet-close { z-index: 3; }
.ss-head { display: grid; gap: 6px; padding-right: 48px; }
.ss-back {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: var(--tap-min); margin: -6px 0 -4px -6px;
  padding: 0 10px 0 4px; border: 0; border-radius: var(--r-2); background: none; color: var(--text-2);
  font: 500 var(--fs-small)/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ss-back .icon { color: var(--text-3); }
.ss-back:active { background: var(--surface-pressed); }
.ss-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ss-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tone-ink);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.ss-title { margin: 0; font: 500 var(--fs-title-1)/var(--lh-title-1) var(--font-serif); font-variation-settings: 'opsz' 36; letter-spacing: -.005em; }
.ss-ja { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--text-2); font-feature-settings: 'palt'; }
.ss-sub { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }

ul.ss-headline { list-style: none; margin: 0; padding: var(--s-3); display: grid; gap: var(--s-3); border-radius: var(--r-3); background: var(--surface-inset); }
.ss-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.ss-hl + .ss-hl { padding-top: var(--s-3); border-top: 1px solid var(--line-strong); }
.ss-hl .leaf-chip { margin-top: 1px; }
.ss-hl-text { display: grid; gap: 1px; min-width: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.ss-hl-what { font-weight: 600; color: var(--text); }
.ss-hl-where { color: var(--text-2); }
.ss-hl-hedge { font: italic 400 var(--fs-aside)/var(--lh-aside) var(--font-serif); color: var(--text-2); }
/* Hedges wrap without a lone last word ('possibly / peak'); the highlight titles balance (see .season-hi-title). */
.ss-hl-hedge, .ss-spot-hedge, .sp-day-hedge, .spl-hedge, .season-hi-hedge { text-wrap: pretty; }

.ss-section { display: grid; gap: var(--s-2); }
.ss-wx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ss-wx-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3);
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small);
}
.ss-wx-where { min-width: 0; }
.ss-wx-name { font-weight: 500; color: var(--text); }
.ss-wx-more {
  position: relative; margin: 0 0 0 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; -webkit-tap-highlight-color: transparent;
}
.ss-wx-more::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: var(--tap-min); transform: translateY(-50%); }
.ss-wx-more:hover { color: var(--text-2); }
.ss-wx-more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.ss-wx-also { flex-basis: 100%; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.ss-wx-also:focus { outline: none; }
.ss-wx-vals { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.ss-sun { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); }
.ss-sun .icon { color: var(--text-3); }
.ss-note, .ss-foot { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); max-width: 62ch; }
.ss-foot { padding-top: var(--s-3); border-top: 1px solid var(--line); }

.ss-spots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ss-spot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.ss-spot:has(> .ss-spot-btn) { display: block; padding: 0; }
/* A spot row is a button to the spot's own sheet: the same layout, a pressed tint, a focus ring. */
.ss-spot-btn {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap-min);
  margin: 0; padding: var(--s-3) 0; border: 0; border-radius: var(--r-1); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ss-spot-btn:active { background: var(--surface-pressed); background: color-mix(in srgb, var(--surface-pressed) 70%, transparent); }
.ss-spot-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ss-spot-btn > .leaf-chip { margin-top: 1px; }
.ss-spot-text { display: grid; gap: 2px; min-width: 0; }
.ss-spot-text p, .ss-spot-text > span { display: block; margin: 0; }
.ss-more {
  justify-self: start; min-height: var(--tap-min); margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-small)/1 var(--font-sans); color: var(--text-2); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 4px; -webkit-tap-highlight-color: transparent;
}
.ss-more:hover { color: var(--text); }
.ss-more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.ss-spot-name { font: 500 17px/22px var(--font-serif); color: var(--text); }
.ss-spot-km { margin-left: 8px; font: 400 var(--fs-caption)/1 var(--font-sans); color: var(--text-3); }
.ss-spot-hedge { font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-2); }
.ss-spot-dates { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.ss-spot-spread { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--lf-ink, var(--text-2)); }
.ss-spot-src { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.ss-spot > .leaf-chip { margin-top: 1px; }
/* Glyph (or chip) and its text on one line: the text shrinks and wraps, the glyph never drops to a line of its own. */
.ss-bloom, .ss-sakura { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.ss-bloom-text, .ss-sakura-text { flex: 1 1 0; min-width: 0; }
.ss-sakura .icon { margin-top: 2px; }
.ss-bloom-name { font-weight: 600; color: var(--text); }
.ss-sakura .icon { color: var(--text-3); }

/* Spot sheet */
.sp-window { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); font-weight: 500; }
.sp-usual { display: flex; flex-wrap: wrap; gap: 0 8px; margin: calc(-1 * var(--s-2)) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.sp-usual-raw { color: var(--text-3); }
.sp-days-label {
  margin: var(--s-2) 0 0; color: var(--text-3);
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.sp-days { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sp-day-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 2px var(--s-2); font-size: var(--fs-small); }
.sp-day-row .leaf-chip { justify-self: start; }
.sp-day-date { font-weight: 500; color: var(--text); }
.sp-day-hedge { grid-column: 2; font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-2); }
.sp-fcs { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.sp-fc { padding: 10px 12px 2px; border-radius: var(--r-2); background: var(--surface-inset); }
.sp-fc p { margin: 0; }
.sp-fc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; font-size: var(--fs-small); line-height: var(--lh-small); }
.sp-fc-src { font-weight: 600; color: var(--text); }
.sp-fc-when { color: var(--text-2); }
.sp-fc-used { margin-left: auto; min-height: 20px; }
.sp-fc-dates { margin-top: 2px !important; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.sp-fc-raw { margin-top: 2px !important; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.sp-fc .link-ext { font-size: var(--fs-caption); }

/* ── Place sheet block ('Season here on <days>') ───────────────────────────
   One row per run of days that look alike: [date][chips + weather / hedge]; the date column only with 2+ rows. */
.season-place { display: grid; gap: var(--s-2); }
ul.spl-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.spl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s-2); align-items: start; }
.spl-rows.is-dated .spl-row { grid-template-columns: 72px minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--line); }
.spl-rows.is-dated .spl-row:first-child { border-top: 1px solid var(--line); }
.spl-date { padding-top: 4px; font: 600 var(--fs-caption)/18px var(--font-sans); color: var(--text); white-space: nowrap; }
.spl-main { display: grid; gap: 4px; min-width: 0; }
.spl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.spl-wx { display: inline-flex; align-items: center; gap: var(--s-3); margin-left: 4px; font-size: var(--fs-small); white-space: nowrap; }
.spl-approx { font-size: var(--fs-caption); color: var(--text-3); }
.spl-typical { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 var(--s-1); }
.spl-typical .spl-wx { margin-left: 0; }
.spl-typical-label { font-size: var(--fs-small); color: var(--text-2); }
.spl-hedge { margin: 0; font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-2); }
.spl-near { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.spl-near-what { font-weight: 500; color: var(--text); }

/* ── Highlights: the best of each colour on the trip ───────────────────────── */
.season-hi { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: var(--card-gap); }
/* A paper card with a 4 px band of the leaf colour on top (the stay cards' band, turned to the top edge). */
.season-hi-card {
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-4); border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--lf);
}
.season-hi-foot { display: grid; align-content: start; gap: var(--s-2); }
/* Side by side, the cards share their rows (eyebrow, title, runs, foot): a one-line title leaves room under it, so
   the regions and dates of both cards sit on the same lines. Without subgrid: a column, the runs pushed down. */
@supports (grid-template-rows: subgrid) {
  .season-hi-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s-2); align-content: start; }
  .season-hi-card > ul.season-hi-runs { margin: 0; }
  .season-hi-eyebrow { align-self: start; }                  /* one card's label may wrap: the other keeps to the top */
}
.season-hi-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0; color: var(--lf-ink);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.season-hi-glyph { color: var(--lf-line); }
.season-hi-card.is-peak .season-hi-glyph { fill: currentColor; }
.season-hi-title { margin: 0; font: 500 var(--fs-title-2)/var(--lh-title-2) var(--font-serif); font-variation-settings: 'opsz' 30; color: var(--text); text-wrap: balance; }
ul.season-hi-runs { list-style: none; margin: auto 0 0; padding: var(--s-1) 0 0; display: grid; align-content: start; gap: 6px; }
/* Every run reads the same in both cards, however long the region's name: the dot and the region on one line, the
   dates under the name on the next (a short name never pulls its dates up beside it). */
.season-hi-runs li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 0 6px;
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.season-hi-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tone-ink); }
.season-hi-region { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.season-hi-dates { grid-column: 2; color: var(--text-2); }
.season-hi-hedge { margin: 0; font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-2); }
.season-hi-spot { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }

/* ── Foliage front ─────────────────────────────────────────────────────────── */
.season-front { display: grid; gap: var(--s-3); }
.season-front > .season-intro { margin: 0; }
.fs-legend { display: grid; gap: 6px; }
.fl-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fl-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }
.fl-swatch { display: grid; gap: 2px; width: 18px; }
.fl-bar { display: block; height: 5px; border-radius: 1px; }
/* Your days: one sliver per region tone, as the columns are tinted. */
.fl-here { display: inline-flex; gap: 1px; height: 14px; }
.fl-here-tone, .fs-here-key {
  background: var(--tone-wash); background: color-mix(in srgb, var(--tone-ink) var(--season-here), transparent);
  box-shadow: inset 0 2px 0 var(--tone-ink);
}
.fl-here-tone { width: 5px; height: 14px; }
.fl-here:empty { width: 12px; background: var(--surface-pressed); box-shadow: inset 0 2px 0 var(--text-3); }
.fl-spread { width: 16px; height: 6px; margin-top: 4px; border: 1.5px solid var(--text-2); border-bottom: 0; border-radius: 1px 1px 0 0; }
.fl-today { width: 2px; height: 14px; border-radius: 1px; background: var(--accent); }

.fs-card { position: relative; padding: var(--s-2) var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }

/* The date axis stays pinned under the app bar while the long card scrolls (the card is ~1,400 px tall). */
.fs-axis {
  position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 3; height: 32px;
  margin: 0 calc(-1 * var(--s-3)); padding: 0 var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface);
}
.fs-axis-months { position: relative; height: 15px; }
.fs-axis-month {
  position: absolute; top: 0; padding-left: 3px; color: var(--text-2);
  font: 600 var(--fs-micro)/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.fs-axis-today {
  position: absolute; top: 0; z-index: 1; padding: 0 4px; transform: translateX(-50%); border-radius: var(--r-1);
  background: var(--surface); color: var(--accent-text); font: 600 var(--fs-micro)/14px var(--font-sans); letter-spacing: .04em;
}
.fs-axis-today.is-end { transform: translateX(-100%); }
.fs-axis-days { position: relative; height: 16px; }
.fs-axis-day {
  position: absolute; bottom: 0; padding-left: 3px; border-left: 1px solid var(--line-strong);
  font: 500 var(--fs-micro)/13px var(--font-sans); color: var(--text-3);
}

.fs-group + .fs-group { border-top: 1px solid var(--line); }
.fs-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: var(--s-3) 0 var(--s-1); }
.fs-group-days { display: inline-flex; align-items: center; gap: 6px; color: var(--tone-ink); font: 600 var(--fs-caption)/var(--lh-caption) var(--font-sans); }
.fs-here-key { flex: none; width: 10px; height: 12px; border-radius: 1px; }

.fs-plot { position: relative; }
.fs-under { position: absolute; inset: 0; pointer-events: none; }
.fs-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.fs-tick.is-month { background: var(--line-strong); }
/* Your days, tinted in the region's tone (--season-here: stronger in the dark) with hairline edges… */
.fs-here {
  position: absolute; top: 0; bottom: 0;
  background: var(--tone-wash); background: color-mix(in srgb, var(--tone-ink) var(--season-here), transparent);
  box-shadow: inset 0 2px 0 var(--tone-ink), inset 1px 0 0 var(--tone-ink), inset -1px 0 0 var(--tone-ink);
  box-shadow: inset 0 2px 0 var(--tone-ink), inset 1px 0 0 color-mix(in srgb, var(--tone-ink) 32%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--tone-ink) 32%, transparent);
}
/* …and the edges again over each band, so the days still show across a solid peak block. */
.fs-here-edge {
  position: absolute; top: -1px; bottom: -1px; pointer-events: none;
  border: solid var(--tone-ink); border-width: 0 1px; opacity: .75;
}
ul.fs-rows { position: relative; list-style: none; margin: 0; padding: 0 0 var(--s-1); }
/* Today: one shu line behind the rows (names read over it) and a tick over each band (it shows the stage). */
.fs-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.fs-today-tick {
  position: absolute; top: 0; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 0 1.5px var(--surface);
}

.fs-spot {
  display: grid; gap: 5px; width: 100%; min-height: var(--tap-min); margin: 0; padding: 6px 0 8px; border: 0; border-radius: var(--r-1);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fs-spot:active { background: var(--surface-pressed); background: color-mix(in srgb, var(--surface-pressed) 70%, transparent); }
.fs-spot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fs-name-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.fs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/19px var(--font-serif); color: var(--text); }
/* 'estimate' (from JMA's normal) or 'observed': only where a band is not from this year's spot forecasts. */
.fs-basis { flex: none; display: inline-flex; align-items: center; gap: 8px; font: italic 400 var(--fs-caption)/var(--lh-micro) var(--font-serif); color: var(--text-3); }
.fs-basis-item { display: inline-flex; align-items: center; gap: 2px; }
.season-intro-est { font: italic 400 var(--fs-small)/1 var(--font-serif); color: var(--text-3); }
.fs-basis-glyph { color: var(--lf-line); }

.fs-bands { position: relative; display: grid; gap: 2px; }
.fs-bands.has-spread { padding-top: 8px; }
.fs-band {
  position: relative; display: block; height: 10px; border-radius: 2px; overflow: hidden;
  background: var(--surface-inset); background: color-mix(in srgb, var(--text) 7%, transparent);
}
.fs-bands.is-pair .fs-band { height: 6px; }
.fs-seg { position: absolute; top: 0; bottom: 0; }
.fs-seg.is-co, .fl-bar.is-co { background: var(--lf-soft); background: linear-gradient(90deg, var(--lf-soft), var(--lf-mid)); }
.fs-seg.is-np, .fl-bar.is-np { background: var(--lf-mid); background: linear-gradient(90deg, var(--lf-mid), var(--lf-strong)); }
.fs-seg.is-pk, .fl-bar.is-pk { background: var(--lf); }
.fs-seg.is-fa, .fl-bar.is-fa { background: var(--lf-mid); background: repeating-linear-gradient(-60deg, var(--lf-strong) 0 1.5px, var(--lf-wash) 1.5px 3.5px); }
.fs-spread { position: absolute; top: 1px; height: 5px; border: 1.5px solid var(--lf-ink); border-bottom: 0; border-radius: 1px 1px 0 0; }

/* One spot in its sheet: a single, taller band with its own day labels */
.fs-plot.is-single { margin-top: var(--s-1); padding-bottom: 18px; }
.fs-plot.is-single ul.fs-rows { padding: 8px 0 6px; }
.fs-plot.is-single .fs-band { height: 14px; border-radius: 3px; }
.fs-plot.is-single .fs-axis-days { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.fs-plot.is-single .fs-under { bottom: 16px; }

/* ── Trip table: one row per day ───────────────────────────────────────────── */
.season-table { --row-bg: var(--bg); }
.stt-head, .stt-cells {
  display: grid; grid-template-columns: 16px 50px 58px 38px 44px minmax(0, 1fr); column-gap: 8px; align-items: center;
}
.stt-head {
  padding: 0 0 6px; border-bottom: 1px solid var(--line-strong); color: var(--text-3);
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
}
.stt-head-day { grid-column: 1 / 3; }
.stt-head-leaf { display: inline-flex; gap: 6px; }
.stt-head-leaf .icon { color: var(--lf-line); }
.stt-rows { list-style: none; margin: 0; padding: 0; }
.stt-row { position: relative; border-bottom: 1px solid var(--line); }
.stt-row::before { content: ''; position: absolute; left: 7px; top: 0; bottom: -1px; width: 2px; background: var(--tone-ink); }
.stt-row.tone-travel::before, .stt-row.tone-open::before {
  background: repeating-linear-gradient(to bottom, var(--tone-ink) 0 4px, transparent 4px 8px);
}
.stt-row.is-today { --row-bg: var(--accent-wash); background: var(--accent-wash); }
.stt-row.is-today .leaf-chip.is-peak { border-color: var(--lf-line); }
.stt-cells {
  position: relative; width: 100%; min-height: 54px; margin: 0; padding: 6px 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left;
}
button.stt-cells { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.stt-cells:active { background: var(--surface-pressed); }
button.stt-cells:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.stt-rail { display: grid; place-items: center; align-self: stretch; }
.stt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone-ink); box-shadow: 0 0 0 2px var(--row-bg); }
.stt-row.tone-travel .stt-dot, .stt-row.tone-open .stt-dot { background: var(--row-bg); box-shadow: inset 0 0 0 1.5px var(--tone-ink), 0 0 0 2px var(--row-bg); }
.stt-date { display: grid; }
.stt-wd { font: 600 var(--fs-micro)/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.stt-dm { font: 500 var(--fs-small)/18px var(--font-sans); color: var(--text); white-space: nowrap; }
.stt-row.is-today .stt-wd, .stt-row.is-today .stt-dm { color: var(--accent-text); }
.stt-temp { font-size: var(--fs-small); font-weight: 600; color: var(--text); white-space: nowrap; }
.stt-low { margin-left: 5px; font-weight: 400; color: var(--text-2); }
.stt-rain, .stt-sun { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.stt-leaf { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.stt-leaf .leaf-chip.is-quiet { height: 20px; padding-left: 5px; }
.stt-none { color: var(--text-3); }
.stt-tbd { font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-3); }

/* ── Sakura ────────────────────────────────────────────────────────────────── */
.season-sakura { display: grid; gap: var(--s-3); }
.season-sakura > .season-intro { margin: 0; }
.sk-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sk-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--s-3);
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.sk-regions { grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.sk-station { grid-row: 1; grid-column: 2; font-size: var(--fs-caption); color: var(--text-3); white-space: nowrap; }
.sk-dates { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px var(--s-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
.sk-label { margin-right: 6px; color: var(--text-3); }
.sk-now { grid-column: 1 / -1; font: italic 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-2); }
.sk-bloom { display: grid; gap: 4px; }
.sk-bloom p { margin: 0; }
.sk-bloom-eyebrow {
  display: flex; align-items: center; gap: 6px; color: var(--tone-ink);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.sk-bloom-name { margin: 4px 0 0; font: 500 var(--fs-title-3)/var(--lh-title-3) var(--font-serif); }
.sk-bloom-ja { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.sk-bloom-text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.sk-bloom-days { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px !important; font-size: var(--fs-small); color: var(--text); }

/* ── Sources ───────────────────────────────────────────────────────────────── */
.src-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.src-item { display: grid; gap: 2px; padding: var(--s-3) 0 var(--s-1); border-bottom: 1px solid var(--line); }
.src-item p { margin: 0; }
.src-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.src-name { font: 500 17px/22px var(--font-serif); color: var(--text); }
.src-when { font-size: var(--fs-caption); color: var(--text-3); white-space: nowrap; }
.src-what { max-width: 62ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.src-line { font-size: var(--fs-caption); line-height: 1.6; color: var(--text-2); }
.src-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.src-sets { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: var(--s-1); }
.src-set { display: grid; gap: 2px; padding-left: var(--s-3); border-left: 2px solid var(--line); }

.season-method { margin-top: var(--s-4); border-radius: var(--r-2); background: var(--surface-inset); }
.season-method summary {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 0 14px 0 12px;
  font-size: var(--fs-small); font-weight: 500; color: var(--text); cursor: pointer; list-style: none;
}
.season-method summary::-webkit-details-marker { display: none; }
.season-method summary .icon { color: var(--text-2); }
.season-method summary::after {
  content: ''; width: 7px; height: 7px; margin-left: auto; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-1) var(--ease-out);
}
.season-method[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.season-method summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.season-method-body { display: grid; gap: var(--s-2); padding: 0 12px 14px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
.season-method-body p { margin: 0; max-width: 62ch; }

/* ── Toolkit › Season page rhythm ──────────────────────────────────────────── */
.tk-section-season .season-hi { margin-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .season-strip-chev, .season-method summary::after { transition: none; }
}