/* ═══════════════════════════════════════════════════════════
   Rauhaly · Ilmaisten laskurien tyylit · 2026-10-07
   Ladataan sisalto.css:n jälkeen. Sama ilme kuin oppaissa,
   lisänä lomakkeet, välilehdet, tulokset ja kaaviot.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ok:#0d7a43; --ok-soft:#eef8f2; --ok-line:#c4e5d1;
  --bad:#b91c1c; --bad-soft:#fdf0f0; --bad-line:#f2cccc;
  --ink:#0d1b2a; --ink-2:#1a2c40;
  --r-tool:14px;
}

/* hidden-attribuutti voittaa aina komponentin oman display-arvon */
[hidden] { display: none !important; }

/* ── Työkalukortti ── */
.tool { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tool);
  box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 12px 32px rgba(13,27,42,.05); margin: 0 0 46px; }
.tool-tabs { display: flex; gap: 4px; padding: 6px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  border-radius: var(--r-tool) var(--r-tool) 0 0; overflow-x: auto; scrollbar-width: none; }
.tool-tabs::-webkit-scrollbar { display: none; }
.tool-tab { flex: 0 0 auto; appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
  font: 550 13.5px var(--sans); color: var(--text-2); padding: 9px 15px; border-radius: 9px; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s; }
.tool-tab:hover { color: var(--text); background: rgba(255,255,255,.7); }
.tool-tab[aria-selected="true"] { background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: 0 1px 2px rgba(13,27,42,.06); }
.tool-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tool-panel { padding: 24px 26px 26px; }
.tool-panel[hidden] { display: none; }
.tool-panel > h2.sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Kentät ── */
.fgrid { display: grid; gap: 16px 18px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.fld > label, .fld > .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.fld .opt { font-weight: 450; color: var(--text-3); }
.inp { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: 10px; background: #fff;
  font: 450 16px var(--sans); color: var(--text); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.inp.num { font-family: var(--mono); font-size: 16.5px; letter-spacing: .01em; }
.inp.big { height: 52px; font-size: 20px; }
.inp::placeholder { color: var(--text-4); }
.inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23,123,243,.14); }
.inp[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(185,28,28,.09); }
input[type="date"].inp { font-family: var(--mono); font-size: 15.5px; min-width: 0; }
.fhint { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-top: 7px; }
.ferr { font-size: 12.5px; color: var(--bad); line-height: 1.55; margin-top: 7px; }
.ferr:empty, .fhint:empty { display: none; }

