/*
 * The calculator's detailed result (assets/js/calc-result.js): five sections
 * under the readout, in the tokens of tokens.css. A section is a head on a
 * hairline, never a box; one colour per meaning: --warm is the source's part,
 * --cool the utility's saving, --brand-gold only the fee.
 */
#result-detail { margin: 0; }
/* Scroll anchoring off while a result shows: Chrome would hide a shift that Safari shows. The card holds its own top (calc-result.js, render). */
html:has(#result.show) { overflow-anchor: none; }
.res-sec { border-top: 1px solid var(--border-hair); padding-top: 16px; margin-top: 48px; }
.res-sec:first-child { margin-top: 32px; }
.res-sec > h2 {
  font: 600 1.2rem/1.3 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif;
  letter-spacing: -0.012em; color: var(--text-primary); margin: 0 0 8px; text-wrap: balance;
}
.res-lead { margin: 0 0 16px; max-width: 38em; color: var(--text-body); font-size: 1rem; line-height: 1.6; }
.res-cap { font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); margin: 8px 0 0; max-width: 64ch; }
.res-cap b, .res-lead b, .res-count b { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.res-warn { color: var(--ink-warn); }
.res-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#result-detail svg text, #result-detail dd, .res-sec .res-fig, .res-ledger td.n, .res-months td + td, .res-sens td + td, .res-facts .v { font-variant-numeric: tabular-nums; }

/* 1. Sådan er tallet regnet */
.res-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 901px) { .res-how { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 48px; align-items: start; } }
.res-stik { margin: 24px 0 0; }
.res-set { margin: 24px 0 0; }
.res-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; max-width: 420px; }
.res-seg button, .res-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-control); border: 1px solid var(--border-field); background: transparent; color: var(--text-muted);
  font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; touch-action: manipulation; user-select: none;
  -webkit-user-select: none;
}
.res-seg button[aria-pressed="true"] { color: var(--text-primary); border-color: var(--gold-ink); }
.res-count { margin: 12px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-body); max-width: 38em; }
.res-price { margin: 0; }
.res-lbl { font-size: 0.8rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); margin: 0; }
.res-fig { font: 700 1.75rem/1.15 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-primary); margin: 2px 0 0; }
.res-unit { font: 500 1rem/1 'Inter', sans-serif; color: var(--text-muted); letter-spacing: 0; margin-left: 6px; }
.res-formula { font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); margin: 4px 0 0; }
.res-formula span { white-space: nowrap; }
.res-coolline { margin: 8px 0 0; color: var(--text-body); font-weight: 600; }
.res-formula small { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); }
.res-pl { position: relative; margin: 12px 0 0; user-select: none; -webkit-user-select: none; }
.res-pl svg, .res-mchart svg { display: block; width: 100%; overflow: visible; }
/* the range sits over the drawing and takes every touch; the drawing's own labels must never take it (the 0 end) */
.res-pl svg { pointer-events: none; }
/* The native range lies over the drawn line: its thumb is the drawn handle, its width the shares the rule allows. */
.res-range {
  position: absolute; top: 10px; height: 44px; margin: 0; padding: 0; background: transparent; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; opacity: 1;
}
.res-range::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.res-range::-moz-range-track { height: 44px; background: transparent; border: 0; }
.res-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 44px; border: 0; border-radius: 0; background: transparent; }
.res-range::-moz-range-thumb { width: 24px; height: 44px; border: 0; border-radius: 0; background: transparent; }
.res-range:disabled { cursor: default; }
/* A finger never reaches the native range: it sets its value on touch-down, so a thumb scrolling the page across the
   line would choose a share. The line takes the touch instead (calc-result.js): a tap sets, a horizontal drag moves,
   a vertical move scrolls. The range stays for the keyboard and screen readers. */
@media (pointer: coarse) {
  .res-range { pointer-events: none; }
  .res-pl { touch-action: pan-y; }
}
.res-range:focus { outline: none; }
.res-pl:has(.res-range:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--r-control); }
.res-pl:has(.res-range:focus-visible) .ring { stroke: var(--focus-ring); stroke-width: 3; }

