/* TOOLS·FOODTIMELINE (card-1122) — the solids food timeline: months 1–12 across the
 * top, one bar per food group starting at its first-offered month, the current stage
 * band marked on the chart, optional today marker.
 *
 * EXTRACTED 2026-09-11 from the weaning stages overlay's `.wn-pchart*` rules
 * (web/css/weaning.css) + `renderChart()` (web/js/views/weaning.js) — the view now
 * draws THIS card; the wn-pchart originals are gone (extract, don't fork).
 *
 * 🔴 SELF-CONTAINED (D-470/D-475): every value below is the chart's RESOLVED value in
 * the shipped overlay, probed live in the running app on 2026-09-11 (headless Chrome,
 * computed styles, not read off the source): --rule → #e6ddc4, --accent → #2E5C5C,
 * --bg → #F1E4A8, --ink → #2A2620, --ink-600 → #5a5a55 (resolves from tokens.css :root,
 * NOT from the overlay's own palette), --mono → "SF Mono",ui-monospace,Menlo,monospace.
 * The card names no page variable, so it renders identically in the app overlay, in the
 * workbench phone frame and in the library gallery.
 *
 * ⚠️ UNTOKENISED LEGACY (O-row owed): the palette above is the 2026-06-06 weaning
 * prototype's, carried verbatim. D-650 settled the palette question; retokenising is a
 * separate ruled job, not this one.
 */
.fdtl {
  position: relative;
  margin: 8px 0 16px; /* token-exception */
  padding: 16px 0 8px; /* token-exception */
  border-top: 1px solid #e6ddc4; /* token-exception */
  border-bottom: 1px solid #e6ddc4; /* token-exception */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* token-exception */
  font-size: 16px; /* token-exception */
  color: #2A2620; /* token-exception */
  /* the shipped chart inherited the app body's leading (app.css body → --leading-150);
     named explicitly so the card reads the same in every host */
  line-height: 1.5; /* token-exception */
}