/* ── Tulokset ── */
.outs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.out { border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px 14px; background: var(--surface); min-width: 0; }
.out-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; min-height: 26px; }
.out-v { font: 600 24px/1.3 var(--mono); color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.out-v.dim { color: var(--text-4); font-weight: 500; }
.out.main { border-color: var(--brand-line); background: linear-gradient(180deg, #f6faff, #fff 80%); }

.copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; border-radius: 7px;
  background: none; color: var(--brand); font: 600 12px var(--sans); cursor: pointer; transition: background-color .15s, color .15s; }
.copy:hover { background: var(--brand-soft); }
.copy:disabled { color: var(--text-4); background: none; cursor: default; }
.copy.done { color: var(--ok); }
.copy svg { width: 13px; height: 13px; }

/* ── Tarkisteen laskenta: numero, paino ja tulo ── */
.calc { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--border-2); }
.calc-title { font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
.calc-desc { font-size: 13px; color: var(--text-3); line-height: 1.55; margin-bottom: 14px; }
.strip { display: flex; flex-wrap: wrap; gap: 6px; }
.cell { width: 46px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; text-align: center; font-family: var(--mono); }
.cell .cd { display: block; font-size: 20px; font-weight: 600; padding: 10px 0 8px; color: var(--text); }
.cell .cw { display: block; font-size: 11.5px; padding: 3px 0; color: var(--ink-2); }
.cell .cp { display: block; font-size: 13px; font-weight: 600; padding: 6px 0 8px; color: var(--text-2); border-top: 1px solid var(--border); }
.cell.w7 .cw { background: #cfe2fc; }
.cell.w3 .cw { background: #e3eefd; }
.cell.w1 .cw { background: #f2f6fc; }
.cell.chk { width: auto; min-width: 64px; margin-left: 8px; border-color: var(--brand); background: var(--brand); }
.cell.chk .cd { color: #fff; }
.cell.chk .cw { color: #d7e8fe; font-family: var(--sans); font-size: 11px; background: rgba(255,255,255,.12); padding: 3px 8px; }
.cell.chk .cp { color: #e6f0fe; border-top-color: rgba(255,255,255,.25); padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.cell.chk.flash { animation: chkFlash .5s var(--ease); }
@keyframes chkFlash { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.calc-sum { margin-top: 14px; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.calc-sum .m { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 13.5px; }

/* ── Tarkistuksen tulos ── */
.verdict { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: 14.5px; line-height: 1.6; }
.verdict.ok { background: var(--ok-soft); border-color: var(--ok-line); color: #0b5a33; }
.verdict.bad { background: var(--bad-soft); border-color: var(--bad-line); color: #8c1616; }
.verdict svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.verdict strong { color: inherit; }
.verdict .m { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.vdl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 14px 0 0; font-size: 13.5px; }
.vdl dt { color: var(--text-3); }
.vdl dd { font-family: var(--mono); color: var(--text); overflow-wrap: anywhere; }

/* ── Painikkeet ── */
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 10px;
  font: 600 13.5px var(--sans); cursor: pointer; border: 1px solid var(--border-2); background: #fff; color: var(--text);
  transition: background-color .15s, border-color .15s, color .15s; }
.tbtn:hover { background: var(--surface-2); border-color: var(--text-4); }
.tbtn.pri { background: var(--ink); border-color: var(--ink); color: #fff; }
.tbtn.pri:hover { background: var(--ink-2); border-color: var(--ink-2); }
.tbtn:disabled { opacity: .45; cursor: default; }
.tbtn svg { width: 14px; height: 14px; }
.tbtn.done { color: var(--ok); }
.tbtn.pri.done { color: #b8f0cf; }
.addrow { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 12px 8px 10px; border: 1px dashed var(--border-2);
  border-radius: 10px; background: none; color: var(--text-2); font: 600 13px var(--sans); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.addrow:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.addrow svg { width: 14px; height: 14px; }

/* ── Taulukot työkalussa ── */
.tool .tbl-wrap { margin: 18px 0 0; }
.tool table td { padding: 9px 12px; }
.tool table th { white-space: nowrap; }
.tool td.v, .tool td.m { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: nowrap; }
.tool td.r, .tool th.r { text-align: right; }
.tool tr.sum td { font-weight: 650; color: var(--text); background: var(--surface-2); }
.tool tr.grp td { font-weight: 600; color: var(--text); background: var(--surface-2); font-size: 13.5px; }
.tool tr.sub td { font-weight: 600; color: var(--text); }
.arvio { display: inline-block; font: 600 10.5px/1.5 var(--sans); color: #7a5209; background: var(--warn-soft); border: 1px solid #f0dca8; border-radius: 5px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.tbl-note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.55; }

/* ── Viivakoodi ── */
.bc { margin-top: 22px; border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px 16px; background: #fff; text-align: center; }
.bc svg { display: block; width: 100%; height: 78px; margin: 0 auto; }
.bc-code { margin-top: 12px; font: 500 13px/1.6 var(--mono); color: var(--text); overflow-wrap: anywhere; letter-spacing: .03em; }
.bc-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.bc-empty { margin-top: 22px; padding: 26px 20px; border: 1px dashed var(--border-2); border-radius: 12px; text-align: center; font-size: 13.5px; color: var(--text-3); line-height: 1.6; }

/* ── Viivästyskorko: voimassa oleva korko ── */
.rates { display: grid; grid-template-columns: 1.15fr 1fr 1fr; border: 1px solid var(--border); border-radius: var(--r-tool); background: var(--surface); margin: 0 0 18px; overflow: hidden; }
.rate { padding: 16px 18px 15px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.rate + .rate { border-left: 1px solid var(--border); }
.rate-k { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.rate-v { font: 650 32px/1.15 var(--sans); color: var(--text); letter-spacing: -.03em; }
.rate-v small { font-size: 17px; font-weight: 550; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.rate.head { background: var(--ink); }
.rate.head .rate-k { color: #9fb3c8; }
.rate.head .rate-v { color: #fff; font-size: 19px; line-height: 1.35; font-family: var(--sans); font-weight: 650; letter-spacing: -.3px; margin-top: 4px; }
.rate.head .rate-v small { display: block; margin: 4px 0 0; font: 500 12.5px var(--sans); color: #9fb3c8; }

/* ── Viivästyskorko: valinnat ja laskurivit ── */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px 13px; border-radius: 8px; font: 550 13.5px var(--sans); color: var(--text-2); cursor: pointer; border: 1px solid transparent; transition: background-color .15s, color .15s; }
.seg span em { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--text-3); margin-left: 6px; }
.seg input:checked + span { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(13,27,42,.06); }
.seg input:checked + span em { color: var(--brand); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.seg-extra { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; }
.seg-extra .inp { width: 92px; height: 40px; }

.rows-head, .irow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.rows-head { font-size: 12.5px; color: var(--text-3); margin: 0 0 7px; }
.irow + .irow { margin-top: 8px; }
.irow .inp { height: 44px; }
.irow .del { width: 40px; height: 40px; border: 0; border-radius: 9px; background: none; color: var(--text-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.irow .del:hover { background: var(--bad-soft); color: var(--bad); }
.irow .del:disabled { visibility: hidden; }
.irow .del svg { width: 15px; height: 15px; }
.chk-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.chk-line input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: 0 0 auto; }
.chk-line[hidden] { display: none; }

/* ── Viivästyskorko: tulos ── */
.result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.totals { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.total { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.total-k { font-size: 12.5px; color: var(--text-3); }
.total-v { font: 650 25px/1.25 var(--sans); color: var(--text); margin-top: 6px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.total.main { border-color: var(--ink); background: var(--ink); }
.total.main .total-k { color: #9fb3c8; }
.total.main .total-v { color: #fff; font-size: 30px; }
.notice { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); border: 1px solid #f0dca8; color: #7a5209; font-size: 13px; line-height: 1.55; }
.notice[hidden] { display: none; }

/* ── Korkojana ── */
.timeline { margin-top: 22px; }
.timeline-title { font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
.timeline-desc { font-size: 13px; color: var(--text-3); line-height: 1.55; margin-bottom: 10px; }
.jana { position: relative; border-radius: 8px; outline: none; touch-action: pan-y; }
.jana:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.jana svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.jana-tip { position: absolute; top: -6px; padding: 7px 10px 8px; background: var(--ink); border-radius: 8px; font-size: 12px; line-height: 1.35;
  color: #9fb3c8; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(13,27,42,.18); }
.jana-tip strong { display: block; font: 600 14px var(--mono); color: #fff; }
.tl-axis { font: 500 10.5px var(--mono); fill: var(--text-3); }
.tl-lbl { font: 600 11px var(--mono); fill: var(--text-2); }
.tl-lbl.on { fill: var(--brand-2); }

/* ── UKK sisältösivulla: lista eikä korttiruudukko ── */
.faq-list { border-top: 1px solid var(--border-2); margin: 6px 0 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 2px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.faq-item summary svg { margin-left: auto; flex-shrink: 0; color: var(--text-4); transition: transform .2s var(--ease), color .2s; }
.faq-item[open] summary svg { transform: rotate(180deg); color: var(--brand); }
.faq-body { padding: 0 2px 18px; font-size: 15px; color: var(--text-2); line-height: 1.75; max-width: 66ch; }

.sources { margin-top: 26px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.sources a { color: var(--text-2); }

@media (max-width: 640px) {
  .tool { margin-bottom: 38px; border-radius: 12px; }
  .tool-tabs { border-radius: 12px 12px 0 0; }
  .tool-tab { padding: 9px 12px; font-size: 13px; }
  .tool-panel { padding: 20px 16px 20px; }
  .fgrid { grid-template-columns: 1fr; }
  .fgrid.keep2 { grid-template-columns: 1fr 1fr; }
  .outs { grid-template-columns: 1fr; }
  .totals { grid-template-columns: 1fr 1fr; gap: 10px; }
  .total.main { grid-column: 1 / -1; }
  .total { padding: 12px 14px; }
  .total-v { font-size: 20px; }
  .out-v { font-size: 21px; }
  .cell { width: 38px; }
  .cell .cd { font-size: 18px; padding: 9px 0 7px; }
  .cell.chk { min-width: 56px; margin-left: 0; }
  .rates { grid-template-columns: 1fr 1fr; }
  .rate.head { grid-column: 1 / -1; }
  .rate + .rate { border-left: 0; }
  .rate:nth-child(3) { border-left: 1px solid var(--border); }
  .rate:nth-child(n+2) { border-top: 1px solid var(--border); }
  .seg { display: flex; }
  .seg label { flex: 1 1 auto; }
  .seg span { text-align: center; padding: 8px 10px; }
  .seg-extra { display: flex; margin: 10px 0 0; }
  .rows-head { display: none; }
  .irow { grid-template-columns: 1fr 1fr 40px; grid-template-areas: "kuv kuv del" "sum era era"; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
  .irow + .irow { margin-top: 10px; }
  .irow .i-kuv { grid-area: kuv; } .irow .i-sum { grid-area: sum; } .irow .i-era { grid-area: era; } .irow .del { grid-area: del; }
  .total.main .total-v { font-size: 27px; }
  .tool-actions .tbtn { flex: 1 1 auto; }
  .tool table th, .tool table td { padding: 9px 8px; }
  .tool table th { font-size: 9.5px; letter-spacing: .6px; }
  .tool td.m, .tool td.v { font-size: 12.5px; }
  .tbl-wrap table th, .tbl-wrap table td { padding: 9px 9px; }
  .rate-v { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.chk.flash { animation: none; }
}
@media print {
  .tool { box-shadow: none; }
  .tool-tabs, .tool-actions, .addrow, .copy, .irow .del { display: none !important; }
}