/**
 * PPF Pro Blueprint - Compact learning record card (v0.3.56).
 *
 * Locked reference: mockup-compact-learning-record.html + DESIGN-RATIONALE.md
 * (owner order 2026-09-19). Fall 2026 palette: Egret field, Kiln Ink text,
 * Heritage Gold arc as the single decorative element. Card surface uses the
 * white card token; hairlines and the card border use Candied Ginger (the
 * palette's designated quiet-divider material).
 *
 * PHI SPACING SYSTEM (owner order 2026-09-19). Tokens from
 * phi-layout-system-2026-09-19.md section 1; consecutive terms ~phi. Tokens
 * do NOT scale with viewport. Refusals honored (DESIGN-RATIONALE section 7):
 * body text size, touch targets, border radii, line-height, colors, and
 * chrome are off-limits to phi. Card radius (12px) is from the functional
 * scale; hairlines are the 1px functional minimum; ring geometry (56px,
 * 6px stroke) is component geometry, not whitespace.
 *
 * Token dependencies: this stylesheet is enqueued with 'ppfb-palette-tokens'
 * declared as a dependency (handle ppfb-dash-record), alongside
 * 'ppfb-dash-tokens' for the dashboard font stacks.
 */

/*
 * Phi spacing tokens - every gap in this card is one of these values.
 * Token map (DESIGN-RATIONALE):
 *   --sp-3xs  5px  hairline nudges (stat cell vertical padding, label->caption)
 *   --sp-2xs  8px  tight inline gaps (stat cell horizontal padding, value->label)
 *   --sp-xs   13px component-internal rhythm (kicker->progress, ring->text, note padding-top)
 *   --sp-sm   21px section separations (card padding, divider margins, note margin-top)
 *   --sp-md   34px unused on this card (reserved for sub-sections)
 *   --sp-lg   55px unused on this card (reserved for major breaks)
 *   --sp-xl   89px unused on this card (page-level breaks)
 */
:root {
  --sp-3xs: 5px;
  --sp-2xs: 8px;
  --sp-xs: 13px;
  --sp-sm: 21px;
  --sp-md: 34px;
  --sp-lg: 55px;
  --sp-xl: 89px;
}

/* ---- the compact learning record card ---- */
.ppfb-lr-card {
  background: var(--course-surface-card);
  border: 1px solid var(--course-candied-ginger);
  border-radius: 12px; /* functional scale, not phi (refusal #6) */
  padding: var(--sp-sm); /* card padding = 21px (token map: section separation) */
  font-family: var(--ppfb-10k-font-ui);
}

.ppfb-lr-kicker {
  font-size: 11px; /* legibility choice, not phi (refusal #2) */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--course-text-muted);
}

.ppfb-lr-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-xs); /* ring -> "N of D lessons" = 13px (token map) */
  margin-top: var(--sp-xs); /* kicker -> progress row = 13px (token map) */
}

.ppfb-lr-ring {
  flex: 0 0 auto;
  display: block;
}

/* Ring track: ginger quiet-divider material at 35% opacity. Stroke set in
   CSS (var() is not valid in SVG presentation attributes). */
.ppfb-lr-ring-track {
  stroke: var(--course-candied-ginger);
  stroke-opacity: 0.35;
}

/* Ring arc: Heritage Gold, decorative only (brand-blessed use). At 0%
   the arc is invisible - honest empty state. */
.ppfb-lr-ring-arc {
  stroke: var(--course-gold-accent);
}

.ppfb-lr-progress-text {
  font-size: 15px; /* legibility choice, not phi (refusal #2) */
  font-weight: 600;
  color: var(--course-text-body);
  font-variant-numeric: tabular-nums;
}

.ppfb-lr-hr {
  border: 0;
  border-top: 1px solid var(--course-candied-ginger); /* hairline: functional minimum (refusal #8) */
  margin: var(--sp-sm) 0; /* divider margins = 21px (token map: section separations) */
}

.ppfb-lr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* v0.3.110: Quiz average stat removed */
}

.ppfb-lr-stat {
  text-align: center;
  padding: var(--sp-3xs) var(--sp-2xs); /* 5px / 8px (token map: nudge / tight inline gap) */
}

.ppfb-lr-stat + .ppfb-lr-stat {
  border-left: 1px solid var(--course-candied-ginger); /* hairline divider (refusal #8) */
}

.ppfb-lr-value {
  font-size: 18px; /* legibility choice, not phi (refusal #2) */
  font-weight: 700;
  color: var(--course-text-primary);
  line-height: 1.25; /* readability, not phi (refusal #7) */
  font-variant-numeric: tabular-nums;
}

.ppfb-lr-label {
  font-size: 12.5px; /* legibility choice, not phi (refusal #2) */
  font-weight: 600;
  color: var(--course-text-body);
  margin-top: var(--sp-2xs); /* value -> label = 8px (token map: tight inline gap) */
  line-height: 1.35; /* readability, not phi (refusal #7) */
}

.ppfb-lr-cap {
  font-size: 11px; /* legibility choice, not phi (refusal #2) */
  font-weight: 400;
  color: var(--course-text-muted);
  margin-top: var(--sp-3xs); /* label -> caption = 5px (token map: hairline nudge) */
  line-height: 1.45; /* readability, not phi (refusal #7) */
}

.ppfb-lr-note {
  font-size: 12px; /* legibility choice, not phi (refusal #2) */
  font-weight: 400;
  color: var(--course-text-body);
  line-height: 1.6; /* body leading: readability, not phi (refusal #7) */
  border-top: 1px solid var(--course-candied-ginger);
  margin-top: var(--sp-sm); /* note margin-top = 21px (token map: section separation) */
  padding-top: var(--sp-xs); /* note padding-top = 13px (token map: internal rhythm) */
}