/* The calculators and the drawings in the pages (csn-core). Loaded only on pages that show one.
   The theme's colours and fonts (site.css) are used as they are: labels and controls in Archivo,
   figures in Fluturas Mono, the payslip as a paper object on the instrument's ground. */

/* ---- A calculator: the instrument (the form) beside the printed answer ---- */
.calc { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); font-family: var(--sans); }
@media (min-width: 920px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 30px; align-items: start; } }
.calc__form { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 16px 16px 18px; }
@media (min-width: 560px) { .calc__form { padding: 22px 24px 24px; } }
.calc__title { font: 620 24px/1.15 var(--serif); letter-spacing: -.01em; margin: 0 0 16px; }

/* The ways in: a segmented control with square corners, the chosen one inked. */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 3px; padding: 0; margin: 0 0 20px; overflow: hidden; }
.modes label { position: relative; cursor: pointer; display: flex; }
.modes label + label { border-left: 1px solid var(--rule); }
.modes input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.modes span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 4px 11px; font: 650 14.5px/1.2 var(--sans); color: var(--ink); transition: background .15s ease, color .15s ease; }
.modes input:checked + span { background: var(--ink); color: var(--paper); }
.modes label:hover input:not(:checked) + span { background: var(--paper-2); }
.modes input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: -3px; }
@media (min-width: 420px) { .modes span { font-size: 15px; } }