#result-detail svg .t-cap { font: 500 12.8px 'Inter', sans-serif; fill: var(--text-muted); }
#result-detail svg .t-dim { font: 500 12.8px 'Inter', sans-serif; fill: var(--text-dim); }
#result-detail svg .t-val { font: 600 14px 'Inter', sans-serif; fill: var(--text-primary); }
#result-detail svg .t-lab, #result-detail svg .t-sel { font: 600 12.8px 'Inter', sans-serif; fill: var(--text-primary); }
#result-detail svg .halo { paint-order: stroke; stroke: var(--bg-page); stroke-width: 4px; stroke-linejoin: round; }
#result-detail svg .domain, #result-detail svg .base, #result-detail svg .mtick { stroke: var(--border-field); stroke-width: 1; }
#result-detail svg .grid { stroke: var(--border-hair); stroke-width: 1; }
#result-detail svg .tick { stroke: var(--text-primary); stroke-width: 1; }
#result-detail svg .stop { stroke: var(--text-primary); stroke-width: 2; }
#result-detail svg .warm { fill: var(--warm); }
#result-detail svg .cool { fill: var(--cool); }
#result-detail svg .hollow { fill: none; stroke: var(--cool); stroke-width: 2; }
#result-detail svg .ring { fill: var(--bg-card); stroke: var(--text-primary); stroke-width: 2; }
#result-detail svg .core, #result-detail svg .point { fill: var(--text-primary); }
#result-detail svg .chev { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The share line starts with no share chosen: a hollow ring at the 0 end, where the rule's lowest share is, with a
   chevron that says it moves right. It is a 44 px box (the whole line takes the touch under it). When the line first
   scrolls into view the ring slides 24 px right and back once in 700 ms; never under reduced motion. */
