/*
 * CertaRounds — widget & chart styles (src/ui/charts.js, src/ui/widgets.js). API: docs/WIDGETS.md.
 * Semantic tokens only. Widget tints are mixed from --accent / --surface, so one definition serves
 * light and dark. Motion uses --dur-* (zeroed under reduced motion); nothing animates on load.
 */

/* ============ Widget tokens ============ */
:root {
  --w-line: var(--accent);                                        /* chart line, dots */
  --w-grid: var(--divider);                                       /* chart gridlines */
  --w-ring-track: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --w-soft: color-mix(in srgb, var(--accent) 40%, var(--surface)); /* 3rd categorical tone */
  --w-hero-bg: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent) 28%, var(--surface)) 100%);
  --w-quote-bg: linear-gradient(110deg,
    color-mix(in srgb, var(--accent) 4%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent) 11%, var(--surface)) 100%);
  --w-quote-mark: color-mix(in srgb, var(--accent) 42%, var(--surface));
  --w-halo: color-mix(in srgb, var(--accent) 20%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --w-ring-track: var(--accent-soft);
    --w-soft: var(--accent-2);
    --w-hero-bg: var(--surface-3);
    --w-quote-bg: var(--surface-2);
    --w-quote-mark: var(--accent-2);
    --w-halo: var(--accent-soft);
  }
}

/* ============ Shared: panel header, "See all", select, empty note, gem fallback ============ */
.w-panel { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1024px) { .w-panel, .readiness, .suggest-card { --card-p: 18px; } .w-head { column-gap: 10px; --w-head-indent: 38px; } }
/* gem · title · action on one line; the subtitle has its own full line under them (a date or "See all"
   never squeezes it). Flex-wrap: when title + action don't fit, the ACTION drops to its own line
   (right-aligned) instead of breaking the title ("Performance / Trend"). Phones drop the header gem
   (mockup phone 4). */
.w-head {
  --w-head-indent: 40px;   /* gem 28 + gap 12: the subtitle lines up with the title */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-width: 0;
  margin-bottom: var(--sp-4);
}
.w-head--nogem { --w-head-indent: 0px; }
.w-head__gem { flex: none; display: inline-flex; }
.w-head__text { display: contents; }
.w-head__title {
  flex: 1 1 auto;          /* basis = its one-line width, so the action wraps before the title does */
  min-width: 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
  color: var(--text-strong);
}
.w-head__sub { order: 3; flex: 0 0 100%; padding-left: var(--w-head-indent); font-size: var(--fs-13); color: var(--text-3); line-height: 1.4; }
.w-head__action { order: 2; flex: none; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; min-height: 24px; }
.w-more { font-size: var(--fs-13); }
@media (max-width: 767px) {
  .w-head:not(.w-head--keep-gem) { --w-head-indent: 0px; }
  .w-head:not(.w-head--keep-gem) .w-head__gem { display: none; }
}
@media (min-width: 1024px) { .w-head__title { font-size: 1rem; } }

.w-select { position: relative; display: inline-flex; align-items: center; }
.w-select__input {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  padding: 0 30px 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text);
  cursor: pointer;
  transition: box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.w-select__input:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }
.w-select__input:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--focus-ring); }
.w-select__chev { position: absolute; right: 10px; color: var(--text-2); pointer-events: none; }
@media (pointer: coarse) { .w-select__input { height: 44px; } }

.w-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: var(--sp-5) var(--sp-3); }
.w-empty__icon {
  width: 40px; height: 40px; margin-bottom: 6px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.w-empty__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.w-empty__text { font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; max-width: 34ch; }

.w-gem-fb {
  width: var(--g); height: var(--g);
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border-radius: calc(var(--g) * .3);
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}

/* ============ TrendChart ============ */
.tc { margin: 0; min-width: 0; container-type: inline-size; }
.tc__frame {
  display: grid;
  grid-template-columns: var(--tc-yw, 40px) minmax(0, 1fr);
  grid-template-rows: var(--tc-h, 200px) 28px;
  padding-top: 22px;   /* callout headroom; charts.js raises it at render time when the highlight needs more */
}
.tc__yaxis { position: relative; grid-area: 1 / 1; }
.tc__ylabel {
  position: absolute; right: 10px;
  transform: translateY(-50%);
  font-size: var(--fs-12); line-height: 1;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc__plot { position: relative; grid-area: 1 / 2; touch-action: pan-y; }
.tc__grid { position: absolute; inset: 0; pointer-events: none; }
.tc__gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--w-grid); }
.tc__gridline--base { border-top-color: var(--border-strong); }
/* axis break (yDomain starting above zero): two slashes cutting the baseline at the y axis */
.tc__break { position: absolute; left: -7px; top: 100%; transform: translateY(-50%); display: block; width: 14px; height: 12px; background: var(--surface); line-height: 0; }
.tc__break svg { display: block; }
.tc__break path { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; }
.tc__grid--broken .tc__gridline--base { border-top-style: dashed; }
.tc__canvas { position: absolute; inset: 0 var(--tc-px, 16px); }
.tc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc__line { fill: none; stroke: var(--w-line); stroke-width: 2.5px; stroke-linejoin: round; stroke-linecap: round; }
.tc__gap { fill: none; stroke: var(--w-line); stroke-width: 1.5px; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .6; }
.tc__stop-a { stop-color: var(--w-line); stop-opacity: .2; }
.tc__stop-b { stop-color: var(--w-line); stop-opacity: 0; }
.tc__guide {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--border-control);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out);
}
.tc__guide.is-on { opacity: .7; }