.fld { display: block; margin: 0 0 16px; }
.fld__label { display: block; font: 650 14px/1.35 var(--sans); color: var(--ink); margin: 0 0 6px; letter-spacing: .005em; }
.fld__hint { display: block; font: 500 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 6px; }
.money { display: flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: 3px; background: var(--card); overflow: hidden; }
.money:focus-within { outline: 3px solid var(--acc); outline-offset: 1px; }
.money input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 32px/1.1 var(--mono); padding: 10px 14px; font-variant-numeric: tabular-nums; outline: none; letter-spacing: -.01em; }
.money span { display: flex; align-items: center; padding: 0 16px; font: 650 16px var(--sans); color: var(--ink-2); background: var(--paper-2); border-left: 1px solid var(--line-2); }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 480px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.calc select, .calc input[type="number"], .calc input[type="date"], .calc input[type="text"]:not(.money input) { width: 100%; font: 500 16px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 3px; padding: 9px 10px; min-height: 44px; }
.calc select:hover, .calc input[type="number"]:hover, .calc input[type="date"]:hover { border-color: var(--ink-3); }
.calc select:focus, .calc input:focus { outline: 3px solid var(--acc); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.4 var(--sans); margin: 0 0 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--acc); }
.check small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.more { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.more > summary { cursor: pointer; font: 650 15px/1.3 var(--sans); color: var(--ink); list-style: none; padding: 8px 0; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: inline-block; width: 1.3em; font-weight: 800; color: var(--acc); }
.more[open] > summary::before { content: "−"; }
.more__body { padding-top: 8px; }
.go { display: inline-block; margin-top: 6px; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 12px 22px; font: 700 16px var(--sans); cursor: pointer; }
.js .go--nojs { display: none; }

/* ---- The answer, printed as a payslip: a paper object, perforated at both ends ---- */
.slip { position: relative; background: var(--card); color: var(--ink); padding: 26px 18px 24px; border-radius: 2px; box-shadow: 0 1px 1px rgba(27, 29, 34, .06), 0 14px 26px -22px rgba(27, 29, 34, .55); font: 500 15.5px/1.45 var(--mono);
	-webkit-mask: radial-gradient(circle 4.5px at 50% 0, #0000 98%, #000) 0 0 / 13px 51% repeat-x, radial-gradient(circle 4.5px at 50% 100%, #0000 98%, #000) 0 100% / 13px 51% repeat-x;
	mask: radial-gradient(circle 4.5px at 50% 0, #0000 98%, #000) 0 0 / 13px 51% repeat-x, radial-gradient(circle 4.5px at 50% 100%, #0000 98%, #000) 0 100% / 13px 51% repeat-x; }
@media (prefers-color-scheme: dark) { .slip { background: #20242c; box-shadow: none; } }
@media (min-width: 560px) { .slip { padding: 30px 26px 28px; } }
.slip__head { display: flex; justify-content: space-between; gap: 10px; font: 750 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); border-bottom: 1px dashed var(--line-2); padding-bottom: 10px; margin-bottom: 8px; }
.slip__rows { margin: 0; padding: 0; list-style: none; }
.slip__row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.slip__row dt, .slip__row .l { flex: 0 1 auto; font: 500 14.5px/1.35 var(--sans); color: var(--ink-2); }
.slip__row .dots { flex: 1 1 20px; min-width: 12px; border-bottom: 1.5px dotted var(--line-2); transform: translateY(-4px); }
.slip__row .v { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip__row .key { display: inline-block; width: 9px; height: 9px; border-radius: 1px; margin-right: 7px; vertical-align: 1px; }
.slip__row--minus .v { color: var(--ink); }
.slip__row--info .l { font-style: normal; color: var(--ink-3); }
.slip__row--info .v { color: var(--ink-3); }
.slip__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; border-top: 2px solid var(--rule); margin-top: 10px; padding-top: 12px; }
.slip__total .l { font: 800 14px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.slip__total .v { font: 500 clamp(30px, 7vw, 42px)/1 var(--mono); color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.slip__sub { display: flex; justify-content: space-between; gap: 10px; font: 500 14px/1.4 var(--sans); color: var(--ink-2); margin-top: 8px; }
.slip__sub b { font: 500 15px var(--mono); color: var(--ink); white-space: nowrap; }
.slip__boss { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.slip__boss .slip__row .l { color: var(--ink-3); }
.slip__note { font: 500 13.5px/1.5 var(--sans); color: var(--ink); margin: 14px 0 0; padding: 10px 12px; background: var(--acc-pale); border-left: 3px solid var(--acc); }
.slip__note--warn { background: var(--red-pale); border-left-color: var(--red); }
.slip__note:empty { display: none; }

/* Where each 100 lei go: one bar in the payslip's own colours. */
.split { margin: 18px 0 0; }
.split__say { font: 400 19px/1.4 var(--serif); margin: 0 0 10px; color: var(--ink); }
.split__say b { font-weight: 650; background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); }
.split__bar { display: flex; height: 30px; overflow: hidden; background: var(--paper-3); }
.split__bar i { display: block; height: 100%; min-width: 2px; transition: flex-basis .35s ease; }
.split__bar i + i { box-shadow: inset 1px 0 0 var(--paper-2); }
.split .s-net { background: var(--acc); }
.split .s-cas { background: var(--cas); }
.split .s-cass { background: var(--cass); }
.split .s-tax { background: var(--tax); }
.split .s-cam { background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, var(--paper-2) 2px 5px); }
.split__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 9px 0 0; padding: 0; list-style: none; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.split__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* How it was worked out: every step with its figures. */
.work { margin-top: 18px; background: var(--card); border: 1px solid var(--line-2); border-radius: 3px; font-family: var(--sans); }
.work > summary { cursor: pointer; padding: 12px 16px; font: 650 15px/1.3 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.work > summary::-webkit-details-marker { display: none; }
.work > summary::after { content: "+"; font-weight: 800; color: var(--acc); }
.work[open] > summary::after { content: "−"; }
.work ol { margin: 0; padding: 4px 16px 14px 40px; font: 500 14.5px/1.55 var(--sans); color: var(--ink); }
.work li { margin: 0 0 9px; padding-left: 4px; }
.work li::marker { font: 500 13px var(--mono); color: var(--acc); }
.work code { font: 13.5px var(--mono); background: var(--paper-2); padding: 1px 5px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.work .src { margin: 2px 0 0; font-size: 12.5px; }
.work__note { font: 500 12.5px/1.45 var(--sans); color: var(--ink-3); margin: 0; padding: 0 16px 14px; }

/* ---- A worked example printed inside a page's text ---- */
.ex { margin: 1.4em 0 1.8em; }
.ex .slip { max-width: 470px; }
.ex__cap { font: 500 13.5px/1.45 var(--sans); color: var(--ink-3); margin-top: 10px; max-width: 470px; }

@media (prefers-reduced-motion: reduce) { .split__bar i { transition: none; } }

/* ---- The answer line above a payslip (net → brut, cost, vouchers) ---- */
.answer { font: 400 20px/1.45 var(--serif); margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--acc); color: var(--ink); }
.answer b { font-weight: 650; }
.answer__v { font: 500 1.12em var(--mono); color: var(--ink); white-space: nowrap; background: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 92%, transparent 92%); }
.calc__form--slim { padding: 14px 16px; }
.calc__out--wide { grid-column: 1 / -1; }
.calc--min, .calc--table { grid-template-columns: minmax(0, 1fr); }
.calc__form--bar { display: grid; grid-template-columns: 1fr; gap: 0 14px; align-items: end; }
@media (min-width: 720px) { .calc__form--bar { grid-template-columns: 1.6fr 1fr 1fr; } .calc__form--bar .go { grid-column: auto; } }
.modes--2 { grid-template-columns: 1fr 1fr; }
.range { width: 100%; margin-top: 12px; accent-color: var(--acc); }
.calc input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--acc); }

/* ---- Figures in the text: a rule and a tab in the page's colour over each, the source under it ---- */
.fig { position: relative; margin: 1.6em 0 2em; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--sans); }
.fig::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 4px; background: var(--acc); }
.fig figcaption { font: 500 13.5px/1.5 var(--sans); color: var(--ink-3); margin-top: 12px; }
.fig figcaption .src a, .fig figcaption a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.fig svg text.ax { font: 500 12.5px var(--sans); fill: var(--ink-3); }
.fig svg text.ax--t { font-weight: 650; fill: var(--ink-2); }
.fig svg line.grid { stroke: var(--line); stroke-width: 1; }
.calc .fig { margin: 18px 0 0; }

/* ---- Sick leave: one cell a day ---- */
.days { list-style: none; margin: 16px 0 6px; padding: 2px 2px 8px; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.days__d { flex: 0 0 52px; padding: 6px 4px; text-align: center; font: 600 11.5px/1.2 var(--sans); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 2px; }
.days__d b { display: block; font: 500 18px var(--mono); color: var(--ink); }
.days__d--unpaid { background: var(--red-pale); border-color: var(--red); border-style: dashed; }
.days__d--employer { background: var(--ochre-pale); border-color: var(--ochre); color: var(--ink); }
.days__d--fund { background: var(--blue-pale); border-color: var(--blue); color: var(--ink); }
.days__d--employer b, .days__d--fund b { color: var(--ink); }
.days__d--off { background: var(--paper-2); color: var(--ink-3); }
.days__key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.days__key i { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line-2); vertical-align: -2px; margin-right: 6px; }
.days__key .days__d--employer { background: var(--ochre-pale); border-color: var(--ochre); } .days__key .days__d--fund { background: var(--blue-pale); border-color: var(--blue); } .days__key .days__d--unpaid { background: var(--red-pale); border: 1px dashed var(--red); } .days__key .days__d--off { background: var(--paper-2); }

/* ---- Two columns side by side: vouchers vs raise ---- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.vs__col { padding: 12px 14px 12px 0; }
.vs__col + .vs__col { padding-left: 14px; border-left: 1px solid var(--line-2); }
.vs__h { font: 750 12px/1.25 var(--sans); text-transform: uppercase; letter-spacing: .09em; margin: 0 0 6px; color: var(--ink-2); }
.vs__col--win .vs__h { color: var(--acc); }
.vs__big { font: 500 clamp(24px, 5.5vw, 32px)/1.1 var(--mono); margin: 0 0 6px; color: var(--ink); letter-spacing: -.02em; }
.vs__col--win .vs__big { color: var(--acc); }
.vs__small { font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); margin: 0 0 3px; }

/* ---- The minimum wage: two payslips ---- */
.twins { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 900px) { .twins { grid-template-columns: 1fr 1fr; gap: 32px; } }
.twin__h { font: 620 24px/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 4px; }
.twin__gross { margin: 0 0 14px; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.twin__gross span { font: 500 28px var(--mono); color: var(--acc); letter-spacing: -.02em; }
.twin__one { margin: 14px 0 0; font: 500 15px/1.45 var(--sans); padding: 10px 12px; border-left: 3px solid var(--pencil); background: var(--card); }
.twin__one b { font-family: var(--mono); font-weight: 500; }

/* ---- The deduction's staircase ---- */
.stairs { width: 100%; height: auto; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.stairs__line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; }
.stairs__you { stroke: var(--pencil); stroke-width: 1.5; stroke-dasharray: 4 3; }
.stairs__dot { fill: var(--pencil); stroke: var(--card); stroke-width: 2; }

/* ---- The tall table ---- */
.tbl-wrap--tall { max-height: 580px; overflow: auto; }
.tbl--salary thead th { position: sticky; top: 0; z-index: 1; }
.tbl--salary th[scope="row"] { font-family: var(--mono); font-weight: 500; }
.tbl--salary td, .tbl--salary th { font-size: 15px; padding: 7px 10px; }
.tbl--salary td { font-family: var(--mono); font-weight: 500; font-size: 14.5px; }
.tbl--salary td b { font-weight: 500; color: var(--acc); }
.tbl tr.is-find td, .tbl tr.is-find th { background: var(--hl); color: var(--ink); }

/* ---- The net curve ---- */
svg [hidden] { display: none; }   /* the hidden attribute means nothing inside a drawing by itself */
.cliff__svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; }
.cliff__line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; }
.cliff__ot { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 5 4; }
.cliff__mark { stroke: var(--pencil); stroke-width: 1.4; stroke-dasharray: 2 4; }
.cliff__dot { fill: var(--acc); stroke: var(--paper); stroke-width: 2; }
.cliff__dot--low { fill: var(--pencil); }
.cliff__pl { stroke: var(--ink); stroke-width: 1; }
.cliff__pd { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.cliff__read { font: 500 15px/1.4 var(--sans); margin: 0 0 10px; color: var(--ink-2); }
.cliff__read b { font: 500 16px var(--mono); color: var(--ink); }
.cliff__notes { margin: 14px 0 0; padding: 0; list-style: none; font: 500 15px/1.5 var(--sans); counter-reset: cn; }
.cliff__notes li { position: relative; margin: 0 0 8px; padding: 0 0 0 30px; counter-increment: cn; }
.cliff__notes li::before { content: counter(cn); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1.5px solid var(--pencil); border-radius: 50%; font: 600 15px/18px var(--hand); text-align: center; color: var(--pencil); }
.cliff__notes b { font-weight: 700; }
.cliff__zoom { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); }

/* ---- Mind maps: an editorial diagram, the centre and its branches joined by hairlines ----
   A phone: the centre, then the branches down one line. Wide: the branches in two rows, the centre
   on the line between them that every branch hangs from. */
.mind { container: mind / inline-size; }
.mind__map { display: flex; flex-direction: column; }
.mind__centre { order: -1; margin: 0; }
.mind__centre span { display: inline-block; font: 620 25px/32px var(--serif); letter-spacing: -.012em; padding: 10px 16px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); }
.mind__centre::after { content: ""; display: block; width: 0; height: 16px; margin-left: 20px; border-left: 1.5px solid var(--ink-3); }
.mind__branches { list-style: none; margin: 0 0 0 20px; padding: 0 0 0 22px; border-left: 1.5px solid var(--ink-3); }
.mind__branches--b { padding-bottom: 4px; }
.mind__b { position: relative; padding: 10px 0 14px; }
.mind__b + .mind__b, .mind__branches--b .mind__b:first-child { border-top: 1px solid var(--line); }
.mind__b::before { content: ""; position: absolute; left: -22px; top: 24px; width: 10px; border-top: 1.5px solid var(--ink-3); }
.mind__b::after { content: ""; position: absolute; left: -13px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--mc, var(--acc)); }
.mind__t { margin: 0 0 6px; font: 750 12.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--ink); }
.mind__t b { display: block; margin-top: 3px; font: 600 24px/1.15 var(--serif); letter-spacing: -.012em; text-transform: none; color: var(--mc, var(--acc)); }
.mind__leaves { margin: 0; padding: 0; list-style: none; font: 500 14px/1.45 var(--sans); color: var(--ink-2); }
.mind__leaves li { position: relative; margin: 0 0 3px; padding-left: 14px; }
.mind__leaves li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; border-top: 1px solid var(--ink-3); }
.mind__b--0 { --mc: var(--acc); } .mind__b--1 { --mc: var(--cas); } .mind__b--2 { --mc: var(--violet); } .mind__b--3 { --mc: var(--brown); } .mind__b--4 { --mc: var(--green); } .mind__b--5 { --mc: var(--ink-2); }
@container mind (min-width: 640px) {
	.mind__map { display: block; --gap: 26px; --bus: 30px; }
	.mind__branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; border: 0; }
	.mind__branches--a { align-items: end; }
	.mind__branches--b { align-items: start; }
	.mind__b, .mind__b + .mind__b, .mind__branches--b .mind__b:first-child { border-top: 0; padding: 0; }
	.mind__branches--a .mind__b { padding-bottom: 12px; }
	.mind__branches--b .mind__b { padding-top: 12px; }
	.mind__b::before { left: 10px; top: auto; width: 0; height: calc(var(--bus) + 28px); border-top: 0; border-left: 1.5px solid var(--ink-3); }
	.mind__branches--a .mind__b::before { top: 100%; }
	.mind__branches--b .mind__b::before { bottom: 100%; }
	.mind__b::after { display: none; }
	.mind__t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 7px 1px 0; background: var(--mc, var(--acc)); vertical-align: 1px; }
	.mind__centre { position: relative; margin: var(--bus) 0; text-align: center; }
	.mind__centre::after { display: none; }
	.mind__centre::before { content: ""; position: absolute; top: 50%; left: 10px; width: calc(2 * ((100% - 2 * var(--gap)) / 3 + var(--gap))); border-top: 1.5px solid var(--ink-3); }
	.mind__centre span { position: relative; z-index: 1; font-size: 28px; line-height: 34px; padding: 10px 20px; }
}