.res-handle { position: absolute; top: 10px; left: 0; width: 44px; height: 44px; pointer-events: none; }
.res-handle[hidden] { display: none; }
.res-handle svg { display: block; width: 44px; height: 44px; overflow: visible; }
.res-handle.nudge { animation: res-nudge 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes res-nudge { 0% { transform: translateX(0); } 42% { transform: translateX(24px); } 100% { transform: translateX(0); } }
#result-detail svg .point { stroke: var(--bg-page); stroke-width: 2; }
#result-detail svg .band { fill: rgb(var(--tint) / 0.07); }
#result-detail svg .q-warm { fill: var(--warm-quiet); }
#result-detail svg .q-cool { fill: var(--cool-quiet); }
#result-detail svg .q-hollow { fill: none; stroke: var(--cool-quiet); stroke-width: 2; }
/* The whole gain, not yet split: a solid slate fill, no party colour (Celembi-a81f, founder 29 Oct); the set state
   splits the same bar into warm and cool. An outline would read as empty or pending; ink read as too heavy. */
#result-detail svg .gain { fill: var(--gain); stroke: none; }
#result-detail svg .q-gain { fill: var(--gain-quiet); stroke: none; }
/* The set state stacks the same bar: the source's part at the foot in warm, the utility's above it in cool, the
   boundary drawn from the share's spring every frame (calc-result.js, paintBars). The keys under the row's title
   carry the two colours. */
#result-detail svg .key-gain { fill: var(--gain); }
#result-detail svg .key-warm { fill: var(--warm); }
#result-detail svg .key-cool { fill: var(--cool); }
#result-detail svg .span { stroke: var(--border-field); stroke-width: 2; }
.res-try { font-weight: 600; color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
/* a finger needs 44 px: the link's hit area grows without growing its line */
@media (pointer: coarse) { .res-try { display: inline-block; padding: 12px 0; margin: -12px 0; } }
.res-kpi > div[data-k="co2"] dd { font: 600 0.95rem/1.3 'Inter', sans-serif; }
#result-detail svg .spot { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linejoin: round; }
#result-detail svg .mk { fill: var(--text-muted); stroke: var(--bg-page); stroke-width: 2; }
#result-detail svg .mk.sel { fill: var(--text-primary); }
#result-detail svg .ptr { fill: var(--text-primary); }

/* The ledger: operator in the margin, a hairline before each subtotal */
.res-ledger { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; }
.res-ledger caption { caption-side: bottom; text-align: left; font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); padding-top: 12px; }
.res-ledger caption b { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.res-ledger th { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); text-align: right; padding: 0 0 4px 12px; white-space: nowrap; }
.res-ledger th.lab { text-align: left; padding-left: 0; }
.res-ledger td { padding: 6px 0; vertical-align: top; color: var(--text-body); }
.res-ledger td.op { width: 16px; color: var(--text-muted); padding-right: 4px; }
.res-ledger td.n { text-align: right; white-space: nowrap; padding-left: 12px; color: var(--text-primary); }
.res-ledger td small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.res-ledger tr.sub td { border-top: 1px solid var(--border-hair); font-weight: 600; color: var(--text-primary); }
.res-ledger tr.sub td.op { color: var(--text-primary); }
.res-ledger td small { overflow-wrap: anywhere; }
.res-ledger td small.parts span { display: block; }
.res-ledger td small.parts span + span { margin-top: 1px; }
.res-ledger td small.parts i { font-style: normal; display: inline-block; width: 1em; }
.res-ledger tr.sep td { padding: 8px 0 0; }
.nw { white-space: nowrap; }
.res-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.res-key.warm { background: var(--warm); }
.res-key.cool { background: var(--cool); }
.res-key.fee { background: var(--brand-gold); box-shadow: 0 0 0 1px var(--gold-ink); }
.res-key.hollow { width: 6px; height: 6px; border: 2px solid var(--cool); border-radius: 0; }
.res-key.gain { background: var(--gain); }
#cr-asrc .res-band { display: block; color: var(--text-primary); }
#cr-asrc .res-band + span { display: block; margin-top: 4px; }

/* 2. The month view */
.res-kpi dd {
  margin: 0; font: 700 1.2rem/1.2 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-primary); white-space: nowrap;
}
.res-kpi dd .u { font: 400 0.8rem 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-dim); margin-left: 4px; letter-spacing: 0; }
.res-mchart { position: relative; margin: 8px 0 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; border-radius: var(--r-control); }
.res-mchart:focus-visible { outline-offset: 4px; }
.res-steps { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.res-steps .lab { min-width: 6.5em; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.res-btn.icon { padding: 0; width: 40px; min-width: 40px; }
.res-btn svg { width: 16px; height: 16px; }
.res-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.res-btn.all { margin-left: auto; }
.res-btn[hidden] { display: none; }
.res-seg button:active, .res-btn:active { filter: brightness(0.9); transition: filter var(--t-press) ease-out; }
.res-reason { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-body); max-width: 44em; }
.res-unmatched { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-body); max-width: 44em; }
.res-unmatched[hidden] { display: none; }
.res-chev { width: 16px; height: 16px; flex: none; transition: transform var(--t-fast) var(--ease-out); }
details[open] > summary .res-chev { transform: rotate(180deg); }
/* "Sådan er C regnet": the engine's lines, each from the one above, in a fold under the ledger */
.res-cwork { margin: 16px 0 0; }
.res-cwork > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 600; color: var(--gold-ink); touch-action: manipulation; user-select: none; }
.res-cwork > summary::-webkit-details-marker { display: none; }
.res-cwork-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; margin-top: 4px; }
.res-cwork-table td { padding: 6px 0; vertical-align: top; color: var(--text-body); }
.res-cwork-table td.op { width: 16px; padding-right: 4px; color: var(--text-muted); }
.res-cwork-table td.n { text-align: right; white-space: nowrap; padding-left: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.res-months { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; margin-top: 8px; }
.res-months th { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); text-align: right; padding: 4px 0 4px 8px; white-space: nowrap; }
.res-months th:first-child, .res-months td:first-child { text-align: left; padding-left: 0; }
.res-months td { text-align: right; padding: 6px 0 6px 8px; border-top: 1px solid var(--border-hair); color: var(--text-body); white-space: nowrap; }
.res-months tbody th[scope="rowgroup"] { text-align: left; padding: 12px 0 4px; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.res-months tr[aria-current] td { font-weight: 600; color: var(--text-primary); }
.res-months tfoot td { border-top: 1px solid var(--border-field); font-weight: 600; color: var(--text-primary); }
.res-months caption { caption-side: bottom; text-align: left; font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); padding-top: 8px; }