.tc__pt {
  position: absolute;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--w-line);
  box-shadow: 0 0 0 2px var(--surface);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tc__pt--dot, .tc__pt.is-active { opacity: 1; }
.tc__pt.is-active { transform: scale(1.3); }
.tc__pt--hi {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--w-line), 0 0 0 5px var(--w-halo);
  opacity: 1;
}
.tc__pt--hi.is-active { transform: none; }
.tc__leader { position: absolute; z-index: 1; height: 0; border-top: 1.5px solid var(--w-line); transform-origin: 0 0; pointer-events: none; }
.tc__points { position: absolute; inset: 0; border-radius: 6px; }
/* the points layer is one role="slider"; keyboard focus rings the current point, not the whole plot */
.tc__points:focus-visible { outline: none; }
.tc__points:focus-visible .tc__pt.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.tc__points:focus-visible .tc__pt--hi.is-active { box-shadow: inset 0 0 0 3px var(--w-line), 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }

.tc__callout {
  --tx: -50%;
  --ty: calc(-100% - 14px);
  position: absolute; z-index: 2;
  transform: translate(var(--tx), var(--ty));
  display: flex; flex-direction: column; gap: 1px;
  min-width: 68px;
  padding: 6px 10px 7px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  pointer-events: none;
}
/* --tx / --ty are set per point by charts.js (collision-aware placement) */
.tc__callout-v { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tc__callout-d { font-size: 11.5px; color: var(--text-3); line-height: 1.25; font-weight: var(--fw-medium); }

.tc__xaxis { position: relative; grid-area: 2 / 2; }
.tc__xaxis-in { position: absolute; inset: 0 var(--tc-px, 16px); }
.tc__xlabel {
  position: absolute; top: 10px;
  transform: translateX(-50%);
  font-size: var(--fs-12); line-height: 1;
  color: var(--text-3);
  white-space: nowrap;
}
@container (max-width: 270px) {
  .tc__xlabel--minor { display: none; }
}

/* empty: a full-width band over the inner gridlines (only the 100% and 0% rules stay visible) */
.tc__empty {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 12px 16px;
  background: var(--surface);
  text-align: center;
}
.tc__empty-icon {
  width: 36px; height: 36px; margin-bottom: 6px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-soft-fg);
}
.tc__empty-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tc__empty-text { font-size: var(--fs-13); color: var(--text-3); line-height: 1.4; max-width: 30ch; }
.tc--empty .tc__ylabel { opacity: .7; }
.tc__note { font-size: var(--fs-13); color: var(--text-3); margin-top: 6px; padding-left: var(--tc-yw, 40px); }
/* metric toggle (D4): one chart, a segmented control under the header */
.tc-switch__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 2px; }
.tc-switch__cap { font-size: var(--fs-12); color: var(--text-3); line-height: 1.35; }

