/* ============================================================================
 * 1177 HOME·YOURLOGS — "Your logs", the first door of Caïa's record (D-807 · D-808)
 * ============================================================================
 * One interleaved chronology under a hugging time pill and a Show row of small
 * chips. Row measurements follow the app's own chronology family (439 FEEDROW's
 * `.fd` block — time · 32px icon · entry · meta) so a row here and a row in the
 * logger read as the same object; the day header is this card's own, because 437's
 * REQUIRES a "N logged" count and NOTHING COUNTS here (D-778/D-808).
 *
 * Self-contained: every element this card renders is styled under `.ylg`, zero
 * reliance on page or user-agent defaults (D-470). Tokens only.
 * ============================================================================ */

.ylg { display: flex; flex-direction: column;
  padding: 0 var(--rhythm-inset) var(--space-24); }
/* CARD DAYS (Andrew 2026-10-02: the "Card" day style, on the "Fewer lines" base): a day
   is a surface-card block under its date heading; the only hairlines left are the
   in-card row dividers. No day lines, no heading underline, no end-line rule. No flex
   gap on the root: each day spaces itself with its own bottom margin. The two filter
   blocks space themselves. */
.ylg-when { margin-bottom: var(--space-16); }
.ylg-show { margin-bottom: var(--space-12); }

/* ── the two filter labels ────────────────────────────────────────────────────
   Two labelled controls, per PLAN-caia-record §B1 ("Labels are not decoration:
   unlabelled, two adjacent chip rows read as one control") — When, then Show. */
.ylg-fl { display: block; font-family: var(--font-label); font-size: var(--text-meta);
  font-weight: var(--weight-600); letter-spacing: var(--tracking-05); text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--space-8); }

/* ── the time control: ONE pill that hugs its content (D-808 arm B) ───────────
   Teal outline, solid caret. Ruled against both alternatives the same day: a
   full-width bar reads as a text field; a tinted fill reads as a SELECTED pill
   and merges with the Show row below. */
.ylg-when { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ylg-whenpill { display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12); background: var(--surface-card);
  border: var(--radius-2) solid var(--accent); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-600);
  color: var(--text-primary); cursor: pointer; }
.ylg-whenpill:active { background: var(--surface-hover-wash); }
.ylg-whenpill:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-2); }
.ylg-when-c { display: inline-flex; color: var(--accent); }
.ylg-when-c svg { width: var(--dim-16); height: var(--dim-16); }

/* The open menu — a quiet card under the pill. The current window carries the
   tick; everything else is a plain row. */
.ylg-menu { position: absolute; top: 100%; left: 0; z-index: 2; min-width: 200px; /* token-exception */
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.ylg-menu-o { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-8) var(--space-12); background: none; border: 0; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--text-primary);
  text-align: left; cursor: pointer; }
.ylg-menu-o:active { background: var(--surface-hover-wash); }
.ylg-menu-o:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: calc(var(--radius-2) * -1); }
.ylg-menu-o.on { color: var(--teal-700); font-weight: var(--weight-600); } /* text accent: teal-700 (4.23 with --accent here) */
.ylg-menu-tick { display: inline-flex; }
.ylg-menu-tick svg { width: var(--dim-16); height: var(--dim-16); }

/* ── the Show row: 430's own pills, smaller ───────────────────────────────────
   D-808: seven chips on `.pill.sm` — 6px/10px padding, 13px text — a SIZE VARIANT
   of 430 SHARED·SELECTIONPILL, not a new component. Measured live at 358px: no
   pill size fits seven on one row; it wraps to two and that is the ruled shape.
   🔴 This block is the variant's size applied UNDER THIS CARD'S ROOT because 430
   has no .sm variant yet — brief 04 lands it on the shared card. When it does,
   this block retires and the chips take the shared class; the markup needs no
   change. 6px/10px sit off the 4px grid by ruling — hence the plain
   token-exception comments (the workbench check matches them literally). */
.ylg-show .pill { padding: 6px 10px; /* token-exception */
  font-size: var(--text-caption); } /* token-exception: ruled 13px (D-808) */

/* ── the day header — this card's own, and deliberately not 437 ───────────────
   437 SHARED·DAYGROUP's header throws without a "N logged" count; a day header
   with a count is the dashboard's grammar (D-778). So: a plain label, never a
   button, never a caret, never a number. */
.ylg-day { margin-bottom: var(--space-12); }
.ylg-day-h { padding: var(--space-12) 0 var(--space-8); }
.ylg-day-h .w { font-size: var(--text-body-sm); color: var(--text-secondary); }
.ylg-day-h .w b { color: var(--teal-700); font-weight: var(--weight-600); } /* text accent: teal-700, measured 5.82/4.69 — --accent's teal-600 is 4.23 here, under the floor */

