/* ==========================================================================
   Success rate page — page head, stat tiles, CSS bar charts, data table,
   compare panels, "13 in 100" dots, reason tiles, steps, FAQ, next-step CTA,
   offer strip, "important reading" links. Requires tokens.css + base.css.
   Mobile-first (360), enhanced at 640 / 768 / 960.
   (.page-head, .crumbs, .faq, .also mirror prev-papers.css / notes.css)
   ========================================================================== */

/* Page head ------------------------------------------------------------ */
.page-head { padding-block: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.page-head__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.page-head__text { display: grid; gap: var(--s-2); min-width: 0; }
.page-head__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-red-text);
}
.page-head__title { font-size: var(--fs-h1); }
.page-head__intro { max-width: 70ch; color: var(--c-text-muted); }
.page-head__intro strong { color: var(--c-text); }
.page-head__source { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }
.page-head__data {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 0.25rem 0.5rem;
  font-family: var(--ff-display);
  color: var(--c-slate);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.page-head__actions { min-width: 0; }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { text-decoration: underline; }

@media (min-width: 960px) {
  .page-head { padding-block: var(--s-4) var(--s-5); }
  .page-head__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "crumbs crumbs" "text actions";
    column-gap: var(--s-6);
    row-gap: var(--s-3);
  }
  .page-head__inner > .crumbs { grid-area: crumbs; }
  .page-head__text { grid-area: text; }
  .page-head__actions { grid-area: actions; align-self: start; justify-self: end; width: 280px; padding-top: var(--s-1); }
  .page-head__actions .btn-row { flex-direction: column; }
  .page-head__actions .btn { width: 100%; }
}

/* Stat tiles --------------------------------------------------------------- */
.stats-band { padding-block: var(--s-4); }
.stats { gap: var(--s-2); }
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  background: var(--c-white);
  border: 2px solid var(--c-charcoal);
  border-radius: var(--radius);
}
.stat__num {
  font-family: var(--ff-display);
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--c-red-text);
  font-variant-numeric: tabular-nums;
}
.stat__of { font-size: 1.25rem; color: var(--c-slate); }
.stat__label { font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-slate); line-height: var(--lh-snug); }
.stat__sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: auto; padding-top: var(--s-1); }
@media (min-width: 640px) {
  .stats-band { padding-block: var(--s-5); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
}

/* Prose blocks ------------------------------------------------------------- */
.prose { max-width: 70ch; margin-inline: auto; }
.prose p { color: var(--c-text); }

/* Bar list (shared by the year chart and the compare panels) ---------------
   Row = 3-column grid: label · track · value. Thin rounded marks anchored at
   the baseline; the value is a direct label in text ink, never bar colour. */
.bars { display: grid; gap: var(--s-1); }
.bar-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 56px;
  align-items: center;
  column-gap: var(--s-1);
  min-height: 44px;
}
.bar-row__label { display: grid; min-width: 0; }
.bar-row__name { font-family: var(--ff-display); font-size: 1rem; line-height: 1.2; color: var(--c-slate); }
.bar-row__star { text-decoration: none; color: var(--c-red-text); }
.bar-row__sub { font-size: var(--fs-sm); line-height: 1.25; color: var(--c-text-muted); white-space: nowrap; }
.bar-row__track {
  height: 14px;
  background: var(--c-line);
  border-radius: 4px;
  overflow: hidden;
}
.bar-row__fill {
  display: block;
  height: 100%;
  background: var(--c-slate);
  border-radius: 0 4px 4px 0;
}
.bar-row__value {
  display: grid;
  justify-items: end;
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bar-row__tag { margin-top: 2px; padding: 0.15rem 0.4rem; font-size: 0.8125rem; }
.bar-row__flag {
  margin-top: 2px;
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--c-text-muted);
}
.bar-row--latest .bar-row__fill { background: var(--c-red-text); }
.bar-row--latest .bar-row__name { color: var(--c-red-text); }

/* Compare rows: longer labels, law highlighted */
.bar-row--subject { grid-template-columns: 112px minmax(0, 1fr) 52px; }
.bar-row--subject .bar-row__name { font-size: 0.9375rem; }
.bar-row--law .bar-row__fill { background: var(--c-red-text); }
.bar-row--law .bar-row__name { color: var(--c-red-text); font-weight: 700; }
.bar-row--law .bar-row__value { font-weight: 700; }

/* Year section: chart card + table card ----------------------------------- */
.by-year { display: grid; gap: var(--s-3); align-items: stretch; }
.chart-card,
.table-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-2);
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.chart-card__cap,
.data-table__caption {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: left;
}
.chart-card__note { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: auto; }