/* ============ RingGauge ============ */
.ring { position: relative; display: inline-grid; place-items: center; width: var(--ring); height: var(--ring); flex: 0 0 auto; }
.ring__svg { display: block; }
.ring__track { stroke: var(--w-ring-track); }
.ring__stop-a { stop-color: var(--accent-2); }
.ring__stop-b { stop-color: var(--primary); }
.ring--success .ring__arc { stroke: var(--success-fill); }
.ring--success .ring__track { stroke: color-mix(in srgb, var(--success-fill) 16%, var(--surface)); }
.ring--warning .ring__arc { stroke: var(--warning-fill); }
.ring--warning .ring__track { stroke: color-mix(in srgb, var(--warning-fill) 18%, var(--surface)); }
.ring--danger .ring__arc { stroke: var(--danger); }
.ring--danger .ring__track { stroke: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
.ring--muted .ring__arc { stroke: var(--border-control); }
.ring--muted .ring__track, .ring--empty .ring__track { stroke: var(--track); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring__label {
  font-size: var(--ring-fs, 16px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.ring__sub { font-size: max(10px, calc(var(--ring-fs, 16px) * .5)); font-weight: var(--fw-medium); color: var(--text-3); margin-top: 3px; }
.ring--empty .ring__label { color: var(--text-3); }
.ring-stat { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.ring-stat__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; }
.ring-stat__caption { font-size: var(--fs-12); color: var(--text-3); margin-top: -4px; line-height: 1.3; }

/* ============ BreakdownBar ============ */
.bb { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bb__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.bb__total { font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb__bar { display: flex; gap: 2px; height: var(--bb-h, 12px); border-radius: var(--r-pill); overflow: hidden; background: var(--track); }
.bb--sm { --bb-h: 8px; }
.bb--lg { --bb-h: 16px; }
.bb__seg { flex: 1 1 0; min-width: 4px; }
.bb__seg--empty { background: var(--track); }
.bb--primary { background: var(--primary); }
.bb--accent { background: var(--accent-2); }
.bb--soft { background: var(--w-soft); }
.bb--muted { background: var(--border-control); }
.bb--success { background: var(--success-fill); }
.bb--warning { background: var(--warning-fill); }
.bb--danger { background: var(--danger); }
.bb--info { background: var(--info); }
.bb__legend { display: grid; gap: 6px; margin: 0; }
.bb__legend--inline { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bb__item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); line-height: 1.35; min-width: 0; }
.bb__swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.bb__label { flex: 1 1 auto; min-width: 0; color: var(--text); }
.bb__legend--inline .bb__label { flex: 0 1 auto; }
.bb__value { font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb__pct { min-width: 3.1em; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bb__legend--inline .bb__pct { min-width: 0; }
.bb__empty { font-size: var(--fs-13); color: var(--text-3); }

/* ============ StatusPill ============ */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
.status-pill--success { color: var(--success-strong); background: var(--success-bg); }
.status-pill--warning { color: var(--warning); background: var(--warning-bg); }
.status-pill--danger { color: var(--danger-strong); background: var(--danger-bg); }
.status-pill--neutral { color: var(--text-2); background: var(--surface-sunken); }
.status-pill--primary { color: var(--accent-soft-fg); background: var(--accent-soft); }
.status-pill--sm { height: 26px; padding: 0 10px 0 8px; gap: 5px; font-size: var(--fs-13); }

/* ============ ReadinessHero ============ */
.readiness { display: flex; flex-direction: column; gap: var(--sp-4); }
.readiness__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.readiness__gem { display: inline-flex; flex: 0 0 auto; }
.readiness__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.readiness__title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.25;
  color: var(--text-strong);
}
.readiness__sub { font-size: var(--fs-13); line-height: 1.4; color: var(--text-3); }
@media (min-width: 1024px) { .readiness__sub { font-size: 14px; } }
.readiness__body { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; }
.readiness__row { display: flex; align-items: center; gap: 12px 20px; }
.readiness__score {
  display: flex; align-items: baseline;
  flex: 0 0 auto;
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}
.readiness__num { font-size: 44px; }
.readiness__max { font-size: 40px; font-weight: var(--fw-semibold); color: color-mix(in srgb, var(--text-accent) 74%, var(--surface)); margin-left: 1px; }
.readiness__bar { flex: 1 1 140px; min-width: 96px; }
.readiness__chev { color: var(--link); flex: 0 0 auto; margin-left: auto; }
.readiness__parts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-13); color: var(--text-3); }
.readiness__part-v { font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
@container (max-width: 400px) {
  .readiness__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "score pill" "bar bar"; }
  .readiness__score { grid-area: score; }
  .readiness__row > .status-pill { grid-area: pill; }
  .readiness__bar { grid-area: bar; }
  .readiness--plain .readiness__num { font-size: 40px; }
  .readiness--nobar .readiness__row { grid-template-areas: "score pill"; }   /* bar: false → no empty bar row */
  .readiness--plain .readiness__max { font-size: 36px; }
}

/* hero: the mascot-heavy phone's lavender card */
.readiness--hero { background: var(--w-hero-bg); border-width: 0; overflow: hidden; }  /* no border: a gradient would repeat under it */
.readiness__top { position: relative; display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.readiness__copy { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.readiness__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-17); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; letter-spacing: -0.01em; }
.readiness--hero .readiness__score { color: var(--text-strong); margin-top: 2px; }
.readiness--hero .readiness__num { font-size: 46px; }
.readiness--hero .readiness__max { font-size: 40px; color: color-mix(in srgb, var(--text-strong) 62%, transparent); }
.readiness--hero .readiness__sub { color: var(--text-2); }
/* Dr. Round: head and torso only (the figure is cropped by the art box, never by the bar row) */
.readiness__art { flex: 0 0 auto; align-self: flex-end; width: 80px; height: 104px; margin: -4px 0 -2px; overflow: hidden; }
.readiness__art .mascot { display: block; margin-left: -4px; }
.readiness__quote {
  flex: 0 1 132px; align-self: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  font-size: var(--fs-13); line-height: 1.4;
  color: var(--text-2);
}
.readiness__quote--with-art { flex: 0 1 92px; padding: 0; background: none; font-size: var(--fs-12); line-height: 1.45; }
.readiness--art .readiness__eyebrow { font-size: var(--fs-15); }
.readiness--art .readiness__num { font-size: 40px; }
.readiness--art .readiness__max { font-size: 34px; }
.readiness--hero .readiness__row { display: flex; }
.readiness--hero .readiness__bar { flex: 1 1 auto; }
.readiness--hero .readiness__row { column-gap: 14px; }
.readiness--hero .progress__track { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.readiness--hero .readiness__body { container-type: normal; }

/* locked (honest cold start) */
.readiness__lock {
  flex: 0 0 auto; margin-left: auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-2); background: var(--surface-sunken);
}
.readiness--hero .readiness__lock { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.readiness__lockbody { display: flex; flex-direction: column; gap: 10px; }
.readiness__lockcount { display: flex; align-items: baseline; gap: 2px; }
.readiness__lockn { font-size: var(--fs-30); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.readiness__lockof { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-2); }
.readiness__lockhint { font-size: var(--fs-13); line-height: 1.45; color: var(--text-3); }
.readiness--hero .readiness__lockhint { color: var(--text-2); }

/* ============ StatCard ============ */
/* Parts sit on fixed grid rows: gem · label · value · caption. Inside .w-stat-grid (or any grid
   parent marked .w-stat-row) the cards subgrid those rows, so sibling values share one line even
   when one label wraps (D5). Labels wrap to 2 lines, never truncate; captions stay on 1 line. */
.stat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  justify-items: start;
  align-content: start;
  row-gap: 2px;
  --card-p: 16px 16px 16px 18px;
}
@media (min-width: 1024px) { .stat-card { --card-p: 16px 14px 16px 16px; } }
.stat-card__gem { grid-row: 1; display: inline-flex; margin-bottom: 8px; }
.stat-card__label {
  grid-row: 2; align-self: end;
  max-width: 100%;
  font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3;
  text-wrap: balance; overflow-wrap: break-word;
}
.stat-card__value {
  grid-row: 3;
  display: block;
  margin-top: 2px;
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-card__unit { font-size: .62em; margin-left: 1px; letter-spacing: 0; }
.stat-card__caption {
  grid-row: 4;
  max-width: 100%;
  margin-top: 3px;
  font-size: var(--fs-13); color: var(--text-3); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;   /* wraps once in narrow cards; the subgrid keeps values aligned */
}
.stat-card__caption .delta { margin-right: 2px; }
@media (min-width: 1024px) { .stat-card__caption { font-size: var(--fs-12); } }
.stat-card--empty .stat-card__value { color: var(--text-3); font-weight: var(--fw-semibold); }
.stat-card--compact { justify-items: center; text-align: center; row-gap: 1px; --card-p: 12px 6px 12px; }
.stat-card--compact .stat-card__gem { margin-bottom: 6px; }
.stat-card--compact .stat-card__label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); line-height: 1.25; }
.stat-card--compact .stat-card__value { font-size: var(--fs-20); margin-top: 1px; }

/* Grids. .w-stat-grid: 2-up on phones, 4-up from 768px. .w-stat-grid--4: the phone 4-up tile row,
   which switches to 2×2 when the row is narrower than 340px (360px phones) instead of squeezing labels. */
.w-stat-grid { --g: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.w-stat-grid.w-stat-grid--4 {
  --g: 8px;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(25% - var(--g) * .75), calc((340px - 100%) * 999), calc(50% - var(--g) / 2)), 1fr));
}
@media (min-width: 768px) {
  .w-stat-grid { --g: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-stat-grid.w-stat-grid--4 { --g: 12px; }   /* still 2×2 in a narrow (< 340px) container */
}
@supports (grid-template-rows: subgrid) {
  .w-stat-grid > .stat-card, .w-stat-row > .stat-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 2px; }
  .w-stat-grid > .stat-card--compact, .w-stat-row > .stat-card--compact { grid-row: span 3; row-gap: 1px; }
}

/* ============ WeekChecks ============ */
.wk { --wk-d: 32px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; }
.wk--sm { --wk-d: 26px; }
.wk--lg { --wk-d: 36px; }
.wk__day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wk--above .wk__day { flex-direction: column-reverse; gap: 8px; }
.wk__dot {
  width: var(--wk-d); height: var(--wk-d);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-3);
  box-shadow: inset 0 0 0 1.5px var(--border-control);   /* 3:1 for graphics in light and dark */
}
.wk__label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); line-height: 1.2; white-space: nowrap; }
.wk__day.is-today .wk__label { color: var(--text-strong); font-weight: var(--fw-bold); }
.wk__day--done .wk__dot,
.wk__day--today-done .wk__dot {
  background: var(--primary-gradient);
  color: var(--primary-fg);
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--primary) 60%, transparent);
}
.wk__day--today-done .wk__dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--w-halo); }
.wk__day--today .wk__dot { background: var(--selected-bg); box-shadow: inset 0 0 0 2px var(--primary); }
.wk__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.wk__day--missed .wk__dot { background: var(--surface-sunken); box-shadow: none; }
.wk__dash { width: 10px; height: 2px; border-radius: 2px; background: var(--text-3); }
.wk__day--rest .wk__dot { box-shadow: none; border: 1.5px dashed var(--border-control); }
.wk__day--before-start .wk__dot { box-shadow: none; border: 1.5px dotted var(--border-control); }   /* label keeps --text-3 (AA); SR says "before you started" */
.wk__summary { font-size: var(--fs-13); color: var(--text-2); margin-top: 10px; }