/* THE CARD DAY (Andrew 2026-10-02: picked "Card" over three alternatives, on the "Fewer
   lines" base): each day is ONE white card — the date heading floats above it on the page
   ground, the rows sit inside separated by hairlines, and there is no line above or below
   a day at all. The card IS the day's edge, so the old day/heading rules are gone.
   Side padding is --space-8, not 12: at a 390 phone the row text column was a few pixels
   too narrow and "Awake before this · 2 h 30 m" broke onto a second line; 8 gives the text
   its room back without shrinking any type. */
.ylg-day-b { display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: var(--radius-card);
  padding: 0 var(--space-8); }

/* ── one entry — the chronology family's row (439's measurements) ───────────── */
.ylg-row { display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) 0; border-top: var(--radius-2) solid var(--border-hairline); }
.ylg-day-b .ylg-row:first-child { border-top: 0; }
/* Inside a card the row's three gutters tighten from 12 to 8 — together with the card's own
   8px side padding that hands the text column back the room the card took, so the names and
   the "Time since last · 3 h 20 m" / "Awake before this · 2 h 30 m" lines keep one line at a 390
   phone with the type exactly as it was. */
.ylg-day-b .ylg-row { gap: var(--space-8); }
.ylg-t { font-family: var(--font-label); font-size: var(--text-meta); color: var(--text-secondary);
  width: var(--dim-40); flex: 0 0 auto; align-self: center; }
.ylg-ic { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
  display: grid; place-items: center; flex: 0 0 auto; align-self: center; }
.ylg-ic svg { width: var(--dim-16); height: var(--dim-16); }
.ylg-b { flex: 1; min-width: 0; }
.ylg-b:not(:has(.ylg-m)) { align-self: center; }
/* Line 1, the entry — teal-700 (ruled 2026-09-11: measured 5.00:1 on the page
   cream, where --accent's teal-600 measures 3.64:1 and fails the 4.5 floor). */
.ylg-w { display: block; font-size: var(--text-body-sm); font-weight: var(--weight-600);
  color: var(--teal-700); }
/* Line 2, the interval — the kind is NOT repeated; the column scans to the
   duration. Rendered only where the caller measured one (D-808). */
.ylg-m { display: block; font-size: var(--text-caption); color: var(--text-secondary);
  line-height: var(--leading-145); margin-top: var(--space-4); }
.ylg-pen { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
  background: none; border: 0; color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto; align-self: center; }
.ylg-pen svg { width: var(--dim-16); height: var(--dim-16); }
.ylg-pen:active { color: var(--accent); }
.ylg-pen:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-2); }

/* Kind tint = which kind (438's own values, byte-equal): shape says kind, tone
   says family (D-379/D-454). Solids is the weaning clay; the rest are track
   slate except the nappy's cream. 1006 SHARED·KINDTRIPLE is the owed shared
   home; until it lands each card carries its own block, as 438 does. */
.ylg-row.k-feed .ylg-ic { background: var(--slate-100); color: var(--text-primary); }
.ylg-row.k-sleep .ylg-ic { background: var(--slate-100); color: var(--text-primary); }
.ylg-row.k-nappy .ylg-ic { background: var(--cream-100); color: var(--text-primary); }
.ylg-row.k-solid .ylg-ic { background: var(--clay-100); color: var(--text-primary); }
.ylg-row.k-growth .ylg-ic { background: var(--slate-100); color: var(--text-primary); }
.ylg-row.k-milestone .ylg-ic { background: var(--slate-100); color: var(--text-primary); }

/* ── the end of the list is a LINE, never a trail-off (D-808) — a line of words; the
   hairline that used to sit above it is gone, the last day's card ends cleanly. */
.ylg-end { font-size: var(--text-caption); color: var(--text-secondary);
  text-align: center; margin: 0; padding: var(--space-12) 0 0; }

/* ── the honest empty (REPORT-record-empties §A1) ─────────────────────────────
   One sentence in her voice, the + menu as the way to start. No illustration, no
   fabricated row, no encouragement, no count. */
.ylg-empty { padding: var(--space-24) 0; text-align: center; }
.ylg-empty-line { font-size: var(--text-body-sm); font-weight: var(--weight-600);
  color: var(--text-primary); margin: 0 0 var(--space-8); }
.ylg-empty-start { font-size: var(--text-caption); color: var(--text-secondary);
  line-height: var(--leading-145); margin: 0; }
.ylg-plus { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: inherit;
  color: var(--teal-700); font-weight: var(--weight-600); text-decoration: underline; } /* text accent: teal-700 */
.ylg-plus:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-2); }