/* =============================================================
   FREE TOOL PAGES on the landing design system (2026-10-13)
   /tyokalut (hub), /montako-palovaroitinta (calculator), /palovaroittimien-kunnossapitosuunnitelma (model plan).
   Prefix tl-. Linked by the views in views/landing/tools/ (after landing.css and pages/content.css), so it
   builds on landing.css section 6 (.lp-*) and the page-content kit (.pc-*). Tokens only, no new hues.
   public/js/tools.js renders the calculator result, the building table and the copy buttons with these
   class names: keep .tl-out__*, .tl-plan*, .tl-cell*, .tl-chips, .tl-field(--err), .tl-err, .tl-bld__*,
   .tl-table*, .tl-num, .tl-dim, .tl-f, .tl-doc* and .tl-embed__code. Widths that depend on data use classes
   (.tl-cell--f1 … f10), never inline styles.
   ============================================================= */

/* Elements toggled with the hidden attribute (no-JS fallbacks, JS-only tools). */
main [hidden] { display: none !important; }

/* ---------- calculator: the page's object, a white frame on Kuusi (the front page's board) ---------- */
.tl-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border-radius: 28px; background: #FFFEFA; color: var(--yo); box-shadow: 0 50px 90px -50px rgba(0,0,0,.55); }
.tl-calc :focus-visible { outline-color: var(--kuusi); }
.tl-calc__in { min-width: 0; padding: clamp(26px, 3.2vw, 52px); }
/* the result sits on plan paper: Kaura with a faint 24 px grid */
.tl-calc__out { position: relative; min-width: 0; padding: clamp(26px, 3.2vw, 52px);
    background: linear-gradient(rgba(31,77,71,.05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(31,77,71,.05) 1px, transparent 1px) 0 0 / 24px 24px, var(--kaura); }
.tl-calc__title { margin: 0 0 30px; font: 700 clamp(24px, 2.1vw, 32px)/1.12 var(--lp-display); letter-spacing: -.024em; color: var(--kuusi); text-wrap: balance; }
.tl-calc__submit { margin-top: 6px; }
.tl-calc__note { margin: 16px 0 0; max-width: 30em; font: 500 15px/1.5 var(--lp-body); color: var(--muted); }

/* form controls */
.tl-field { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.tl-field__label, .tl-field legend { display: block; margin: 0 0 10px; padding: 0; font: 600 16.5px/1.3 var(--lp-body); color: var(--yo); }
.tl-input { display: flex; align-items: center; max-width: 18rem; height: 60px; overflow: hidden; border-radius: 14px; border: 1.5px solid var(--line-ctrl); background: var(--pinta); transition: border-color .2s, box-shadow .2s; }
.tl-input:hover { border-color: var(--kuusi); }
.tl-input:focus-within { border-color: var(--kuusi); box-shadow: 0 0 0 4px rgba(31,77,71,.16); }
.tl-input input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; outline: none; background: transparent; font: 600 24px/1 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); font-variant-numeric: tabular-nums; }
.tl-input__unit { padding: 0 18px 0 4px; font: 600 16px/1 var(--lp-body); color: var(--muted); }
.tl-field--err .tl-input { border-color: #8F1C13; }
.tl-select { -webkit-appearance: none; appearance: none; width: 100%; max-width: 18rem; height: 60px; padding: 0 48px 0 16px; border-radius: 14px; border: 1.5px solid var(--line-ctrl); cursor: pointer;
    background: var(--pinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 20px;
    font: 600 17px/1 var(--lp-body); color: var(--yo); transition: border-color .2s; }
.tl-select:hover, .tl-select:focus { border-color: var(--kuusi); }
.tl-hint { margin: 8px 0 0; max-width: 30em; font: 500 15px/1.45 var(--lp-body); color: var(--muted); }
.tl-err { margin: 8px 0 0; font: 600 15px/1.45 var(--lp-body); color: #8F1C13; }
/* floors 1 / 2 / 3: real radio inputs, visually hidden but focusable, as a pill switch */
.tl-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r); border: 1.5px solid var(--line-ctrl); background: var(--pinta); }
.tl-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tl-seg label { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 46px; padding: 0 16px; border-radius: var(--r); cursor: pointer; font: 600 19px/1 var(--lp-display); color: var(--muted); transition: background-color .2s, color .2s; }
.tl-seg label:hover { color: var(--kuusi); }
.tl-seg input:checked + label { background: var(--kuusi); color: var(--kaura); }
.tl-seg input:focus-visible + label { outline: 3px solid var(--kuusi); outline-offset: 2px; }

/* the result */
.tl-out__label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-out__label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kuusi); box-shadow: 0 0 0 4px rgba(31,77,71,.16); }
.tl-out__k { margin: 0 0 8px; font: 600 16px/1.35 var(--lp-body); color: var(--muted); }
.tl-out__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.tl-out__num { font: 700 clamp(96px, 10vw, 160px)/.84 var(--lp-display); letter-spacing: -.06em; color: var(--kuusi); font-variant-numeric: tabular-nums; }
.tl-out__unit { font: 700 clamp(22px, 1.9vw, 28px)/1.1 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); }
.tl-out__big--sm .tl-out__num { font-size: clamp(56px, 5vw, 78px); }
.tl-out__big--sm .tl-out__unit { font-size: clamp(19px, 1.5vw, 22px); }
.tl-out__empty { margin: 0; padding: 28px 0; font: 500 18px/1.5 var(--lp-body); color: var(--muted); }
.tl-out__spek { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(31,77,71,.2); }
.tl-out__note { margin: 14px 0 0; max-width: 34em; font: 500 15px/1.5 var(--lp-body); color: var(--muted); }
.tl-out__muted { margin: 0; font: 500 16.5px/1.5 var(--lp-body); color: var(--muted); }
.tl-out__both { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; padding: 16px 22px 16px 16px; border-radius: 18px; background: var(--kuusi); color: var(--kaura); font: 600 18.5px/1.35 var(--lp-body); }
.tl-out__both::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--kaura) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 17px no-repeat; }
.tl-out__warn { margin: 14px 0 0; padding: 13px 18px; border-radius: 14px; background: var(--attn-bg); color: var(--attn-fg); font: 500 15.5px/1.5 var(--lp-body); }
.tl-out__private { margin: 18px 0 0; font: 500 15px/1.4 var(--lp-body); color: var(--muted); }

