/* Werkplatz 5 · grade tool (after core.css) */
.grade-page {
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.9' fill='%23000'/%3E%3C/svg%3E");
  --i-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.6 1.4h10.8L7 10.4Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Moderate spring: no big overshoot past 6 */
  --gauge-ease: cubic-bezier(.3, 1.28, .52, 1); --gauge-t: 560ms;
  --gauge-b: var(--data-gfx);
  --edge-grade: color-mix(in srgb, var(--grade-gfx) 42%, transparent);
}
:root[data-theme=light] .grade-page { --gauge-b: var(--grade-gfx); }
.tool-main { padding-top: 16px; }
.brand { min-width: 44px; } /* core: 36px wide when the word is hidden */
@media (min-width: 681px) { .tool-main { padding-top: 20px; } }

/* 1. Layout (DOM order = visual order) */
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; grid-template-areas: "bar" "result" "entries" "plan" "tools"; }
.subject-bar { grid-area: bar; }
.result-panel { grid-area: result; }
.input-panel { grid-area: entries; }
.next-panel { grid-area: plan; }
.settings-panel { grid-area: tools; }
.overview-panel, .points-panel { margin-top: 16px; }
@media (min-width: 681px) { .calculator-layout { gap: 16px; } .overview-panel, .points-panel { margin-top: 24px; } }
@media (min-width: 901px) {
  .calculator-layout { grid-template: "bar result" auto "entries result" auto "plan result" auto "tools result" 1fr / minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
  .result-panel.fits-viewport { position: sticky; top: calc(var(--header-h) + 16px); }
}
@media (min-width: 1151px) { .calculator-layout { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); } }