/* ============ MasteryBars ============ */
.mb { display: flex; flex-direction: column; gap: 2px; container-type: inline-size; }
.mb__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(56px, .6fr) 3.1em;   /* the name gets ~62% of the flexible width */
  grid-template-areas: "gem name bar pct";
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 4px 0;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
}
.mb__row--link { cursor: pointer; width: calc(100% + 16px); margin: 0 -8px; padding: 4px 8px; transition: background var(--dur-1) var(--ease-out); }
.mb__row--link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.mb__row--link:active { background: var(--surface-pressed); }
.mb__row--link:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--focus-ring); }
@media (pointer: coarse) { .mb__row--link { min-height: 44px; } }
.mb__gem { grid-area: gem; display: inline-flex; justify-content: center; }
.mb__name { grid-area: name; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--text); }
/* name line = label + pill slot: one rhythm for every row (20px min, pill height); the pill never wraps
   under the name on wide cards, the label wraps instead */
/* D19: a name never breaks inside a word. The line wraps: when name + pill don't fit, the pill drops
   under the name (left-aligned) instead of squeezing the name column. */
.mb__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; min-height: 20px; }
.mb__label { flex: 0 1 auto; min-width: 0; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.mb__nowrap { white-space: nowrap; }
.mb__meta { display: block; margin-top: 1px; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--text-3); line-height: 1.3; font-variant-numeric: tabular-nums; }
.mb__pill {
  display: inline-flex; align-items: center; gap: 3px;
  flex: none; padding: 1px 7px 1px 6px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.45; letter-spacing: .01em;
  white-space: nowrap; flex-shrink: 0;                        /* never shrinks or ellipsizes (D6) */
}
.mb__pill--weak { color: var(--warning); background: var(--warning-bg); }
.mb__pill--refresh { color: var(--text-2); background: var(--surface-sunken); }
.mb__pill--note { color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: var(--fw-medium); }
.mb__track { grid-area: bar; position: relative; height: 10px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.mb__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--bar-fill); }
.mb__pct { grid-area: pct; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* One rhythm for every row: everything hangs from the first line (name line 20px, bar and % centred on
   it), so a second line (a pill on phones, a meta or evidence line) extends the row downward instead of
   re-centring the name. Single-line rows stay 36px (44px on phones). */
.mb__row, .mb__row--link { align-items: start; padding-top: 7px; padding-bottom: 7px; }
.mb__gem { margin-top: -1px; }
.mb__track { margin-top: 5px; }
.mb__pct { margin-top: 1px; }
@media (max-width: 767px) { .mb__row, .mb__row--link { padding-top: 10px; padding-bottom: 10px; } }
/* D12 evidence ("71% right") under the main value */
.mb__ev { display: block; margin-top: 1px; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); line-height: 1.25; }
.mb--ev .mb__row { grid-template-columns: 24px minmax(0, 1fr) minmax(48px, .5fr) 5.2em; }
@media (min-width: 1024px) {
  .mb__row { grid-template-columns: 22px minmax(0, 1fr) minmax(52px, .5fr) 2.9em; column-gap: 8px; }   /* common names stay on one line from ~330px of card */
  .mb--ev .mb__row { grid-template-columns: 22px minmax(0, 1fr) minmax(48px, .45fr) 5.4em; }
  .mb__name, .mb__pct { font-size: var(--fs-13); }
}
/* Wide cards (full-width Analytics, desktop Home rows): cap name and bar so they read as a pair
   instead of the bar drifting to the far edge. */
