/* SHARED·DAYSTRIPS (1168) — the last-7-days rows chart (When Caïa fed · When Caïa slept).
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * Seven day rows on one 24-hour line: a thin tick per feed, a rounded block per sleep. Clock
 * times above (0:00 · 6:00 · 12:00 · 18:00 · 24:00 with a small tick each), the parts of the day
 * below (night · morning · afternoon · evening), and the night window shaded full height so the
 * shape of her days reads against it without a single number on a bar.
 *
 * SIGNED-OFF PICTURE — the locked dashboard template (Andrew, 2026-09-15 "Ok lock dashboard",
 * RENDER-dashboard-whole-page-2x.png, templates/dashboard-2026-09-15/sketch-dashboard-whole-
 * page.html `when7()`). The rulings that shaped it, in order:
 *   · "When Caïa fed" = option E, tick rows, then "Try with 7 days" (DECISIONS-2026-09-14.md).
 *   · time-axis option 2: night (0–7) and evening (19–24) shaded, the part-of-day words below.
 *   · clock times added above in light grey, then "slightly darker on both" — both label rows
 *     are --ink-600, the words bold.
 *   · "Days in teal" — the day names are teal-700 bold.
 *   · 🔒 "'When Caïa fed' LOCKED" · "🔒 DASHBOARD SLEEP LOCKED" ("When Caïa slept, the last 7
 *     days, the When-Caïa-fed form") · the whole template 🔒🔒 locked ("Ok lock dashboard").
 *
 * 🔴 WHAT THE CARD OWNS VS WHAT THE CALLER OWNS.
 *   The card owns the DRAWING: seven rows, the shading, the clock row, the part-of-day words,
 *   and — ruled explicitly (GUIDE mechanics clarification, 2026-09-15, closing ASSESS
 *   §9.5) — a sleep across midnight is DRAWN where it happened, across both day lines.
 *   The caller owns the COUNTING and the COPY: which seven days, the day labels (weekday +
 *   date, per the "labelling sorted" ruling), each entry's hour, the phone's 24h/12h setting,
 *   and the night window if she ever moves it (ASSESS §2 S8: "night is a setting she can
 *   move, never computed"). A sleep that starts on day N and ends on day N+1 is passed ONCE,
 *   under its start day, with an end hour past 24 — the card splits the DRAW across the two
 *   rows. The count stays under the start day because the count is the caller's data.
 *
 * 🔴 SaMD — PLOTTING HER OWN RECORD, NOTHING ELSE. Every mark is an entry she made. The card
 * computes no average, no total, no trend, no comparison, no verdict colour — the marks are
 * one colour (teal-600) whatever the day looked like, and a day with nothing logged shows an
 * empty row (paper, never a zero — the "empty is better than wrong" rule). No reference line,
 * no median, no population shape anywhere in this card (D-329 plot-only; the chart rules in
 * DECISIONS-2026-09-14.md 2026-09-15). It never says "normal", never flags, never nudges.
 *
 * ⚠️ SELF-CONTAINMENT (D-470/475). Every element this card renders is styled under .dst with
 * tokens — the SVG text carries explicit font-family, size, weight and fill, so nothing
 * inherits from the page and nothing relies on a user-agent default. Check 27 (orphan-class)
 * reads this file against the renderer's markup: every class below is one the renderer emits.
 *
 * ⚠️ VALUE MAPPING (sketch hex → token, never the sketch hex itself):
 *   #e9e2ce → --cream-350 (the night shading)  · #23867a → --teal-600 (marks)
 *   #1c6e64 → --teal-700 (day names)           · #5a5a55 → --ink-600 (both label rows)
 *   #cfc9bb (the small clock ticks) has NO token — the nearest hairline token --cream-600
 *   (#d8d2bf) carries them; a hairline is its whole job.
 *
 * STATES (the mirror page mounts one block per state, data-state=""):
 *   ticks-newborn   dense ticks — a newborn's day, feeds at all hours (24h clock)
 *   ticks-few       sparse ticks — an 8-month-old's few feeds
 *   blocks          sleep blocks, one crossing midnight and drawn on both day lines
 *   empty-row       the same week with one day carrying nothing logged
 *   hours-12        ticks-newborn again with the phone's 12-hour setting passed in
 *
 * Non-interactive by construction — no button, no link, no cursor. Check 18 finds nothing to
 * demand. (Tapping a day opens Your logs for that day — D-778 — but that door is the recipe's
 * wiring over the whole strip, not a state of this card.)
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

.dst {
  /* The card IS one SVG. Width 100% of its module (the dashboard's 358px content width);
     height follows the viewBox so the seven rows keep their pitch at any width. */
  width: 100%;
  margin: 0;
}

.dst-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body); /* one inheritance point; every text below re-states its own */
}

/* ── the night window ────────────────────────────────────────────────────────────────────────
   Shaded FULL height of the seven rows (the ruling: night 0–7 and evening 19–24), sitting on
   the section panel so the rows read against it. Two rects, drawn first, behind everything. */
.dst-shade {
  fill: var(--cream-350);
}

/* ── the small clock ticks under the time labels ────────────────────────────────────────────
   A hairline whose whole job is to connect each clock time to its column. */
.dst-clocktick {
  stroke: var(--cream-600);
  stroke-width: 1; /* unitless SVG stroke, the-chart.css's convention — not layout spacing */
}

/* ── the clock times (0:00 · 6:00 · 12:00 · 18:00 · 24:00) ──────────────────────────────────
   --ink-600 per the "slightly darker on both" ruling — the same ink as the part words, the
   words only bolder. */
.dst-time {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-400);
  fill: var(--ink-600);
}

/* ── the day names, left column ─────────────────────────────────────────────────────────────
   Teal, bold (the "Days in teal" ruling), weekday + date so no two rows are ambiguous. */
.dst-day {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-600);
  fill: var(--teal-700);
}

/* ── the marks: a thin tick per feed, a rounded block per sleep ─────────────────────────────
   ONE colour, always --teal-600, whatever the day looked like — the shape carries the
   information (thin vs round), never a verdict colour. */
.dst-mark {
  fill: var(--teal-600);
}

/* ── the parts of the day under the rows ────────────────────────────────────────────────────
   night · morning · afternoon · evening, bold --ink-600 (the locked pair: same ink as the
   clock times, the words bold). */
.dst-part {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-700);
  fill: var(--ink-600);
}