/* =============================================================
   /palovaroitinrekisteri (views/landing/template.php), 2026-10-13
   The free template pack page on the landing design system, and the printable tarkastuspöytäkirja.
   Built on landing.css section 6 and pages/content.css. Prefix tp-. Printing prints only the sheet.
   ============================================================= */

/* ---------- head: the real first sheet as the page's object ---------- */
.tp-head .pc-h1 { font-size: clamp(34px, 4.4vw, 64px); }

/* ---------- the printable pöytäkirja (Jäkälä): paper on the band ---------- */
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin: 0 0 22px; }
.tp-actions__note { margin: 0; font: 500 16px/1.7 var(--lp-body); color: #3F4D49; }
.tp-sheet { padding: clamp(26px, 3.6vw, 56px); border-radius: 10px; background: #FFFEFB; color: var(--yo); box-shadow: 0 50px 90px -56px rgba(20,35,31,.55), 0 1px 3px rgba(20,35,31,.06); }
.tp-sheet :focus-visible { outline-color: var(--kuusi); }
.tp-sheet__head { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 3px solid var(--yo); }
.tp-sheet__title { margin: 0 0 18px; font: 700 clamp(24px, 2.6vw, 36px)/1.1 var(--lp-display); letter-spacing: -.025em; color: var(--yo); overflow-wrap: anywhere; }
.tp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; margin: 0; font: 500 17px/1.5 var(--lp-body); }
.tp-fields > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.tp-fields dt { font-weight: 700; white-space: nowrap; }
.tp-fields dt::after { content: ":"; }
.tp-fields dd { flex: 1; min-width: 0; margin: 0; }
.tp-fields__method { grid-column: 1 / -1; flex-wrap: wrap; }
.tp-fields__method dd { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.tp-fields__method label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tp-fields__method input { width: 1.15rem; height: 1.15rem; accent-color: var(--kuusi); }
/* editable header fields: amber "fill me" on screen, Jäkälä once filled; print turns them into blank lines */
@media screen {
    .tp-sheet .ph { padding: 1px 6px; border-radius: 5px; border-bottom: 2px dashed var(--okra-line); background: var(--attn-bg); color: var(--attn-fg); cursor: text; outline-offset: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .tp-sheet .ph:hover { background: #F7DFB4; }
    .tp-sheet .ph:focus { border-bottom-color: transparent; background: #fff; color: var(--yo); outline: 3px solid var(--kuusi); }
    .tp-sheet .ph.is-filled { border-bottom: 2px solid var(--kuusi); background: var(--jakala); color: var(--yo); }
}
.tp-scroll { overflow-x: auto; }
.tp-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; font: 500 15px/1.4 var(--lp-body); }
.tp-table th, .tp-table td { padding: 7px 9px; text-align: left; vertical-align: top; border: 1px solid var(--yo); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.tp-table thead th { vertical-align: bottom; background: var(--kaura); font: 700 13.5px/1.3 var(--lp-body); overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
.tp-table .tp-c-apt { width: 10%; }
.tp-table .tp-c-num { width: 9%; }
.tp-table .tp-c-count { width: 11%; }
.tp-table .tp-c-year { width: 11%; }
.tp-table .tp-c-notes { width: 26%; }
.tp-table .tp-c-sign { width: 15%; }
.tp-blank td { height: 2.4rem; }
.tp-example td { background: rgba(227,233,227,.55); color: #3F4D49; font-style: italic; }
.tp-example__tag { display: block; font: 600 12.5px/1.3 var(--lp-body); font-style: normal; letter-spacing: .02em; color: var(--kuusi); }
.tp-sheet__foot { margin-top: 18px; font: 500 14px/1.55 var(--lp-body); color: #3b3b3b; }
.tp-sheet__foot p { margin: 0 0 6px; }
.tp-sheet__foot a { color: var(--kuusi); text-decoration: underline; text-underline-offset: 3px; }
.tp-sheet p.tp-sheet__credit { margin-top: 10px; text-align: right; color: var(--muted); }
.tp-phone-note { display: none; margin: 12px 0 0; font: 600 15px/1.45 var(--lp-body); color: var(--kuusi); }

/* ---------- who it is for (Kuusi): three statements, typeset ---------- */
.tp-who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 96px); align-items: start; }
.tp-who__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kaura); }
.tp-who__list li { padding: clamp(24px, 2.4vw, 36px) 0; border-bottom: 1px solid rgba(241,243,242,.22); }
.tp-who__t { margin: 0; font: 700 clamp(28px, 2.8vw, 44px)/1.05 var(--lp-display); letter-spacing: -.032em; color: var(--kaura); }
.tp-who__d { margin: 12px 0 0; max-width: 36em; font: 500 clamp(17px, 1.3vw, 19px)/1.55 var(--lp-body); color: var(--on-kuusi-2); }

/* ---------- the six sheets (Kaura): a list keyed by the file's real tab names ---------- */
.tp-tabs { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kuusi); }
.tp-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr) minmax(0, 7.6fr); gap: 8px clamp(20px, 3vw, 56px); align-items: baseline; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid rgba(31,77,71,.18); }
.tp-tab__num { font: 700 clamp(22px, 2vw, 30px)/1 var(--lp-display); letter-spacing: -.03em; color: var(--muted); }
.tp-tab__name { margin: 0; font: inherit; }
/* the name sits in a sheet tab, as at the bottom of the spreadsheet */
.tp-tab__name span { display: inline-block; padding: 10px 18px 9px; border-radius: 12px 12px 0 0; background: #FFFEFA; box-shadow: inset 0 3px 0 var(--kuusi), 0 10px 18px -14px rgba(20,35,31,.4); font: 700 clamp(20px, 1.7vw, 25px)/1.1 var(--lp-display); letter-spacing: -.018em; color: var(--kuusi); }
.tp-tab__desc { margin: 0; max-width: 40em; font: 400 17.5px/1.6 var(--lp-body); color: #3F4D49; }

/* ---------- how to start + what the law says (Pinta) ---------- */
.tp-how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.tp-steps { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: tpstep; border-top: 2px solid var(--kuusi); }
.tp-steps li { counter-increment: tpstep; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(31,77,71,.16); font: 500 18px/1.55 var(--lp-body); color: var(--yo); }
.tp-steps li::before { content: counter(tpstep); font: 700 34px/1 var(--lp-display); letter-spacing: -.03em; color: var(--kuusi); }
.tp-privacy { display: flex; gap: 12px; align-items: flex-start; max-width: 40em; margin: 26px 0 0; font: 500 16px/1.55 var(--lp-body); color: #3F4D49; }
.tp-privacy .lp-ic { width: 20px; height: 20px; margin-top: 2px; color: var(--kuusi); }
.tp-how__acts { margin-top: 30px; }
.tp-law { padding: clamp(26px, 2.8vw, 42px); border-radius: 28px; background: var(--kuusi); color: var(--kaura); box-shadow: 0 40px 60px -44px rgba(20,35,31,.6); }
.tp-law :focus-visible { outline-color: var(--kaura); }
.tp-law__title { margin: 0 0 16px; font: 700 clamp(24px, 2.1vw, 30px)/1.15 var(--lp-display); letter-spacing: -.02em; color: var(--kaura); }
.tp-law p { margin: 0 0 14px; font: 500 17px/1.6 var(--lp-body); color: var(--on-kuusi-2); }
.tp-law .lp-ulink { display: inline-block; margin-top: 6px; font-size: 16.5px; }

/* ---------- the huoltokirja (Kuusi) ---------- */
.tp-log { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.tp-log__copy h2 { -webkit-hyphens: manual; hyphens: manual; }
.tp-log__list { padding-top: 26px; border-top: 2px solid var(--kaura); }
.tp-log__list-title { margin: 0 0 16px; font: 700 clamp(20px, 1.7vw, 24px)/1.25 var(--lp-display); color: var(--kaura); }
.tp-log__list-title strong { color: inherit; font-weight: inherit; }
.tp-log__list ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tp-log__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(241,243,242,.2); font: 500 17.5px/1.5 var(--lp-body); color: var(--kaura); }
.tp-log__list li .lp-ic { width: 20px; height: 20px; margin-top: 3px; color: var(--kaura); }

/* ---------- when the spreadsheet grows (Kaura) ---------- */
.tp-bridge { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(40px, 5vw, 96px); align-items: end; }
.tp-bridge .lp-lead { margin-top: 0; max-width: 32em; }
.tp-bridge__note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 500 15.5px/1.4 var(--lp-body); color: var(--muted); }
.tp-bridge__note .lp-ic { color: var(--kuusi); }

/* ---------- FAQ (Pinta) ---------- */
.tp-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 5vw, 96px); align-items: start; }
.tp-faq .lp-faq { margin-top: 0; }

/* ---------- resident notice, read next, sources (Jäkälä) ---------- */
.tp-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 96px); align-items: start; }
.tp-promo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: end; padding: clamp(22px, 2.4vw, 34px); border-radius: 28px; background: var(--kuusi); color: var(--kaura); box-shadow: 0 40px 60px -44px rgba(20,35,31,.6); }
.tp-promo:focus-visible { outline-color: var(--kuusi); outline-offset: 4px; }
.tp-promo__art { display: flex; flex-direction: column; align-items: center; gap: 8px; aspect-ratio: 210 / 270; padding: 22px 14px 0; border-radius: 6px 6px 0 0; background: #FFFEFB; text-align: center; box-shadow: 0 20px 34px -20px rgba(0,0,0,.6); }
.tp-promo__art .tl-mini__det { position: relative; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--yo); }
.tp-promo__art .tl-mini__det::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid rgba(20,35,31,.5); }
.tp-promo__art .tl-mini__det::after { content: ""; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--valo); }
.tp-promo__kick { font: 600 8.5px/1.2 var(--lp-body); letter-spacing: .12em; text-transform: uppercase; color: var(--kuusi); }
.tp-promo__head { padding-bottom: 7px; border-bottom: 2px solid var(--yo); font: 700 13px/1.05 var(--lp-display); text-transform: uppercase; color: var(--yo); }
.tp-promo__art i { display: block; width: 84%; height: 4px; border-radius: var(--r-xs); background: var(--viiva); }
.tp-promo__art i.is-s { width: 60%; }
.tp-promo__copy { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.tp-promo__k { font: 600 16px/1.3 var(--lp-body); color: var(--on-kuusi-2); }
.tp-promo__t { font: 700 clamp(24px, 2.2vw, 32px)/1.08 var(--lp-display); letter-spacing: -.025em; color: var(--kaura); }
.tp-promo__d { font: 500 16px/1.5 var(--lp-body); color: var(--on-kuusi-2); }
.tp-promo__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font: 600 16.5px/1.2 var(--lp-body); color: var(--kaura); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(241,243,242,.45); }
.tp-promo__go svg { width: 18px; height: 18px; transition: transform .25s var(--lp-ease); }
.tp-promo:hover .tp-promo__go svg { transform: translateX(3px); }
.tp-more .pc-src__t { margin-bottom: 16px; }
.tp-more .pc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "d go"; gap: 8px 28px; }
.tp-more .pc-row__n { font-size: clamp(21px, 1.7vw, 26px); }
.tp-src { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 5vw, 96px); align-items: start; margin-top: clamp(56px, 6vw, 96px); }
.tp-src__note { margin: 18px 0 0; max-width: 40em; font: 500 15px/1.55 var(--lp-body); color: var(--muted); }