/* 3. Nøgletal: rows on a phone, three columns on a desk */
.res-kpi { margin: 0; }
.res-kpi > div { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border-hair); min-height: 44px; box-sizing: border-box; }
.res-kpi > div:first-child { border-top: 0; padding-top: 4px; }
.res-kpi dt { font-size: 0.875rem; font-weight: 500; color: var(--text-body); line-height: 1.45; }
.res-kpi dt small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.res-kpi dd { text-align: right; }
@media (min-width: 901px) {
  .res-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-kpi > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; border-top: 0; padding: 4px 24px; border-left: 1px solid var(--border-hair); }
  .res-kpi > div:first-child { border-left: 0; padding-left: 0; }
  .res-kpi dd { text-align: left; order: -1; }
  .res-kpi dt { order: 0; }
}

/* 4. Hvad flytter tallet */
.res-scroll { max-width: 720px; overflow-x: auto; }
.res-sens { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; }
.res-sens th { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); text-align: right; padding: 0 0 6px 12px; vertical-align: bottom; }
.res-sens th + th { width: 7.5em; }
.res-sens th:first-child { text-align: left; padding-left: 0; }
.res-sens td { padding: 8px 0 8px 12px; border-top: 1px solid var(--border-hair); vertical-align: top; text-align: right; white-space: nowrap; color: var(--text-primary); }
.res-sens td:first-child { text-align: left; padding-left: 0; white-space: normal; color: var(--text-body); }
.res-sens tr.base td { font-weight: 600; color: var(--text-primary); border-top: 1px solid var(--border-field); }
.res-sens td small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.res-sens .dash { color: var(--text-dim); }
@media (max-width: 480px) { .res-sens th + th { width: auto; } .res-sens th, .res-sens td { padding-left: 8px; } .res-sens th:first-child, .res-sens td:first-child { padding-left: 0; } }
.is-busy { opacity: 0.55; transition: opacity var(--t-fast) var(--ease-out); }

/* 5. Forudsætninger */
.res-facts { max-width: 760px; }
.res-facts details { border-top: 1px solid var(--border-hair); }
.res-facts details:last-child { border-bottom: 1px solid var(--border-hair); }
.res-facts summary { list-style: none; }
.res-facts summary::-webkit-details-marker { display: none; }
.res-facts summary {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content 16px; column-gap: 12px; align-items: start;
  padding: 10px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; touch-action: manipulation; user-select: none;
}
.res-facts .k { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); line-height: 1.45; min-width: 0; }
.res-facts .k .lbl, .res-facts .k small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-facts .k small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.res-facts .v { font-size: 0.875rem; text-align: right; color: var(--text-primary); line-height: 1.45; max-width: 11em; overflow-wrap: anywhere; }
.res-facts .res-chev { margin-top: 2px; color: var(--text-muted); }
.res-facts .work .whole { display: block; margin-bottom: 4px; }
.res-facts .work .whole.src { color: var(--text-muted); font-size: 0.8rem; }
.res-facts .work { margin: 0 28px 12px 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-body); max-width: 64ch; overflow-wrap: anywhere; }
.res-facts .work a { overflow-wrap: anywhere; }
.res-basis { margin: 24px 0 0; font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: var(--text-muted); max-width: 64ch; }

.res-notes { display: grid; gap: 16px; margin-top: 16px; }
.res-notes > p { margin: 0; }
.res-notes .res-cap b { color: var(--text-primary); }