/* ---- The net → gross ladder ---- */
.ladder__rows { list-style: none; margin: 0; padding: 0; }
.ladder__r { display: grid; grid-template-columns: 7.2em 1fr 6.4em 5.8em; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font: 500 14.5px/1.3 var(--sans); }
.ladder__r:last-child { border-bottom: 0; }
.ladder__net { font-weight: 700; white-space: nowrap; }
.ladder__bar { position: relative; height: 18px; }
.ladder__bar i { position: absolute; left: 0; top: 0; bottom: 0; }
i.ladder__g { width: var(--g); background: var(--acc-pale); box-shadow: inset 0 0 0 1px var(--acc); }
i.ladder__n { width: var(--n); background: var(--acc); top: 4px; bottom: 4px; }
.ladder__gross { font: 500 15px var(--mono); text-align: right; white-space: nowrap; }
.ladder__alt { font: 500 13px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.ladder__key { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 13px/1.4 var(--sans); color: var(--ink-2); margin: 10px 0 0; }
.ladder__key i { display: inline-block; position: static; width: 14px; height: 10px; margin-right: 6px; vertical-align: 0; }
@media (max-width: 480px) { .ladder__r { grid-template-columns: 7.1em minmax(0, 1fr) 6.7em; gap: 8px; font-size: 13.5px; } .ladder__gross { font-size: 13.5px; } .ladder__alt, .ladder__altkey { display: none; } }

/* ---- Depth: the employer's cost as a stack, the house cut open ---- */
.stack__scene { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: end; padding: 8px 0 0; }
@media (min-width: 620px) { .stack__scene { grid-template-columns: 230px 1fr; } }
.stack__tower { justify-self: center; width: 150px; perspective: 800px; display: flex; flex-direction: column; padding-top: 28px; }
.stack__l { position: relative; height: var(--h); transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(-26deg); }
.stack__l i { position: absolute; display: block; }
.stack__l .f { inset: 0; background: var(--c); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35); }
.stack__l .s { top: 0; bottom: 0; right: -24px; width: 24px; background: var(--c); filter: brightness(.74); clip-path: polygon(0 0, 100% -16px, 100% calc(100% - 16px), 0 100%); }
.stack__l .t { left: 0; right: -24px; top: -16px; height: 16px; background: var(--c); filter: brightness(1.14); clip-path: polygon(0 100%, 24px 0, 100% 0, calc(100% - 24px) 100%); display: none; }
.stack__l:first-child .t { display: block; }
.stack__l--net { --c: var(--acc); } .stack__l--cas { --c: var(--cas); } .stack__l--cass { --c: var(--cass); } .stack__l--tax { --c: var(--tax); } .stack__l--cam { --c: var(--ink-3); }
.stack__labels { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule); }
.stack__lab { display: grid; grid-template-columns: 14px 1fr auto 3.6em; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font: 500 15px/1.35 var(--sans); }
.stack__lab i { width: 12px; height: 12px; display: inline-block; align-self: center; }
.stack__lab b { font: 500 16px var(--mono); }
.stack__lab span { font: 500 13px var(--mono); color: var(--ink-3); text-align: right; }
.stack__lab--net i { background: var(--acc); } .stack__lab--cas i { background: var(--cas); } .stack__lab--cass i { background: var(--cass); } .stack__lab--tax i { background: var(--tax); } .stack__lab--cam i { background: var(--ink-3); }

