/*
 * CertaRounds — Round results (#/results/:id) · src/screens/results.js
 * Semantic tokens only. Scoped with res- / rq- prefixes (the question sheet lives in <body>).
 */

.res { padding-bottom: var(--sp-4); }

/* ============ Score card: ReadinessHero (widgets) + this round's strip, legend and actions ============ */
.res-hero__extra { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.res-hero--plain .res-hero__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.res-hero__title { font-size: var(--fs-24); }
.res-hero__when { margin-top: 6px; font-size: var(--fs-13); line-height: 1.4; color: var(--text-3); }
/* One segment per question, in order. Colour + hatch (never hue alone); the legend spells it out. */
.res-strip {
  display: grid;
  grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr));
  gap: 3px;
  height: 10px;
}
.res-strip--dense { gap: 2px; }
.res-strip--stacked { display: flex; gap: 3px; }
.res-strip__seg { min-width: 0; border-radius: 3px; background: var(--track); }
.res-strip--stacked .res-strip__seg { flex-basis: 0; border-radius: var(--r-pill); }
.res-strip__seg--ok { background: var(--bar-fill-solid); }
.res-strip__seg--bad {
  background: var(--danger-bg);
  background-image: repeating-linear-gradient(135deg, var(--danger) 0 1.25px, transparent 1.25px 4px);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
.res-strip__seg--skip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }

.res-legend { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); margin-top: -4px; }
.res-legend li { display: inline-flex; align-items: center; gap: 6px; }
.res-legend__sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.res-legend__sw--ok { background: var(--bar-fill-solid); }
.res-legend__sw--bad {
  background: var(--danger-bg);
  background-image: repeating-linear-gradient(135deg, var(--danger) 0 1.25px, transparent 1.25px 4px);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
.res-legend__sw--skip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }

.res-hero__note { font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); }

.res-actions-wrap, .res-hero > .res-actions { padding-top: var(--sp-4); border-top: 1px solid var(--divider); }
.res-actions { display: flex; gap: var(--sp-3); }
.res-actions__main { flex: 1 1 auto; }
.res-actions .btn { min-width: 0; }
.res-nomiss { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--success); }
.res-upnext { margin-top: 10px; font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }
.res-upnext__k { font-weight: var(--fw-semibold); color: var(--text-strong); }
.res-upnext__t { font-weight: var(--fw-medium); color: var(--text-strong); }
.res-upnext + .res-nomiss { margin-top: 6px; }
@media (min-width: 768px) {
  .res-actions__main { flex: 0 1 auto; min-width: 240px; }
  .res-hero__title { font-size: var(--fs-30); }
}

/* ============ Stat cards (widgets StatCard in .w-stat-grid) ============ */
.res-tiles__item { display: grid; min-width: 0; }
.res-tiles__item > .card { height: 100%; }
/* Phones: one compact strip (gem · label · value), 4-up; 2×2 under 340px (widgets' .w-stat-grid--4) */
.res-tiles--compact .stat-card--compact { --card-p: 10px 4px 12px; }
.res-tiles--compact .stat-card__gem { margin-bottom: 4px; }
/* every label box is two lines tall, bottom-aligned, so the four values share one baseline
   ("Time" / "Sure & wrong") — the list items wrap the cards, so the widget's subgrid can't reach them */
.res-tiles--compact { container: restiles / inline-size; }
.res-tiles--compact .stat-card__label { text-wrap: balance; }
@container restiles (min-width: 340px) {   /* 4-up (the widget's switch point); 2×2 labels fit one line */
  .res-tiles--compact .stat-card__label {
    display: flex; align-items: flex-end; justify-content: center;
    min-height: calc(2em * 1.25);
  }
}
/* ============ Shared card bits ============ */
.res-card .card__head { margin-bottom: var(--sp-2); }
.res-sub {
  margin: var(--sp-3) 0 2px;
  font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.3;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3);
}
.res-empty-line { font-size: var(--fs-15); color: var(--text-2); line-height: 1.5; }
.res-footnote {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-13); line-height: 1.45; color: var(--text-2);
}
.res-footnote .icon { color: var(--accent); margin-top: 1px; }
.res-more { margin-top: var(--sp-1); margin-left: -14px; }

