/* Scoring method and application breakdown (Pilot UI 2.0, Guide pattern).
   The page is built from ui/ components; this file adds what is its own:
   the factor waterfall, the weight sliders, the playground's two columns
   and the changelog. Tokens only. */

.scoring-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.scoring-weights__field{display:block;margin-top:2px;font-size:12px;font-weight:var(--ui-weight-regular);color:var(--ui-muted)}
.scoring-weights__detail{min-width:240px;color:var(--ui-ink-2)}

/* ── Waterfall: one bar per factor, out of 100 points ─────────────────── */

.scoring-example__headline{font-size:var(--ui-text-body);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
.scoring-example__headline strong,.scoring-example__headline em{color:var(--ui-ink)}
.scoring-waterfall{display:flex;flex-direction:column;gap:var(--ui-space-3);font-family:var(--ui-font-body)}
.scoring-waterfall__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.scoring-waterfall__row{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--ui-space-2) var(--ui-space-5);
    padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line);
    --points:0;--fill:var(--ui-ink-2);
}
.scoring-waterfall__row--match{--fill:var(--ui-gold)}
.scoring-waterfall__row--trust{--fill:var(--ui-move-sideways)}
.scoring-waterfall__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.scoring-waterfall__label{font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.scoring-waterfall__detail{font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.scoring-waterfall__barbox{display:flex;align-items:center;gap:var(--ui-space-3);min-width:0}
.scoring-waterfall__bar{
    display:block;flex:0 1 auto;height:12px;min-width:2px;border-radius:var(--ui-radius-pill);
    width:calc(var(--points) * 1%);max-width:70%;
    background:var(--fill);
}
.scoring-waterfall__row--match .scoring-waterfall__bar{box-shadow:inset 0 0 0 1px var(--ui-gold-ink)}
.scoring-waterfall__points{font-size:var(--ui-text-small);font-weight:var(--ui-weight-strong);color:var(--ui-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.scoring-waterfall__row--gap .scoring-waterfall__bar{display:none}
.scoring-waterfall__row--gap .scoring-waterfall__points{font-weight:var(--ui-weight-regular);color:var(--ui-muted)}
.scoring-waterfall__total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ui-space-3);font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.scoring-waterfall__score{font-family:var(--ui-font-display);font-size:var(--ui-text-h2);font-weight:var(--ui-weight-strong);font-variant-numeric:tabular-nums}
@media (max-width:599px){
    .scoring-waterfall__row{grid-template-columns:minmax(0,1fr)}
}

/* ── Weight sliders ────────────────────────────────────────────────────── */

.scoring-tuner__grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--ui-space-5);align-items:start}
.scoring-tuner__controls{display:flex;flex-direction:column;gap:var(--ui-space-4)}
.scoring-tuner__slider{display:flex;flex-direction:column;gap:var(--ui-space-1)}
.scoring-tuner__label{display:flex;justify-content:space-between;gap:var(--ui-space-3);font-size:var(--ui-text-small);font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.scoring-tuner__value{font-variant-numeric:tabular-nums}
.scoring-tuner__range{width:100%;min-height:var(--ui-target-compact);accent-color:var(--ui-action);margin:0}
.scoring-tuner__range:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.scoring-tuner__range-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ui-ink-2);font-variant-numeric:tabular-nums}
@media (max-width:860px){.scoring-tuner__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.scoring-tuner__range{min-height:var(--ui-target)}}

/* ── Playground ────────────────────────────────────────────────────────── */

.scoring-playform{display:flex;flex-direction:column;gap:var(--ui-space-5)}
.scoring-playform__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--ui-space-5)}
.scoring-playform__side{
    display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0;margin:0;
    padding:var(--ui-space-4) var(--ui-space-5) var(--ui-space-5);
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);background:var(--ui-panel);
}
.scoring-playform__side > legend{padding:0 var(--ui-space-2);margin-left:calc(-1 * var(--ui-space-2))}
.scoring-playform .jp-pp__cloud{max-height:136px}

/* ── Audit ─────────────────────────────────────────────────────────────── */

.scoring-audit-axisform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ui-space-3)}
.scoring-audit__bars .ui-bars__row{grid-template-columns:minmax(10em,1.2fr) minmax(0,2fr) minmax(7em,auto)}
.scoring-audit__n{color:var(--ui-muted);font-variant-numeric:tabular-nums}
.scoring-audit__withheld{font-size:var(--ui-text-small);color:var(--ui-muted)}
.scoring-audit-download{display:flex;flex-wrap:wrap;gap:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-text-small)}
.scoring-audit__hint{color:var(--ui-muted)}
@media (max-width:599px){
    .scoring-audit__bars .ui-bars__row{grid-template-columns:minmax(0,1fr) auto}
    .scoring-audit__bars .ui-bars__label{grid-column:1 / -1}
}

/* ── Changelog and principles ──────────────────────────────────────────── */

.scoring-changelog__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;max-width:var(--ui-measure)}
.scoring-changelog__row{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--ui-space-4);padding:var(--ui-space-4) 0;border-bottom:1px solid var(--ui-line)}
.scoring-changelog__date{font-size:var(--ui-text-small);color:var(--ui-ink-2);font-variant-numeric:tabular-nums}
.scoring-changelog__title{font-size:var(--ui-text-body);font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.scoring-changelog__detail{margin-top:var(--ui-space-1);font-size:var(--ui-text-small);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
@media (max-width:599px){.scoring-changelog__row{grid-template-columns:minmax(0,1fr);gap:var(--ui-space-1)}}

.scoring-principles__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--ui-space-4);margin:0}
.scoring-principles__list dt{font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.scoring-principles__list dd{margin:2px 0 0;font-size:var(--ui-text-small);color:var(--ui-ink-2)}