/* the floor drawn like a plan: a solid outer wall, dashed 60 m² zones, a detector seen from below in each */
.tl-plan { margin-top: 28px; }
.tl-plan__floor + .tl-plan__floor { margin-top: 20px; }
.tl-plan__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font: 500 15px/1.3 var(--lp-body); color: var(--muted); }
.tl-plan__count { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r); background: var(--kuusi); color: var(--kaura); font: 700 15px/1 var(--lp-body); white-space: nowrap; }
.tl-plan__track { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 3px solid var(--kuusi); border-radius: 10px; background: #FFFEFA; box-shadow: 0 18px 30px -22px rgba(20,35,31,.45); }
.tl-cell { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; border-right: 2px dashed rgba(31,77,71,.42); }
.tl-cell:last-child { border-right: 0; }
.tl-cell__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--jakala); }
.tl-cell--f1 .tl-cell__fill { width: 10%; } .tl-cell--f2 .tl-cell__fill { width: 20%; }
.tl-cell--f3 .tl-cell__fill { width: 30%; } .tl-cell--f4 .tl-cell__fill { width: 40%; }
.tl-cell--f5 .tl-cell__fill { width: 50%; } .tl-cell--f6 .tl-cell__fill { width: 60%; }
.tl-cell--f7 .tl-cell__fill { width: 70%; } .tl-cell--f8 .tl-cell__fill { width: 80%; }
.tl-cell--f9 .tl-cell__fill { width: 90%; } .tl-cell--f10 .tl-cell__fill { width: 100%; }
/* the detector from below: body, test-button ring, and its light (Merkkivalo, the one place red belongs) */
.tl-cell__det { position: absolute; left: 50%; top: 42%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #FFFEFA; box-shadow: 0 0 0 2px var(--kuusi), 0 6px 10px -4px rgba(20,35,31,.4); }
.tl-cell__det::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid rgba(31,77,71,.5); }
.tl-cell__det::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--valo); }
.tl-cell__m2 { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 15px/1 var(--lp-body); color: var(--kuusi); }
.tl-plan__caption { margin: 14px 0 0; max-width: 32em; font: 500 15px/1.45 var(--lp-body); color: var(--muted); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tl-chips li { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 16px; border-radius: var(--r); border: 1.5px solid rgba(31,77,71,.3); background: #FFFEFA; font: 600 15.5px/1 var(--lp-body); color: var(--yo); }
.tl-chips b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--r); background: var(--kuusi); color: var(--kaura); font: 700 15px/1 var(--lp-display); }

/* ---------- the decree (Kaura): the head sticks while the quotes are read ---------- */
.tl-law { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.tl-law__head { position: sticky; top: calc(var(--navh) + 40px); }
.tl-law__intro { max-width: 30em; }
.tl-quotes { border-top: 2px solid var(--kuusi); }
.tl-quote { margin: 0; padding: clamp(26px, 2.6vw, 38px) 0; border-bottom: 1px solid rgba(31,77,71,.18); }
.tl-quote__ref { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-quote__ref::before { content: "§"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kuusi); color: var(--kaura); font: 700 19px/1 var(--lp-display); letter-spacing: 0; }
.tl-quote p { margin: 0; max-width: 38em; font: 500 19px/1.62 var(--lp-body); color: var(--yo); }
.tl-quote--key p { font: 600 clamp(25px, 2.4vw, 36px)/1.22 var(--lp-display); letter-spacing: -.022em; color: var(--kuusi); text-wrap: balance; }
.tl-law__more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 5vw, 96px); align-items: start; margin-top: clamp(52px, 5.4vw, 88px); }
.tl-not__title { margin: 0 0 16px; font: 700 clamp(22px, 1.8vw, 27px)/1.2 var(--lp-display); letter-spacing: -.015em; color: var(--yo); }
.tl-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tl-list li { position: relative; padding-left: 28px; font: 400 17.5px/1.6 var(--lp-body); color: #3F4D49; }
.tl-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 14px; height: 2px; border-radius: 1px; background: var(--kuusi); }
.tl-callout { margin: 0; padding: clamp(26px, 2.8vw, 42px); border-radius: 28px; background: var(--jakala); font: 600 clamp(20px, 1.75vw, 25px)/1.42 var(--lp-display); letter-spacing: -.012em; color: var(--kuusi); text-wrap: pretty; }