/* ── the months header: a 64px label column + twelve month columns ─────────── */
.fdtl-months { display: grid; grid-template-columns: var(--fdtl-lab, 64px) repeat(12, 1fr); margin-bottom: 8px; } /* token-exception */
.fdtl-m { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 9px; color: #5a5a55; text-align: center; } /* token-exception */
.fdtl-cap { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 9px; color: #5a5a55; text-align: left; padding-left: 2px; letter-spacing: .02em; } /* token-exception */

/* ── one row per food group: icon + name, then a track holding the bar ─────── */
.fdtl-row { display: grid; grid-template-columns: var(--fdtl-lab, 64px) repeat(12, 1fr); align-items: center; margin-bottom: 5px; } /* token-exception */
.fdtl-label { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; color: #5a5a55; } /* token-exception */
.fdtl-ic { font-size: 14px; } /* token-exception */
.fdtl-track { grid-column: 2 / -1; position: relative; height: 13px; } /* token-exception */
.fdtl-bar { position: absolute; top: 1px; height: 11px; border-radius: 6px; opacity: .26; } /* token-exception */
.fdtl-bar.fdtl-bar-on { opacity: 1; }

/* ── the stage band: a vertical window over the chart. Its label sits in its own strip ABOVE
      the months row (fix 2026-10-02, brief 176: it used to ride the months row on an opaque
      patch of the page background, which hid and clipped the month digits under it and
      painted a yellow patch on any ground that was not the overlay's). The strip exists only
      on a banded chart (.fdtl-banded), so the deck's range chart and the no-band chart keep
      their height. Offsets: strip 14px + months row at 30px; band/today start 8px under the
      months row's top, as before. No patch is needed, so the label names no ground colour. ── */
.fdtl.fdtl-banded { padding-top: 30px; } /* token-exception */
.fdtl-band { position: absolute; top: 38px; bottom: 6px; background: rgba(46, 92, 92, 0.10); border-left: 2px solid #2E5C5C; border-right: 2px dashed rgba(46, 92, 92, 0.10); z-index: 2; pointer-events: none; border-radius: 2px; } /* token-exception */
.fdtl-band::before { content: attr(data-label); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 9px; color: var(--teal-700); font-weight: 700; white-space: nowrap; } /* token-exception */
/* a band that ends the year pins its label to the chart's right edge — centring it
   spilled past the chart at phone widths (measured, see render.js) */
.fdtl-band.fdtl-band-end::before { left: auto; right: 0; transform: none; }

/* ── the today marker (card capability; the shipped overlay has no marker —
      the guide's "Variety builds · today marker" card is the first consumer).
      PROVISIONAL look: a 2px ink line with a dot on top, above the band's
      z-order. Ruled by the eye before any parent sees it. ──────────────────── */
.fdtl-today { position: absolute; top: 24px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 1px; background: #2A2620; opacity: .55; z-index: 3; pointer-events: none; } /* token-exception */
.fdtl-banded .fdtl-today { top: 44px; } /* token-exception */
.fdtl-today::before { content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #2A2620; } /* token-exception */


.fdtl.fdtl-ranged { --fdtl-lab: 80px; } /* token-exception */ /* the deck's range chart gives the row-label column 16px more room (fix 2026-10-02, brief 176): "Vegetables" is 63px wide at this size and the month-0 rule stands at the column's edge, so at 64px the word touched the line */

/* ── the guide deck's range marking (brief 176, added 2026-10-02) — the approved
      deck drafts' own way to say "where in the year this card sits": a free 0–12
      month axis, the two boundary months' ticks teal, TWO teal rules at the
      boundaries (no shading — deliberately not the overlay's band), and a
      Fraunces weeks line centred between them below the rows. Values follow this
      file's own resolved-value convention (untokenised legacy, O-row owed). ── */
.fdtl-axb { grid-column: 2 / -1; position: relative; height: 13px; } /* token-exception */
.fdtl-axb i { position: absolute; top: 0; transform: translateX(-50%); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 9px; font-style: normal; color: #5a5a55; font-variant-numeric: tabular-nums; background: #e0f2ef; } /* token-exception */ /* the ticks are text ON the deck voice box's teal-100 fill — declared so the card stays self-contained (D-470) and the pair is computable; same value the box paints */
.fdtl-axb i.on { color: #1c6e64; font-weight: 700; } /* token-exception */
.fdtl-rows { position: relative; }
.fdtl-vl { position: absolute; top: -4px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; background: #1c6e64; opacity: .85; z-index: 2; pointer-events: none; } /* token-exception */
.fdtl-wks { position: relative; height: 22px; margin: 16px 0 0; } /* token-exception */
.fdtl-wks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-display); font-weight: var(--weight-500); font-size: 13px; color: var(--text-secondary); background: var(--surface-ground); white-space: nowrap; } /* token-exception */ /* sits below the rules' ends, so nothing is hidden; the ground fill is declared so the pair is computable and matches the deck ground it sits on */

/* ── the stage band's weeks ruler (o.bandWeeks, Andrew 2026-10-02: "We need copy to label the weeks for each band") ──
      A row under the chart on the same grid as the months row: the band's start and end week sit under
      its two edges, and the band stops above the row so no line runs through a number. The label column
      is 16px wider so "Meat/fish" clears the band's left edge (it ran 6px into it at 64px). ── */
.fdtl.fdtl-weeked { --fdtl-lab: 80px; } /* token-exception */
.fdtl-weeked .fdtl-band, .fdtl-weeked .fdtl-today { bottom: 32px; } /* token-exception */
.fdtl-wkrow { display: grid; grid-template-columns: var(--fdtl-lab, 64px) 1fr; margin-top: 8px; } /* token-exception */
.fdtl-wkaxis { position: relative; height: 16px; } /* token-exception */
.fdtl-wkaxis i { position: absolute; top: 0; transform: translateX(-50%); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; color: var(--teal-700); background: #e0f2ef; font-variant-numeric: tabular-nums; } /* token-exception */
.fdtl-wkaxis i.fdtl-wkend { right: 0; transform: none; } /* token-exception */ /* a label centred under a band that ends at the chart edge would overhang it, so it sits flush right instead */