/* ============ What changed ============ */
.res-dlist { display: flex; flex-direction: column; }
.res-drow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) var(--res-dvals, 6.5rem);   /* fixed value column: every bar track ends at the same x (R4 P2) */
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
}
.res-drow + .res-drow { border-top: 1px solid var(--divider); }
.res-drow__lead { display: grid; place-items: center; width: 32px; }
.res-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--spec-fg); }
.res-drow__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.res-drow__name { font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.3; color: var(--text); }
.res-drow--specialty .res-drow__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.res-dbar { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.res-dbar__base { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill); background: var(--bar-fill); }
.res-dbar__base:not(:last-child) { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.res-dbar__delta { position: absolute; top: 0; bottom: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.res-dbar__delta--up { background: var(--success-fill); }
.res-dbar__delta--down {
  background: var(--danger-bg);
  background-image: repeating-linear-gradient(135deg, var(--danger) 0 1.25px, transparent 1.25px 4px);
}
.res-drow__vals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.res-drow__nums { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: var(--fs-13); color: var(--text-3); }
.res-drow__nums strong { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.res-drow__arrow { color: var(--text-3); }
/* Wide card: name · bar · values on one line */
.res-changed { container: reschg / inline-size; }
@container reschg (min-width: 640px) {
  .res-drow { grid-template-columns: 32px minmax(0, 1fr) 10.5rem; }
  .res-drow__body { display: grid; grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); align-items: center; gap: var(--sp-5); }
  .res-drow__vals { flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
}

/* ============ This round by specialty ============ */
.res-sp-list { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-2)); }
.res-sp + .res-sp { border-top: 1px solid var(--divider); }
.res-sp__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: 12px var(--sp-2);
  border-radius: 12px;
  text-align: left;
  transition: background var(--dur-1) var(--ease-out);
}
button.res-sp__row:hover { background: var(--surface-hover); }
button.res-sp__row:active { background: var(--surface-pressed); }
.res-sp__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.res-sp__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.res-sp__name { min-width: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-strong); }
/* bar + "3/4" on one line under the name (the count never sits beside a wrapping name) */
.res-sp__barline { display: flex; align-items: center; gap: var(--sp-3); }
.res-sp__barline > .progress { flex: 1 1 auto; min-width: 0; }
.res-sp__count { flex-shrink: 0; min-width: 2.75em; text-align: right; font-size: var(--fs-13); line-height: 1.2; color: var(--text-3); white-space: nowrap; }
.res-sp__count strong { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.res-sp__meta { font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); }
.res-sp__chev { color: var(--text-3); justify-self: end; transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out); }
.res-sp__row:hover .res-sp__chev { color: var(--link); }
.res-sp__row[aria-expanded="true"] .res-sp__chev { transform: rotate(180deg); color: var(--link); }
.res-sp__topics {
  display: flex; flex-direction: column; gap: 10px;
  padding: 2px var(--sp-2) var(--sp-4) calc(32px + var(--sp-3) + var(--sp-2));
}
.res-sp__topic { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-13); line-height: 1.4; color: var(--text-2); }
.res-sp__tcount { flex-shrink: 0; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text-strong); }