@media (pointer: coarse) {
  .res-seg button, .res-btn, .res-cwork > summary { min-height: 44px; }
  .res-btn.icon { width: 44px; min-width: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .res-btn:hover, .res-seg button:hover { border-color: var(--text-muted); }
  .res-fsec > summary:hover h2, .res-cwork > summary:hover { color: var(--gold-ink-soft); }
  .res-facts summary:hover .k { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-field); text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .res-handle.nudge { animation: none; }
  #result-detail *, #result-detail *::before, #result-detail *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}
@media print {
  #result-detail svg .drag { display: none; }
  .res-handle, .res-range, .res-steps, .res-seg button:not([aria-pressed="true"]), .res-cwork > summary { display: none !important; }
  .res-seg { display: block; }
  .res-seg button { border: 0; padding: 0; min-height: 0; font-weight: 600; }
  .res-sec { margin-top: 20pt; break-inside: avoid; }
  #result-detail svg text { fill: var(--print-ink) !important; }
  #result-detail svg tspan, #result-detail svg .t-dim { fill: var(--print-muted) !important; }
  #result-detail svg .halo { stroke: var(--print-paper) !important; }
  #result-detail svg .ring { fill: var(--print-paper) !important; stroke: var(--print-ink) !important; }
  #result-detail svg .gain, #result-detail svg .q-gain { fill: var(--print-ink) !important; }
  .res-key.gain { background: var(--print-ink); }
  .res-cwork > :not(summary) { display: table !important; }
  .res-cwork { display: block; }
  .res-facts details > .work { display: block !important; }
  .res-chev { display: none; }
}

/* The headline card holds only the source line on screen (its figure is the readout's): no box around it. */
@media screen {
  #result > .card { background: transparent; border: 0; padding: 0; box-shadow: none; }
}

/* The instrument card: the gain, the bars, the price and the parts above the share line, the line at the card's foot.
   Every row above the line has one height in every state, so nothing moves under a finger. */
.res-inst { background: var(--bg-card); border: 1px solid var(--border-hair); border-radius: var(--r-panel); padding: 16px; margin: 32px 0 0;
  scroll-margin-top: 0; } /* the page already pads its scroll by the nav and the inset above it (nav.css) */
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; height: 44px; overflow: hidden; }
.res-head h2 { font: 600 1.2rem/1.3 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; letter-spacing: -0.012em; color: var(--text-primary); margin: 0; white-space: nowrap; flex: none; }
.res-gain { text-align: right; min-width: 0; }
.res-gain .res-lbl { line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-gain .res-fig { font-size: 1.5rem; line-height: 28px; margin: 0; white-space: nowrap; }
.res-gain .res-unit { font-size: 0.8rem; margin-left: 0; }
.res-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 37px; box-sizing: border-box; margin-top: 8px; border-top: 1px solid var(--border-hair); white-space: nowrap; }
.res-pv { font: 700 1rem/1.2 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.res-parts { --part-pad: 12px; --key-gap: 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(46px + var(--dt-h, 16px)); margin: 0; border-top: 1px solid var(--border-hair); overflow: hidden; }
.res-parts .part { margin: 0; padding: 4px 0 0; min-width: 0; height: calc(46px + var(--dt-h, 16px)); box-sizing: border-box; }
.res-parts .part + .part { border-left: 1px solid var(--border-hair); padding-left: var(--part-pad); }
.res-parts .res-key { margin-right: var(--key-gap); }
.res-parts.one .part { grid-column: 1 / -1; }
.res-parts dt { font-size: 0.8rem; font-weight: 500; line-height: 16px; color: var(--text-muted); height: var(--dt-h, 16px); overflow: hidden; } /* one line, or two where the key is measured not to fit one (fitParts) */
.res-parts dd { margin: 0; white-space: nowrap; }
.res-parts dd.v { font: 700 1.25rem/26px 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.res-parts dd.v { font-size: var(--parts-fs, 1.25rem); }
.res-probe { position: absolute; visibility: hidden; white-space: nowrap; font: 700 1.25rem/26px 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; pointer-events: none; }
.res-parts dd.c { font-size: 0.8rem; font-weight: 500; line-height: 16px; color: var(--text-muted); }
.res-inst .res-stik { margin: 12px 0 0; min-height: 44px; }
.res-inst, .res-inst * { overflow-anchor: none; } /* the stik row joins the card when the first share is set: the browser must not scroll the page to follow what moved below the line (the property sits on each node: it is not inherited) */
.res-stik.is-off { display: none; } /* no share: no switch, no empty band; the row appears below the line when the first share is set */
.res-inst.no-split .res-pl, .res-inst.no-split .res-parts, .res-inst.no-split .res-stik, .res-inst.no-split .res-steps { display: none; } /* an older engine: no live split to draw */
.res-inst .res-seg { max-width: none; }
.res-inst .res-seg button, .res-inst .res-steps .res-btn { min-height: 44px; }
.res-inst .res-btn.icon { width: 44px; min-width: 44px; }
.res-inst .res-steps { margin: calc(12px + var(--steps-gap, 0px)) 0 0; height: 44px; } /* one height in every state; the gap is fitSteps()'s, a fixed number per width and height */
@media (max-width: 900px) { .res-rest { max-width: 640px; } }
@media (max-width: 369px) {
  /* the steps row keeps its 44 px whatever the month and the language: the whole-year button holds two lines in a fixed width, the month's name may wrap */
  .res-inst .res-steps .lab { min-width: 0; flex: 1 1 0; line-height: 1.2; }
  .res-inst .res-btn.all { flex: none; width: 88px; padding: 0 4px; text-align: center; }
}
@media (max-width: 359px) {
  .res-parts { --part-pad: 6px; --key-gap: 6px; } /* the key and its column give 8 px back, so the longest key (Forsyningens del) holds one line */
}
/* The head and the price row stack where fitHead() has measured that the widest text either can hold, in any state, does not
   fit beside its neighbour (the width and the language decide, never the state): one height for every state. */
.res-inst.st-head .res-head { height: 72px; flex-direction: column; gap: 0; }
.res-inst.st-head .res-gain { text-align: left; width: 100%; }
.res-inst.st-prow .res-prow { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: 37px; }
.res-inst.st-prow .res-prow .res-lbl { line-height: 16px; } /* 16 + 20 + the hairline = the 37 px of the unstacked row, so the line sits where it did */
.res-inst.st-prow .res-pv { line-height: 20px; }
/* a short screen with its toolbars: the card's title is read by the label under it, so it steps out of sight (kept for
   screen readers) and the line ends in the first screen */
@media (max-height: 599px) {
  .res-inst.st-head .res-head { height: 44px; }
  .res-inst.st-head .res-head h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) and (max-height: 599px) {
  .res-inst { padding-top: 12px; scroll-margin-top: -7px; } /* the card's top sits 4 px under the nav so the end captions of the line stay on the screen */
}
@media (min-width: 901px) {
  .res-inst { padding: 24px; }
  /* with a mouse the hand covers nothing: the price and the parts sit beside the line */
  .res-rest { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; grid-template-areas: "line readout" "steps readout" "stik readout"; align-items: start; }
  .res-readout { grid-area: readout; }
  .res-readout .res-prow { margin-top: 0; }
  .res-rest > .res-pl { grid-area: line; margin-top: 0; }
  .res-rest > .res-stik { grid-area: stik; }
  .res-rest > .res-steps { grid-area: steps; }
  .res-stik.is-off:not([hidden]) { display: block; visibility: hidden; } /* with a mouse the row keeps its place while no share is set: the first share moves nothing below the card */
  .res-parts { grid-template-columns: minmax(0, 1fr); height: 124px; align-content: start; }
  .res-parts .part + .part { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hair); }
}
.res-notes-slot:empty { display: none; }
.res-notes-slot .result-notes { margin-top: 16px; }

/* The folds: the working, the months, what moves the figure, the assumptions. Each is a head on a hairline. */
.res-fsec { border-top: 1px solid var(--border-hair); }
#cr-how { margin-top: 32px; }
.res-fsec:last-of-type { border-bottom: 1px solid var(--border-hair); }
.res-fsec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.res-fsec > summary::-webkit-details-marker { display: none; }
.res-fsec > summary h2 { font: 600 1.2rem/1.3 'Inter Tight', 'Inter Tight Fallback', 'Inter', sans-serif; letter-spacing: -0.012em; color: var(--text-primary); margin: 0; text-wrap: balance; }
.res-fsec > summary .res-chev { color: var(--text-muted); }
.res-fbody { padding: 4px 0 24px; }
.res-fbody > .res-lead:first-child, .res-fbody > .res-cap:first-child { margin-top: 0; }
.res-how-ledger { margin-top: 24px; }
.res-spot { margin: 12px 0 0; }
.res-spot svg { display: block; width: 100%; overflow: visible; }
.res-fbody #lifted-heat-note, .res-fbody #price-work-note { margin-top: 16px; }
@media print {
  .res-inst { break-inside: avoid; border: 0; padding: 0; }
  .res-fsec > summary { min-height: 0; }
  .res-fsec { break-inside: avoid; }
}