/* ---------- breakpoints ---------- */
@media (max-width: 1023px) {
    .tp-head .lp-head__grid, .tp-who, .tp-how, .tp-log, .tp-bridge, .tp-faq, .tp-duo, .tp-src { grid-template-columns: minmax(0, 1fr); }
    .tp-head .lp-head__aside { max-width: 680px; }
    .tp-promo { max-width: 620px; }
}
@media (max-width: 899px) {
    .tp-tab { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num name" "desc desc"; }
    .tp-tab__num { grid-area: num; }
    .tp-tab__name { grid-area: name; }
    .tp-tab__desc { grid-area: desc; margin-top: 6px; }
    .tp-fields { grid-template-columns: minmax(0, 1fr); }
}
/* 15 px minimum on screen (2026-10-31); phones scale the form below, print sets its own sizes */
@media screen {
    .tp-table thead th { font-size: 15px; }
    .tp-example__tag { font-size: 15px; }
    .tp-sheet__foot { font-size: 15px; }
}
/* Phones (screen only; print is untouched): the eight-column form cannot be read at this width, so the table is
   shown as a fitted preview of the paper: every size in it is set in --u, 1/880 of the card's inner width (the
   table's desktop width), so the whole form scales down as one picture. The example row and three blank rows,
   then a one-line note that the full form prints on one A4 page. The header fields above stay full size. */
@media screen and (max-width: 639px) {
    .tp-scroll { --u: calc((100vw - 2 * var(--lp-gut) - 32px) / 880); overflow: hidden; }
    .tp-table { min-width: 0; font-size: calc(var(--u) * 15); }
    .tp-table th, .tp-table td { padding: calc(var(--u) * 7) calc(var(--u) * 9); }
    .tp-table thead th { font-size: calc(var(--u) * 13.5); }
    .tp-example__tag { font-size: calc(var(--u) * 12.5); }
    .tp-blank td { height: calc(var(--u) * 38); }
    .tp-blank:nth-child(n+5) { display: none; }
    .tp-phone-note { display: block; }
    .tp-log__copy h2 { font-size: 32px; }
}
@media (max-width: 639px) {
    .tp-sheet { padding: 22px 16px; }
    .tp-fields > div { flex-wrap: wrap; }
    .tp-fields dd { flex-basis: 8em; overflow-wrap: anywhere; }
    .tp-promo { grid-template-columns: minmax(0, 1fr); }
    .tp-promo__art { width: 150px; }
    .tp-steps li { grid-template-columns: 44px minmax(0, 1fr); font-size: 17px; }
    .tp-steps li::before { font-size: 28px; }
    .tp-how__acts .lp-btn, .tp-bridge .lp-head__acts .lp-btn { width: 100%; }
    .tp-actions .lp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-promo__go svg { transition: none; }
}

/* ---------- print: only the tarkastuspöytäkirja, on one A4 page ---------- */
@media print {
    @page { size: A4; margin: 12mm; }
    body:has(#tpSheet) { background: #fff; }
    body:has(#tpSheet) .nav,
    body:has(#tpSheet) .nav__mobile,
    body:has(#tpSheet) .skip-link,
    body:has(#tpSheet) .flash,
    body:has(#tpSheet) .footer,
    body:has(#tpSheet) main > *:not(#poytakirja),
    .tp-sect .rn-screen { display: none !important; }
    #poytakirja { margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
    #poytakirja .lp-wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .tp-sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; color: #000; font-size: 10pt; background: #fff; }
    .tp-sheet__head { margin-bottom: 4mm; padding-bottom: 4mm; border-bottom-color: #000; }
    .tp-sheet__title { margin-bottom: 3mm; font-size: 18pt; color: #000; }
    .tp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5mm 8mm; font-size: 10pt; }
    .tp-fields__method { grid-column: 1 / -1; }
    .tp-sheet .ph, .tp-sheet .ph.is-filled { padding: 0; border: 0; background: none; color: inherit; }
    /* an unfilled field prints as a blank line to write on */
    .tp-sheet .ph:not(.is-filled) { display: inline-block; min-width: 55mm; border-bottom: .3mm solid #000; color: transparent; }
    .tp-scroll { overflow: visible; }
    .tp-table { min-width: 0; font-size: 8.5pt; }
    .tp-table th, .tp-table td { padding: 1mm 1.5mm; border-color: #000; }
    .tp-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 7.5pt; }
    .tp-blank td { height: 9.5mm; }
    .tp-sheet__foot { margin-top: 3mm; color: #000; font-size: 8pt; }
    .tp-sheet__foot a { color: #000; text-decoration: none; }
    .tp-sheet p.tp-sheet__credit { color: #444; }
    .tp-sheet { break-inside: avoid; }
}