@container (min-width: 600px) {
  .mb__row, .mb--ev .mb__row { grid-template-columns: 24px minmax(0, 15rem) minmax(80px, 22rem) 5.4em; justify-content: start; column-gap: 14px; }
  .mb:not(.mb--ev) .mb__row { grid-template-columns: 24px minmax(0, 15rem) minmax(80px, 22rem) 3.4em; }
}
/* Phones (≤ 767px): 44px rows (D7); a status pill takes its own line under the name; the name column
   keeps a minimum width so the bar never starts under text. */
@media (max-width: 767px) {
  .mb__row { min-height: 44px; }
  .mb:not(.mb--long):not(.mb--mid):not(.mb--compact) .mb__row { grid-template-columns: 24px minmax(7em, 1fr) minmax(48px, .6fr) 3.1em; }
  .mb--ev:not(.mb--long):not(.mb--mid):not(.mb--compact) .mb__row { grid-template-columns: 24px minmax(7em, 1fr) minmax(40px, .5fr) 5.2em; }
  .mb__label { flex: 1 0 100%; }            /* phones: the pill always takes its own line under the name */
}
/* Narrow cards: name (+ pill) and % on the first line, a full-width bar under the name. Long names
   always; on phones also mid-length names, status pills and evidence (never squeezed beside a bar). */