/* ---------- worked examples (Pinta): a typeset table and its notes ---------- */
.tl-ex { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: 40px clamp(40px, 5vw, 96px); align-items: start; }
.tl-table-wrap { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; font: 500 16.5px/1.4 var(--lp-body); color: var(--yo); }
.tl-table th, .tl-table td { padding: 16px 20px 16px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(31,77,71,.16); }
.tl-table th:last-child, .tl-table td:last-child { padding-right: 0; }
.tl-table thead th { padding-top: 0; padding-bottom: 12px; border-bottom: 2px solid var(--kuusi); font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); white-space: nowrap; }
.tl-table tbody th { font-weight: 600; }
.tl-table td.tl-num, .tl-table th.tl-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-table td.tl-num strong { font-weight: 700; color: var(--kuusi); }
.tl-table .tl-dim { margin-right: 2px; font: 500 15px/1 var(--lp-body); color: var(--muted); }
.tl-table tfoot th, .tl-table tfoot td { border-top: 2px solid var(--kuusi); border-bottom: 0; font-weight: 700; color: var(--kuusi); }
.tl-table--ex tbody th { font: 600 17.5px/1.35 var(--lp-body); }
.tl-table--ex td.tl-num strong { font: 700 34px/1 var(--lp-display); letter-spacing: -.035em; }
.tl-table--ex td.tl-num:last-child { font: 600 24px/1 var(--lp-display); letter-spacing: -.02em; color: var(--muted); }
.tl-ex-notes { border-top: 2px solid var(--kuusi); }
.tl-ex-notes p { margin: 0; padding: 20px 0; border-bottom: 1px solid rgba(31,77,71,.16); font: 500 16.5px/1.6 var(--lp-body); color: #3F4D49; }

/* ---------- minimum vs SPEK, bedrooms (Kuusi) ---------- */
.tl-vs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.tl-vs__col { padding-top: clamp(26px, 2.6vw, 38px); border-top: 2px solid var(--kaura); }
.tl-vs h2 { margin: 0 0 26px; -webkit-hyphens: manual; hyphens: manual; }
.tl-vs p { margin: 0; max-width: 36em; font: 400 18px/1.7 var(--lp-body); color: var(--on-kuusi-2); }
.tl-vs p + p { margin-top: 1em; }

/* ---------- whole building (Kaura): the tool in the same white frame ---------- */
.tl-bld { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border-radius: 28px; background: #FFFEFA; box-shadow: 0 50px 90px -56px rgba(20,35,31,.5); }
.tl-bld__in { min-width: 0; padding: clamp(24px, 2.8vw, 44px); border-right: 1px solid rgba(31,77,71,.12); }
.tl-bld__ta { display: block; width: 100%; min-height: 15rem; resize: vertical; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line-ctrl); background: var(--pinta); font: 500 16.5px/1.7 var(--lp-body); color: var(--yo); font-variant-numeric: tabular-nums; transition: border-color .2s; }
.tl-bld__ta:hover { border-color: var(--kuusi); }
.tl-bld__ta:focus { border-color: var(--kuusi); outline: 3px solid var(--kuusi); outline-offset: 2px; }
/* the example rows: muted, not the browser's #757575 (4.47:1 on Pinta) */
.tl-bld__ta::placeholder { color: var(--muted); opacity: 1; }
.tl-bld__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.tl-bld__out { min-width: 0; padding: clamp(24px, 2.8vw, 44px); }
.tl-bld__summary { margin: 0 0 18px; font: 700 clamp(20px, 1.7vw, 25px)/1.3 var(--lp-display); letter-spacing: -.015em; color: var(--kuusi); }
.tl-bld__msg { margin: 12px 0 0; font: 500 15px/1.5 var(--lp-body); color: var(--muted); }
.tl-bld__tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.tl-bld__print-head { display: none; }
.tl-bld__empty { display: grid; place-items: center; min-height: 15rem; margin: 0; padding: 28px; border-radius: 18px; border: 2px dashed var(--slot-line); background: var(--kaura); text-align: center; font: 500 16.5px/1.5 var(--lp-body); color: var(--muted); }
.tl-nojs { margin-top: 28px; padding: 22px 26px; border-radius: 22px; background: var(--jakala); font: 500 17px/1.6 var(--lp-body); color: var(--yo); }
.tl-nojs p { margin: 0 0 10px; }

/* ---------- FAQ (Pinta) and the tail: other tools, read next, sources (Jäkälä) ---------- */
.tl-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 5vw, 96px); align-items: start; }
.tl-faq-grid > h2 { position: sticky; top: calc(var(--navh) + 40px); }
.tl-faq-list .lp-faq { margin-top: 0; }
.tl-tail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 3vw, 44px); }
.tl-tail__head h2 { margin: 0; }
.tl-tail__head .lp-ulink { font-size: 17px; }
.tl-tail__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 96px); align-items: start; margin-top: clamp(56px, 6vw, 96px); }
.tl-tail--src { padding: clamp(64px, 6.6vw, 112px) 0; }
.tl-tail--src .tl-tail__foot { margin-top: 0; }
.tl-tail__foot > .tl-src:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(40px, 5vw, 96px); align-items: start; }
.tl-tail__foot > .tl-src:only-child > .pc-src__t { grid-row: span 2; }
.tl-tail__foot > .tl-src:only-child > .pc-author { grid-column: 2; }
.tl-also__label { margin: 0 0 16px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-also__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tl-also__list a { font-size: 18px; line-height: 1.45; }

/* =============================================================
   MODEL PLAN (/palovaroittimien-kunnossapitosuunnitelma)
   ============================================================= */
/* the plan as a paper object in the head (decorative) */
.tl-head--plan .lp-head__aside { display: flex; justify-content: center; }
.tl-paper { position: relative; width: 100%; max-width: 440px; aspect-ratio: 210 / 238; }
.tl-paper__sheet { position: absolute; inset: 0 24px 0 0; overflow: hidden; padding: 32px 32px 0; border-radius: 8px; background: #FFFEFB; color: var(--yo); box-shadow: 0 46px 70px -42px rgba(20,35,31,.55), 0 2px 6px rgba(20,35,31,.06); transform: rotate(-2deg); }
.tl-paper__sheet--back { inset: 18px 0 -14px 24px; padding: 0; background: #EFEBE2; transform: rotate(2.6deg); box-shadow: 0 30px 50px -36px rgba(20,35,31,.45); }
.tl-paper__kicker { margin: 0 0 6px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-paper__title { margin: 0 0 8px; padding-bottom: 14px; border-bottom: 2.5px solid var(--yo); font: 700 23px/1.1 var(--lp-display); letter-spacing: -.02em; color: var(--yo); }
.tl-paper__h { display: flex; gap: 9px; margin: 18px 0 9px; font: 700 15px/1.2 var(--lp-display); color: var(--yo); }
.tl-paper__h span { color: var(--kuusi); }
.tl-paper__row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; align-items: center; margin: 0 0 9px 21px; }
.tl-paper__row i { height: 7px; border-radius: var(--r); background: var(--viiva); }
.tl-paper__row b { height: 15px; border-radius: var(--r); background: var(--attn-bg); border-bottom: 2px dashed var(--okra-line); }
.tl-paper__row b.is-filled { background: var(--jakala); border-bottom: 2px solid var(--kuusi); }

/* why a plan (Kuusi): the three reasons as numbered rows */
.tl-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.tl-why__points { margin: 0; padding: 0; list-style: none; counter-reset: why; border-top: 2px solid var(--kaura); }
.tl-why__points li { counter-increment: why; display: grid; grid-template-columns: clamp(70px, 6.4vw, 104px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: clamp(22px, 2.3vw, 34px) 0; border-bottom: 1px solid rgba(241,243,242,.22); font: 500 clamp(18px, 1.4vw, 21px)/1.5 var(--lp-body); color: var(--kaura); }
.tl-why__points li::before { content: counter(why, decimal-leading-zero); font: 700 clamp(38px, 3.6vw, 56px)/1 var(--lp-display); letter-spacing: -.045em; color: var(--kaura); }
.tl-joel { display: flex; gap: 16px; align-items: flex-start; max-width: 40em; margin: 34px 0 0; font: 500 17px/1.6 var(--lp-body); color: var(--on-kuusi-2); }
.tl-joel__mono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kaura); color: var(--kuusi); font: 700 16px/1 var(--lp-display); letter-spacing: -.02em; }

/* the model (Jäkälä): the document as paper, the tools in a sticky column */
.tl-doc-head .pc-hint { margin: 0; }
.tl-doc-wrap { display: grid; grid-template-columns: minmax(0, 8.6fr) minmax(0, 3.4fr); gap: 40px clamp(32px, 4vw, 72px); align-items: start; }
.tl-doc { min-width: 0; padding: clamp(28px, 4.2vw, 68px) clamp(22px, 4.6vw, 76px) clamp(28px, 3.4vw, 54px); 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); }
.tl-doc :focus-visible { outline-color: var(--kuusi); }
.tl-doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 6px; padding-bottom: 22px; border-bottom: 3px solid var(--yo); }
.tl-doc__kicker { margin: 0 0 8px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-doc__title { margin: 0; font: 700 clamp(28px, 3vw, 44px)/1.04 var(--lp-display); letter-spacing: -.032em; color: var(--yo); overflow-wrap: break-word; }
.tl-doc__company { margin: 0; font: 600 19px/1.3 var(--lp-display); text-align: right; }
.tl-doc__sec { padding: 26px 0 22px; border-bottom: 1px solid rgba(31,77,71,.14); break-inside: avoid; }
.tl-doc__sec:last-of-type { border-bottom: 0; }
.tl-doc__h { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 700 21px/1.2 var(--lp-display); letter-spacing: -.015em; color: var(--yo); }
.tl-doc__n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--kuusi); color: var(--kaura); font: 700 15px/1 var(--lp-display); }
.tl-doc__rows { display: grid; gap: 10px; margin-left: 46px; }
.tl-doc__row { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.2fr); gap: 4px 20px; align-items: baseline; margin: 0; font: 500 17px/1.6 var(--lp-body); }
.tl-doc__k { font-weight: 600; color: var(--yo); }
.tl-doc__tip { margin: 16px 0 0 46px; font: 500 15px/1.55 var(--lp-body); color: var(--muted); }
.tl-doc__tip strong { margin-right: 8px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-doc__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 10px 0 0 46px; font: 600 15px/1.45 var(--lp-body); }
.tl-doc__links a { color: var(--kuusi); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31,77,71,.35); }
.tl-doc__foot { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(31,77,71,.14); font: 500 15px/1.5 var(--lp-body); color: var(--muted); }
/* a field to fill: amber with a dashed line (attention); filled: Jäkälä with a Kuusi line; print: a blank line */
.tl-f { 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; transition: background-color .15s; }
.tl-f:hover { background: #F7DFB4; }
.tl-f:focus { border-bottom-color: transparent; background: #fff; color: var(--yo); outline: 3px solid var(--kuusi); }
.tl-f.is-filled { border-bottom: 2px solid var(--kuusi); background: var(--jakala); color: var(--yo); }
.tl-doc-aside { position: sticky; top: calc(var(--navh) + 32px); display: grid; gap: 32px; }
.tl-doc-aside__box { display: grid; gap: 10px; }
.tl-doc-aside__box .lp-btn { width: 100%; }
.tl-doc-aside__title { margin: 0 0 12px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.tl-toc { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kuusi); }
.tl-toc li { border-bottom: 1px solid rgba(31,77,71,.16); }
.tl-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 10px 0; font: 500 15.5px/1.35 var(--lp-body); color: #3F4D49; transition: color .2s; }
.tl-toc a:hover { color: var(--kuusi); }
.tl-toc__n { font: 700 15px/1.5 var(--lp-display); color: var(--kuusi); }

/* board minutes and how to use it (Kuusi) */
.tl-minuse { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px clamp(40px, 5vw, 104px); align-items: start; }
.tl-minuse h2 { margin: 0; -webkit-hyphens: manual; hyphens: manual; }
.tl-minutes { margin-top: 32px; padding: clamp(24px, 2.8vw, 40px); border-radius: 10px; background: #FFFEFB; color: var(--yo); font: 500 18px/1.7 var(--lp-body); box-shadow: 0 40px 70px -44px rgba(0,0,0,.55); }
.tl-minutes :focus-visible { outline-color: var(--kuusi); }
.tl-minutes p { margin: 0; }
.tl-minutes p + p { margin-top: 12px; }
.tl-minutes__h { font-weight: 700; }
.tl-minutes-actions { margin-top: 20px; }
.tl-steps { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: tlstep; border-top: 2px solid var(--kaura); }
.tl-steps li { counter-increment: tlstep; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(241,243,242,.22); font: 500 18px/1.55 var(--lp-body); color: var(--kaura); }
.tl-steps li::before { content: counter(tlstep); font: 700 36px/1 var(--lp-display); letter-spacing: -.03em; color: var(--kaura); }
.tl-steps a { color: var(--kaura); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(241,243,242,.5); }
.tl-steps a:hover { text-decoration-color: currentColor; }

/* =============================================================
   HUB (/tyokalut)
   ============================================================= */
.tl-tools { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kuusi); }
.tl-tool { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 6fr) minmax(0, 4.6fr); gap: 24px clamp(28px, 3.6vw, 68px); align-items: center; padding: clamp(32px, 3.4vw, 56px) 0; border-bottom: 1px solid rgba(31,77,71,.18); }
.tl-tool__num { align-self: start; font: 700 clamp(64px, 7.2vw, 116px)/.8 var(--lp-display); letter-spacing: -.06em; color: var(--kuusi); }
.tl-tool__copy { min-width: 0; }
.tl-tool__step { margin: 0 0 14px; font: 600 16px/1.3 var(--lp-body); color: var(--muted); }
.tl-tool__step b { font-weight: 600; color: var(--kuusi); }
.tl-tool__title { margin: 0; font: 700 clamp(30px, 3vw, 46px)/1.05 var(--lp-display); letter-spacing: -.032em; color: var(--kuusi); text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
.tl-tool__link { color: inherit; }
.tl-tool__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.tl-tool__link:focus-visible { outline: none; }
.tl-tool:focus-within { outline: 3px solid var(--kuusi); outline-offset: 4px; border-radius: 16px; }
.tl-tool__for { margin: 12px 0 0; font: 600 16px/1.4 var(--lp-body); color: var(--kuusi); }
.tl-tool__desc { margin: 12px 0 0; max-width: 34em; font: 400 17.5px/1.6 var(--lp-body); color: #3F4D49; }
.tl-tool__cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 24px; padding: 0 18px 0 20px; border-radius: var(--r); border: 1.5px solid rgba(31,77,71,.35); font: 600 16px/1 var(--lp-body); color: var(--kuusi); transition: background-color .2s, color .2s, border-color .2s; }
.tl-tool__cta svg { width: 18px; height: 18px; transition: transform .25s var(--lp-ease); }
.tl-tool:hover .tl-tool__cta { background: var(--kuusi); border-color: var(--kuusi); color: var(--pinta); }
.tl-tool:hover .tl-tool__cta svg { transform: translateX(3px); }
.tl-tool:hover .tl-tool__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-color: rgba(31,77,71,.35); }
.tl-tool__art { min-width: 0; }

/* each tool's own output, small (decorative; aria-hidden) */
.tl-mini { position: relative; height: clamp(200px, 17vw, 252px); overflow: hidden; border-radius: 22px; background: var(--kaura); }
.tl-mini--count { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 0 clamp(20px, 2.4vw, 36px); }
.tl-mini__cap { font: 500 15px/1 var(--lp-body); color: var(--muted); }
.tl-mini--count .tl-plan__track { box-shadow: 0 16px 26px -20px rgba(20,35,31,.5); }
/* the calculator's result, as small as the calculator sets it (a big numeral read as the list's next number) */
.tl-mini__res { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font: 600 16px/1.2 var(--lp-body); color: var(--kuusi); }
.tl-mini__res b { font: 700 40px/.9 var(--lp-display); letter-spacing: -.04em; }
/* /tyokalut head: the four drawings as one small 2 x 2 sheet, scaled down as a whole (desktop only) */
.tl-hubart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; zoom: .56; }
.tl-hubart .tl-mini { box-shadow: 0 30px 50px -40px rgba(20,35,31,.5); background: #EDE6D8; }
.tl-mini--plan, .tl-mini--notice { display: flex; align-items: flex-end; justify-content: center; }
.tl-mini__sheet { display: flex; flex-direction: column; gap: 11px; width: 62%; height: 84%; padding: 20px 20px 0; border-radius: 8px 8px 0 0; background: #FFFEFB; box-shadow: 0 20px 40px -24px rgba(20,35,31,.5); }
.tl-mini--plan .tl-mini__sheet b { width: 64%; height: 10px; margin-bottom: 4px; border-radius: var(--r); background: var(--yo); }
.tl-mini--plan .tl-mini__sheet span { display: grid; grid-template-columns: 14px .8fr 1.2fr; gap: 8px; align-items: center; }
.tl-mini--plan i { font: 700 11px/1 var(--lp-display); font-style: normal; color: var(--kuusi); }
.tl-mini--plan em { height: 6px; border-radius: var(--r); background: var(--viiva); }
.tl-mini--plan u { height: 13px; border-radius: var(--r); border-bottom: 2px dashed var(--okra-line); background: var(--attn-bg); }
.tl-mini--plan u.is-f { border-bottom: 2px solid var(--kuusi); background: var(--jakala); }
.tl-mini--notice .tl-mini__sheet { align-items: center; gap: 8px; padding-top: 22px; text-align: center; }
.tl-mini__det { position: relative; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--yo); }
.tl-mini__det::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid rgba(20,35,31,.5); }
.tl-mini__det::after { content: ""; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--valo); }
.tl-mini__kick { font: 600 9.5px/1.2 var(--lp-body); letter-spacing: .14em; text-transform: uppercase; color: var(--kuusi); }
.tl-mini__head { max-width: 92%; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 2px solid var(--yo); font: 700 15px/1.05 var(--lp-display); text-transform: uppercase; color: var(--yo); }
.tl-mini--notice i { display: block; width: 82%; height: 5px; border-radius: var(--r); background: var(--viiva); }
.tl-mini--notice i.is-s { width: 60%; }
.tl-mini--log { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(18px, 2vw, 32px); }
.tl-mini--log span { display: grid; grid-template-columns: 1fr .6fr 1.3fr; gap: 10px; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(31,77,71,.1); background: #FFFEFA; font: 600 15px/1 var(--lp-body); color: var(--yo); }
.tl-mini--log span.is-h { height: 30px; border-radius: 12px 12px 0 0; background: var(--kuusi); }
.tl-mini--log span.is-h i { height: 6px; border-radius: var(--r); background: rgba(241,243,242,.45); }
.tl-mini--log span:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.tl-mini--log i { font-style: normal; }
.tl-mini--log b { width: 72px; height: 20px; border-radius: var(--r); }
.tl-mini--log b.is-ok { background: var(--kuusi); }
.tl-mini--log b.is-miss { background: var(--okra); }
.tl-mini--log { box-shadow: none; }

/* what the law says + the link snippet (Kuusi) */
.tl-hublaw__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 5vw, 96px); align-items: end; }
.tl-hublaw__law .lp-lead { max-width: 36em; }
.tl-hublaw__more { margin: 32px 0 0; font-size: 17px; }
.tl-embed { padding: clamp(24px, 2.6vw, 40px); border-radius: 28px; background: #FFFEFA; color: var(--yo); box-shadow: 0 50px 90px -50px rgba(0,0,0,.55); }
.tl-embed :focus-visible { outline-color: var(--kuusi); }
.tl-embed__title { margin: 0; font: 700 clamp(22px, 1.9vw, 28px)/1.15 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); }
.tl-embed__p { margin: 10px 0 0; font: 500 16px/1.55 var(--lp-body); color: #3F4D49; }
.tl-embed__label { display: block; margin: 22px 0 8px; font: 600 15.5px/1.3 var(--lp-body); color: var(--yo); }
.tl-embed__code { display: block; width: 100%; min-height: 8.4rem; resize: none; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line-ctrl); background: var(--kaura); font: 500 15px/1.6 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--yo); }
.tl-embed .lp-btn { margin-top: 14px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1023px) {
    .tl-law, .tl-law__more, .tl-ex, .tl-vs, .tl-faq-grid, .tl-tail__foot, .tl-why, .tl-minuse, .tl-hublaw__grid { grid-template-columns: minmax(0, 1fr); }
    .tl-law__head, .tl-faq-grid > h2 { position: static; }
    .tl-tail__foot > .tl-src:only-child { grid-template-columns: minmax(0, 1fr); }
    .tl-tail__foot > .tl-src:only-child > .pc-author { grid-column: auto; }
    .tl-doc-wrap { grid-template-columns: minmax(0, 1fr); }
    .tl-doc-aside { position: static; order: -1; }
    .tl-doc-aside__box { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    .tl-doc-aside__toc { display: none; }
    .tl-bld { grid-template-columns: minmax(0, 1fr); }
    .tl-bld__in { border-right: 0; border-bottom: 1px solid rgba(31,77,71,.12); }
    .tl-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "num num" "copy art"; }
    .tl-tool__num { grid-area: num; }
    .tl-tool__copy { grid-area: copy; }
    .tl-tool__art { grid-area: art; }
    .tl-head--plan .lp-head__aside { justify-content: flex-start; }
    .tl-paper { max-width: 380px; }
}
@media (max-width: 899px) {
    .tl-calc { grid-template-columns: minmax(0, 1fr); }
}
/* /montako-palovaroitinta on a phone: the calculator right after the H1; the "Lyhyesti" answer below it */
.tl-brief-m { display: none; }
@media screen and (max-width: 767px) {
    .tl-head:has(+ .tl-calc-sect) .lp-head__aside { display: none; }
    .tl-head:has(+ .tl-calc-sect) { padding-bottom: 36px; }
    .tl-brief-m { display: block; margin: 0 0 clamp(48px, 9vw, 72px); }
}
@media (max-width: 767px) {
    .tl-tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "copy" "art"; gap: 20px; }
    .tl-tool__num { font-size: 64px; }
    .tl-tool__art { max-width: 460px; }
    .tl-doc__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tl-doc__company { text-align: left; }
    .tl-doc__rows, .tl-doc__tip, .tl-doc__links { margin-left: 0; }
    .tl-doc__row { grid-template-columns: minmax(0, 1fr); }
    .tl-paper { display: none; }
    .tl-head--hub .lp-head__aside { display: none; }
}
@media (max-width: 639px) {
    .tl-calc { border-radius: 22px; }
    .tl-calc__in, .tl-calc__out { padding: 24px 18px; }
    .tl-input, .tl-select { max-width: none; }
    .tl-cell { width: 74px; height: 74px; }
    .tl-cell__det { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
    .tl-cell__det::before { inset: 8px; }
    .tl-cell__det::after { top: 4px; right: 5px; width: 5px; height: 5px; }
    .tl-cell__m2 { bottom: 5px; font-size: 15px; }
    .tl-out__both { font-size: 17px; }
    .tl-quote--key p { font-size: 24px; }
    .tl-table th, .tl-table td { padding: 14px 12px 14px 0; }
    .tl-table thead th, .tl-table thead th.tl-num { white-space: normal; font-size: 15px; }
    .tl-table th.tl-num, .tl-table td.tl-num { width: 5.5rem; }
    .tl-table td.tl-num .tl-dim { display: block; margin: 0 0 4px; }
    .tl-table--ex tbody th { font-size: 16px; }
    .tl-table--ex td.tl-num strong { font-size: 28px; }
    .tl-table--ex td.tl-num:last-child { font-size: 20px; }
    .tl-bld { border-radius: 22px; }
    .tl-bld__in, .tl-bld__out { padding: 22px 18px; }
    .tl-embed { border-radius: 22px; }
    .tl-embed__code { min-height: 8rem; }
    .tl-doc { padding: 26px 18px 22px; }
    .tl-doc__h { font-size: 19px; }
    .tl-doc__title { font-size: 22px; }
    .tl-mini { height: 190px; }
    .tl-minutes { font-size: 17px; }
    .tl-steps li { grid-template-columns: 44px minmax(0, 1fr); font-size: 17px; }
    .tl-steps li::before { font-size: 30px; }
    .tl-why__points li { grid-template-columns: 64px minmax(0, 1fr); }
    .tl-doc-aside__box .lp-btn, .tl-minutes-actions .lp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-input, .tl-select, .tl-seg label, .tl-tool__cta, .tl-tool__cta svg, .tl-f, .tl-toc a, .tl-bld__ta { transition: none; }
}

/* =============================================================
   PRINT
   The plan prints as the document only; the calculator prints its title, inputs, result and the count rule;
   the building table prints when html.tl-print-building is set by its print button.
   ============================================================= */
@media print {
    @page { size: A4; margin: 14mm; }
    body:has(.tl-doc), body:has(.tl-bld) { background: #fff; }
    .lp-band { padding: 0 !important; background: #fff !important; }
    .lp-wrap { max-width: none !important; padding: 0 !important; }

    /* the model plan */
    body:has(.tl-doc) .nav, body:has(.tl-doc) .nav__mobile, body:has(.tl-doc) .skip-link,
    body:has(.tl-doc) .flash, body:has(.tl-doc) .footer,
    body:has(.tl-doc) main > :not(.tl-doc-sect),
    .tl-doc-aside, .tl-doc-sect .tl-doc-head, .tl-doc__tip, .tl-doc__links { display: none !important; }
    .tl-doc-wrap { display: block; }
    .tl-doc { border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 11pt; color: #000; background: #fff; }
    .tl-doc__head { border-bottom-color: #000; }
    .tl-doc__title { font-size: 22pt; }
    .tl-doc__kicker { color: #000; }
    .tl-doc__n { width: auto; height: auto; background: none; color: #000; }
    .tl-doc__sec { padding: 4mm 0 3mm; }
    .tl-doc__row { grid-template-columns: 38% 1fr; font-size: 10.5pt; }
    .tl-doc__rows { margin-left: 8mm; }
    .tl-f, .tl-f.is-filled { background: none; border: 0; border-radius: 0; padding: 0; color: inherit; }
    /* an unfilled field prints as a blank line to write on by hand */
    .tl-js .tl-f:not(.is-filled) { display: inline-block; min-width: 60%; border-bottom: 1px solid #555; color: transparent; }
    .tl-doc__foot { color: #444; }

    /* the single-apartment calculator: title, inputs with the result and the count rule on one A4 */
    html:not(.tl-print-building) body:has(.tl-calc) { background: #fff; }
    html:not(.tl-print-building) body:has(.tl-calc) .nav,
    html:not(.tl-print-building) body:has(.tl-calc) .nav__mobile,
    html:not(.tl-print-building) body:has(.tl-calc) .skip-link,
    html:not(.tl-print-building) body:has(.tl-calc) .flash,
    html:not(.tl-print-building) body:has(.tl-calc) .footer,
    html:not(.tl-print-building) body:has(.tl-calc) main > :not(.tl-head):not(.tl-calc-sect):not(.tl-law-sect),
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .lp-crumbs,
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .lp-eyebrow,
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .lp-head__aside,
    html:not(.tl-print-building) .tl-calc__submit,
    html:not(.tl-print-building) .tl-calc__note,
    html:not(.tl-print-building) .tl-calc .tl-hint,
    html:not(.tl-print-building) .tl-law-sect .tl-law__head,
    html:not(.tl-print-building) .tl-law-sect .tl-law__more { display: none !important; }
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head { padding: 0 0 5mm !important; }
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .lp-head__grid { display: block; }
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .pc-h1 { font-size: 20pt; color: #000; }
    html:not(.tl-print-building) body:has(.tl-calc) .tl-head .pc-h1__sub { font-size: 12pt; }
    html:not(.tl-print-building) .tl-calc { box-shadow: none; border: 1px solid #bbb; border-radius: 4mm; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    html:not(.tl-print-building) .tl-calc__out { background: #fff; border-left: 1px solid #bbb; }
    html:not(.tl-print-building) .tl-calc__in, html:not(.tl-print-building) .tl-calc__out { padding: 5mm; }
    html:not(.tl-print-building) .tl-calc__title { font-size: 13pt; }
    html:not(.tl-print-building) .tl-calc .tl-out__num { font-size: 40pt; }
    html:not(.tl-print-building) .tl-calc .tl-cell { width: 4.6rem; height: 4.6rem; }
    html:not(.tl-print-building) .tl-calc .tl-cell__det { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
    html:not(.tl-print-building) .tl-calc .tl-cell__det::before { inset: 7px; }
    /* backgrounds do not print: the light-on-dark pieces turn into black outlines */
    html:not(.tl-print-building) .tl-out__both, html:not(.tl-print-building) .tl-plan__count, html:not(.tl-print-building) .tl-chips b { background: none; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
    html:not(.tl-print-building) .tl-seg input:checked + label { background: none; color: #000; box-shadow: inset 0 0 0 2px #000; }
    html:not(.tl-print-building) body:has(.tl-calc) main { zoom: 0.9; }
    html:not(.tl-print-building) .tl-law-sect { padding-top: 5mm !important; }
    html:not(.tl-print-building) .tl-law-sect .tl-law { display: block; }
    html:not(.tl-print-building) .tl-law-sect .tl-quotes { border-top: 0; }
    html:not(.tl-print-building) .tl-law-sect .tl-quote { padding: 0; border: 0; break-inside: avoid; }
    html:not(.tl-print-building) .tl-law-sect .tl-quote p { font-size: 11pt; color: #000; }
    /* only the count rule (1 § 1 mom.) is printed; the placement quote stays on screen */
    html:not(.tl-print-building) .tl-law-sect .tl-quote + .tl-quote { display: none; }

    /* the building table */
    html.tl-print-building body > *:not(main),
    html.tl-print-building main > *:not(.tl-bld-sect),
    html.tl-print-building .tl-bld-sect .lp-shead,
    html.tl-print-building .tl-bld__in,
    html.tl-print-building .tl-bld__tools,
    html.tl-print-building .tl-nojs { display: none !important; }
    html.tl-print-building .tl-bld { display: block; margin: 0; box-shadow: none; border-radius: 0; background: #fff; }
    html.tl-print-building .tl-bld__out { padding: 0; }
    html.tl-print-building .tl-bld__print-head { display: block; margin-bottom: 6mm; }
    html.tl-print-building .tl-bld__print-head h2 { margin: 0 0 2mm; font: 700 18pt/1.2 var(--lp-display); color: #000; }
    html.tl-print-building .tl-bld__print-head p { font-size: 9.5pt; color: #333; }
    html.tl-print-building .tl-table-wrap { overflow: visible; }
    html.tl-print-building .tl-table { font-size: 10pt; color: #000; }
    html.tl-print-building .tl-table th, html.tl-print-building .tl-table td { padding: 2mm 3mm; border-bottom: 1px solid #bbb; }
}

/* 320-399 px: "Kunnossapitosuunnitelma" is one word wider than the document card at 22 px. */
@media screen and (max-width: 399px) {
    .tl-doc__title { font-size: 19px; }
}