/* ==========================================================================
SALME KORTERID — esiotsa lisad
Ehitab noor-kalamaja.css peale: hinnakirja tabel WordPressis ja korteri leht.
Nimeruum: slm- (nk- klassid tulevad põhistiililehest)
========================================================================== */
/* --- Pealkirjakiri -------------------------------------------------------
@font-face ja --display tulevad noor-kalamaja.css-ist. Clearface on
Cormorantist tummisem, nii et kirjavahe läheb pisut kitsamaks. */
body.slm-front .nk-h1,
body.slm-front .nk-h2,
body.slm-front .nk-h3,
body.slm-front .nk-h4,
body.slm-front .nk-cell-id,
body.slm-front .slm-naabrid strong{ letter-spacing:-.01em; }
/* --- Teemaga sobitamine ---------------------------------------------------
Plokiteema piirab sisulaiust ja lisab igale grupile äärise. Meie sektsioon
tahab kogu akna laiust — nk-wrap hoolitseb ise max-width'i ja veeriste eest. */
body.slm-front{ background:var(--paper); }
body.slm-front .wp-site-blocks > main,
body.slm-front main > .wp-block-group,
body.slm-front .wp-block-post-content,
body.slm-front .entry-content{
max-width:none !important;
padding-left:0 !important;
padding-right:0 !important;
}
body.slm-front .slm-section,
body.slm-front .slm-korter{ max-width:none !important; width:100%; margin-block:0; }
/* Hinnakirja tabel ja korteri andmed tahavad kogu akna laiust — aga ainult
need. Varem kehtis reegel kogu body kohta ja venitas laiaks ka päise,
jaluse ja lehe enda sektsioonid, mis mujal saidil hoiavad 1240 px mõõtu. */
/* Servapolster on sama `--gut`, mis ülaribal, nii et sisu vasak serv
joondub logoga (kuni 23.09.2026 oli siin kitsam clamp(20px,3vw,56px) ja
sisu algas logost vasakul). */
body.slm-front .slm-section > .nk-wrap,
body.slm-front .slm-korter > .nk-wrap{ max-width:none; padding-inline:var(--gut); }
body.slm-front .slm-section,
body.slm-front .slm-korter{ padding-block:clamp(48px,6vw,96px); }
/* Korteri lehe ülaosa: ülariba (87 px) jääb sisu peale, nii et 48–96 px
polstriga jooksis murdmenüü telefonis riba alla. Sama ülapolster, mis
igal alamlehel (`--pea-ules`, 104–124 px). */
body.slm-front .slm-korter{ padding-top:var(--pea-ules); }
/* Teema kordab lehe pealkirja, mille meie sektsioon juba ütleb. */
body.slm-front .wp-block-post-title{ display:none; }
/* --- Hinnakirja tabel ----------------------------------------------------- */
.slm-tr{ cursor:pointer; }
.slm-tr .nk-cell-id{ text-decoration:none; }
.slm-tr[data-staatus="muudud"] td{ color:var(--muted); }
.slm-tr[data-staatus="muudud"] .nk-cell-id{ color:var(--muted); }
.slm-tr[hidden]{ display:none; }
/* Maja pisipilt, mis järgib kursorit (front.js `eelvaade()`). 23.09.2026:
korteriplaani asemel maja fassaad ja pool endisest suurusest.
Kast on `fixed` ja liigub `transform`-iga; nähtav alles siis, kui pilt
on laetud, et tühja kasti ei vilguks. */
.slm-hpilt{
position:fixed; left:0; top:0; z-index:90;
width:clamp(110px,10vw,150px);
padding:6px; background:var(--paper);
border:1px solid var(--line);
box-shadow:0 18px 44px -18px rgba(40,34,26,.35);
pointer-events:none;
opacity:0; visibility:hidden;
transition:opacity .2s var(--ease), visibility 0s linear .2s;
}
.slm-hpilt.is-nahtav.is-laetud{
opacity:1; visibility:visible;
transition:opacity .2s var(--ease);
}
.slm-hpilt img{ display:block; width:100%; height:auto; }
.slm-kysi{ color:var(--muted); }
.slm-tyhi{ padding:40px 0; color:var(--muted); font-size:15px; }
/* --- Korteri leht --------------------------------------------------------- */
.slm-krumb{
font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted); margin:0 0 clamp(24px,3vw,44px);
}
.slm-krumb a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; }
.slm-krumb a:hover{ border-color:var(--ink); }
.slm-krumb span{ margin:0 10px; }
.slm-korter-grid{
display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr);
gap:clamp(32px,5vw,80px); align-items:start;
}
.slm-korter-t{ margin-bottom:.2em; }
/* Ametlik majanumber elab nime all kahvatumalt — müügis käivad majad
oma nimede järgi, aadressi on vaja ainult dokumentide jaoks. */
.slm-korter-aadress{
margin:0 0 20px; color:var(--muted);
font-family:var(--sans); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
}
/* Korteri lehel on staatus üks kahest esimesest asjast, mida vaadatakse. */
.slm-korter-info > .nk-tag{ margin-bottom:28px; font-size:12.5px; padding:9px 20px; }
.slm-andmed{ width:100%; border-collapse:collapse; margin:0 0 30px; }
.slm-andmed th{
text-align:left; font-weight:400; width:42%;
font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
padding:5px 12px 5px 0; vertical-align:baseline;
}
.slm-andmed td{ padding:5px 0; font-size:15.5px; color:var(--ink); }
.slm-alap{
font-family:var(--sans); font-weight:400;
font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
color:var(--muted); margin:0 0 16px;
}
.slm-omadused{
list-style:none; margin:0 0 34px; padding:0;
display:grid; grid-template-columns:repeat(3,1fr); gap:26px 18px;
}
.slm-omadused li{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.slm-omadused li span:last-child{
font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.4;
}
.slm-ikoon{ color:var(--taupe); display:block; }
.slm-kirjeldus{ margin:0 0 30px; color:var(--ink-2); font-size:15.5px; }
.slm-kirjeldus p{ margin:0 0 1em; }
.slm-cta{ margin:0 0 44px; }
/* Korteriplaan on püstine joonis — piirame kõrgust, mitte laiust, nii et see
püsib ekraanil tervikuna ega venita end laial monitoril üle. */
.slm-korter-plaan{ display:flex; flex-direction:column; align-items:flex-start; }
.slm-korter-plaan a{ display:block; max-width:100%; }
.slm-korter-plaan .slm-plaan-link{ cursor:zoom-in; }
.slm-korter-plaan .slm-plaan-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.slm-korter-plaan img{ width:auto; max-width:100%; max-height:min(1150px, 88vh); }
/* Mitmekorruseline korter: korrusenupud plaani kohal. Sama keel mis
korruste virnal hinnalehel, ainult pikali. */
.slm-plaani-korrused{ display:flex; margin:0 0 18px; }
.slm-plaani-korrus{
appearance:none; cursor:pointer;
display:flex; align-items:baseline; gap:8px; padding:9px 16px;
background:var(--paper-2); border:1px solid var(--line); margin-left:-1px;
color:var(--ink-2); font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slm-plaani-korrus:first-child{ margin-left:0; border-radius:2px 0 0 2px; }
.slm-plaani-korrus:last-child{ border-radius:0 2px 2px 0; }
.slm-plaani-korrus .slm-korrus-nr{ letter-spacing:0; }
/* Nupurida on `align-items:baseline` ja baasjoone paneb paika suur number.
Nimega vahekaardil — „Katuseterrass" — numbrit ei ole, nii et tema kiri
istus naabritest 4,5 px kõrgemal. Nähtamatu null-laiusega tühik sama
kirja mõõtudes annab talle sama baasjoone, ilma et midagi juurde
joonistataks. */
.slm-plaani-nimi::before{
content:"\200B";
font-family:var(--display); font-weight:300; font-size:20px; line-height:1;
}
.slm-plaani-korrus:hover{ background:rgba(185,164,123,.18); }
.slm-plaani-korrus.is-aktiivne{ position:relative; background:var(--ink); border-color:var(--ink); color:var(--white); }
.slm-plaani-korrus:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; position:relative; z-index:1; }
.slm-plaani-vaade[hidden]{ display:none; }
.slm-plaan-puudub{
padding:clamp(60px,12vw,140px) 30px; text-align:center; color:var(--muted);
border:1px solid var(--line); background:var(--paper-2); font-size:15.5px;
}
/* --- Majast -------------------------------------------------------------- *
Maja fassaadipilt ja kirjeldus Hoonete lehelt (SLM_Frontend::maja_plokk).
Pilt vasakul 5:4, nagu Hoonete lehel; tekst paremal, maja nimi sama
mõõduga kui seal (.nk-house-n). */
.slm-maja{ margin-top:clamp(56px,8vw,110px); }
.slm-maja-grid{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,4.5vw,80px); align-items:center;
}
.slm-maja-pilt{ margin:0; aspect-ratio:5/4; }
.slm-maja-nimi{
margin:0; font-family:var(--display); font-weight:300;
font-size:clamp(30px,3vw,44px); line-height:1.1; color:var(--ink);
letter-spacing:-.01em;
}
.slm-maja-aadress{
margin:10px 0 0; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted);
}
.slm-maja-t{ margin:22px 0 0; max-width:48ch; font-size:16px; line-height:1.7; color:var(--ink-2); }
.slm-maja-l{ margin:28px 0 0; }
@media (max-width:900px){
.slm-maja-grid{ grid-template-columns:1fr; gap:22px; }
}
/* --- Naabrid -------------------------------------------------------------- */
/* Jooneta, nagu ka „Võimalik juurde valida" — vahe eraldab ise.
Jooned on lahtrite ääred, mitte ruudustiku taust, mis vahedest läbi
paistab: taustaga jäi viimase rea tühi osa tumedaks kastiks (23.09.2026
kliendi märkus). Nüüd on tühjas osas lihtsalt lehe paber. Ülemine ja
vasak joon on ümbrisel, parem ja alumine iga lahtri küljes. */
.slm-naabrid{ margin-top:clamp(56px,8vw,110px); }
.slm-naabrid ul{ list-style:none; margin:0; padding:0; display:grid; gap:0;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
border-top:1px solid var(--line); border-left:1px solid var(--line); }
.slm-naabrid li{
background:var(--paper);
border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* „Kõik korterid" on nupp keset lehte, mitte väike link ruudustiku all. */
.slm-naabrid-koik{ margin:clamp(32px,4vw,52px) 0 0; }
.slm-naabrid li a{
display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:14px; height:100%;
padding:16px 18px 18px;
text-decoration:none;
}
/* Pisipilt on märgistuses viimane, `column-reverse` toob ta kaardi peale;
`flex-end` hoiab sisu kaardi ülaservas (reversiga on see ülal).
Tekstiosa on kaks veergu: nimi ja pind vasakul üksteise all, staatus
teises veerus paremal üleval. */
.slm-naabrid-tekst{
display:grid; grid-template-columns:minmax(0,1fr) auto;
gap:6px 16px; align-items:start;
}
.slm-naabrid-pea{ display:contents; }
.slm-naabrid strong{ grid-column:1; grid-row:1; font-family:var(--display); font-weight:300; font-size:22px; }
/* 23.09.2026: pinnarida on kogu kaardi laiune ja silt ainult nime kõrval —
kahte rida hõlmav silt söös pinnarealt laiuse ja „59,5 m²" murdus.
Silt ise väiksema polstriga (7/16 → 4/11 px), et kaart oleks rahulikum. */
.slm-naabrid-info{ grid-column:1 / -1; grid-row:2; font-size:15.5px; color:var(--muted); }
.slm-naabrid .nk-tag{
grid-column:2; grid-row:1; align-self:center;
padding:4px 11px; line-height:1.4; letter-spacing:.12em;
}
/* Plaani pisipilt (1.24.0), kaardi laiune. */
.slm-naabrid-pilt{ display:block; height:120px; }
.slm-naabrid-pilt img{
display:block; width:100%; height:100%; object-fit:contain;
transition:transform .5s var(--ease);
}
.slm-naabrid li a:hover .slm-naabrid-pilt img{ transform:scale(1.06); }
/* Hõljumistoon on kihina pildi ja teksti peal, mitte taustal — taustal
jäi ta plaanipildi alla peitu (1.24.3). */
.slm-naabrid li a{ position:relative; }
.slm-naabrid li a::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:rgba(185,164,123,.14); opacity:0;
transition:opacity .3s var(--ease);
}
.slm-naabrid li a:hover::after{ opacity:1; }
.slm-naabrid abbr{ text-decoration:none; cursor:inherit; }
/* Telefonis kaks veergu ja lühem kaart. Pinnarida on suurem kui enne
(12,5 → 14 px). Kui staatus nime kõrvale ei mahu („Broneeritud"
pooles laiuses ei mahu), läheb ta nime alla, pinna kohale. */
@media (max-width:600px){
.slm-naabrid ul{ grid-template-columns:1fr 1fr; }
.slm-naabrid li a{ gap:10px; padding:13px 14px 15px; }
.slm-naabrid-pilt{ height:96px; }
.slm-naabrid-tekst{ display:flex; flex-direction:column; gap:3px; }
.slm-naabrid-pea{
display:flex; flex-wrap:wrap; align-items:center;
gap:6px 10px;
}
.slm-naabrid strong{ font-size:20px; margin-right:auto; white-space:nowrap; }
.slm-naabrid .nk-tag{
margin:0;
padding:4px 9px; font-size:11.5px; letter-spacing:.12em;
}
}
/* --- Kitsas ekraan -------------------------------------------------------- */
@media (max-width:900px){
.slm-korter-grid{ grid-template-columns:1fr; }
.slm-korter-plaan{ order:-1; }
}
/* --- Korrusevalija ja korruseplaan ----------------------------------------
Joonis on lehe laiune ja selle ülemine vasak nurk on tühi — pealkiri ja
korruste virn istuvad sinna peale. Mõlemad on joondatud vasaku maja
välisseinaga, mis on joonisel 1,13% laiusest; protsent hoiab joonduse
paigas ka siis, kui joonis skaleerub. */
.slm-plaan{
--plaan-serv:1.13%;
display:grid; grid-template-columns:100%;
margin:0 0 clamp(20px,2.5vw,40px);
}
/* Kaks kihti samas ruudustikulahtris: joonis all, pealkiri ja virn peal. */
.slm-plaan-lava{ grid-area:1/1; position:relative; min-width:0; }
.slm-plaan-esi{
grid-area:1/1; z-index:2; align-self:start;
display:flex; flex-direction:column; align-items:flex-start;
padding:clamp(4px,1vw,18px) 0 0 var(--plaan-serv);
pointer-events:none; /* joonis jääb pealkirja kõrval klõpsatavaks */
}
.slm-plaan-pealkiri{ margin:0 0 clamp(22px,3vw,46px); }
/* Korruste virn */
.slm-korrused{ display:flex; flex-direction:column; gap:0; pointer-events:auto; } /* 23.09.2026: gap 1 px andis igale nupule topeltjoone */
.slm-korrused-silt{
font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
color:var(--muted); margin:0 0 10px;
}
.slm-korrus{
appearance:none; cursor:pointer; text-align:left;
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
min-width:88px; padding:9px 13px;
background:var(--paper-2); border:1px solid var(--line); border-bottom:0;
color:var(--ink-2); font-family:var(--sans);
transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slm-korrus:first-of-type{ border-radius:2px 2px 0 0; }
.slm-korrus:last-of-type{ border-bottom:1px solid var(--line); border-radius:0 0 2px 2px; }
/* Clearface'i numbrid istuvad optiliselt kõrgel — paar pikslit alla, siis on
number ja arv ühel joonel ka silmale, mitte ainult baasjoonel. */
.slm-korrus-nr{
font-family:var(--display); font-weight:300; font-size:20px; line-height:1;
position:relative; top:2px;
}
.slm-korrus-arv{ font-size:12px; letter-spacing:.12em; color:var(--muted); }
.slm-korrus:hover{ background:rgba(185,164,123,.18); }
.slm-korrus.is-aktiivne{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.slm-korrus.is-aktiivne + .slm-korrus{ border-top-color:var(--ink); }
.slm-korrus.is-aktiivne .slm-korrus-arv{ color:rgba(255,255,255,.7); }
.slm-korrus:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; z-index:1; }
/* Korrus, mille plaani veel pole. */
.slm-korrus--tyhi .slm-korrus-nr{ color:var(--muted); }
.slm-korrus--tyhi.is-aktiivne .slm-korrus-nr{ color:var(--white); }
.slm-plaan-ootel{
margin:0; padding:clamp(52px,10vw,120px) 30px; text-align:center;
border:1px solid var(--line); background:var(--paper-2);
color:var(--muted); font-size:15.5px;
}
/* Plaanileht: joonise taust on juba lehe oma (#F7F2E9) ja toad on taotluslikult
valged, seega segureziimi siin vaja ei ole — multiply tumendaks tausta ja
sööks toad kreemiks. Mõõdud ![]()
-i küljes hoiavad kohta juba enne pildi
laadimist, muidu vajuks lava kokku ja SVG satuks nulli kõrgusele. */
.slm-korrus-vaade{ position:relative; }
.slm-korrus-vaade[hidden]{ display:none; }
.slm-plaan-taust{ display:block; width:100%; height:auto; }
/* SVG katab pildi täpselt — mõlemal on sama viewBox ja kuvasuhe. */
.slm-plaan-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* Korterikuju: vaikimisi nähtamatu, hiire all täidis + ääris.
Puhastatud joonisel on iga korter üks kuju, nii et äärisjoon järgib silueti
välisperimeetrit ega joonista sisemisi seinu üle. non-scaling-stroke hoiab
joone ühe paksusega, ükskõik kui suureks joonis venib. */
.slm-ala{
cursor:pointer; outline:none;
fill:var(--taupe-dark); fill-opacity:0;
stroke:var(--taupe-dark); stroke-opacity:0;
stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke;
transition:fill-opacity .25s var(--ease), stroke-opacity .25s var(--ease);
}
/* Korter_19 on rühm — värvi kannab siis laps, mitte rühm ise. */
.slm-ala *{
fill:inherit; fill-opacity:inherit;
stroke:inherit; stroke-width:inherit; stroke-opacity:inherit;
vector-effect:non-scaling-stroke;
}
.slm-ala:hover,
.slm-ala:focus-visible,
.slm-ala.is-aktiivne{ fill-opacity:.22; stroke-opacity:1; }
.slm-ala[data-staatus="broneeritud"]{ fill:#DABD99; stroke:#DABD99; }
.slm-ala[data-staatus="muudud"]{ fill:#A97373; stroke:#A97373; }
/* Klaviatuurifookus vajab piiri ka siis, kui hiirt pole. */
.slm-ala:focus-visible{ fill-opacity:.3; }
/* Marker — käib kursoriga kaasa, jääb lava sisse. */
.slm-marker{
position:absolute; z-index:3; top:0; left:0; pointer-events:none;
display:grid; gap:3px; min-width:132px; padding:12px 15px 13px;
background:var(--ink); color:var(--white);
box-shadow:0 8px 26px rgba(51,48,42,.28);
font-family:var(--sans); font-size:13.5px; line-height:1.35;
transform:translate(-50%,calc(-100% - 14px));
opacity:0; transition:opacity .18s var(--ease);
}
.slm-marker.on-nahtav{ opacity:1; }
.slm-marker[hidden]{ display:none; }
.slm-marker::after{
content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px;
background:var(--ink); transform:translateX(-50%) rotate(45deg);
}
.slm-marker-nr{ font-family:var(--display); font-weight:300; font-size:21px; line-height:1.1; }
.slm-marker-read{ color:rgba(255,255,255,.72); }
.slm-marker-hind{ letter-spacing:.02em; }
.slm-marker-vaata{
margin-top:5px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--gold);
}
/* --- Ülaveeris ------------------------------------------------------------
Teema lükkab sisu allapoole kolmes kohas. Lehe algusõhu annab sektsioon
ise, nii et teema oma jääks lihtsalt tühjaks. Ainult hinnakirja leht —
korteri lehel on ülal murdmenüü, mis tahab õhku. */
body.slm-hinnad .wp-site-blocks > main{ margin-top:0 !important; }
body.slm-hinnad main > .wp-block-group{ padding-top:0 !important; }
body.slm-hinnad .entry-content{ margin-top:0 !important; }
/* Kleepuv ülariba katab lehe algust — korruseplaan vajab enda kohale õhku,
muidu algab leht otse riba alt. */
body.slm-hinnad .slm-section{ padding-block-start:calc(clamp(18px,2.2vw,40px) + 100px); }
/* Puutetundlikul ekraanil ei ole hõljumist — esimene puude näitab markerit,
teine avab korteri (JS hoolitseb). Kitsal ekraanil ei ole joonisel ka ruumi
pealkirja all hoida: kihid lähevad üksteise alla. */
@media (max-width:860px){
.slm-plaan-esi{
grid-area:auto; padding:0 0 18px; align-items:stretch;
}
.slm-plaan-lava{ grid-area:auto; }
.slm-korrused{ flex-direction:row; flex-wrap:wrap; gap:0; }
.slm-korrused-silt{ flex-basis:100%; }
.slm-korrus{
min-width:0; flex:1 1 60px; justify-content:center; gap:8px; padding:10px 11px;
border:1px solid var(--line); border-right:0;
}
.slm-korrus:first-of-type{ border-radius:2px 0 0 2px; }
.slm-korrus:last-of-type{ border-right:1px solid var(--line); border-radius:0 2px 2px 0; }
.slm-korrus.is-aktiivne + .slm-korrus{ border-left-color:var(--ink); }
.slm-plaan-esi{ padding-left:0; }
/* Rida käib 1 → 4, mitte 4 → 1 (23.09.2026). Märgistuses on ülemine
korrus esimene — nii on see laual püstises virnas õige —, seega
pööratakse rida siin `row-reverse`-iga. „Korrus" silt on terve rea
laiune ja jääb omaette esimesele reale.
Ääred käivad nüüd teistpidi: iga nupp joonistab parema ääre, vasaku
ainult visuaalselt esimene (märgistuses viimane). Aktiivse nupu
vasakpoolne naaber on märgistuses tema järgmine õde. */
.slm-korrused{ flex-direction:row-reverse; }
.slm-korrused-silt{ text-align:left; }
.slm-korrus{ border:1px solid var(--line); border-left:0; }
.slm-korrus:last-of-type{ border-left:1px solid var(--line); border-radius:2px 0 0 2px; }
.slm-korrus:first-of-type{ border-radius:0 2px 2px 0; }
.slm-korrus.is-aktiivne{ border-color:var(--ink); }
.slm-korrus.is-aktiivne + .slm-korrus{
border-top-color:var(--line); border-left-color:var(--line);
border-right-color:var(--ink);
}
}
@media (prefers-reduced-motion:reduce){
.slm-ala, .slm-marker, .slm-korrus{ transition:none; }
}
/* --- Korteriplaani suurendusvaade ----------------------------------------
Täisekraan lehe paberitoonis, ilma raami, päise ja jaluseta — ainult
plaan ja ümar sulgemisnupp (23.09.2026). Plaanide taust on sama toon,
nii et joonis sulab lehte ja saab kogu ekraani.
Raam on `inset:0`-ga, mitte `100vw/100dvh`-ga: modaalse