@container (max-width: 420px) {
  .mb--long .mb__row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "gem name pct" "gem bar bar";
    row-gap: 7px;
    padding-top: 7px; padding-bottom: 9px;
  }
  .mb--long .mb__gem { align-self: start; margin-top: 0; }
  .mb--long .mb__name, .mb--long .mb__pct { align-self: start; }   /* names share one top line, pill or not */
  .mb--long .mb__track { height: 8px; margin-top: 0; }
}
@media (max-width: 767px) {
  @container (max-width: 420px) {
    .mb--mid .mb__row {
      grid-template-columns: 24px minmax(0, 1fr) auto;
      grid-template-areas: "gem name pct" "gem bar bar";
      row-gap: 7px;
      padding-top: 7px; padding-bottom: 9px;
    }
    .mb--mid .mb__gem { align-self: start; margin-top: 0; }
    .mb--mid .mb__name, .mb--mid .mb__pct { align-self: start; }
    .mb--mid .mb__track { height: 8px; margin-top: 0; }
  }
}
.mb__row--weak .mb__pct { color: var(--warning); }
/* Weak keeps the violet bar like every row (the bar = the number; an amber bar made the card read orange and
   let a lower score look healthier): the amber % and the ⚠ pill/glyph carry Weak. */
.mb__row--na .mb__track { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.mb__row--na .mb__pct { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); }
.mb__row--na .mb__ev { font-weight: var(--fw-regular); }
/* density: 'compact' — ≈ 300–350px rail cards (desktop Home 1280–1440). Two short lines per row (≈ 42px):
     gem │ name (one line)          90% ⚠
         │ ██████████████░░░░   82% right
   The bar gets the full width beside the value column (≥ 160px at 306px cards) instead of a stub; one number
   per line; names never wrap (ellipsis + tooltip only as a last resort); status = glyph + SR text. */
.mb--compact .mb__row {
  grid-template-columns: 22px minmax(0, 1fr) 4.7em;
  grid-template-areas: "gem name pct" "gem bar ev";
  column-gap: 10px; row-gap: 4px;
  padding-top: 4px; padding-bottom: 5px;
}
.mb--compact:not(.mb--ev) .mb__row { grid-template-areas: "gem name pct" "gem bar bar"; }
.mb--compact .mb__gem { align-self: center; margin-top: 0; }
.mb--compact .mb__name { align-self: end; overflow: hidden; }
.mb--compact .mb__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.mb--compact .mb__line { min-height: 0; }
.mb--compact .mb__pct { align-self: end; line-height: 1.3; margin-top: 0; }
.mb--compact .mb__track { height: 7px; align-self: center; margin-top: 0; }
.mb__ev--cell { grid-area: ev; align-self: center; margin: 0; text-align: right; white-space: nowrap; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--text-3); line-height: 1.2; }
.mb__flag { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--warning); }
.mb__flag--refresh { color: var(--text-3); }

/* ============ SpecialtyProgressCard ============ */
.spc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "gem text" "bar bar";
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  min-width: 0;
  padding: 12px 12px 12px 11px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  text-align: left;
}
.spc__gem { grid-area: gem; display: inline-flex; }
.spc__text { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.spc__name { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); line-height: 1.25; overflow-wrap: break-word; }
.spc__value { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.3; font-variant-numeric: tabular-nums; }
.spc--na .spc__value { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-3); }
.spc__track { grid-area: bar; position: relative; height: 5px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.spc__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--bar-fill); }
.spc--link { cursor: pointer; transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.spc--link:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text); text-decoration: none; }
.spc--link:active { background: var(--surface-pressed); }
.spc--link:focus-visible { outline: none; border-radius: 14px; box-shadow: var(--focus-ring); }
.w-spc-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 10px; }