/* Table: scrolls inside its own wrapper if ever too wide; never the page */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.table-wrap:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.data-table__caption { caption-side: top; padding-bottom: var(--s-1); }
.data-table th,
.data-table td { padding: 0.5rem 0.375rem; text-align: right; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.data-table th:first-child,
.data-table td:first-child { text-align: left; padding-left: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }
.data-table thead th { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-sm); line-height: 1.2; color: var(--c-slate); border-bottom: 2px solid var(--c-slate); white-space: normal; vertical-align: bottom; }
.data-table tbody th { font-weight: 400; color: var(--c-slate); }
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { color: var(--c-red-text); font-weight: 700; }
.data-table tfoot th,
.data-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--c-slate); background: var(--c-surface); }
.data-table abbr { text-decoration: none; color: var(--c-red-text); }
/* hint shows only when the wrapper really scrolls (success-rate.js adds .is-scrollable) */
.table-card__hint { display: none; font-size: var(--fs-sm); color: var(--c-text-muted); }
.table-card.is-scrollable .table-card__hint { display: block; }
@media (min-width: 640px) {
  .chart-card, .table-card { padding: var(--s-3); }
}
@media (min-width: 768px) {
  .by-year { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
}
@media (min-width: 960px) {
  .by-year { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); }
}

/* Compare panels --------------------------------------------------------- */
.compare { display: grid; gap: var(--s-3); align-items: stretch; }
.compare-card { min-width: 0; }
.compare-card__sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: calc(-1 * var(--s-1)); }
.compare-card__foot { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: auto; padding-top: var(--s-1); border-top: 1px solid var(--c-line); }
.compare__note { font-size: var(--fs-sm); color: var(--c-text-muted); max-width: 70ch; margin: var(--s-2) auto 0; text-align: center; }
@media (min-width: 768px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .compare { gap: var(--s-4); }
}

/* "13 in 100" dots ----------------------------------------------------------- */
.per100 {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  max-width: 560px;
  margin: var(--s-4) auto 0;
  padding: var(--s-3);
  background: var(--c-white);
  border: 2px solid var(--c-charcoal);
  border-radius: var(--radius);
}
.dots {
  display: grid;
  grid-template-columns: repeat(10, 14px);
  gap: 4px;
}
.dots__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c-line); }
.dots__dot--on { background: var(--c-red-text); }
.per100__text { text-align: center; color: var(--c-text-muted); max-width: 40ch; }
.per100__big { display: block; font-family: var(--ff-display); font-size: 1.75rem; line-height: 1.2; color: var(--c-charcoal); font-weight: 400; }
@media (min-width: 640px) {
  .per100 { grid-template-columns: auto minmax(0, 1fr); align-items: center; text-align: left; gap: var(--s-4); }
  .per100__text { text-align: left; }
}

/* Reasons: 1 → 2 → 4 tiles ---------------------------------------------------- */
.reasons .tile { gap: var(--s-1); }

/* Steps: numbered cards ------------------------------------------------------- */
.step { position: relative; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--ff-display);
  font-size: 1.125rem;
  color: var(--c-white);
  background: var(--c-red-text);
  border-radius: 50%;
}

/* FAQ accordion (native details) ------------------------------------------ */
.faq { display: grid; gap: var(--s-1); max-width: 860px; margin-inline: auto; }
.faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}
.faq__item[open] { border-color: var(--c-slate); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  color: var(--c-slate);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--c-red-text);
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--c-charcoal); }
.faq__a { padding: 0 var(--s-3) var(--s-3); }
.faq__a a { color: var(--c-link-text); }

/* Next step + offer ------------------------------------------------------------ */
.next-grid { max-width: 760px; margin-inline: auto; }
.next-actions { justify-content: center; margin-top: var(--s-4); }
.offer {
  display: grid;
  gap: var(--s-2);
  max-width: 760px;
  margin: var(--s-4) auto 0;
  padding: var(--s-3);
  background: var(--c-white);
  border: 1px dashed var(--c-slate);
  border-radius: var(--radius);
}
.offer__text { color: var(--c-text-muted); }
.offer__text strong { color: var(--c-text); }
.offer__btn { justify-self: start; }
@media (min-width: 640px) {
  .offer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
}

/* Important reading: bordered link rows, 1 → 2 → 3 columns --------------------- */
.also__list { display: grid; gap: var(--s-1); }
.also__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  min-height: var(--tap-min);
  padding: 0.5rem var(--s-2);
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--c-slate);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.also__link::after { content: "\2192"; color: var(--c-red-text); transition: transform var(--ease); }
.also__link:hover { border-color: var(--c-slate); color: var(--c-charcoal); }
.also__link:hover::after { transform: translateX(3px); }
@media (min-width: 640px) {
  .also__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
}
@media (min-width: 960px) {
  .also__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}