/* record.css — the personal record page (record.html).
   Page-specific only — everything else (.bf-page/.bf-wrap/.bf-header/
   .bf-card/.bf-stack/.bf-text/.bf-source/.skeleton/.empty-state) reuses
   briefing.css + components.css, same convention as collection.html/
   calendar.html. Printable: a dedicated @media print block at the bottom
   turns the same markup into a plain paginated document — no separate
   print template, one source of truth. */

/* ── Toolbar (Print / Export JSON) — hidden entirely on print, see below ── */
.rec-toolbar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 22px;
}

/* ── Summary line — plain arithmetic over the live-fetched arrays, never a
   fabricated or cached count (see get-my-record.js / js/record.js). ──── */
.rec-summary {
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.9rem;
  margin: 0 0 26px;
}

/* ── Section titles (Facts you've noted / Your saved dates) — same small-caps
   treatment as profile.html's .pf-section-title, not imported since this page
   doesn't load profile.css. Always the 26px top margin, no exceptions: each
   <h2> is the first child of its OWN <section> wrapper (rec-noted-section,
   rec-saved-dates-section), so a naive `:first-child` guard (removed here —
   found via execution, it visibly collapsed "Your saved dates" almost onto
   the card above it) would zero EVERY section title's top margin, not just
   the page's first one. ─────────────────────────────────────────────────── */
.rec-section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 26px 0 12px;
}

/* ── Year sections ───────────────────────────────────────────────────── */
.rec-year { margin: 0 0 34px; }
.rec-year-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.rec-year-sub { color: var(--text-subtle); font-size: 0.85rem; margin: 0 0 14px; }

/* A kept/noted fact card mirrors .bf-card but adds a date rule above it —
   the record's own "when" label, distinct from the shared .bf-label a card
   doesn't otherwise carry outside the shelf. */
.rec-fact-date {
  font-family: var(--font-body);
  /* THE 16px FLOOR (§ED306), the same floor and the same token the five
     citation roles were moved onto in §ED440 Phase E — see the block at
     css/briefing.css "EVERY CITATION ROLE IN THE APP" and the TYPE FLOOR
     section of docs/DESIGN-INVARIANTS.md. This rule shipped at 0.78rem
     (12.48px) and was the source the /record + vault copy in briefing.css
     was cloned from, so fixing only the clone would have left the original
     to be copied again. The floor's ONE named exception is nav labels; a
     dateline eyebrow is not one. Enforced by scripts/audit-ed440-tokens.js. */
  font-size: var(--c-t-micro);
  /* Weight/case/tracking are the EYEBROW's own ratified identity and are
     deliberately NOT the citation block's: uppercase needs positive tracking,
     and the citation's -0.004em is ratified for sentence-case coloured type.
     Matches .rec-dates-group-title, the sibling eyebrow on this same page. */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* §ED440 warm ink tier, unified with the .ra-card > .rec-fact-date copy in
     briefing.css. Was --text-subtle here and --c-ink-3 there — the same
     dateline role drawn in a different ink on /record than on /vault. NOT
     the citation's --c-accent-ink: §ED469 ruled the lime OFF the date, so
     inheriting the citation block's colour would reverse that ruling. */
  color: var(--c-ink-3);
  margin: 0 0 6px;
}

/* ── Saved dates (name days + family dates) — always-visible, year-agnostic
   section (these recur every year, so they never belong under one .rec-year
   block; see get-my-record.js file header). ─────────────────────────────── */
.rec-dates-group { margin: 0 0 18px; }
.rec-dates-group-title {
  font-family: var(--font-body);
  /* THE 16px FLOOR (§ED306) — same fix as .rec-fact-date above (§ED475),
     applied to its sibling eyebrow on this same page. Shipped at 0.78rem
     (12.48px); moved to the same floor token. */
  font-size: var(--c-t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Was --text-subtle, same drift §ED475 fixed on .rec-fact-date — unified
     to the §ED440 warm ink tier. */
  color: var(--c-ink-3);
  margin: 0 0 8px;
}
.rec-date-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.rec-date-row:last-child { margin-bottom: 0; }
.rec-date-when { color: var(--text-subtle); font-size: 0.8rem; white-space: nowrap; }

/* ── Section empty micro-states (BUILD: "show the shape of what will fill",
   applies per-section too, not just the one whole-page empty state). ──── */
.rec-section-empty {
  color: var(--text-subtle);
  font-size: 0.88rem;
  font-style: italic;
  margin: 0;
}

/* ── Print ───────────────────────────────────────────────────────────────
   The reader's own object, on paper: hide app chrome (nav, toolbar, note
   edit controls, whole-card tap affordances), force a light, plain page,
   and keep a year's contents from splitting awkwardly across a page break. */
@media print {
  .rec-toolbar,
  .bottom-nav,
  .app-topnav,
  .app-auth-chip,
  .bf-nav,
  .bf-note-add,
  .bf-note-edit,
  .bf-note-editor,
  .bf-note-actions { display: none !important; }

  body { background: #fff !important; color: #111 !important; }
  .bf-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .rec-year { break-inside: avoid-page; }
  a { color: inherit !important; text-decoration: none !important; }
}