/* ============ WeakTopicsTable ============ */
.wt { container-type: inline-size; min-width: 0; }
.wt__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
@media (min-width: 1024px) { .wt__table { font-size: var(--fs-13); } }
.wt__th {
  padding: 8px 10px;
  background: var(--surface-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-align: left;
  white-space: nowrap;
}
.wt__th:first-child { padding-left: 12px; border-radius: 8px 0 0 8px; }
.wt__th:last-child { border-radius: 0 8px 8px 0; }
.wt__row > td { padding: 8px 10px; vertical-align: middle; line-height: 1.35; transition: background var(--dur-1) var(--ease-out); }
.wt__row > td:first-child { padding-left: 12px; border-radius: 8px 0 0 8px; }
.wt__row > td:last-child { border-radius: 0 8px 8px 0; }
.wt__row:first-child > td { padding-top: 10px; }
.wt__cell { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.wt__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--spec-fg, var(--accent)); }
.wt__th--num { width: 1%; }
.wt__th:last-child { width: 34%; }
/* Wider tables: fixed columns so long Harrison topic names get ~45% instead of wrapping to 3 lines */
@container (min-width: 361px) {
  .wt__table { table-layout: fixed; }
  .wt__th--topic { width: 54%; }
  .wt__th--num { width: max(15%, 6.4em); white-space: nowrap; }   /* "Lost points" always on one line */
  .wt__th:last-child { width: 31%; }
}
.wt__dot--high { background: var(--danger); }
.wt__dot--mid { background: var(--warning-fill); }
.wt__dot--low { background: var(--accent-2); }
.wt__dot--na { background: var(--border-control); }
.wt__link, .wt__text { font-weight: var(--fw-medium); color: var(--text-strong); text-align: left; }
.wt__link:hover { color: var(--text-strong); text-decoration: none; }
.wt__row--link { position: relative; cursor: pointer; }
.wt__link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.wt__link:focus-visible { outline: none; }
.wt__link:focus-visible::after { box-shadow: var(--focus-ring); }
.wt__row--link:hover > td { background: var(--surface-hover); }
.wt__chev { display: none; }
.wt__lost { font-weight: var(--fw-bold); color: var(--danger-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt__lost-unit {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wt__reason { color: var(--text-2); }
.wt__reason.is-empty { color: var(--text-3); }
@container (max-width: 340px) {
  .wt__table, .wt__table tbody, .wt__row, .wt__row > td { display: block; }
  .wt__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wt__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "topic lost" "reason lost";
    column-gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider);
  }
  .wt__row:first-child { padding-top: 2px; }
  .wt__row:last-child { border-bottom: 0; padding-bottom: 2px; }
  .wt__row > td, .wt__row > td:first-child, .wt__row:first-child > td { padding: 0; border-radius: 0; background: none; }
  .wt__row--link { padding-right: 26px; }
  .wt__row--link:hover > td { background: none; }
  .wt__row--link:hover { background: var(--surface-hover); }
  .wt__row > .wt__topic { grid-area: topic; min-width: 0; }
  .wt__reason { grid-area: reason; padding-left: 18px !important; margin-top: 2px; font-size: var(--fs-13); color: var(--text-3); }
  .wt__reason.is-empty { display: none; }
  .wt__lost { grid-area: lost; align-self: center; text-align: right; font-size: var(--fs-15); line-height: 1.2; }
  .wt__lost-unit { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 11px; font-weight: var(--fw-medium); color: var(--text-3); }
  .wt__chev { display: block; position: absolute; right: 2px; top: 50%; margin-top: -8px; color: var(--text-3); }
  .wt__link::after { inset: 0 -8px; }
}

/* ============ StudyPlanList ============ */
.plan { display: flex; flex-direction: column; gap: 2px; }
.plan__row {
  display: grid;
  grid-template-columns: 14px var(--plan-when, 3.3rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px 6px 8px;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
  font-size: 14px;
}
.plan__mark { display: grid; place-items: center; color: var(--text-3); }
.plan__pip { width: 7px; height: 7px; border-radius: 50%; background: var(--border-control); }
.plan__when { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-3); white-space: nowrap; }
/* Title on its own line (up to 2 lines, then ellipsis; full text in the tooltip and the accessible name), then
   tag · subtitle on the second line. width:0 + min-width:100% keeps long text from sizing the grid. */
.plan__what { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1px 8px; min-width: 0; }
.plan__what--tag { grid-template-columns: auto minmax(0, 1fr); }
.plan__tag { grid-row: 2; justify-self: start; margin-top: 2px; }
.plan__what--tag .plan__sub { grid-column: 2; grid-row: 2; }
.plan__title { grid-column: 1 / -1; width: 0; min-width: 100%; font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* up to 2 lines (D6); ellipsis only past that */
.plan__tag {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .01em;
  color: var(--text-2);
}
.plan__sub { grid-column: 1 / -1; width: 0; min-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--text-3); line-height: 1.35; }
.plan__row.is-today .plan__sub { color: var(--text-2); }   /* text-3 dips under 4.5:1 on the lavender row */
.plan__dur { font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .plan__row { font-size: var(--fs-13); } }
.plan__row.is-today { background: var(--selected-bg); }
.plan__row.is-today .plan__pip { background: var(--primary); box-shadow: 0 0 0 3px var(--w-halo); }
.plan__row.is-today .plan__when { color: var(--text-accent); font-weight: var(--fw-bold); }
.plan__row.is-rest .plan__title { font-weight: var(--fw-medium); color: var(--text-3); }
.plan__row.is-done .plan__mark { color: var(--success); }
.plan__row--link { cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.plan__row--link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.plan__row--link.is-today:hover { background: var(--surface-pressed); }
.plan__row--link:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--focus-ring); }
@media (pointer: coarse) { .plan__row--link { min-height: 44px; } }