.house__scene { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 10px 0 0; }
@media (min-width: 680px) { .house__scene { grid-template-columns: 240px 1fr; align-items: center; } }
.house__body { justify-self: center; width: 180px; perspective: 800px; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.house__p { position: relative; height: 44px; transform: rotateX(-10deg) rotateY(-24deg); transform-style: preserve-3d; transition: transform .4s ease; }
.house__body:hover .house__p { transform: rotateX(-10deg) rotateY(-24deg) translateX(var(--dx, 0)); }
.house__p:nth-child(odd) { --dx: -10px; } .house__p:nth-child(even) { --dx: 10px; }
.house__p .f { position: absolute; inset: 0; background: var(--hc); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .3); }
.house__p .s { position: absolute; top: 0; bottom: 0; right: -22px; width: 22px; background: var(--hc); filter: brightness(.74); clip-path: polygon(0 0, 100% -14px, 100% calc(100% - 14px), 0 100%); }
.house__p b { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 600 18px var(--hand); color: #fff; }
.house__p--roof { height: 54px; } .house__p--roof .f { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .house__p--roof .s { display: none; } .house__p--roof b { left: 50%; transform: translate(-50%, -10%); }
.house__p--roof { --hc: var(--red); } .house__p--attic { --hc: var(--red-deep); } .house__p--floor2 { --hc: #4a4f5a; } .house__p--floor1 { --hc: var(--cas); } .house__p--base { --hc: #2a2d34; }
.house__steps { margin: 0; padding-left: 28px; border-top: 2px solid var(--rule); padding-top: 10px; }
.house__s { margin-bottom: 12px; }
.house__s::marker { font: 600 18px var(--hand); color: var(--pencil); }
.house__s b { display: block; font: 750 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.house__s span { font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .stack__l, .house__p { transform: none !important; } .stack__l .s, .house__p .s { display: none; } }

/* ---- City buttons (confirmed 2026 rates) ---- */
.cities { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 13px/1.4 var(--sans); color: var(--ink-3); margin: 0 0 14px; }
.city { font: 600 13.5px var(--sans); background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; padding: 6px 9px; cursor: pointer; }
.city:hover { border-color: var(--ink-3); }
.city[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 600px) { .fig svg text.ax { font-size: 21px; } }

/* Phones: the payslip header keeps its 12 px but packs its capitals a little closer, so most fit one line. */
@media (max-width: 480px) { .slip__head { letter-spacing: .07em; } }