/* ============ Questions ============ */
.res-questions__head {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--divider);
}
.res-questions__hint { font-size: var(--fs-13); color: var(--text-3); text-align: right; }
/* Filter chips wrap to a second line when they must — never a sideways scroll, never a cut chip (D6) */
.res-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.res-filters .chip { flex-shrink: 0; }
.res-qlist > li + li { border-top: 1px solid var(--divider); }
.res-q {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  grid-template-areas: "mark body time chev";
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: 10px var(--sp-4);
  text-align: left;
  color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.res-q:hover { background: var(--surface-hover); }
.res-q:active { background: var(--surface-pressed); }
.res-q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.res-qlist > li:last-child .res-q { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.res-q__mark { grid-area: mark; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.res-q--ok .res-q__mark { background: var(--success-bg); color: var(--success); }
.res-q--bad .res-q__mark { background: var(--danger-bg); color: var(--danger); }
.res-q--skip .res-q__mark { background: var(--surface-sunken); color: var(--text-3); }
.res-q__body { grid-area: body; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.res-q__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text-strong);
}
.res-q__sub { display: block; font-size: var(--fs-13); line-height: 1.4; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-q__sub > span { display: inline; }
.res-q__sub > span + span::before { content: "·"; margin: 0 6px; color: var(--text-3); font-weight: var(--fw-regular); }
.res-q__subspec { display: none !important; }
.res-q__subconf .icon, .res-q__flag .icon, .res-q__confin .icon { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.is-cw { color: var(--danger); font-weight: var(--fw-semibold); }
.res-q__flag { color: var(--warning); font-weight: var(--fw-semibold); }
.res-q__spec, .res-q__conf, .res-qcols { display: none; }
.res-q__time { grid-area: time; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); white-space: nowrap; }
.res-q__chev { grid-area: chev; color: var(--text-3); }
.res-q:hover .res-q__chev { color: var(--link); }
.res-questions__foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--divider); }
@media (min-width: 768px) {
  .res-questions__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .res-filters { padding: 6px 0; }
  .res-q { padding: 12px var(--sp-5); gap: var(--sp-4); }
  .res-q__subspec { display: inline !important; }
}
/* Wide card (desktop main column): a table-like list — topic · specialty · confidence · time */
.res-questions { container: resq / inline-size; }
@container resq (min-width: 700px) {
  .res-q, .res-qcols {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 9rem) 7.75rem 3rem 18px;
    grid-template-areas: "mark body spec conf time chev";
    column-gap: var(--sp-3);
  }
  .res-qcols {
    display: grid;
    padding: 10px var(--sp-5);
    border-bottom: 1px solid var(--divider);
    background: var(--surface-2);
    font-size: var(--fs-12); font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3);
  }
  .res-qcols > :nth-child(2) { grid-area: body; }
  .res-qcols > :nth-child(3) { grid-area: spec; }
  .res-qcols > :nth-child(4) { grid-area: conf; }
  .res-qcols__time { grid-area: time; text-align: right; }
  .res-q { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
  .res-q__subspec, .res-q__subconf { display: none !important; }
  .res-q__spec { grid-area: spec; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-13); color: var(--text-2); }
  .res-q__spec > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .res-q__conf { grid-area: conf; display: block; font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; }
  .res-q__none { color: var(--text-3); }
  .res-q__time { text-align: right; }
  /* no confidence recorded this round: no all-"—" column */
  .res-questions--noconf .res-q, .res-questions--noconf .res-qcols {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 11rem) 3rem 18px;
    grid-template-areas: "mark body spec time chev";
  }
  .res-questions--noconf .res-q__conf, .res-questions--noconf .res-qcols > :nth-child(4) { display: none; }
}
/* ============ Milestone (only when earned in this round) ============ */
.res-milestone__more { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--text-3); }

/* ============ Read-only question sheet ============ */
.rq-sheet .sheet__foot { align-items: center; }
.rq-loading { padding: var(--sp-2) 0; }

/* ============ D7: 44px targets on phones (filter row and this screen's toggles) ============ */
@media (max-width: 767px) {
  .res-filters { padding-top: 0; padding-bottom: 0; }
  /* small chips (the DS gives them a 44px hit area), no check glyph on the selected one (its fill and
     aria-pressed say it), tighter padding: a round's 4 filters fit one row at 360 (R4 P2) */
  .res-filters { gap: 14px 6px; }
  .res-filters .chip { padding-left: 7px; padding-right: 7px; }
  .res-filters .chip > .icon--check { display: none; }
  .res-more { min-height: 44px; }
  /* long chapter titles get a third line before any ellipsis (D6) */
  .res-q__title { -webkit-line-clamp: 3; }
  /* What changed: the name takes the full width; bar and before → after share the second line */
  .res-drow { grid-template-columns: 32px minmax(0, 1fr) var(--res-dvals, 6.5rem); grid-template-areas: "lead name name" "lead bar vals"; row-gap: 6px; }
  .res-drow__lead { grid-area: lead; align-self: start; }
  .res-drow__body { display: contents; }
  .res-drow__name { grid-area: name; }
  .res-dbar { grid-area: bar; align-self: center; }
  .res-drow__vals { grid-area: vals; }   /* before → after over the signed change, in the same fixed column as every row */
}