/* ============ SuggestedSessionCard ============ */
.suggest-card { --card-p: 16px 14px 16px 16px; }
@media (min-width: 1024px) { .suggest-card { --card-p: 16px 18px 16px 20px; } }
.suggest { display: flex; align-items: center; gap: 14px; min-width: 0; }
.suggest__gem { display: inline-flex; flex: 0 0 auto; }
.suggest__body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.suggest__title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.3; }
.suggest__sub { font-size: 14px; color: var(--text); line-height: 1.35; }
@media (min-width: 1024px) { .suggest__sub { font-size: var(--fs-13); } .suggest { gap: 12px; } }
.suggest__meta { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; margin-top: 1px; }
.suggest__why { font-size: var(--fs-12); color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.suggest__chev { flex: 0 0 auto; color: var(--link); transition: transform var(--dur-1) var(--ease-out); }
.suggest-card:hover .suggest__chev { transform: translateX(2px); }
.suggest-card--disabled .suggest__title { color: var(--text-2); }

/* ============ QuoteCard ============ */
.quote-card {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  min-height: 88px;
  margin: 0;
  padding: 18px 100px 18px 20px;
  border-radius: var(--r-lg);
  background: var(--w-quote-bg);
  overflow: hidden;
}
.quote-card--plain { padding-right: 20px; }
.quote-card__mark { flex: 0 0 auto; align-self: flex-start; width: 30px; height: 22px; margin-top: 1px; fill: var(--w-quote-mark); }
.quote-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 34ch; }
.quote-card__text { margin: 0; }
.quote-card__text p { font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.45; color: var(--text); }
@media (min-width: 1024px) { .quote-card__text p { font-size: 14px; } }
.quote-card__rule { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--accent); opacity: .75; }
.quote-card__by { font-size: var(--fs-13); color: var(--text-3); }
.quote-card__art { position: absolute; z-index: 0; right: -2px; bottom: -1px; width: 132px; height: 85px; }
.qp-a1 { stop-color: var(--accent); stop-opacity: .28; }
.qp-a2 { stop-color: var(--accent); stop-opacity: .05; }
.qp-b1 { stop-color: var(--accent-2); stop-opacity: .36; }
.qp-b2 { stop-color: var(--accent-2); stop-opacity: .08; }
.qp-snow { fill: var(--surface); opacity: .75; }
.qp-pole { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.qp-flag { fill: var(--accent); opacity: .7; }
.qp-star { fill: var(--primary-fg); opacity: .95; }

/* ============ KpiStrip ============ */
.kpi { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.kpi--bare { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.kpi__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kpi-min, 150px)), 1fr));
  margin: -1px 0 0 -1px;   /* hides the first row's top rule and first column's left rule */
}
.kpi__item {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  padding: 16px 20px;
  box-shadow: inset 1px 0 0 var(--divider), inset 0 1px 0 var(--divider);
}
.kpi--bare .kpi__item { padding: 12px 16px; }
.kpi__label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); line-height: 1.35; }
.kpi__gem { display: inline-flex; }
.kpi__value { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.2; color: var(--text-strong); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.kpi__value.is-empty { color: var(--text-3); }
.kpi__caption { margin: 0; font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; }
.kpi__caption .delta { margin-right: 2px; }