/* 2. Subject bar */
.subject-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.subject-bar .subject-field { position: relative; flex: 1 1 220px; gap: 0; }
.field-label { position: absolute; left: 20px; top: 50%; translate: 0 -50%; z-index: 1; pointer-events: none; color: var(--faint); }
.subject-field select { height: 52px; padding: 0 44px 0 66px; border-radius: var(--r-pill); font-size: 18px; font-weight: 600; background-position: right 18px center; }
@media (max-width: 370px) {
  /* The select keeps its aria-label; the name gets the room */
  .subject-bar .subject-field { flex-basis: 150px; }
  .subject-field .field-label { display: none; }
  .subject-field select { padding-left: 20px; }
}
.bar-button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-press); }
@media (hover: hover) { .grade-page .bar-button:hover { background: var(--surface-3); border-color: var(--control-rule); } }
.subject-summary { flex: none; min-height: 52px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
/* Where the bar is narrow the summary is its own sub-line, never an orphan next to a button */
@media (max-width: 680px), (min-width: 901px) and (max-width: 1150px) { .subject-summary { flex: 1 0 100%; min-height: 44px; justify-content: flex-start; padding-inline: 20px; } }
/* Saved with 2+ subjects: hold the summary's place until grades.js fills it (no layout shift) */
html[data-grade-multi] #subjectSummary[hidden] { display: inline-flex !important; visibility: hidden; }
.inline-form {
  display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 14px; border-radius: var(--r-md);
  border: 1px solid var(--rule-strong); background: var(--surface);
  animation: form-in var(--t-ui) var(--ease-out);
}
.inline-form .field { flex: 1 1 100px; }
@media (max-width: 370px) { .inline-form .field { flex-basis: 100%; } }
@keyframes form-in { from { transform: translateY(-6px); clip-path: inset(-20px -20px 60% -20px); } to { clip-path: inset(-20px); } }

/* 3. Result panel: gauge, meta, legend, chart */
.result-panel {
  --gauge: clamp(128px, 37vw, 148px); --bead: 14px;
  display: grid; grid-template-columns: var(--gauge) minmax(0, 1fr); column-gap: 18px; align-items: center;
  grid-template-areas: "head head" "gauge meta" "gauge chart" "legend legend";
}
.result-panel .panel-heading { grid-area: head; align-items: flex-start; }
.result-subject { margin-top: 6px; overflow-wrap: anywhere; }
.gauge-wrap { grid-area: gauge; position: relative; width: var(--gauge); aspect-ratio: 1; margin-inline: auto; }
.grade-scale, .grade-metric, .gauge-pointer { position: absolute; inset: 0; pointer-events: none; }
.gauge { width: 100%; height: 100%; overflow: visible; }
.gauge-stop-a { stop-color: var(--grade-gfx); }
.gauge-stop-b { stop-color: var(--gauge-b); }
.gauge-ticks line { stroke: var(--rule-strong); stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gauge-ticks .is-int { stroke: var(--faint); }
.gauge-zone { fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-dasharray: 0 5.2; stroke-linecap: round; }
.gauge-track, .gauge-fill, .gauge-sim-arc { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray var(--gauge-t) var(--gauge-ease); }
.gauge-track { stroke: var(--surface-3); stroke-dasharray: 75 100; }
.gauge-fill { stroke: url(#gaugeFill); stroke-dasharray: 0 100; }
.is-empty .gauge-fill { visibility: hidden; }
.scale-reference { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
.gauge-sim-arc { stroke: var(--sleep-gfx); stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 0 0 0 100; }
.gauge-labels text { fill: var(--muted); font: 500 18px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.gauge-pointer { --v: var(--avg, 0); transform: rotate(calc(-135deg + var(--v) * 270deg)); transition: transform var(--gauge-t) var(--gauge-ease); }
.gauge-pointer i { position: absolute; left: 50%; top: 11.667%; width: var(--bead); height: var(--bead); translate: -50% -50%; border-radius: 50%; border: 3px solid var(--sleep-gfx); box-shadow: 0 0 0 1.5px var(--surface), inset 0 0 0 1.5px var(--surface); }
#scalePointer i { background: var(--ink); border-color: var(--grade-gfx); box-shadow: 0 0 0 1.5px var(--surface); filter: drop-shadow(0 0 7px var(--edge-grade)); }
.is-sim { --v: var(--sim, 0); }
/* r 103 of 240: the ring rides on #scenarioArc, clear of the bead on the fill track */
.gauge-pointer.is-sim i { top: 7.083%; width: calc(var(--bead) * .8); height: calc(var(--bead) * .8); border-width: 2.5px; }
.is-target { --v: var(--target, 0); }
.gauge-pointer.is-target i { top: 3.75%; width: calc(var(--bead) * .8); height: calc(var(--bead) * .7); border: 0; border-radius: 0; box-shadow: none; background: var(--ink); mask: var(--i-tri) center / contain no-repeat; transition: scale var(--t-move) var(--spring-pop); }
@starting-style {
  #scalePointer { transform: rotate(-135deg); }
  .gauge-pointer.is-sim { transform: rotate(calc(-135deg + var(--avg, 0) * 270deg)); }
  .gauge-pointer.is-target i { scale: 0; }
}
/* Intro sweep from 1 (grades.js removes data-intro) */
[data-intro] .gauge-fill { stroke-dasharray: 0 100 !important; transition: none; }
[data-intro] .gauge-sim-arc { stroke-dasharray: 0 0 0 100 !important; transition: none; }
[data-intro] .gauge-pointer:not(.is-target) { transform: rotate(-135deg) !important; transition: none; }
.grade-metric { display: grid; place-items: center; clip-path: circle(35%); }
#average { padding-top: .04em; font: 300 40px/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.06em; color: var(--ink); white-space: nowrap; }
:is(#average, #scenarioResult, #pointsResult, #pointsNeeded)[data-state=empty] { color: var(--faint); }
/* Glint: the numeral itself never changes */
.grade-metric::after {
  content: ""; position: absolute; top: 30%; bottom: 30%; left: 0; width: 34%; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--grade-gfx) 38%, transparent), transparent);
  transform: translateX(-110%) skewX(-16deg);
}
.is-glint::after { animation: glint 700ms var(--ease-out); }
@keyframes glint { from, to { opacity: 1; } to { transform: translateX(300%) skewX(-16deg); } }
.result-meta { grid-area: meta; align-self: end; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
#averageDetail { color: var(--ink); font-weight: 500; }
#averageExact:empty { display: none; }
.result-explanation { grid-area: legend; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.scale-key { display: inline-flex; align-items: center; gap: 8px; }
.scale-key i, .block-key { flex: none; width: 12px; height: 12px; }
.key-current { border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2.5px var(--grade-gfx); scale: .8; }
.key-scenario, .is-sim .block-key { border-radius: 50%; border: 2.5px solid var(--sleep-gfx); }
.key-target, .is-target .block-key { background: var(--ink); mask: var(--i-tri) center / contain no-repeat; }
.scale-key .key-reference { width: 2px; margin-inline: 5px; background: repeating-linear-gradient(var(--muted) 0 3px, #0000 0 5px); }

.entry-chart { grid-area: chart; align-self: start; position: relative; margin-top: 12px; }
.chart-plot { position: relative; height: var(--plot, 44px); border-bottom: 1px solid var(--rule-strong); clip-path: inset(-24px -24px 0); }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
[data-dense] .chart-bars { gap: 1px; }
.chart-bars i {
  flex: var(--w, 1) 1 0; min-width: 1px; height: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--grade-gfx), color-mix(in srgb, var(--grade-gfx) 38%, transparent));
  transform: translateY(min((1 - var(--h, 0)) * 100%, 100% - 3px)); transition: transform 280ms var(--ease-out);
}
.chart-bars .is-ghost { background: color-mix(in srgb, var(--sleep-gfx) 24%, transparent); border: 1.5px dashed var(--sleep-gfx); border-bottom: 0; }
.chart-line { position: absolute; inset: 0; border-top: 2px solid var(--ink); transform: translateY(calc((1 - var(--h, 0)) * (100% - 2px))); transition: transform 280ms var(--ease-out); }
.chart-line.is-ref { --h: .6; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 70%, transparent); }
.chart-line.is-need { border-top-color: var(--rose); }
[data-invalid=true] .chart-bars i { opacity: .25; }
.chart-caption { margin-top: 8px; font: 500 11px/1.4 var(--font-mono); color: var(--muted); }
.chart-caption span { display: block; }
.chart-empty { display: none; }
[data-empty=true] :is(.chart-bars, .chart-line, .chart-caption) { visibility: hidden; }
[data-empty=true] .chart-empty {
  display: grid; place-items: center; position: absolute; inset: 0 0 auto; height: var(--plot, 44px); font-size: 13px; color: var(--muted); text-align: center;
}
@media (max-width: 680px) { .result-meta { font-size: 13px; } .privacy-line { flex-direction: column; } .gauge-labels text:not(:first-child, :last-child) { display: none; } }
@media (max-width: 370px) {
  .result-panel { --gauge: 128px; grid-template-areas: "head head" "gauge meta" "chart chart" "legend legend"; }
  #gradeCount[data-state=empty] { display: none; }
}
@media (max-width: 900px) { .result-meta { min-height: 2.8em; } }
/* Phones, nothing entered yet: no empty chart and legend (the saved case keeps them, see the head script) */
@media (max-width: 680px) {
  html:not([data-grade-filled]) .result-panel:has(#entryChart[data-empty=true]) :is(.entry-chart, .result-explanation) { display: none; }
  html:not([data-grade-filled]) .result-panel:has(#entryChart[data-empty=true]) .result-meta { grid-row: 2 / span 2; align-self: center; }
}
@media (min-width: 681px) {
  .result-panel { --gauge: 200px; --bead: 16px; column-gap: 28px; grid-template-areas: "head head" "gauge meta" "gauge legend" "gauge chart"; }
  .result-explanation { align-self: start; margin-top: 12px; gap: 6px 16px; }
  #average { font-size: 48px; }
  .gauge-labels text { font-size: 13.5px; }
  .entry-chart { align-self: end; --plot: 72px; }
  .chart-caption { font-size: var(--fs-label); letter-spacing: .04em; }
  .chart-caption span { display: inline; }
  .chart-caption span + span::before { content: " · "; }
  .chart-bars { margin-right: 52px; }
  .chart-line.is-avg::after {
    content: attr(data-label); position: absolute; right: 0; top: -1px; translate: 0 -50%; padding: 1px 6px; border-radius: 6px;
    background: var(--surface-2); color: var(--ink); font: 500 11px/1.4 var(--font-mono); white-space: nowrap;
  }
}
@media (min-width: 901px) {
  .result-panel { --gauge: 220px; display: block; }
  .gauge-wrap { margin-block: 2px calc(var(--gauge) * -.1); }
  .result-meta { flex-flow: row wrap; justify-content: center; gap: 2px 14px; text-align: center; }
  .result-explanation { justify-content: center; margin-top: 14px; }
  .entry-chart { --plot: 96px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
  [data-empty=true] .chart-empty { top: 18px; }
  .chart-caption { text-align: center; }
  .gauge-labels text { font-size: 12.5px; }
}
@media (min-width: 1151px) {
  .result-panel { --gauge: 280px; --bead: 18px; }
  #average { font-size: 64px; }
  .gauge-labels text { font-size: 11px; }
}
/* Short laptop screens: a smaller instrument, so it still fits and stays sticky */
@media (min-width: 901px) and (max-height: 780px) {
  .result-panel { --gauge: 200px; --bead: 16px; }
  .result-panel #average { font-size: 48px; }
  .result-panel .gauge-labels text { font-size: 13.5px; }
  .result-panel .result-explanation { margin-top: 8px; }
  .result-panel .entry-chart { --plot: 48px; margin-top: 12px; padding-top: 10px; }
  .result-panel [data-empty=true] .chart-empty { top: 10px; }
}
@media (min-width: 901px) and (max-height: 600px) { .result-panel .entry-chart { display: none; } }

/* 4. Rows */
.input-panel { --row-cols: minmax(0, 1fr) 72px 64px 44px; }
.grade-columns, .grade-row { display: grid; grid-template-columns: var(--row-cols); gap: 8px; margin: 0 -4px; padding: 0 4px; }
.grade-columns { margin-bottom: 6px; letter-spacing: .1em; color: var(--muted); }
.grade-columns > :nth-child(n+3) { text-align: center; }
.grade-entries { display: grid; gap: 4px; counter-reset: row; }
/* Row pitch 60px; the head script passes the saved row count */
.grade-entries:empty { height: calc(var(--grade-rows, 2) * 60px - 4px); }
.grade-row { align-items: center; padding-block: 4px; border-radius: var(--r-sm); counter-increment: row; transition: background-color var(--t-hover); }
.grade-row:focus-within { background: var(--surface-2); }
.grade-row::before { content: counter(row, decimal-leading-zero); font: 500 var(--fs-data)/1 var(--font-mono); color: var(--faint); text-align: center; }
@media (max-width: 680px) { .grade-row::before, .grade-columns > :first-child, .col-optional { display: none; } }
@media (min-width: 681px) { .input-panel { --row-cols: 28px minmax(0, 1fr) 88px 80px 44px; } }
/* Half-width column: the name gets the room */
@media (min-width: 901px) and (max-width: 1150px) {
  .input-panel { --row-cols: minmax(0, 1fr) 72px 64px 44px; }
  .grade-row::before, .grade-columns > :first-child, .col-optional { display: none; }
}
.grade-row input { padding-inline: 12px; font-variant-numeric: tabular-nums; }
.grade-row .grade-grade { padding-inline: 6px; font-size: 20px; font-weight: 600; text-align: center; }
.grade-row .grade-grade::placeholder { font-size: 15px; font-weight: 500; }
.weight-cell { position: relative; min-width: 0; }
.weight-cell > span { position: absolute; left: 11px; top: 50%; translate: 0 -52%; color: var(--faint); font-size: 15px; pointer-events: none; }
.grade-row .grade-weight { padding: 0 8px 0 24px; }
.grade-row [aria-invalid=true], :is(#scenarioGrade, #nextWeight)[aria-invalid=true] { padding-right: 22px; background-position: right 5px center; background-size: 14px; }
.grade-row .icon-button { color: var(--faint); }
@media (hover: hover) { .grade-row .icon-button:hover { color: var(--danger); background: var(--danger-soft); } }
@media (max-width: 370px) {
  .grade-columns { display: none; }
  .grade-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; row-gap: 6px; padding-block: 8px; }
  .grade-row + .grade-row:not(:focus-within) { border-top: 1px solid var(--rule); border-radius: 0; }
  .grade-name { grid-column: 1 / -1; }
  .grade-entries:empty { height: calc(var(--grade-rows, 2) * 123px - 5px); }
}
.grade-page .add-row { width: 100%; min-height: 52px; margin-top: 10px; border: 1px dashed var(--control-rule); border-radius: var(--r-sm); }
@media (hover: hover) { .grade-page .add-row:hover { border-style: solid; border-color: var(--faint); } }
.enter-hint { display: none; margin-left: 2px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--rule-strong); font: 500 11px/1.2 var(--font-mono); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .enter-hint { display: inline-block; } }
.input-limits { margin-top: 12px; }
.empty-result-example { min-height: 44px; align-self: flex-start; margin-top: 10px; gap: 8px; color: var(--grade-text); font-size: 13px; }
/* Match the initial saved layout before grades.js removes this bootstrap flag. */
html[data-grade-filled] .empty-result-example { display: none; }
#gradeError:not(:empty) { margin-top: 8px; }
.settings-panel { padding-block: 8px 2px; }
.settings-panel .save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding-block: 4px; }
.panel-tools { margin-top: 12px; border-top: 1px solid var(--rule); }
.details-body { display: grid; gap: 14px; padding: 2px 0 18px; }
.details-body .field-grid { align-items: end; }
@media (max-width: 520px) { .details-body .field-grid { grid-template-columns: minmax(0, 1fr); } }
.utility-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.utility-actions .danger-text { margin-left: auto; padding-inline: 8px; }
.is-instant::details-content { transition: none; }
/* Toast: fixed from 681px, in flow on phones */
.toast { margin-top: 12px; border-radius: var(--r-lg); }
/* The message wraps in its own column; undo and close stay together on the right */
.grade-page .toast { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
#undoAction { white-space: nowrap; }
.toast .icon-button { border-radius: 50%; }
@media (min-width: 681px) {
  .toast { position: fixed; bottom: 24px; left: 50%; translate: -50% 0; z-index: var(--z-toast); margin: 0; width: max-content; max-width: min(560px, 100% - 32px); border-radius: var(--r-pill); }
}
/* Two columns: centred on the input column, so it never covers the instrument */
@media (min-width: 901px) {
  .toast { --w: min(var(--wrap-max), 100% - 2 * var(--gutter)); --col: calc((var(--w) - 24px) / 2); left: calc((100% - var(--w)) / 2 + var(--col) / 2); max-width: min(560px, var(--col)); }
}
@media (min-width: 1151px) { .toast { --col: calc((var(--w) - 24px) * 7 / 12); } }

/* 5. Next grade */
.next-weight { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin-bottom: 18px; }
.next-weight .field { flex: none; width: 120px; white-space: nowrap; }
.next-weight .chips { padding-bottom: 2px; }
.next-weight .chip { min-width: 52px; }
#nextWeight, #scenarioGrade { padding-inline: 8px; text-align: center; }
#nextWeight, #scenarioGrade, #targetAverage { font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-grid { display: grid; padding-top: 20px; border-top: 1px solid var(--rule); }
.next-block { container: block / inline-size; display: flex; flex-direction: column; min-width: 0; }
.next-block + .next-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.next-panel { container: plan / inline-size; }
@container plan (min-width: 760px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-block:first-child { padding-right: 24px; }
  .next-block + .next-block { margin: 0; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--rule); }
}
.is-sim { --range-fill: var(--sleep-gfx); --tool-fill: var(--sleep-fill); --tool-on: var(--sleep-on); }
.next-block h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.next-lead { margin: 4px 0 14px; font-size: 14px; color: var(--muted); }
.scenario-row { display: flex; align-items: center; gap: 12px; }
.scenario-row .range { flex: 1; min-width: 0; }
.next-block .range-scale { margin: -6px 113px 16px 13px; }
.scenario-answer, .points-answer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.scenario-answer { padding-top: 14px; border-top: 1px solid var(--rule); }
.scenario-answer > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 500; }
.scenario-answer small { font-size: 13px; font-weight: 400; color: var(--muted); }
#scenarioResult, #pointsResult, #pointsNeeded, #overviewAverage { font: 300 var(--fs-num-l)/.95 var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.05em; white-space: nowrap; }
#scenarioResult, #pointsNeeded { color: var(--sleep-text); }
.delta-chip {
  align-self: flex-end; display: inline-flex; align-items: center; min-height: 26px; margin-top: 10px; padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); font: 500 var(--fs-data)/1.3 var(--font-mono); white-space: nowrap; color: var(--muted);
}
.delta-chip[data-dir=up] { color: var(--grade-text); border-color: var(--edge-grade); background: var(--grade-soft); }
.delta-chip[data-dir=down] { color: var(--rose); border-color: currentColor; }
.delta-chip[data-dir=none] { visibility: hidden; }
.next-block .fineprint { margin-top: 10px; }
.target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@container block (max-width: 440px) { .target-grid { grid-template-columns: minmax(0, 1fr); } }
.target-answer {
  position: relative; display: flex; align-items: center; min-height: 58px; margin-top: 16px; padding: 14px 16px 14px 48px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--rule); font-size: 17px; font-weight: 600; line-height: 1.35;
}
.target-answer::before { content: ""; position: absolute; left: 15px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; background: var(--muted); mask: var(--i-target) center / contain no-repeat; }
[data-tone=secured] { background: var(--grade-soft); border-color: var(--edge-grade); }
[data-tone=secured]::before { background: var(--grade-text); mask-image: var(--i-check); }
[data-tone=danger] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
[data-tone=danger]::before { background: currentColor; mask-image: var(--i-alert); }

/* 6. Overview */
.table-scroll { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.overview-table tbody th { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* Block, so the arrow follows the last word of a wrapped name */
.overview-table .text-button { display: block; min-inline-size: 44px; margin-left: -4px; padding-block: 10px; line-height: 24px; text-align: left; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.overview-table tbody .text-button::after { content: "\2009→"; content: "\2009→" / ""; display: inline-block; color: var(--muted); transition: translate var(--t-hover) var(--ease-out); }
@media (hover: hover) { .overview-table tbody .text-button:hover::after { translate: 3px 0; color: currentColor; } }
.overview-table [aria-current=true] .text-button, .overview-table .tag { color: var(--grade-text); }
.overview-table .tag { padding-block: 2px; border-color: var(--edge-grade); }
.overview-table td { white-space: nowrap; }
.ov-bar { display: inline-block; width: 48px; height: 6px; margin-right: 10px; vertical-align: 2px; border-radius: 3px; background: linear-gradient(90deg, var(--grade-gfx) calc(var(--v, 0) * 100%), var(--surface-3) 0); }
.overview-panel > .fineprint { margin-top: 14px; }
@media (max-width: 680px) { .overview-table :is(th, td) { padding: 12px 8px; } }
@media (max-width: 370px) { .ov-bar { display: none; } }

/* 7. Points */
.points-panel, .points-cards { display: grid; gap: 22px; }
.points-intro h2 { margin: 12px 0 14px; font-size: clamp(30px, 3.6vw, 48px); }
.points-intro .fineprint { max-width: 46ch; }
.points-cards { gap: 14px; }
.points-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.points-card h3 { font-size: 18px; }
.points-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 370px) { .points-form { grid-template-columns: minmax(0, 1fr); } }
.points-foot { display: grid; gap: 12px; margin-top: auto; }
.points-meter { height: 6px; border-radius: 3px; background: var(--surface-3); }
.points-meter i { display: block; height: 100%; border-radius: 3px; background: var(--grade-gfx); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 3px); transition: clip-path 280ms var(--ease-out); }
.points-meter.is-need i { background: var(--sleep-gfx); }
.points-formula { color: var(--muted); overflow-wrap: anywhere; }
.points-answer > span { font-size: 14px; font-weight: 500; color: var(--muted); }
#pointsError:empty { margin-top: -16px; } /* no gap for an empty message */
@media (min-width: 901px) { .points-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; } }
@media (min-width: 1025px) { .points-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.privacy-line { margin-top: 28px; }
.compact-sim { display: none; }
@media (min-width: 681px) { .compact-sim { display: inline; } }
@media (max-width: 370px) { .compact-count { display: none; } }

/* 8. Preferences */
/* core's reduce rule misses ::details-content */
@media (prefers-reduced-motion: reduce) { .inline-form, .is-glint::after { animation: none; } .disclosure::details-content { transition: none; } }
@media (forced-colors: active) {
  .gauge-fill, .gauge-sim-arc { stroke: Highlight; }
  .gauge-track { stroke: GrayText; }
  .chart-bars i, .points-meter i, .ov-bar { forced-color-adjust: none; background: CanvasText; }
}