/* GEBOUWD uit skin.src.css met tools/build-css.py — pas de bron aan, niet dit bestand.
   Elke regel draagt :is(#hsk,.hsk): het gewicht van een id, zodat een thema dat blijft staan
   de app niet overschrijft. */
/* ==========================================================================
   Hittescan Skin — richting A "Werkruimte"
   De schil (.hsk-*) en de elementen van Overheating Check (.ohc-*).
   Alles hangt onder .hsk, zodat het boven check.css wint zonder !important,
   en niets buiten de app raakt. Breekpunten volgen de breedte van de app
   zelf (container queries), niet die van het scherm: ook in een smalle
   themakolom schikt alles zich.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
/* De huisstijl van de landingspagina (docs/review/10-huisstijl-landingspagina.md):
   gebroken wit als papier, aubergine als inkt, één koraal accent dat enkel
   spreekt waar het ertoe doet. De accentkleur komt uit de instellingen
   (standaard het koraal van de mock-up, H6 en H9): shell.php zet --acc en de
   afgeleide tinten --acc-tx (kleine tekst, links en de focusring, 4,5:1),
   --acc-dk (het donkere thema), --acc-on (de tekst op de hoofdknop) en
   --acc-hover (de hoofdknop onder de muis). */
.hsk:is(#hsk,.hsk){
  /* H9: de hoofdknop exact zoals de mock-up, koraal met aubergine tekst (5,1:1) */
  --acc:#EF524E;
  --acc-t:var(--acc-tx,#C3352F);
  --on-acc:var(--acc-on,#26101F);
  --acc-s:color-mix(in oklab,var(--acc) 8%,var(--surface));
  --acc-m:color-mix(in oklab,var(--acc) 30%,var(--surface));
  --acc-h:var(--acc-hover,#EF5753);
  --bg:#F6F2EE; --surface:#FFFCFA; --surface-2:#FAF6F3; --surface-3:#F1EAE5;
  --line:#E4DAD4; --line-2:#EDE5DF; --line-3:#DCCFC8;
  /* 4.8 (M15): de rand van een invoerveld of omlijnde knop haalt 3:1 op elke ondergrond */
  --field:#8A7882;
  /* plaatshouders: iets donkerder dan #8A7882 van de nota, zodat ook die tekst 4,5:1 haalt (§7) */
  --text:#26101F; --text-2:#4D3B46; --mut:#5E4C57; --mut-2:#6F5E68; --ph:#7D6B75;
  /* het koraal van de mock-up: #EF524E enkel groot of als vlak (3,4:1), #C3352F in kleine tekst (5,3:1) */
  --coral:#EF524E; --coral-tx:#C3352F;
  /* de tweede sterke knop (aubergine, "Open de app") */
  --ink:#26101F; --ink-h:#4A1A3C; --on-ink:#FFFCFA;
  /* H12: de tweede sterke knop ("Nieuwe woning", "PDF downloaden", bewaren); in het donker verhoogd aubergine */
  --btn-ink:#26101F; --btn-ink-tx:#FFFCFA; --btn-ink-edge:none; --btn-ink-h:#4A1A3C;
  /* H19: infomeldingen krijgen een pruimen lijn */
  --info-line:#4A1A3C;
  --plum:#4A1A3C; --mauve:#C9B5BE; --sun:#F6A23E;
  /* 4.14 (ontwerp 08, §5.1): de kleuren van het logo, gemeten in de PNG's; enkel voor het wachten.
     Pruim en koraal halen 3:1 op licht; zalm en perzik enkel als versiering in de golf. */
  --brand-plum:#431239; --brand-coral:#F04947; --brand-raspberry:#CC3D4C; --brand-salmon:#FE6E55; --brand-peach:#FEA484;
  --amber-bg:#FFF1D6; --amber-tx:#6B4200; --green-bg:#E5F2E8; --green-tx:#1D5E3A; --red-bg:#FCE9E5; --red-tx:#A8322D;
  --danger:#A8322D; --danger-h:#8A2723; --on-danger:#fff;
  /* kaarten: lijnen voor de kleine, de lange zachte schaduw voor de grote (H8) */
  --edge:var(--line);
  --shadow:0 1px 0 rgba(38,16,31,.04);
  --shadow-2:0 1px 0 rgba(38,16,31,.04),0 24px 48px -20px rgba(74,26,60,.32);
  --shadow-l:0 1px 0 rgba(38,16,31,.04),0 40px 80px -40px rgba(74,26,60,.28);
  --pill:inset 0 0 0 1px rgba(38,16,31,.14);
  --seg-on:0 1px 3px rgba(38,16,31,.14); --seg-bg:#fff;
  --bar-hot:#EF524E; --bar:#C9B5BE;
  /* de pijl van de mock-up, enkel op een stap vooruit */
  --hsk-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  --r:16px; --r-sm:9px; --r-l:20px; --r-c:12px;
  --top:64px;
  --hsk-bar:0px;
  --font:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  container:hskapp/inline-size;
  font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-align:left;
}
/* donker (H3): de aubergine van de donkere sectie ("Geen vuistregel …"), zalm als accent;
   kaarten met een dunne lichte rand in plaats van een schaduw */
.hsk:is(#hsk,.hsk)[data-hsk-mode="dark"]{
  --acc:var(--acc-dk,#FF9A8B); --acc-t:var(--acc-dk,#FF9A8B); --on-acc:#26101F;
  --acc-s:color-mix(in oklab,var(--acc) 20%,var(--surface)); --acc-m:color-mix(in oklab,var(--acc) 46%,var(--surface));
  --acc-h:color-mix(in oklab,var(--acc) 84%,#fff);
  --bg:#1F0B19; --surface:#2A0E22; --surface-2:#321629; --surface-3:#3C1D33;
  --line:#4A2B41; --line-2:#3C1D33; --line-3:#5E3F55; --field:#9A8090;
  --text:#F6F2EE; --text-2:#E9DFE3; --mut:#C9B5BE; --mut-2:#B39FA9; --ph:#9A8090;
  --coral:#FF9A8B; --coral-tx:#FF9A8B;
  --ink:#F6F2EE; --ink-h:#E9DFE3; --on-ink:#26101F;
  --btn-ink:#3C1D33; --btn-ink-tx:#F6F2EE; --btn-ink-edge:inset 0 0 0 1px var(--field); --btn-ink-h:#4A2B41;
  --info-line:#C9B5BE;
  --plum:#F6EEF3; --mauve:#7E6274;
  --amber-bg:#3D2A12; --amber-tx:#F4D38C; --green-bg:#163327; --green-tx:#9BDDB5; --red-bg:#4A1822; --red-tx:#FFB3A8;
  --danger:#FF8A7A; --danger-h:#FFA597; --on-danger:#26101F;
  --edge:rgba(255,255,255,.16);
  --shadow:none; --shadow-2:0 24px 48px -16px rgba(0,0,0,.6); --shadow-l:none;
  --pill:inset 0 0 0 1px rgba(255,255,255,.18);
  --seg-on:0 1px 3px rgba(0,0,0,.4); --seg-bg:#5E3F55;
  --bar-hot:#FF9A8B; --bar:#7E6274;
  --brand-plum:#F6EEF3;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  .hsk:is(#hsk,.hsk)[data-hsk-mode="auto"]{
    --acc:var(--acc-dk,#FF9A8B); --acc-t:var(--acc-dk,#FF9A8B); --on-acc:#26101F;
    --acc-s:color-mix(in oklab,var(--acc) 20%,var(--surface)); --acc-m:color-mix(in oklab,var(--acc) 46%,var(--surface));
    --acc-h:color-mix(in oklab,var(--acc) 84%,#fff);
    --bg:#1F0B19; --surface:#2A0E22; --surface-2:#321629; --surface-3:#3C1D33;
    --line:#4A2B41; --line-2:#3C1D33; --line-3:#5E3F55; --field:#9A8090;
    --text:#F6F2EE; --text-2:#E9DFE3; --mut:#C9B5BE; --mut-2:#B39FA9; --ph:#9A8090;
    --coral:#FF9A8B; --coral-tx:#FF9A8B;
    --ink:#F6F2EE; --ink-h:#E9DFE3; --on-ink:#26101F;
  --btn-ink:#3C1D33; --btn-ink-tx:#F6F2EE; --btn-ink-edge:inset 0 0 0 1px var(--field); --btn-ink-h:#4A2B41;
  --info-line:#C9B5BE;
    --plum:#F6EEF3; --mauve:#7E6274;
    --amber-bg:#3D2A12; --amber-tx:#F4D38C; --green-bg:#163327; --green-tx:#9BDDB5; --red-bg:#4A1822; --red-tx:#FFB3A8;
    --danger:#FF8A7A; --danger-h:#FFA597; --on-danger:#26101F;
    --edge:rgba(255,255,255,.16);
    --shadow:none; --shadow-2:0 24px 48px -16px rgba(0,0,0,.6); --shadow-l:none;
    --pill:inset 0 0 0 1px rgba(255,255,255,.18);
    --seg-on:0 1px 3px rgba(0,0,0,.4); --seg-bg:#5E3F55;
    --bar-hot:#FF9A8B; --bar:#7E6274;
    --brand-plum:#F6EEF3;
    color-scheme:dark;
  }
}
body.admin-bar .hsk:is(#hsk,.hsk){--hsk-bar:var(--wp-admin--admin-bar--height,32px)}

/* de pagina zelf, als het thema weg is */
html.hsk-doc,html.hsk-doc body{margin:0;padding:0;background:#F6F2EE}
/* WCAG 2.4.11: wat de focus krijgt, schuift niet onder de vaste bovenbalk of de knoppenbalk. Dat
   doet skin.js (revealFocus): een scroll-padding op de pagina liet de focus op een knop ín een vaste
   balk de pagina honderden pixels doen verspringen (de browser schoof de balk "in beeld"), en een
   scroll-margin op de inhoud volgt Chromium niet bij de focus. */
.hsk:is(#hsk,.hsk),.hsk:is(#hsk,.hsk) *,.hsk:is(#hsk,.hsk) *::before,.hsk:is(#hsk,.hsk) *::after{box-sizing:border-box}
.hsk:is(#hsk,.hsk) :where(button,input,select,textarea){font:inherit;color:inherit}
/* tegen een thema dat blijft staan: koppen en velden in de letter van de app */
.hsk:is(#hsk,.hsk) :where(h1,h2,h3,h4,h5,h6){font-family:inherit;text-transform:none;letter-spacing:-.01em;line-height:1.2;font-weight:600;color:var(--text);margin:0;text-wrap:balance}
.hsk:is(#hsk,.hsk) :where(p,li,td,th,label,summary,legend,small,strong,b){font-family:inherit;letter-spacing:normal;text-transform:none}
.hsk:is(#hsk,.hsk) :where(a){color:var(--acc-t)}
.hsk:is(#hsk,.hsk) :where(h1,h2,h3,p){margin:0}
.hsk:is(#hsk,.hsk) img{max-width:100%}
:is(#hsk,.hsk) .hsk-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
:is(#hsk,.hsk) .hsk-i-sm{width:14px;height:14px}
:is(#hsk,.hsk) .hsk-sr,.hsk:is(#hsk,.hsk) .hsk-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
.hsk:is(#hsk,.hsk) .hsk-hide{display:none!important}
.hsk:is(#hsk,.hsk) [hidden]{display:none!important}
:is(#hsk,.hsk) .hsk-mono,.hsk:is(#hsk,.hsk) .hsk-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95em}
:is(#hsk,.hsk) .hsk-small{font-size:12.5px;color:var(--mut)}
/* §7: een duidelijke ring, 2 px met 2 px afstand, in koraal (licht) of zalm (donker) */
.hsk:is(#hsk,.hsk) :focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}

/* --------------------------------------------------------------- de schil */
:is(#hsk,.hsk) .hsk-app{display:flex;min-height:calc(100vh - var(--hsk-bar));min-height:calc(100dvh - var(--hsk-bar));background:var(--bg)}
.hsk--embedded:is(#hsk,.hsk) .hsk-app{min-height:0;border:1px solid var(--line);border-radius:var(--r);overflow:clip}

:is(#hsk,.hsk) .hsk-sb{width:268px;flex:none;background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:var(--hsk-bar);height:calc(100vh - var(--hsk-bar));height:calc(100dvh - var(--hsk-bar));z-index:40}
.hsk--embedded:is(#hsk,.hsk) .hsk-sb{position:relative;top:auto;height:auto}
:is(#hsk,.hsk) .hsk-sb-logo{display:flex;align-items:center;justify-content:space-between;height:var(--top);padding:0 12px 0 22px;border-bottom:1px solid var(--line);flex:none}
:is(#hsk,.hsk) .hsk-logo{height:26px;width:auto;display:block}
.hsk:is(#hsk,.hsk) .hsk-logo--dark{display:none}
.hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-logo--light{display:none}
.hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-logo--dark{display:block}
@media (prefers-color-scheme:dark){.hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-logo--light{display:none}.hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-logo--dark{display:block}}
.hsk:is(#hsk,.hsk) .hsk-sb .hsk-sb-close{display:none}
:is(#hsk,.hsk) .hsk-sb-sec{padding:18px 14px 8px;display:flex;flex-direction:column;gap:2px;min-height:0;flex:1;overflow:auto;scroll-padding-block:8px}
:is(#hsk,.hsk) .hsk-sb-sec>*{flex:none}
:is(#hsk,.hsk) .hsk-sb-sec>.hsk-btn{margin-bottom:20px}
/* H1: in de zijbalk is "Nieuwe woning" de tweede sterke knop (aubergine, zoals "Open de app"); koraal blijft voor de hoofdactie van het scherm */
.hsk:is(#hsk,.hsk) .hsk-sb-sec>.hsk-btn-p{background:var(--btn-ink);color:var(--btn-ink-tx);box-shadow:var(--btn-ink-edge)}
.hsk:is(#hsk,.hsk) .hsk-sb-sec>.hsk-btn-p:hover{background:var(--btn-ink-h);color:var(--btn-ink-tx)}
:is(#hsk,.hsk) .hsk-sb-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mut-2);padding:0 10px 8px}
:is(#hsk,.hsk) .hsk-search{display:flex;align-items:center;gap:8px;height:38px;margin:0 0 10px;padding:0 11px;border:1px solid var(--field);border-radius:var(--r-sm);color:var(--mut-2);background:var(--surface)}
:is(#hsk,.hsk) .hsk-search input{border:0;background:transparent;outline:none;font-size:13.5px;width:100%;min-width:0;color:var(--text);-webkit-appearance:none;appearance:none}
:is(#hsk,.hsk) .hsk-search input::placeholder{color:var(--mut-2)}
/* H18: focus is een echte outline (2 px, 2 px afstand), ook in hoog contrast zichtbaar */
:is(#hsk,.hsk) .hsk-search:focus-within{border-color:var(--acc-t)}
:is(#hsk,.hsk) .hsk-search:has(input:focus-visible){border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px;box-shadow:none}
:is(#hsk,.hsk) .hsk-houses{display:flex;flex-direction:column;gap:2px}
:is(#hsk,.hsk) .hsk-house{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;color:var(--text-2);text-decoration:none;min-height:46px;transition:background .15s}
:is(#hsk,.hsk) .hsk-house:hover{background:var(--surface-3)}
/* de open woning: een kaartje op het papier, het teken in koraal */
:is(#hsk,.hsk) .hsk-house.on{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--edge),0 1px 0 rgba(38,16,31,.04)}
/* de lijst schuift en knipt wat erbuiten valt: de focusring van een woning ligt binnen de link */
:is(#hsk,.hsk) .hsk-house:focus-visible{outline-offset:-2px}
:is(#hsk,.hsk) .hsk-h-ic{width:20px;height:30px;border-radius:9px;display:grid;place-items:center;background:transparent;color:var(--mut);flex:none}
:is(#hsk,.hsk) .hsk-house.on .hsk-h-ic{background:transparent;color:var(--text)}
:is(#hsk,.hsk) .hsk-h-txt{display:flex;flex-direction:column;min-width:0}
/* een lange naam op twee regels, dan afgekapt (de volledige naam als titel, skin.js) */
:is(#hsk,.hsk) .hsk-h-nm{font-size:13.5px;font-weight:500;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
:is(#hsk,.hsk) .hsk-h-dt{font-size:11.5px;color:var(--mut-2);letter-spacing:-.01em}
:is(#hsk,.hsk) .hsk-h-meta{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
:is(#hsk,.hsk) .hsk-h-st{display:inline-flex;align-items:center;height:20px;font-family:var(--mono);font-size:11.5px;font-weight:500;line-height:1;padding:0 8px;border-radius:99px;background:var(--surface-3);color:var(--text-2);box-shadow:var(--pill);white-space:nowrap}
:is(#hsk,.hsk) .hsk-h-st.is-amber{background:var(--amber-bg);color:var(--amber-tx)}
:is(#hsk,.hsk) .hsk-h-st.is-green{background:var(--green-bg);color:var(--green-tx)}
:is(#hsk,.hsk) .hsk-h-st.is-red{background:var(--red-bg);color:var(--red-tx)}
:is(#hsk,.hsk) .hsk-h-st.is-acc{background:var(--ink);color:var(--on-ink)}
:is(#hsk,.hsk) .hsk-house.on .hsk-h-nm{font-weight:600}
:is(#hsk,.hsk) .hsk-empty{font-size:12.5px;color:var(--mut);padding:6px 10px}
:is(#hsk,.hsk) .hsk-sb-foot{border-top:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:12px;flex:none}
:is(#hsk,.hsk) .hsk-langrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* de segmentknop van de mock-up ("Zoals gebouwd / Zonwering op R7"), H11: het spoor in --surface-3 met
   een rand in --field (3:1), het actieve deel wit met schaduw en ook een rand in --field; de andere delen
   hebben een doorzichtige rand, zodat niets verspringt */
:is(#hsk,.hsk) .hsk-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--surface-3);border:1px solid var(--field);gap:2px}
:is(#hsk,.hsk) .hsk-seg button{border:1px solid transparent;background:transparent;height:30px;padding:0 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;transition:background .15s,color .15s}
:is(#hsk,.hsk) .hsk-seg button:hover{color:var(--text)}
:is(#hsk,.hsk) .hsk-seg button.on{background:var(--seg-bg);color:var(--text);box-shadow:var(--seg-on);border-color:var(--field)}
/* de focusring van een segment ligt tegen het segment, in de binnenrand van het spoor (3 px): niet over de rand van het
   spoor of het buursegment, zodat de hele ring 3:1 haalt */
:is(#hsk,.hsk) .hsk-seg button:focus-visible{outline-offset:0}
:is(#hsk,.hsk) .hsk-user{display:flex;align-items:center;gap:10px}
/* H20: de avatar is neutraal */
:is(#hsk,.hsk) .hsk-av{width:32px;height:32px;border-radius:50%;background:var(--surface-3);color:var(--text-2);box-shadow:var(--pill);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
:is(#hsk,.hsk) .hsk-user-txt{display:flex;flex-direction:column;min-width:0;flex:1}
:is(#hsk,.hsk) .hsk-user-nm{font-size:13.5px;font-weight:600}
:is(#hsk,.hsk) .hsk-user-em{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* de gebruiker onderaan de zijbalk opent Mijn account */
:is(#hsk,.hsk) .hsk-user-link{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none;border-radius:10px;padding:4px;margin:-4px}
:is(#hsk,.hsk) .hsk-user-link:hover{background:var(--surface-3)}
:is(#hsk,.hsk) .hsk-user-link:hover .hsk-user-nm{color:var(--acc-t)}
.hsk:is(#hsk,.hsk) .hsk-ib{width:40px;height:40px;border:0;background:transparent;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-2);cursor:pointer;flex:none;text-decoration:none}
.hsk:is(#hsk,.hsk) .hsk-ib:hover{background:var(--surface-3)}
:is(#hsk,.hsk) .hsk-ib .hsk-i{width:18px;height:18px}
:is(#hsk,.hsk) .hsk-scrim{display:none}

:is(#hsk,.hsk) .hsk-main{flex:1;min-width:0;display:flex;flex-direction:column;container:hskmain/inline-size}
/* de bovenbalk zoals de kop van de mock-up: het papier half doorzichtig, rustige navigatie, de sterke knop rechts */
:is(#hsk,.hsk) .hsk-top{height:var(--top);flex:none;display:flex;align-items:center;gap:10px;padding:0 24px 0 40px;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);position:sticky;top:var(--hsk-bar);z-index:30}
.hsk--embedded:is(#hsk,.hsk) .hsk-top{position:relative;top:auto}
.hsk:is(#hsk,.hsk) .hsk-hamb,:is(#hsk,.hsk) .hsk-toplogo{display:none}
:is(#hsk,.hsk) .hsk-toplogo{height:24px;width:auto}
:is(#hsk,.hsk) .hsk-crumb{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--mut-2);min-width:0}
:is(#hsk,.hsk) .hsk-crumb a{color:var(--text-2);text-decoration:none;white-space:nowrap;border-radius:6px}
:is(#hsk,.hsk) .hsk-crumb a:hover{color:var(--text)}
:is(#hsk,.hsk) .hsk-crumb b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#hsk,.hsk) .hsk-top-r{margin-left:auto;display:flex;gap:8px;align-items:center}
/* de sterke knop rechts in de kop ("Open de app" in de mock-up): PDF downloaden, in aubergine */
.hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-pdf{background:var(--btn-ink);color:var(--btn-ink-tx);border-color:transparent;box-shadow:var(--btn-ink-edge)}
.hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-pdf:hover{background:var(--btn-ink-h);color:var(--btn-ink-tx)}
:is(#hsk,.hsk) .hsk-menu{position:relative}
:is(#hsk,.hsk) .hsk-menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-c);box-shadow:var(--shadow-2);padding:6px;display:flex;flex-direction:column;z-index:50}
:is(#hsk,.hsk) .hsk-menu-list[hidden]{display:none}
:is(#hsk,.hsk) .hsk-menu-list [role=menuitem]{display:flex;align-items:center;min-height:40px;padding:0 12px;border:0;background:transparent;border-radius:8px;text-align:left;font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;cursor:pointer}
:is(#hsk,.hsk) .hsk-menu-list [role=menuitem]:hover{background:var(--surface-3)}
:is(#hsk,.hsk) .hsk-menu-list [role=menuitem][hidden]{display:none}
:is(#hsk,.hsk) .hsk-menu-list .hsk-danger{color:var(--red-tx)}

:is(#hsk,.hsk) .hsk-page{padding:36px 40px 56px;display:flex;flex-direction:column;gap:24px;max-width:1360px;width:100%}
:is(#hsk,.hsk) .hsk-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:4px}
:is(#hsk,.hsk) .hsk-phead-txt{min-width:0}
/* H4: de vorm van de koppen van de mock-up (600, nauwe letterafstand), maar op de maat van een werkinstrument */
:is(#hsk,.hsk) .hsk-h1{font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.04;color:var(--text);overflow-wrap:anywhere}
:is(#hsk,.hsk) .hsk-sub{font-size:14px;color:var(--mut);margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px}
:is(#hsk,.hsk) .hsk-steps{display:flex;align-items:center;gap:10px;flex:none}
/* de stappen als de genummerde labels van de mock-up ("01 — Documenten"): mono, de actieve in koraal */
:is(#hsk,.hsk) .hsk-step{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--mut-2)}
:is(#hsk,.hsk) .hsk-step.is-link{cursor:pointer;border-radius:8px}
:is(#hsk,.hsk) .hsk-step.is-link:hover{color:var(--text)}
:is(#hsk,.hsk) .hsk-dot{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-3);display:grid;place-items:center;font-size:11.5px;font-weight:500;background:var(--surface);color:var(--mut)}
:is(#hsk,.hsk) .hsk-dot .hsk-ck{display:none;width:13px;height:13px;stroke-width:2.6}
:is(#hsk,.hsk) .hsk-step.done .hsk-dot{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
:is(#hsk,.hsk) .hsk-step.done .hsk-n{display:none}
:is(#hsk,.hsk) .hsk-step.done .hsk-ck{display:block}
:is(#hsk,.hsk) .hsk-step.done{color:var(--text-2)}
:is(#hsk,.hsk) .hsk-step.on{color:var(--acc-t);font-weight:500}
:is(#hsk,.hsk) .hsk-step.on .hsk-dot{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:0 0 0 4px var(--acc-s)}
:is(#hsk,.hsk) .hsk-sline{width:32px;height:1px;background:var(--line-3)}
:is(#hsk,.hsk) .hsk-sline.done{background:var(--ink)}
:is(#hsk,.hsk) .hsk-mprog{display:none}

/* ------------------------------------------------------------ bouwstenen */
/* panelen: 16 px, een lijn en nauwelijks schaduw (H8) */
:is(#hsk,.hsk) .hsk-card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
:is(#hsk,.hsk) .hsk-card-h{padding:24px 28px 20px;border-bottom:1px solid var(--line-2)}
:is(#hsk,.hsk) .hsk-card-b{padding:24px 28px;display:flex;flex-direction:column;gap:24px}
:is(#hsk,.hsk) .hsk-card-f{padding:16px 28px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
:is(#hsk,.hsk) .hsk-h2{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
:is(#hsk,.hsk) .hsk-h3,.hsk:is(#hsk,.hsk) h3.hsk-h3{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
:is(#hsk,.hsk) .hsk-p,.hsk:is(#hsk,.hsk) .hsk-p{margin-top:8px;color:var(--mut);font-size:14px;line-height:1.55;max-width:760px;text-wrap:pretty}
/* knoppen (§5, H1): afronding 9 px; koraal voor de hoofdactie, aubergine voor de tweede sterke knop, omlijnd voor de rest */
:is(#hsk,.hsk) .hsk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 18px;border-radius:var(--r-sm);border:1px solid transparent;font-size:14.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1;transition:background .18s,border-color .18s,color .18s}
:is(#hsk,.hsk) .hsk-btn-p{background:var(--acc);color:var(--on-acc)}
:is(#hsk,.hsk) .hsk-btn-p:hover{background:var(--acc-h);color:var(--on-acc)}
:is(#hsk,.hsk) .hsk-btn-s{background:transparent;color:var(--text);border-color:var(--field)}
:is(#hsk,.hsk) .hsk-btn-s:hover{background:var(--surface-3)}
:is(#hsk,.hsk) .hsk-btn-g{background:transparent;color:var(--text-2)}
:is(#hsk,.hsk) .hsk-btn-g:hover{background:var(--surface-3)}
/* H1: één destructieve actie, als omlijnde knop in statusrood */
:is(#hsk,.hsk) .hsk-btn-danger{background:transparent;color:var(--red-tx);border:1px solid var(--red-tx)}
:is(#hsk,.hsk) .hsk-btn-danger:hover{background:var(--red-bg);color:var(--red-tx)}
:is(#hsk,.hsk) .hsk-btn-sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:8px}
:is(#hsk,.hsk) .hsk-btn-ic{width:36px;padding:0}
:is(#hsk,.hsk) .hsk-btn-block{width:100%}
/* pillen (§5): afronding 99 px, een binnenlijn, mono */
:is(#hsk,.hsk) .hsk-chip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;background:var(--surface-3);color:var(--text-2);box-shadow:var(--pill);white-space:nowrap;line-height:1}
:is(#hsk,.hsk) .hsk-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
:is(#hsk,.hsk) .hsk-chip.is-amber{background:var(--amber-bg);color:var(--amber-tx)}
:is(#hsk,.hsk) .hsk-chip.is-green{background:var(--green-bg);color:var(--green-tx)}
:is(#hsk,.hsk) .hsk-chip.is-red{background:var(--red-bg);color:var(--red-tx)}
/* H10: een accentchip is een inktpil, zoals in de PDF ("beste ingreep", "−92 %", "Populair") */
:is(#hsk,.hsk) .hsk-chip.is-acc{background:var(--ink);color:var(--on-ink)}
:is(#hsk,.hsk) .hsk-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
:is(#hsk,.hsk) .hsk-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}

/* ------------------------------------------- Overheating Check: algemeen */
.hsk:is(#hsk,.hsk) .ohc{max-width:none;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc h2{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text);margin:0}
.hsk:is(#hsk,.hsk) .ohc h3{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--text);margin:0}
.hsk:is(#hsk,.hsk) .ohc p{margin:0}
.hsk:is(#hsk,.hsk) :where(.ohc) label{font-weight:600;margin-top:0}
.hsk:is(#hsk,.hsk) :where(.ohc) button{margin:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--field);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;line-height:1.2;text-align:center;transition:background .18s,border-color .18s}
.hsk:is(#hsk,.hsk) :where(.ohc) button:where(:hover:not(:disabled)){background:var(--surface-3)}
.hsk:is(#hsk,.hsk) :where(.ohc) button:where(:disabled){opacity:.5;cursor:not-allowed}
.hsk:is(#hsk,.hsk) .ohc input[type="text"],.hsk:is(#hsk,.hsk) .ohc input[type="url"],.hsk:is(#hsk,.hsk) .ohc input[type="email"],.hsk:is(#hsk,.hsk) .ohc input:not([type]),.hsk:is(#hsk,.hsk) .ohc select,.hsk:is(#hsk,.hsk) .ohc textarea{height:42px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--surface);padding:0 13px;font-size:14.5px;width:100%;max-width:none;color:var(--text);box-shadow:none}
.hsk:is(#hsk,.hsk) .ohc textarea{height:auto;padding:10px 12px}
.hsk:is(#hsk,.hsk) .ohc select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E4C57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .ohc select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9B5BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){.hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .ohc select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9B5BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}
.hsk:is(#hsk,.hsk) .ohc input:focus-visible,.hsk:is(#hsk,.hsk) .ohc select:focus-visible,.hsk:is(#hsk,.hsk) .ohc textarea:focus-visible{border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px;box-shadow:none}
.hsk:is(#hsk,.hsk) .ohc input::placeholder,.hsk:is(#hsk,.hsk) .ohc textarea::placeholder{color:var(--ph)}
/* H10: gekozen en aan is inkt */
.hsk:is(#hsk,.hsk) .ohc input[type="checkbox"],.hsk:is(#hsk,.hsk) .ohc input[type="radio"]{accent-color:var(--ink);width:16px;height:16px;margin:0;flex:none}
.hsk:is(#hsk,.hsk) .ohc input[type="range"]{accent-color:var(--ink)}
.hsk:is(#hsk,.hsk) .ohc .ohc-num{width:100%;max-width:none;font-family:var(--mono);font-size:13.5px;letter-spacing:-.01em}
.hsk:is(#hsk,.hsk) .ohc-error{color:var(--red-tx);background:var(--red-bg);border:1px solid color-mix(in oklab,var(--red-tx) 22%,transparent);border-radius:var(--r-c);padding:11px 15px;font-weight:600;font-size:13.5px}
.hsk:is(#hsk,.hsk) .ohc-status{font-style:normal;color:var(--mut);font-size:13px;margin:0}
.hsk:is(#hsk,.hsk) .ohc-status:empty{display:none}
.hsk:is(#hsk,.hsk) .ohc-how{color:var(--mut);font-size:13px;text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-back{margin:0;font-size:13px;font-weight:600;text-decoration:none}
.hsk:is(#hsk,.hsk) .ohc-page-btn{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:8px}
/* H11: de open bladzijde of verdieping als het actieve deel van een segmentknop, niet in koraal */
.hsk:is(#hsk,.hsk) .ohc-page-btn.ohc-page-on{background:var(--seg-bg);border-color:var(--field);color:var(--text);box-shadow:var(--seg-on);font-weight:600}
.hsk:is(#hsk,.hsk) .ohc-delete{color:var(--red-tx)}
.hsk:is(#hsk,.hsk) .ohc-notes{font-family:var(--mono);font-size:12px;color:var(--mut-2);display:flex;flex-direction:column;gap:3px;margin:10px 0 0}
.hsk:is(#hsk,.hsk) .ohc-json{font-family:var(--mono);font-size:12px;line-height:1.5;min-height:280px}
.hsk:is(#hsk,.hsk) .ohc-page-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* de schil vervangt deze, zodra het script draait */
.hsk.hsk-js:is(#hsk,.hsk) .ohc-languages,.hsk.hsk-js:is(#hsk,.hsk) .ohc-houses,.hsk.hsk-js:is(#hsk,.hsk) .ohc-screen>.ohc-page-strip{display:none}
.hsk.hsk-js:is(#hsk,.hsk) .ohc-screen>.ohc-back:not(:only-child){display:none}

/* vouwen: zoals de vragen van de mock-up, een "+" in koraal (open: "−") */
.hsk:is(#hsk,.hsk) details.ohc-advanced,.hsk:is(#hsk,.hsk) details.hsk-fold{margin:0;font-size:13px}
.hsk:is(#hsk,.hsk) details.ohc-advanced>summary,.hsk:is(#hsk,.hsk) details.hsk-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;font-size:13.5px;font-weight:500;color:var(--text-2);padding:4px 0;border-radius:6px}
.hsk:is(#hsk,.hsk) details.ohc-advanced>summary::-webkit-details-marker,.hsk:is(#hsk,.hsk) details.hsk-fold>summary::-webkit-details-marker{display:none}
/* de koraal "+" enkel bij de vragen van de mock-up (.hsk-acc-card); een kleine vouw in --mut-2 */
.hsk:is(#hsk,.hsk) details.ohc-advanced>summary::before,.hsk:is(#hsk,.hsk) details.hsk-fold>summary::before{content:"+";flex:none;width:12px;font-family:var(--mono);font-weight:500;font-size:15px;line-height:1;color:var(--mut-2);text-align:center}
.hsk:is(#hsk,.hsk) details[open].ohc-advanced>summary::before,.hsk:is(#hsk,.hsk) details[open].hsk-fold>summary::before{content:"\2212"}
.hsk:is(#hsk,.hsk) details.ohc-advanced>summary:hover,.hsk:is(#hsk,.hsk) details.hsk-fold>summary:hover{color:var(--text)}
.hsk:is(#hsk,.hsk) details.ohc-advanced[open]>summary,.hsk:is(#hsk,.hsk) details.hsk-fold[open]>summary{margin-bottom:8px}

/* -------------------------------------------- scherm 1: documenten en adres */
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="upload"]{display:flex;flex-direction:column;gap:16px}
.hsk:is(#hsk,.hsk) .hsk-upload{max-width:1080px}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-h h2{font-size:21px}
.hsk:is(#hsk,.hsk) .hsk-f-name{max-width:480px}
.hsk:is(#hsk,.hsk) .hsk-field{display:flex;flex-direction:column;gap:6px}
.hsk:is(#hsk,.hsk) .hsk-field>label,.hsk:is(#hsk,.hsk) .ohc-row>label{font-size:13.5px;font-weight:600;color:var(--text)}
.hsk:is(#hsk,.hsk) .hsk-grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hsk:is(#hsk,.hsk) .hsk-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.hsk:is(#hsk,.hsk) .hsk-colhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hsk:is(#hsk,.hsk) .hsk-col>p.hsk-small{line-height:1.55;text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-row{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto;grid-auto-flow:column;gap:6px 12px;max-width:none;margin:0}
.hsk:is(#hsk,.hsk) .hsk-col>details.ohc-advanced{border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}
.hsk:is(#hsk,.hsk) .hsk-col>details.ohc-advanced>label{display:block;margin:4px 0 6px;font-size:13px}
.hsk:is(#hsk,.hsk) .hsk-drop{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px dashed var(--field);border-radius:var(--r-c);background:var(--surface-2);cursor:pointer;min-height:74px;font-weight:400;transition:border-color .15s,background .15s}
.hsk:is(#hsk,.hsk) .hsk-drop:hover,.hsk:is(#hsk,.hsk) .hsk-drop.is-over{border-color:var(--acc-t);background:var(--acc-s)}
.hsk:is(#hsk,.hsk) .hsk-drop:focus-within{border-color:var(--acc-t)}
.hsk:is(#hsk,.hsk) .hsk-drop:has(input:focus-visible){border-style:solid;border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px}
.hsk:is(#hsk,.hsk) .hsk-drop.is-filled{border-style:solid;border-width:1px;border-color:var(--field);background:var(--surface)}
/* een fout blijft rood, ook met de focus erop (de ring ernaast blijft) */
.hsk:is(#hsk,.hsk) .hsk-drop.is-wrong,.hsk:is(#hsk,.hsk) .hsk-drop.is-wrong:has(input:focus-visible){border-color:var(--red-tx)}
.hsk:is(#hsk,.hsk) .hsk-drop.is-wrong .hsk-d-s{color:var(--red-tx)}
.hsk:is(#hsk,.hsk) .hsk-f-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--mut);flex:none}
.hsk:is(#hsk,.hsk) .hsk-f-ic .hsk-i{width:20px;height:20px}
.hsk:is(#hsk,.hsk) .hsk-drop.is-filled .hsk-f-ic{color:var(--text);border-color:var(--line-3);background:var(--surface-3)}
.hsk:is(#hsk,.hsk) .hsk-d-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.hsk:is(#hsk,.hsk) .hsk-d-t{font-size:14.5px;font-weight:600;color:var(--text)}
.hsk:is(#hsk,.hsk) .hsk-d-s{font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:anywhere}
.hsk:is(#hsk,.hsk) .hsk-d-act{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.hsk:is(#hsk,.hsk) .hsk-ok{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:none;place-items:center}
.hsk:is(#hsk,.hsk) .hsk-ok .hsk-i{width:13px;height:13px;stroke-width:2.6}
.hsk:is(#hsk,.hsk) .hsk-drop.is-filled .hsk-ok{display:grid}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f .ohc-status{flex:1 1 220px}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f .hsk-hint{flex:1 1 260px}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f .ohc-status:not(:empty)~.hsk-hint,.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f .hsk-hint:has(~.ohc-status:not(:empty)){display:none}
.hsk:is(#hsk,.hsk) .ohc button.hsk-primary,.hsk:is(#hsk,.hsk) .ohc .ohc-actions>button:first-child{background:var(--acc);border-color:var(--acc);color:var(--on-acc);min-height:42px;padding:0 20px;font-size:14.5px}
.hsk:is(#hsk,.hsk) .ohc button.hsk-primary:hover:not(:disabled),.hsk:is(#hsk,.hsk) .ohc .ohc-actions>button:first-child:hover:not(:disabled){background:var(--acc-h);border-color:var(--acc-h)}
/* de pijl van de mock-up, enkel bij een stap vooruit: de documenten lezen, de berekening starten */
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>button::after,.hsk:is(#hsk,.hsk) .ohc-actions>button:last-child::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--hsk-arrow) center/contain no-repeat;mask:var(--hsk-arrow) center/contain no-repeat;transition:transform .18s var(--ease)}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>button:hover:not(:disabled)::after,.hsk:is(#hsk,.hsk) .ohc-actions>button:last-child:hover:not(:disabled)::after{transform:translateX(2px)}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>button{margin-left:auto}
.hsk:is(#hsk,.hsk) .hsk-upload+.ohc-error,.hsk:is(#hsk,.hsk) .ohc>.ohc-error{max-width:1080px}

/* ------------------------------------------------------- de documenten lezen */
/* een wachtscherm is een grote kaart: 20 px, de lange zachte schaduw (H8) */
.hsk:is(#hsk,.hsk) .hsk-reading{padding:28px 32px;display:flex;flex-direction:column;gap:10px;max-width:760px;border-radius:var(--r-l);box-shadow:var(--shadow-l)}
.hsk:is(#hsk,.hsk) .hsk-reading>p{color:var(--mut);font-size:14.5px}
.hsk:is(#hsk,.hsk) .hsk-reading>h2{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.hsk:is(#hsk,.hsk) .hsk-reading>h2::before{content:"";width:20px;height:20px;border-radius:50%;border:2.5px solid var(--acc-s);border-top-color:var(--acc);animation:hsk-spin 1s linear infinite;flex:none}
.hsk:is(#hsk,.hsk) .hsk-reading>.hsk-progress::before{display:none}
.hsk:is(#hsk,.hsk) .hsk-reading::after{content:"";display:block;height:4px;margin-top:8px;border-radius:99px;background:linear-gradient(90deg,var(--acc-s) 0 30%,var(--acc) 30% 50%,var(--acc-s) 50% 100%) 0 0/300% 100%;animation:hsk-bar 2.4s linear infinite}
@keyframes hsk-bar{from{background-position:100% 0}to{background-position:-50% 0}}
.hsk:is(#hsk,.hsk) .hsk-progress{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .hsk-progress::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid var(--acc-s);border-top-color:var(--acc);animation:hsk-spin 1s linear infinite;flex:none}
@keyframes hsk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hsk:is(#hsk,.hsk) .hsk-progress::before,.hsk:is(#hsk,.hsk) .hsk-reading>h2::before,.hsk:is(#hsk,.hsk) .hsk-reading::after,.hsk:is(#hsk,.hsk) .ohc-screen:only-child>.ohc-status:only-child::before{animation:none}}
.hsk:is(#hsk,.hsk) .ohc-screen:only-child>.ohc-status:only-child{padding:32px 0;display:flex;align-items:center;gap:12px}
.hsk:is(#hsk,.hsk) .ohc-screen:only-child>.ohc-status:only-child::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid var(--acc-s);border-top-color:var(--acc);animation:hsk-spin 1s linear infinite}
.hsk:is(#hsk,.hsk) .ohc-status[hidden]{display:none}

/* ------------------------------------------------------ het wachten (4.14) */
/* De kleine ring (chips, statusregels, laden): een verloop van pruim over
   koraal naar zalm, één toer per seconde; vervangt de teal spinners. */
.hsk:is(#hsk,.hsk) .hsk-progress::before,.hsk:is(#hsk,.hsk) .hsk-reading>h2::before,.hsk:is(#hsk,.hsk) .ohc-screen:only-child>.ohc-status:only-child::before{
  border:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 10%,var(--brand-plum) 10% 45%,var(--brand-coral) 45% 80%,var(--brand-salmon) 80% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.hsk:is(#hsk,.hsk) .hsk-reading::after{background:linear-gradient(90deg,var(--surface-3) 0 30%,var(--brand-plum) 30% 40%,var(--brand-coral) 40% 50%,var(--surface-3) 50% 100%) 0 0/300% 100%}
/* De wachtkaart van de app: het H-teken groot, de titel, één statusregel,
   de balk (6 px, pruim naar koraal) en de tijd. */
.hsk:is(#hsk,.hsk) .ohc-screen.hsk-waiting{display:flex;flex-direction:column;gap:16px}
.hsk:is(#hsk,.hsk) .ohc-wait{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;align-items:start;padding:28px 32px;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--shadow-l);max-width:760px}
.hsk:is(#hsk,.hsk) .ohc-wait[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-wait-sign{width:40px;height:40px;display:block}
.hsk:is(#hsk,.hsk) .hsk-sign{display:block;width:40px;height:40px;overflow:visible}
.hsk:is(#hsk,.hsk) .hsk-sign-l{fill:var(--brand-plum)}
.hsk:is(#hsk,.hsk) .hsk-sign-r{fill:var(--brand-coral)}
.hsk:is(#hsk,.hsk) .hsk-sign-wave{fill:none;stroke:url(#hsk-sign-wave);stroke-width:7;stroke-linecap:round;stroke-dasharray:70 30;animation:hsk-wave 2.4s linear infinite}
@keyframes hsk-wave{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.hsk:is(#hsk,.hsk) .ohc-wait-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.hsk:is(#hsk,.hsk) .ohc .ohc-wait-title,.hsk:is(#hsk,.hsk) .ohc-wait-title{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:4px 0 4px;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-wait-line{margin:0;font-size:15px;color:var(--text-2);text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-wait-item{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--mut-2)}
.hsk:is(#hsk,.hsk) .ohc-wait-bar{position:relative;height:6px;margin:12px 0 4px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.hsk:is(#hsk,.hsk) .ohc-wait-bar[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-wait-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--brand-plum),var(--brand-coral));transition:width .6s ease}
.hsk:is(#hsk,.hsk) .ohc-wait-bar.is-unknown .ohc-wait-fill{width:34%;animation:hsk-slide 1.8s ease-in-out infinite}
@keyframes hsk-slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.hsk:is(#hsk,.hsk) .ohc-wait-time{margin:0;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-wait-over{margin:4px 0 0;padding:10px 14px;border-left:2px solid var(--coral);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--surface-2);font-size:13.5px;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-wait-hitch{margin:0;font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-wait-mail{margin:10px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:13.5px;line-height:1.55;color:var(--mut)}
/* fase 6b stap 11: een rapport dat we nog nakijken (de kaart van het wachten, zonder balk) */
.hsk:is(#hsk,.hsk) .ohc-held:not(.ohc-held-admin){display:flex;flex-direction:column;gap:8px;padding:28px 32px;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--shadow-l);max-width:760px;margin:0 0 16px}
.hsk:is(#hsk,.hsk) .ohc .ohc-held>h3,.hsk:is(#hsk,.hsk) .ohc-held>h3{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:4px 0 4px;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-held-lead{margin:0;font-size:15px;color:var(--text-2);text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-held>.ohc-how{margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:13.5px;line-height:1.55;color:var(--mut)}
.hsk:is(#hsk,.hsk) .hsk-rcard.ohc-held-admin{border-left:2px solid var(--amber-tx);padding:18px 30px}
.hsk:is(#hsk,.hsk) .hsk-rcard.ohc-held-admin>p{margin:0;font-size:14px;color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-measure-house{font-size:13.5px;color:var(--text-2);margin:0}
.hsk:is(#hsk,.hsk) .hsk-kpi-house{margin-top:-2px}
.hsk:is(#hsk,.hsk) .hsk-chip-house{margin-left:4px}
.hsk:is(#hsk,.hsk) .ohc-table.ohc-windows-house th{white-space:normal}
.hsk:is(#hsk,.hsk) .ohc-table.ohc-windows-house :is(td,th):not(:first-child):not(:last-child){padding-left:9px;padding-right:9px}
.hsk:is(#hsk,.hsk) .ohc-wait [hidden]{display:none}
/* 4.19: de kaart "Bevestig uw e-mailadres" boven elk scherm van de app */
.hsk:is(#hsk,.hsk) .hsk-confirm{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;margin:0 0 16px;border-left:2px solid var(--amber-tx);max-width:1080px}
.hsk:is(#hsk,.hsk) .hsk-confirm-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--amber-bg);color:var(--amber-tx);flex:none}
.hsk:is(#hsk,.hsk) .hsk-confirm-b{flex:1 1 280px;min-width:0}
.hsk:is(#hsk,.hsk) .hsk-confirm-b .hsk-p{margin:2px 0 0;font-size:13.5px;color:var(--text-2);overflow-wrap:anywhere}
.hsk:is(#hsk,.hsk) .hsk-confirm form{margin:0}
/* 4.17: wat "PDF downloaden" zegt, boven het rapport */
.hsk:is(#hsk,.hsk) .ohc-screen>.ohc-pdf-note{display:block;max-width:860px;padding:10px 14px;border-radius:var(--r-c);background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .ohc-screen>.ohc-pdf-note:empty{display:none}
.hsk:is(#hsk,.hsk) .hsk-pdf[disabled]{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){
  /* ook de ring van het laden (die staat hierboven, na de eerste regel voor minder beweging) */
  .hsk:is(#hsk,.hsk) .hsk-progress::before,.hsk:is(#hsk,.hsk) .hsk-reading>h2::before,.hsk:is(#hsk,.hsk) .hsk-reading::after,.hsk:is(#hsk,.hsk) .ohc-screen:only-child>.ohc-status:only-child::before{animation:none}
  .hsk:is(#hsk,.hsk) .hsk-sign-wave{animation:none;stroke-dasharray:none}
  .hsk:is(#hsk,.hsk) .ohc-wait-bar.is-unknown .ohc-wait-fill{animation:none;width:100%;opacity:.35}
  .hsk:is(#hsk,.hsk) .ohc-wait-fill{transition:none}
}

/* ------------------------------------------------------------- scherm 2: vragen */
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="settle"]{display:flex;flex-direction:column;gap:18px}
.hsk:is(#hsk,.hsk) .hsk-intro{padding:22px 26px;display:flex;flex-direction:column;gap:12px}
.hsk:is(#hsk,.hsk) .hsk-intro-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.hsk:is(#hsk,.hsk) .hsk-intro .hsk-counts{flex:none;padding-top:2px;justify-content:flex-end}
.hsk:is(#hsk,.hsk) .hsk-intro>details{border-top:1px solid var(--line-2);padding-top:10px}
.hsk:is(#hsk,.hsk) .ohc-settle{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.hsk:is(#hsk,.hsk) .ohc-open{margin:0;display:flex;flex-direction:column;gap:12px;counter-reset:hskq}
.hsk:is(#hsk,.hsk) .ohc-open>h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mut-2);margin:14px 2px 0;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hsk:is(#hsk,.hsk) .ohc-open>h3:first-child{margin-top:0}
.hsk:is(#hsk,.hsk) .ohc-open>p.ohc-how{margin:-8px 2px 2px}
.hsk:is(#hsk,.hsk) .ohc-open>p:not(.ohc-how){color:var(--mut)}
.hsk:is(#hsk,.hsk) .ohc-item{counter-increment:hskq;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:none;position:relative}
/* H18: de kaart rond een gefocust veld blijft neutraal; een rood kader betekent enkel "antwoord nodig" */
.hsk:is(#hsk,.hsk) .ohc-item:focus-within{border-color:var(--line-3);box-shadow:none}
.hsk:is(#hsk,.hsk) .ohc-q{margin:0;display:flex;gap:12px;align-items:flex-start}
/* het nummer van een vraag als de genummerde labels van de mock-up: mono, in koraal */
.hsk:is(#hsk,.hsk) .ohc-q::before{content:counter(hskq,decimal-leading-zero);min-width:24px;height:22px;padding:0 2px;border-radius:6px;background:transparent;color:var(--coral-tx);font-family:var(--mono);font-size:12.5px;font-weight:500;display:grid;place-items:center;flex:none;margin-top:0}
.hsk:is(#hsk,.hsk) .ohc-item:has(.ohc-done input:checked) .ohc-q::before{content:"";border-radius:50%;width:22px;min-width:22px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.hsk:is(#hsk,.hsk) .ohc-q strong{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35;text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-item>.ohc-how,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-control,.hsk:is(#hsk,.hsk) .ohc-item>details.ohc-advanced{margin-left:36px}
.hsk:is(#hsk,.hsk) .ohc-item>.ohc-how{margin-top:-6px}
.hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn{align-self:flex-start}
.hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center/contain no-repeat}
.hsk:is(#hsk,.hsk) .ohc-control{margin:0;display:flex;flex-direction:column;gap:8px;max-width:none}
.hsk:is(#hsk,.hsk) .ohc-control>.ohc-how{font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check:not(.ohc-done){display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;font-weight:400;cursor:pointer;min-height:44px;background:var(--surface);transition:border-color .15s,background .15s}
.hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check:not(.ohc-done):has(input:checked){border-color:var(--acc-m);background:var(--acc-s)}
.hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check:not(.ohc-done):hover{border-color:var(--line-3)}
.hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check>span{flex:1}
.hsk:is(#hsk,.hsk) .ohc .ohc-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:400;margin:0}
.hsk:is(#hsk,.hsk) .ohc .ohc-field>span{flex:1 1 14rem;font-size:12.5px;color:var(--mut)}
.hsk:is(#hsk,.hsk) .ohc .ohc-field>select,.hsk:is(#hsk,.hsk) .ohc .ohc-field>input{flex:1 1 11rem;min-width:0;max-width:100%;height:36px;font-size:13.5px}
.hsk:is(#hsk,.hsk) .ohc .ohc-field>.ohc-num{flex:0 0 8.5rem}
.hsk:is(#hsk,.hsk) .ohc-control>select,.hsk:is(#hsk,.hsk) .ohc-control>input{max-width:26rem}
.hsk:is(#hsk,.hsk) .ohc-sides-row{display:grid;grid-template-columns:minmax(6.5rem,1.3fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:end}
.hsk:is(#hsk,.hsk) .ohc-sides-row:not(.ohc-sides-head){align-items:center}
.hsk:is(#hsk,.hsk) .ohc-sides-head span{font-size:12px;color:var(--mut)}
.hsk:is(#hsk,.hsk) .ohc-sides-row>span{font-size:13px}
.hsk:is(#hsk,.hsk) .ohc-sides-row .ohc-num{height:36px}
.hsk:is(#hsk,.hsk) .ohc-control>.ohc-page-strip{margin-top:2px}
.hsk:is(#hsk,.hsk) .ohc .ohc-done{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line-2);font-weight:600;font-size:13.5px}
.hsk:is(#hsk,.hsk) .ohc-control>.ohc-how:has(+.ohc-done){display:flex;align-items:center;gap:8px;color:var(--amber-tx);background:var(--amber-bg);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-item details.ohc-advanced{font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-item details.ohc-advanced>summary{font-size:13px;color:var(--mut)}
.hsk:is(#hsk,.hsk) .ohc-item details.ohc-how-known .ohc-field{margin-top:6px}
.hsk:is(#hsk,.hsk) .ohc-readings,.hsk:is(#hsk,.hsk) .ohc-cands{font-family:var(--mono);font-size:11.5px;color:var(--mut-2);word-break:break-word}
.hsk:is(#hsk,.hsk) .ohc-control>.ohc-how:last-of-type{font-size:12.5px}

/* het plan naast de vragen */
.hsk:is(#hsk,.hsk) .hsk-planpane>*{flex:none}
.hsk:is(#hsk,.hsk) .hsk-planpane{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:calc(var(--hsk-bar) + var(--top) + 16px);max-height:calc(100vh - var(--hsk-bar) - var(--top) - 104px);max-height:calc(100dvh - var(--hsk-bar) - var(--top) - 104px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:var(--r)}
.hsk--embedded:is(#hsk,.hsk) .hsk-planpane{top:16px}
.hsk:is(#hsk,.hsk) .hsk-sheet-h{display:none}
.hsk:is(#hsk,.hsk) .ohc-viewer{position:relative;top:auto;max-height:none;overflow:visible;overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);padding:0;background:var(--surface);box-shadow:var(--shadow)}
/* 4.4: wie begint te tekenen, krijgt het plan in beeld, onder de vaste bovenbalk */
.hsk:is(#hsk,.hsk) .ohc-viewer{scroll-margin-top:calc(var(--top) + 12px)}
.hsk:is(#hsk,.hsk) .ohc-viewer,.hsk:is(#hsk,.hsk) .hsk-planpane{scroll-padding:8px}
/* de bladzijden en de verdiepingen als één segmentknop (§5, H11): de knoppen vormen samen het spoor
   (--surface-3, een rand in --field, buitenhoeken 11 px); de open bladzijde is een wit deel met schaduw en
   een rand in --field, 3 px binnen het spoor (::before achter de tekst). De zoomknop staat erbuiten. */
.hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-page-strip{position:sticky;top:0;z-index:2;padding:10px 12px;border-bottom:1px solid var(--line-2);background:var(--surface);gap:0}
.hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip{gap:0}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]){position:relative;isolation:isolate;min-height:38px;padding:0 13px;border:1px solid var(--field);border-left-width:0;border-right-width:0;border-radius:0;background:var(--surface-3);color:var(--mut);font-family:var(--mono);font-weight:500;box-shadow:none}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]):first-child{border-left-width:1px;border-radius:11px 0 0 11px;padding-left:14px}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]):not(:has(~ :is([data-page],[data-view]))){border-right-width:1px;border-top-right-radius:11px;border-bottom-right-radius:11px;padding-right:14px}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]):hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]).ohc-page-on{background:var(--surface-3);color:var(--text);box-shadow:none}
.hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]).ohc-page-on::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:8px;background:var(--seg-bg);border:1px solid var(--field);box-shadow:var(--seg-on)}
/* de focusring boven de buren (geen knip) */
.hsk:is(#hsk,.hsk) .ohc-page-btn:focus-visible{position:relative;z-index:1}
.hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-page-strip .ohc-page-btn:last-child:not([data-page]){margin-left:auto;background:transparent;font-family:var(--font);font-weight:600;border:1px solid var(--field)}
.hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-how{padding:10px 14px 0;font-size:12px}
.hsk:is(#hsk,.hsk) .ohc-stage{margin:8px 14px 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.hsk:is(#hsk,.hsk) .ohc-stage.ohc-stage-zoom{overflow:visible}
/* H16: wat op het plan getekend staat, blijft op wit papier in beide thema's en krijgt vaste kleuren
   (geen tokens: --plum, --green-tx en --text worden licht in het donker) */
.hsk:is(#hsk,.hsk) .ohc-outline{stroke:#4A1A3C;fill:rgba(74,26,60,.10)}
.hsk:is(#hsk,.hsk) .ohc-outline-label{fill:#4A1A3C;font-family:var(--font);font-weight:600}
.hsk:is(#hsk,.hsk) .ohc-suggested{stroke:#4A1A3C;fill:rgba(74,26,60,.06)}
.hsk:is(#hsk,.hsk) .ohc-mark{stroke:#A8322D;fill:rgba(168,50,45,.10)}
.hsk:is(#hsk,.hsk) .ohc-mark-text{fill:#A8322D}
.hsk:is(#hsk,.hsk) .ohc-tracing{stroke:#6B4200;fill:rgba(246,162,62,.15)}
.hsk:is(#hsk,.hsk) .ohc-tracing-dot{fill:#6B4200}
.hsk:is(#hsk,.hsk) .ohc-window.ohc-screened{stroke:#1D5E3A}
.hsk:is(#hsk,.hsk) .ohc-dome.ohc-screened{fill:rgba(29,94,58,.55);stroke:#1D5E3A}
.hsk:is(#hsk,.hsk) .ohc-correct{border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px;margin:0;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.hsk:is(#hsk,.hsk) .ohc-correct h3{margin:0;font-size:14px}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-how{font-size:12.5px;line-height:1.55}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip>.ohc-page-btn{justify-content:flex-start;min-height:38px;font-size:12.5px;text-align:left;white-space:normal}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip>.ohc-page-btn[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn::before{content:"";width:16px;height:16px;flex:none;background:var(--acc-t);-webkit-mask:var(--hsk-tool) center/contain no-repeat;mask:var(--hsk-tool) center/contain no-repeat}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:nth-child(1){--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='1.5'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:nth-child(2){--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 18 4 8l8-4 8 5-3 10z'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:nth-child(3){--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:nth-child(4){--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 19 19 5'/%3E%3Ccircle cx='5' cy='19' r='1.6'/%3E%3Ccircle cx='19' cy='5' r='1.6'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:nth-child(5):not(:last-child){--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M6.5 6.5l11 11'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-correct>.ohc-page-strip:first-of-type>.ohc-page-btn:last-child{--hsk-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");background:var(--acc-s)}
.hsk:is(#hsk,.hsk) .ohc-correct-chooser{margin:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-c);background:var(--surface-2);border:1px solid var(--line)}
.hsk:is(#hsk,.hsk) .ohc-correct-chooser[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-correct-list{margin:0;padding:0;list-style:none;font-size:13px;display:flex;flex-direction:column;gap:6px}
.hsk:is(#hsk,.hsk) .ohc-correct-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mut)}
.hsk:is(#hsk,.hsk) .ohc-correct>button:not(.ohc-page-btn){align-self:flex-start}
.hsk:is(#hsk,.hsk) .ohc-versions{font-family:var(--mono);font-size:11.5px;color:var(--mut-2)}
.hsk:is(#hsk,.hsk) .ohc-versions.ohc-error{font-family:var(--font);font-size:12.5px}

.hsk:is(#hsk,.hsk) .hsk-planpane>p.ohc-how{margin:0;padding:14px 16px;border:1px dashed var(--line-3);border-radius:var(--r);font-size:13.5px;line-height:1.55;background:var(--surface-2)}
.hsk:is(#hsk,.hsk) .hsk-privacy{font-size:13px;color:var(--mut);max-width:1080px;padding:0 4px}
.hsk:is(#hsk,.hsk) .hsk-privacy a{color:var(--acc-t)}

/* de balk met de knoppen, onderaan vast */
.hsk:is(#hsk,.hsk) .hsk-abar{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;gap:16px;padding:14px 40px;margin:0 -40px -56px;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
.hsk:is(#hsk,.hsk) .hsk-abar>.ohc-status{flex:1;min-width:0;font-size:13px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .hsk-abar>.ohc-status:empty{display:block}
.hsk:is(#hsk,.hsk) .ohc-actions{display:flex;gap:10px;flex:none;margin-left:auto}
.hsk:is(#hsk,.hsk) .ohc-actions>button{min-height:42px;padding:0 20px;font-size:14.5px}
.hsk:is(#hsk,.hsk) .ohc-actions:has(>button:last-child:not(:disabled))>button:first-child{background:transparent;color:var(--text);border-color:var(--field)}
.hsk:is(#hsk,.hsk) .ohc-actions:has(>button:last-child:not(:disabled))>button:first-child:hover:not(:disabled){background:var(--surface-3);border-color:var(--field)}
.hsk:is(#hsk,.hsk) .ohc-actions>button:last-child:not(:disabled){background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.hsk:is(#hsk,.hsk) .ohc-actions>button:last-child:not(:disabled):hover{background:var(--acc-h)}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="settle"]>details.hsk-fold{padding:0 2px}
.hsk:is(#hsk,.hsk) .ohc-pending{margin:4px 0 0;padding-left:18px}
.hsk:is(#hsk,.hsk) .ohc-pending li{font-family:var(--mono);font-size:12px;color:var(--mut-2);padding:2px 0}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="settle"]>details.hsk-fold>button{margin-top:10px}
.hsk:is(#hsk,.hsk) .hsk-mplan{display:none}
.hsk:is(#hsk,.hsk) .ohc .ohc-consent{font-weight:400;color:var(--text-2)}

/* ------------------------------------------------------------- scherm 3: rapport */
/* De kerncijfers zoals de mock-up ("31,8 °C / 286 u / 74 u / 1.120 Kh"): geen kaart, een dunne
   inktlijn erboven, het label, het grote cijfer met de eenheid in koraal, een mono-onderschrift. */
:is(#hsk,.hsk) .hsk-kpis{display:grid;grid-template-columns:repeat(var(--hsk-kpi-n,4),minmax(0,1fr));gap:0 36px}
:is(#hsk,.hsk) .hsk-kpis[hidden]{display:none}
:is(#hsk,.hsk) .hsk-kpi{background:transparent;border:0;border-top:1px solid var(--text);border-radius:0;box-shadow:none;padding:18px 0 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
:is(#hsk,.hsk) .hsk-kpi-l{font-size:14px;font-weight:400;color:var(--mut);line-height:1.35}
:is(#hsk,.hsk) .hsk-kpi-v{font-size:52px;font-weight:600;letter-spacing:-.05em;line-height:.95;display:flex;align-items:baseline;gap:0;flex-wrap:wrap;font-variant-numeric:normal;color:var(--text)}
:is(#hsk,.hsk) .hsk-kpi-v small{font-size:.38em;font-weight:600;color:var(--coral-tx);letter-spacing:0;margin-left:6px}
/* een lange ruimtenaam (bv. Eetruimte_Leefruimte_Keuken) breekt af in plaats van de tegel breder te maken dan het scherm */
:is(#hsk,.hsk) .hsk-kpi-v>*{min-width:0;overflow-wrap:anywhere}
:is(#hsk,.hsk) .hsk-kpi-name{font-size:28px;letter-spacing:-.035em;line-height:1.08;overflow-wrap:anywhere}
/* een zone naast een raamcode is geen eenheid: niet in koraal (H14) */
:is(#hsk,.hsk) .hsk-kpi-name small{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0;margin-left:10px;color:var(--mut-2)}
/* een zonenaam zonder spaties ("Eetruimte_Leefruimte_Keuken") breekt in de tegel in plaats van de pagina te verbreden (fase 7, 390 px) */
:is(#hsk,.hsk) .hsk-kpi-name,:is(#hsk,.hsk) .hsk-kpi-name small{min-width:0;max-width:100%;overflow-wrap:anywhere}
:is(#hsk,.hsk) .hsk-kpi-s{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--mut-2)}
:is(#hsk,.hsk) .hsk-kpi-s b{color:var(--text);font-weight:500}
/* een hele zin onder de indicator leest rustiger in de gewone letter */
:is(#hsk,.hsk) .hsk-kpi-main .hsk-kpi-s{font-family:var(--font);font-size:13.5px;color:var(--mut)}
:is(#hsk,.hsk) .hsk-kpi .hsk-chip{white-space:normal;height:auto;min-height:26px;padding:5px 11px;line-height:1.25;max-width:100%}
:is(#hsk,.hsk) .hsk-kpi .hsk-chip i{flex:none}
/* de schaal van de indicator: onder 1000 groen, tot 6500 zon, erboven koraal; de markering in inkt */
:is(#hsk,.hsk) .hsk-scale{position:relative;height:10px;max-width:440px;border-radius:99px;background:linear-gradient(90deg,#A9D6B8 0 13.33%,#F8CF8E 13.33% 86.67%,var(--coral) 86.67% 100%);margin-top:8px}
:is(#hsk,.hsk) .hsk-scale-l{max-width:440px}
:is(#hsk,.hsk) .hsk-scale-m{position:absolute;top:-5px;width:3px;height:20px;border-radius:2px;background:var(--text);transform:translateX(-50%);box-shadow:0 0 0 2px var(--bg)}
:is(#hsk,.hsk) .hsk-scale-l{position:relative;height:14px;font-size:11px;color:var(--mut-2);font-family:var(--mono)}
:is(#hsk,.hsk) .hsk-scale-l span{position:absolute;transform:translateX(-50%)}
/* de kerncijfers van een oudere versie staan nog in de paginakop, op het papier */

.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="report"]{display:flex;flex-direction:column;gap:16px}
.hsk:is(#hsk,.hsk) .ohc-screen.hsk-report-done>h2,.hsk:is(#hsk,.hsk) .ohc-screen.hsk-report-done>.ohc-status{display:none}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="report"]:not(.hsk-report-done)>h2{display:none}
/* de anatomie van de kaart .ohc-trouble: rustige tekst, één rode lijn links */
.hsk:is(#hsk,.hsk) .ohc-screen.hsk-report-failed>.ohc-status{color:var(--text-2);font-size:15px;border-left:2px solid var(--red-tx);padding-left:16px}
.hsk:is(#hsk,.hsk) .ohc-screen.hsk-report-failed>.ohc-status::before{display:none}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="report"]:not(.hsk-report-done)>.ohc-status{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);padding:24px 28px;font-size:14.5px;line-height:1.55;box-shadow:var(--shadow-l);max-width:860px}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="report"].hsk-report-failed:not(.hsk-report-done)>.ohc-status{color:var(--text-2);font-size:15px;border-left:2px solid var(--red-tx)}
.hsk:is(#hsk,.hsk) .ohc-screen[data-hsk="report"]>.ohc-how{max-width:860px}
.hsk:is(#hsk,.hsk) .hsk-rbody{display:flex;flex-direction:column;gap:40px}
.hsk:is(#hsk,.hsk) .hsk-rcard{padding:26px 30px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hsk:is(#hsk,.hsk) .hsk-rcard>h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.12}
.hsk:is(#hsk,.hsk) .hsk-rcard>p{font-size:14.5px;line-height:1.55;color:var(--mut);max-width:920px;text-wrap:pretty}
.hsk:is(#hsk,.hsk) .hsk-rcard>ul,.hsk:is(#hsk,.hsk) .hsk-acc-b ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .hsk-summary .ohc-summary{max-width:none;margin:0;display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .hsk-summary .ohc-summary::before{content:"\2192";font-family:var(--mono);color:var(--text);flex:none}
.hsk:is(#hsk,.hsk) .hsk-note{font-size:13px;color:var(--mut)}
.hsk:is(#hsk,.hsk) .hsk-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hsk:is(#hsk,.hsk) .hsk-small-card>h3{font-size:17px;letter-spacing:-.02em}
.hsk:is(#hsk,.hsk) .hsk-small-card>ul{list-style:none;padding:0}
.hsk:is(#hsk,.hsk) .hsk-small-card>.ohc-error{font-size:13px}

/* tabellen */
.hsk:is(#hsk,.hsk) .hsk-tscroll{overflow-x:auto;margin:0 -24px;-webkit-overflow-scrolling:touch}
.hsk:is(#hsk,.hsk) .hsk-rcard>.hsk-tscroll:last-child{margin-bottom:-20px}
/* tabellen: koppen als de mono-labels van de mock-up, cijfers in mono */
.hsk:is(#hsk,.hsk) .ohc-table{border-collapse:collapse;width:100%;font-size:13.5px}
/* fase 5 (regel 6): geen hoofdletters via CSS op kolomkoppen: die verminkten de eenheden (kWh werd KWH, m² bleef, Kh werd KH) */
.hsk:is(#hsk,.hsk) .ohc-table th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1.35;color:var(--mut-2);text-align:right;padding:10px 16px 12px;border-bottom:1px solid var(--line);background:transparent;white-space:nowrap;vertical-align:bottom}
.hsk:is(#hsk,.hsk) .ohc-table td{padding:13px 16px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.hsk:is(#hsk,.hsk) .ohc-table tr:last-child td{border-bottom:0}
/* een rijkop is een naam, geen label */
.hsk:is(#hsk,.hsk) .ohc-table tbody th{font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);vertical-align:top}
.hsk:is(#hsk,.hsk) .ohc-table th:first-child,.hsk:is(#hsk,.hsk) .ohc-table td:first-child{text-align:left;padding-left:30px}
.hsk:is(#hsk,.hsk) .ohc-table th:last-child,.hsk:is(#hsk,.hsk) .ohc-table td:last-child{padding-right:30px}
.hsk:is(#hsk,.hsk) .ohc-table td:first-child{font-family:var(--font);font-weight:600;font-size:14px;white-space:normal}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:nth-child(2){font-family:var(--font);text-align:left;white-space:normal}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows th:nth-child(2){text-align:left}
.hsk:is(#hsk,.hsk) .ohc-table tr:hover td{background:var(--surface-2)}
/* balkjes (§5): 10 px, afgerond, spoor in --surface-3; de warmste in koraal, de rest in mauve */
.hsk:is(#hsk,.hsk) .hsk-bar{display:inline-block;vertical-align:middle;width:100px;height:10px;border-radius:99px;background:var(--surface-3);margin-right:10px;position:relative;overflow:hidden}
.hsk:is(#hsk,.hsk) .hsk-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--bar)}
.hsk:is(#hsk,.hsk) .hsk-bar.is-heat i{background:var(--bar-hot)}
.hsk:is(#hsk,.hsk) .hsk-bar.is-acc i{background:var(--bar)}
/* in de tabel per ruimte: het balkje onder het getal (skin.js, khBars) */
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh-cell{min-width:112px}
.hsk:is(#hsk,.hsk) .hsk-bar.hsk-khbar{display:block;width:100%;min-width:92px;margin:7px 0 4px}
.hsk:is(#hsk,.hsk) .hsk-bar.hsk-khbar.is-hot i{background:var(--bar-hot)}
.hsk:is(#hsk,.hsk) .hsk-tdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* de warmste week */
.hsk:is(#hsk,.hsk) .hsk-heat{padding:26px 30px;display:flex;flex-direction:column;gap:18px;border-bottom:0;border-radius:var(--r-l);box-shadow:var(--shadow-l)}
.hsk:is(#hsk,.hsk) .hsk-heat-h h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.12}
.hsk:is(#hsk,.hsk) .hsk-heat-h .hsk-p{max-width:900px}
/* één kader (de kaart): de bediening op het papier met een lijn erboven, geen kader in een kader */
.hsk:is(#hsk,.hsk) .hsk-heat-ctl .ohc-house-controls{display:flex;align-items:center;gap:16px;margin:0;padding:16px 0 0;border:0;border-top:1px solid var(--line-2);border-radius:0;background:transparent;flex-wrap:wrap}
/* de knop van de mock-up: rond, in inkt */
.hsk:is(#hsk,.hsk) .ohc-house-controls>.hsk-play{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--ink);border-color:var(--ink);color:transparent;font-size:0;flex:none;position:relative}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.hsk-play::before{content:"";width:18px;height:18px;background:var(--on-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.hsk-play.is-playing::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='3.5' height='14' rx='1'/%3E%3Crect x='13.5' y='5' width='3.5' height='14' rx='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='3.5' height='14' rx='1'/%3E%3Crect x='13.5' y='5' width='3.5' height='14' rx='1'/%3E%3C/svg%3E")}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.hsk-play:hover:not(:disabled){background:var(--ink-h);border-color:var(--ink-h)}
.hsk:is(#hsk,.hsk) .hsk-track{position:relative;flex:1 1 320px;height:58px;min-width:200px}
.hsk:is(#hsk,.hsk) .hsk-track svg{position:absolute;left:9px;top:0;width:calc(100% - 18px);height:36px}
.hsk:is(#hsk,.hsk) .hsk-spark-a{fill:color-mix(in oklab,var(--coral) 12%,transparent)}
.hsk:is(#hsk,.hsk) .hsk-spark-l{fill:none;stroke:var(--coral);stroke-width:1.6;vector-effect:non-scaling-stroke}
.hsk:is(#hsk,.hsk) .hsk-spark-m{stroke:var(--text);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider{position:absolute;left:0;right:0;top:24px;width:100%;margin:0;height:20px;background:transparent;cursor:pointer}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider{-webkit-appearance:none;appearance:none;border:0;padding:0;box-shadow:none}
/* het spoor tot de knop in inkt, zoals de mock-up (skin.js zet --p) */
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--p,0%) 100% no-repeat,var(--line-3)}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider::-moz-range-track{height:4px;border-radius:99px;background:var(--line-3)}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider::-moz-range-progress{height:4px;border-radius:99px;background:var(--ink)}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--ink);border:3px solid var(--surface-2);box-shadow:0 1px 3px rgba(38,16,31,.3)}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:3px solid var(--surface-2);box-shadow:0 1px 3px rgba(38,16,31,.3)}
.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider:focus-visible{outline:2px solid var(--acc-t);outline-offset:4px;border-radius:6px}
.hsk:is(#hsk,.hsk) .hsk-days{position:absolute;left:9px;right:9px;bottom:0;height:14px;font-size:11px;color:var(--mut-2);font-family:var(--mono)}
.hsk:is(#hsk,.hsk) .hsk-days span{position:absolute;white-space:nowrap}
.hsk:is(#hsk,.hsk) .ohc-when{font-family:var(--mono);font-size:13px;color:var(--text);flex:0 1 auto;min-width:0}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;cursor:pointer;margin-left:auto}
/* de schakelaar: ook uit haalt het spoor 3:1 (--field) */
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input{-webkit-appearance:none;appearance:none;width:36px;height:20px;border-radius:99px;background:var(--field);position:relative;cursor:pointer;transition:background .15s;margin:0}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input::after,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
/* H10: aan is inkt; in het donker een crème spoor met een aubergine knop (3:1 tegenover het spoor uit) */
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input:checked,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input:checked{background:var(--ink)}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input:checked::after,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input:checked::after{background:var(--on-ink)}
.hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input:checked::after,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input:checked::after{transform:translateX(16px)}
.hsk:is(#hsk,.hsk) .hsk-hgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.hsk:is(#hsk,.hsk) .hsk-pane{border:0;border-radius:var(--r-c);overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;min-width:0}
.hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan{max-width:none;padding:12px;display:flex;flex-direction:column;gap:10px}
.hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip .ohc-page-btn{font-family:var(--font);font-weight:600}
.hsk:is(#hsk,.hsk) .ohc-plan-svg{border:0;border-radius:8px;background:#fff;display:block}
.hsk:is(#hsk,.hsk) .ohc-room{stroke:#4D3B46}
.hsk:is(#hsk,.hsk) .ohc-room-label{fill:#26101F;font-family:var(--font);font-weight:600}
.hsk:is(#hsk,.hsk) .hsk-pane-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:0}
.hsk:is(#hsk,.hsk) .hsk-pane-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;cursor:pointer;margin:0}
/* H16: de 3D-weergave volgt het thema: het vlak in --surface-2, lijnen en noordpijl in --text (check.js leest --ohc-3d-line) */
.hsk:is(#hsk,.hsk) .ohc-three{padding:12px;background:var(--surface-2);--ohc-3d-line:var(--text);--ohc-3d-ground:#C8BCB5;flex:1;display:flex;align-items:center;justify-content:center}
.hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .ohc-three{--ohc-3d-ground:#4A2B41}
@media (prefers-color-scheme:dark){.hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .ohc-three{--ohc-3d-ground:#4A2B41}}
.hsk:is(#hsk,.hsk) .ohc-three canvas{border:0;border-radius:8px;width:100%!important;max-width:100%;height:auto!important;display:block}
.hsk:is(#hsk,.hsk) .hsk-heat-f{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.hsk:is(#hsk,.hsk) .ohc-chips{margin:0;gap:6px}
/* H17: de kamers onder het plan als neutrale pillen met een warmtestaaltje, zoals "Nu het warmst" in de mock-up
   (check.js zet --ohc-heat; de inline kleur blijft voor de plugin zonder skin) */
.hsk:is(#hsk,.hsk) .ohc-chip{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;height:28px;padding:0 12px 0 9px;font-size:12.5px;font-weight:500;text-transform:none;background:var(--surface-3);color:var(--text);box-shadow:var(--pill)}
.hsk:is(#hsk,.hsk) .ohc-chip::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:var(--ohc-heat,var(--mauve));box-shadow:inset 0 0 0 1px rgba(38,16,31,.14)}
.hsk:is(#hsk,.hsk) .ohc-legend{margin:0;gap:10px;font-size:12px;color:var(--mut);font-family:var(--mono)}
.hsk:is(#hsk,.hsk) .ohc-legend span{white-space:nowrap}
.hsk:is(#hsk,.hsk) .ohc-legend-ramp{width:260px;height:8px;border:0;border-radius:99px;box-shadow:none}
.hsk:is(#hsk,.hsk) .hsk-heat-fold{border-top:1px solid var(--line-2);padding-top:12px}
.hsk:is(#hsk,.hsk) .hsk-heat-fold>p{font-size:13px;line-height:1.55;margin:6px 0}

/* uitklapblokken als de vragen van de mock-up: rijen met een lijn, de vraag groot, een "+" in koraal rechts */
/* (de klasse hsk-acc deelt de naam met Mijn account: daarom display, breedte en opvulling hier vast) */
.hsk:is(#hsk,.hsk) .hsk-acc-card{display:block;width:auto;padding:0;gap:0;background:transparent;border:0;border-top:1px solid var(--line-3);border-radius:0;box-shadow:none;overflow:visible}
.hsk:is(#hsk,.hsk) .hsk-acc-card:not(:has(+.hsk-acc-card)){border-bottom:1px solid var(--line-3)}
.hsk:is(#hsk,.hsk) .hsk-acc-card+.hsk-acc-card{margin-top:-24px}
.hsk:is(#hsk,.hsk) .hsk-acc-card>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:20px 2px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--text);border-radius:6px}
.hsk:is(#hsk,.hsk) .hsk-acc-card>summary::-webkit-details-marker{display:none}
.hsk:is(#hsk,.hsk) .hsk-acc-card>summary::after{content:"+";flex:none;font-family:var(--mono);font-size:17px;font-weight:500;line-height:1;color:var(--coral-tx)}
.hsk:is(#hsk,.hsk) .hsk-acc-card[open]>summary::after{content:"\2212"}
.hsk:is(#hsk,.hsk) .hsk-acc-card>summary:hover{color:var(--text-2)}
.hsk:is(#hsk,.hsk) .hsk-acc-card>summary h3{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0}
.hsk:is(#hsk,.hsk) .hsk-acc-b{padding:0 2px 24px;display:flex;flex-direction:column;gap:12px}
.hsk:is(#hsk,.hsk) .hsk-acc-b>p{font-size:14.5px;line-height:1.6;color:var(--mut);max-width:920px}
/* een tabel in een uitklapblok staat op het papier: een eigen vlak, zodat de cijfers rustig blijven */
.hsk:is(#hsk,.hsk) .hsk-acc-b .hsk-tscroll{margin:0;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-c)}
.hsk:is(#hsk,.hsk) .hsk-acc-card>pre{margin:0;padding:0 2px 24px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;color:var(--text-2)}

/* ------------------------------------------------------------------ fase 4 */
/* wachten dat eindigt (4.2): de kaart als er geen antwoord komt, opnieuw berekenen */
.hsk:is(#hsk,.hsk) .ohc-trouble{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--edge);border-left:2px solid var(--amber-tx);border-radius:var(--r-l);padding:24px 28px;box-shadow:var(--shadow-l);max-width:860px;margin:0}
.hsk:is(#hsk,.hsk) .ohc-trouble-text{font-size:15px;line-height:1.55;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .ohc-report-trouble{display:flex;flex-direction:column;gap:12px;max-width:860px}
.hsk:is(#hsk,.hsk) .ohc-report-trouble[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-failed-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hsk:is(#hsk,.hsk) .ohc-failed-actions .ohc-back{display:inline-flex!important;align-items:center;height:42px;padding:0 18px;border:1px solid var(--field);border-radius:var(--r-sm);color:var(--text);font-weight:600;font-size:14.5px;text-decoration:none}
.hsk:is(#hsk,.hsk) .ohc-failed-actions .ohc-back:hover{background:var(--surface-3)}
.hsk:is(#hsk,.hsk) .ohc button.ohc-rerun,.hsk:is(#hsk,.hsk) .ohc button.ohc-retry{background:var(--acc);border-color:var(--acc);color:var(--on-acc);min-height:42px;padding:0 20px;font-size:14.5px}
.hsk:is(#hsk,.hsk) .ohc button.ohc-rerun:hover:not(:disabled),.hsk:is(#hsk,.hsk) .ohc button.ohc-retry:hover:not(:disabled){background:var(--acc-h);border-color:var(--acc-h)}
.hsk:is(#hsk,.hsk) .ohc-done-note{color:var(--green-tx);background:var(--green-bg);border:1px solid color-mix(in oklab,var(--green-tx) 22%,transparent);border-radius:var(--r-c);padding:11px 15px;font-weight:600;font-size:13.5px;max-width:1080px}
/* H19: een infomelding met een pruimen lijn; rood blijft voor fouten, groen voor gelukt */
.hsk:is(#hsk,.hsk) .ohc-screen>.ohc-notice{max-width:1080px;margin:0;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--info-line);border-radius:var(--r-c);padding:11px 15px;font-size:13.5px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .ohc-delete-error{max-width:1080px}
.hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>.ohc-upload-error{flex:1 1 100%;order:-1;margin:0}

/* opladen (4.3): de voortgang per document */
.hsk:is(#hsk,.hsk) .ohc-up-progress{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1 1 100%}
.hsk:is(#hsk,.hsk) .ohc-up-progress[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-up-file{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,200px) 44px;align-items:center;gap:10px;font-size:13px}
.hsk:is(#hsk,.hsk) .ohc-up-name{font-family:var(--mono);font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsk:is(#hsk,.hsk) .ohc-up-file progress{width:100%;height:8px;accent-color:var(--acc)}
.hsk:is(#hsk,.hsk) .ohc-up-pct{font-family:var(--mono);font-size:12px;color:var(--mut-2);text-align:right}
.hsk:is(#hsk,.hsk) .hsk-drop:has(input[aria-invalid="true"]){border-color:var(--red-tx)}
.hsk:is(#hsk,.hsk) .ohc input[aria-invalid="true"]{border-color:var(--red-tx)}

/* vragen (4.4): de fout bij de vraag zelf; tekenen met de balk bij het plan */
.hsk:is(#hsk,.hsk) .ohc-item.ohc-item-invalid{border-color:var(--red-tx);box-shadow:0 0 0 3px var(--red-bg)}
.hsk:is(#hsk,.hsk) .ohc-item-error{margin:0 0 0 36px;color:var(--red-tx);background:var(--red-bg);border-radius:var(--r-sm);padding:7px 10px;font-weight:600;font-size:13px}
.hsk:is(#hsk,.hsk) .ohc-trace-bar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 14px 0;padding:8px 10px;border-radius:var(--r-c);background:var(--amber-bg);color:var(--amber-tx);font-size:13px}
.hsk:is(#hsk,.hsk) .ohc-trace-bar[hidden]{display:none}
.hsk:is(#hsk,.hsk) .ohc-trace-info{flex:1 1 180px;font-weight:600;min-width:0}
.hsk:is(#hsk,.hsk) .ohc-trace-btns{display:flex;flex-wrap:wrap;gap:6px}
.hsk:is(#hsk,.hsk) .ohc-trace-btns .ohc-page-btn{background:var(--surface)}
.hsk:is(#hsk,.hsk) .ohc-page-btn.ohc-zoom[aria-pressed="true"],.hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-page-strip .ohc-page-btn.ohc-zoom[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* het rapport (4.5): de conclusie, de waarschuwing, de kerncijfers, de tabel per ruimte */
.hsk:is(#hsk,.hsk) .ohc-part{margin:0}
/* de conclusie: een grote kaart (20 px, de lange schaduw); de wenkbrauw in mono met een bolletje in de kleur van het oordeel */
.hsk:is(#hsk,.hsk) .ohc-conclusion{--level:var(--acc);gap:16px;border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:30px 34px}
.hsk:is(#hsk,.hsk) .ohc-conclusion[data-level="red"]{--level:var(--coral)}
.hsk:is(#hsk,.hsk) .ohc-conclusion[data-level="amber"]{--level:var(--sun)}
.hsk:is(#hsk,.hsk) .ohc-conclusion[data-level="green"]{--level:#3E9A62}
.hsk:is(#hsk,.hsk) .ohc-conclusion>h3{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;line-height:1.4;text-transform:uppercase;color:var(--mut-2)}
.hsk:is(#hsk,.hsk) .ohc-conclusion>h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--level);flex:none}
.hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-verdict{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.22;color:var(--text);max-width:1000px;text-wrap:pretty}
.hsk:is(#hsk,.hsk) .ohc-concl-help{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.hsk:is(#hsk,.hsk) .ohc-concl-help>h4{font-size:15px;font-weight:600;color:var(--text);margin:0}
.hsk:is(#hsk,.hsk) .ohc-concl-help>p.ohc-how{font-size:13.5px}
.hsk:is(#hsk,.hsk) .ohc-measures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* kleine kaarten: 12 px, een lijn, geen schaduw */
.hsk:is(#hsk,.hsk) .ohc-measure{border:1px solid var(--line);border-radius:var(--r-c);padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2)}
/* H25: de beste ingreep een rustige kaart met de koraallijn van de mock-up */
.hsk:is(#hsk,.hsk) .ohc-measure-best{background:var(--surface);border-color:var(--line);box-shadow:inset 2px 0 0 var(--coral)}
.hsk:is(#hsk,.hsk) .ohc-measure-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.hsk:is(#hsk,.hsk) .ohc-measure-gain{font-size:13.5px;color:var(--text-2)}
.hsk:is(#hsk,.hsk) .ohc-measure .ohc-how{font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-chip-s{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:500;background:var(--surface-3);color:var(--text-2);box-shadow:var(--pill);white-space:nowrap;line-height:1}
.hsk:is(#hsk,.hsk) .ohc-chip-s.is-red{background:var(--red-bg);color:var(--red-tx)}
.hsk:is(#hsk,.hsk) .ohc-chip-s.is-amber{background:var(--amber-bg);color:var(--amber-tx)}
.hsk:is(#hsk,.hsk) .ohc-chip-s.is-green{background:var(--green-bg);color:var(--green-tx)}
.hsk:is(#hsk,.hsk) .ohc-chip-s.is-acc{background:var(--ink);color:var(--on-ink)}
.hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-disclaimer{font-size:13px;line-height:1.55;color:var(--mut);border-top:1px solid var(--line-2);padding-top:14px}
.hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-calc-version{font-size:12px;color:var(--mut-2);font-family:var(--mono);margin-top:-6px}
/* H25: "Kijk het glas na" als rustige kaart met één amberen lijn links (het patroon van .ohc-trouble) */
.hsk:is(#hsk,.hsk) .hsk-rcard.ohc-warning{background:var(--surface);border:1px solid var(--edge);border-left:2px solid var(--amber-tx);border-radius:var(--r)}
.hsk:is(#hsk,.hsk) .ohc-warning>h3{color:var(--text)}
.hsk:is(#hsk,.hsk) .hsk-rcard.ohc-warning>p{color:var(--text-2);font-size:14px}
.hsk:is(#hsk,.hsk) .ohc-warning .ohc-warning-link{align-self:flex-start;display:inline-flex!important;align-items:center;min-height:38px;padding:0 15px;border-radius:var(--r-sm);background:var(--surface);color:var(--text);border:1px solid var(--field);font-weight:600;text-decoration:none}
/* H13: eerst de vier cijfers van de warmste ruimte, groot zoals de mock-up; na de waarschuwing
   de indicator, met zonwering en de meeste winst, een maat kleiner */
.hsk:is(#hsk,.hsk) .hsk-kpis-room{grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 -4px}
.hsk:is(#hsk,.hsk) .hsk-kpis-room .hsk-kpi-v{font-size:56px}
.hsk:is(#hsk,.hsk) .hsk-kpis-in{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));margin:4px 0 -4px}
.hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-v:not(.hsk-kpi-name),.hsk:is(#hsk,.hsk) .hsk-kpi-main .hsk-kpi-v{font-size:40px}
.hsk:is(#hsk,.hsk) .hsk-kpi abbr{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
.hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-lead{font-size:14.5px;color:var(--mut);max-width:980px}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="row"]{white-space:normal;vertical-align:top;font-family:var(--font);font-variant-numeric:normal;text-align:left}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="row"],.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{background:transparent}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="col"]{text-align:left;white-space:normal;vertical-align:bottom}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="row"]{font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:-.005em;text-transform:none;padding:13px 14px 13px 30px;border-bottom:1px solid var(--line-2);color:var(--text)}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr:last-child th[scope="row"]{border-bottom:0}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-num-cell,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-gain{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-gain{display:block}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh{font-weight:600}
.hsk:is(#hsk,.hsk) .ohc-cell-note{display:block;font-family:var(--font);font-variant-numeric:normal;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--mut);margin-top:2px;white-space:normal}
/* een naam is geen getal: geen tabelcijfers (die zetten ook komma en punt op vaste breedte) */
.hsk:is(#hsk,.hsk) .hsk-kpi-name,.hsk:is(#hsk,.hsk) .ohc-table td::before{font-variant-numeric:normal}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{display:table-cell}
.hsk:is(#hsk,.hsk) .ohc-night-cell .ohc-chip-s{margin:0 4px 4px 0;font-size:11px;white-space:nowrap;height:auto;min-height:22px;padding:4px 9px;line-height:1.25;border-radius:99px}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{min-width:150px}
/* de chips op één regel maken de tabel breder: de kolommen iets dichter, zodat ze op 1280 px nog past */
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan :is(td,th[scope="col"]):not(:first-child):not(:last-child){padding-left:10px;padding-right:10px}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-cell-note{font-family:var(--mono);font-size:12px}
.hsk:is(#hsk,.hsk) .ohc-none{color:var(--mut-2)}
.hsk:is(#hsk,.hsk) .ohc-table-notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.55;color:var(--mut)}
.hsk:is(#hsk,.hsk) details.hsk-subfold{border-top:1px solid var(--line-2);padding-top:10px}
.hsk:is(#hsk,.hsk) details.hsk-subfold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--text)}
.hsk:is(#hsk,.hsk) details.hsk-subfold>summary::-webkit-details-marker{display:none}
.hsk:is(#hsk,.hsk) details.hsk-subfold>summary::before{content:"+";flex:none;width:12px;font-family:var(--mono);font-size:15px;font-weight:500;line-height:1;color:var(--mut-2);text-align:center}
.hsk:is(#hsk,.hsk) details.hsk-subfold[open]>summary::before{content:"\2212"}
.hsk:is(#hsk,.hsk) details.hsk-subfold>summary h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.hsk:is(#hsk,.hsk) details.hsk-subfold>.ohc-fold-body{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.hsk:is(#hsk,.hsk) details.hsk-subfold ul{margin:0;padding-left:18px;font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:4px}
.hsk:is(#hsk,.hsk) .hsk-subfold .hsk-tscroll{margin:0 -24px}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td{font-size:12.5px}
.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{text-align:left;font-family:var(--font);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--text);padding:11px 16px 11px 30px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.hsk:is(#hsk,.hsk) .ohc-table th,.hsk:is(#hsk,.hsk) .ohc-table td{min-width:0}
.hsk:is(#hsk,.hsk) .hsk-acc-b>h4{font-size:14.5px;font-weight:600;margin:6px 0 0}
.hsk:is(#hsk,.hsk) .hsk-acc-b .ohc-summary{font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:920px}

/* de afdrukkop (4.6): altijd in de pagina, enkel op papier zichtbaar */
.hsk:is(#hsk,.hsk) .hsk-print-logo{height:28px;width:auto;flex:none}

/* eerste bezoek (4.10) */
.hsk:is(#hsk,.hsk) .hsk-welcome{max-width:1080px}
.hsk:is(#hsk,.hsk) .hsk-wc-steps{list-style:none;margin:0;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px 28px}
/* de stappen als de drie kolommen van de mock-up: een inktlijn erboven, het nummer in koraal mono */
.hsk:is(#hsk,.hsk) .hsk-wc-step{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--text)}
.hsk:is(#hsk,.hsk) .hsk-wc-step .hsk-small{display:block;margin-top:4px;font-size:13.5px;line-height:1.55}
.hsk:is(#hsk,.hsk) .hsk-wc-n{height:auto;font-family:var(--mono);color:var(--coral-tx);font-weight:500;font-size:13px;flex:none}
.hsk:is(#hsk,.hsk) .hsk-wc-n::before{content:"0"}
.hsk:is(#hsk,.hsk) .hsk-wc-foot{justify-content:space-between}
.hsk:is(#hsk,.hsk) .hsk-wc-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13.5px}
.hsk:is(#hsk,.hsk) .hsk-wc-links a{color:var(--acc-t);font-weight:600}

/* minder beweging (L6): ook de lade, het paneel en de uitklappers */
@media (prefers-reduced-motion:reduce){
  .hsk:is(#hsk,.hsk) .hsk-sb,.hsk:is(#hsk,.hsk) .hsk-planpane,.hsk:is(#hsk,.hsk) details>summary::before,.hsk:is(#hsk,.hsk) .hsk-drop,.hsk:is(#hsk,.hsk) .hsk-btn,.hsk:is(#hsk,.hsk) .hsk-btn::after,.hsk:is(#hsk,.hsk) button::after,.hsk:is(#hsk,.hsk) .hsk-house,:is(#hsk,.hsk) .hsk-seg button,.hsk:is(#hsk,.hsk) .ohc-check input,.hsk:is(#hsk,.hsk) .ohc-check input::after{transition:none!important}
}

/* de tooltip van het plan hangt aan <body> */
/* de tooltip van de mock-up: donker aubergine, mono, witte tekst, afronding 8 px */
.ohc-tip{z-index:100001;background:#26101F;color:#fff;padding:6px 10px;font-size:12px;line-height:1.4;border-radius:8px;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 10px 24px -8px rgba(38,16,31,.45)}
/* H26: in het donker verhoogd aubergine met een lichte rand, zoals de rondleiding (skin.js zet de klasse op <body>) */
body.hsk-tip-dark .ohc-tip{background:#3C1D33;color:#F6F2EE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 24px -8px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){
  body.hsk-tip-auto .ohc-tip{background:#3C1D33;color:#F6F2EE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 24px -8px rgba(0,0,0,.6)}
}

/* het venster */
:is(#hsk,.hsk) .hsk-modal{position:fixed;inset:0;z-index:100000;background:rgba(31,11,25,.48);display:grid;place-items:center;padding:16px}
:is(#hsk,.hsk) .hsk-modal[hidden]{display:none}
:is(#hsk,.hsk) .hsk-modal-box{width:min(460px,100%);background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--shadow-2);padding:28px;display:flex;flex-direction:column;gap:10px}
:is(#hsk,.hsk) .hsk-modal-f{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}

/* het wachtwoordformulier van een beveiligde app-pagina */
.hsk:is(#hsk,.hsk) .hsk-password .post-password-form{display:flex;flex-direction:column;gap:12px}
.hsk:is(#hsk,.hsk) .hsk-password .post-password-form p{margin:0;color:var(--mut);font-size:13.5px}
.hsk:is(#hsk,.hsk) .hsk-password .post-password-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--text)}
.hsk:is(#hsk,.hsk) .hsk-password .post-password-form input[type=password]{width:100%;height:46px;border:1px solid var(--field);border-radius:var(--r-sm);padding:0 13px;font-size:16px;background:var(--surface);color:var(--text)}
.hsk:is(#hsk,.hsk) .hsk-password .post-password-form input[type=submit]{height:46px;border:0;border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);font-size:15px;font-weight:600;cursor:pointer;padding:0 20px}

/* aanmelden */
/* aanmelden: het gebroken wit, een kaart met de lange schaduw, een grote kop zoals de mock-up */
.hsk-login-page:is(#hsk,.hsk){display:grid;place-items:center;min-height:calc(100vh - var(--hsk-bar));min-height:calc(100dvh - var(--hsk-bar));padding:48px 16px;background:var(--bg)}
.hsk--embedded.hsk-login-page:is(#hsk,.hsk){min-height:0;background:transparent}
:is(#hsk,.hsk) .hsk-login{width:min(452px,100%);background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:40px 40px 34px;display:flex;flex-direction:column;gap:8px}
:is(#hsk,.hsk) .hsk-login-logo{height:28px;width:auto;align-self:flex-start;margin-bottom:16px}
:is(#hsk,.hsk) .hsk-login .hsk-p{margin:0 0 14px}
:is(#hsk,.hsk) .hsk-login form p{margin:0 0 12px}
:is(#hsk,.hsk) .hsk-login form label{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:6px}
:is(#hsk,.hsk) .hsk-login form input[type=text],:is(#hsk,.hsk) .hsk-login form input[type=password]{width:100%;height:46px;border:1px solid var(--field);border-radius:var(--r-sm);padding:0 13px;font-size:16px;background:var(--surface);color:var(--text)}
:is(#hsk,.hsk) .hsk-login form input[type=text]:focus-visible,:is(#hsk,.hsk) .hsk-login form input[type=password]:focus-visible{border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px;box-shadow:none}
:is(#hsk,.hsk) .hsk-login form .login-remember label{display:flex;align-items:center;gap:8px;font-weight:500}
:is(#hsk,.hsk) .hsk-login form .login-remember input{accent-color:var(--ink);width:16px;height:16px}
:is(#hsk,.hsk) .hsk-login form input[type=submit]{width:100%;height:46px;border:0;border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);font-size:15px;font-weight:600;cursor:pointer}
:is(#hsk,.hsk) .hsk-login form input[type=submit]:hover{background:var(--acc-h)}
:is(#hsk,.hsk) .hsk-login-links{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-top:8px}
/* H15: navigatielinks in inkt met een zachte onderlijn, koraal onder de muis; koraal staat hier enkel op de verzendknop (H24) */
:is(#hsk,.hsk) .hsk-login-links a,:is(#hsk,.hsk) .hsk-auth-alt a,:is(#hsk,.hsk) .hsk-auth-foot a,:is(#hsk,.hsk) .hsk-form .hsk-check a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
:is(#hsk,.hsk) .hsk-login-links a:hover,:is(#hsk,.hsk) .hsk-auth-alt a:hover,:is(#hsk,.hsk) .hsk-auth-foot a:hover,:is(#hsk,.hsk) .hsk-form .hsk-check a:hover{color:var(--acc-t);text-decoration-color:currentColor}

/* de eigen schermen (fase 2): aanmelden, account aanmaken, wachtwoord, Mijn account */
.hsk-login-page:is(#hsk,.hsk){flex-direction:column;gap:18px}
.hsk-login-page:is(#hsk,.hsk){display:flex;align-items:center;justify-content:center}
:is(#hsk,.hsk) .hsk-login-home{align-self:flex-start;display:inline-flex;border-radius:6px}
:is(#hsk,.hsk) .hsk-login-home .hsk-login-logo{margin-bottom:28px}
:is(#hsk,.hsk) .hsk-auth .hsk-h1{font-size:40px;letter-spacing:-.04em;line-height:1}
:is(#hsk,.hsk) .hsk-acc .hsk-h1{font-size:40px;letter-spacing:-.04em;line-height:1}
:is(#hsk,.hsk) .hsk-auth>.hsk-p{margin:6px 0 18px;font-size:15px}
:is(#hsk,.hsk) .hsk-form{display:flex;flex-direction:column;gap:14px;margin:4px 0 0}
:is(#hsk,.hsk) .hsk-form .hsk-field{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
:is(#hsk,.hsk) .hsk-form .hsk-field label{font-size:13.5px;font-weight:600;color:var(--text);margin:0}
/* M15: de rand van een veld haalt 3:1 (--field), ook op de aanmeldschermen */
:is(#hsk,.hsk) .hsk-form input[type=text],:is(#hsk,.hsk) .hsk-form input[type=email],:is(#hsk,.hsk) .hsk-form input[type=password]{width:100%;height:46px;border:1px solid var(--field);border-radius:var(--r-sm);padding:0 13px;font-size:16px;background:var(--surface);color:var(--text);min-width:0}
:is(#hsk,.hsk) .hsk-form input[type=text]:focus-visible,:is(#hsk,.hsk) .hsk-form input[type=email]:focus-visible,:is(#hsk,.hsk) .hsk-form input[type=password]:focus-visible{border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px;box-shadow:none}
:is(#hsk,.hsk) .hsk-form .hsk-hint{font-size:13px;color:var(--mut)}
:is(#hsk,.hsk) .hsk-form .hsk-check{margin:0}
:is(#hsk,.hsk) .hsk-form .hsk-check label{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--text-2);cursor:pointer;line-height:1.45;margin:0}
:is(#hsk,.hsk) .hsk-form .hsk-check input{accent-color:var(--ink);width:18px;height:18px;flex:none;margin:1px 0 0}
:is(#hsk,.hsk) .hsk-form .hsk-show label{font-size:13.5px;color:var(--mut)}
:is(#hsk,.hsk) .hsk-form .hsk-btn{height:46px;font-size:15px;margin-top:6px}
/* de pijl bij een stap vooruit: aanmelden, een account aanmaken, de 404 naar de app */
:is(#hsk,.hsk) .hsk-auth[data-hsk-auth=aanmelden] .hsk-form .hsk-btn-p::after,:is(#hsk,.hsk) .hsk-auth[data-hsk-auth=registreren] .hsk-form .hsk-btn-p::after,:is(#hsk,.hsk) .hsk-auth[data-hsk-auth="404"]>.hsk-btn-p::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--hsk-arrow) center/contain no-repeat;mask:var(--hsk-arrow) center/contain no-repeat;transition:transform .18s var(--ease)}
:is(#hsk,.hsk) .hsk-auth .hsk-btn-p:hover::after{transform:translateX(2px)}
:is(#hsk,.hsk) .hsk-form .hsk-btn[disabled]{opacity:.7;cursor:progress}
:is(#hsk,.hsk) .hsk-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:is(#hsk,.hsk) .hsk-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
:is(#hsk,.hsk) .hsk-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-c);font-size:13.5px;line-height:1.5;margin:2px 0 6px}
:is(#hsk,.hsk) .hsk-note--error{background:var(--red-bg);color:var(--red-tx)}
:is(#hsk,.hsk) .hsk-note--ok{background:var(--green-bg);color:var(--green-tx)}
/* 4.19: het e-mailadres nog niet bevestigd (Mijn account) */
:is(#hsk,.hsk) .hsk-note--warn{background:var(--amber-bg);color:var(--amber-tx);flex-wrap:wrap;align-items:center;justify-content:space-between}
:is(#hsk,.hsk) .hsk-note--warn p{margin:0;flex:1 1 220px}
:is(#hsk,.hsk) .hsk-note--warn form{margin:0}
:is(#hsk,.hsk) .hsk-note--warn{background:var(--amber-bg);color:var(--amber-tx);flex-direction:column;gap:6px}
/* in een kolom is de flex-basis een hoogte: zonder dit werd elke alinea 220 px hoog */
:is(#hsk,.hsk) .hsk-note--warn p{margin:0;flex:0 1 auto}
:is(#hsk,.hsk) .hsk-note a{color:inherit;font-weight:600}
:is(#hsk,.hsk) .hsk-auth-alt{margin:12px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:14px;color:var(--mut);text-align:center}
:is(#hsk,.hsk) .hsk-auth-alt a{font-weight:600}
:is(#hsk,.hsk) .hsk-auth .hsk-btn-block{margin-top:6px}
:is(#hsk,.hsk) .hsk-done-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--acc-s);color:var(--acc-t);margin:2px 0 10px}
:is(#hsk,.hsk) .hsk-done-ic .hsk-i{width:22px;height:22px}
:is(#hsk,.hsk) .hsk-done-ic.is-ok{background:var(--green-bg);color:var(--green-tx)}
:is(#hsk,.hsk) .hsk-auth-foot{width:min(452px,100%);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:0 4px;font-size:13px;color:var(--mut)}
:is(#hsk,.hsk) .hsk-auth-foot .hsk-small{margin:0}
/* de taal zoals de voet van de mock-up ("NL / EN"): mono, in hoofdletters */
:is(#hsk,.hsk) .hsk-auth-lang{display:flex;gap:14px;margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
:is(#hsk,.hsk) .hsk-auth-lang span{color:var(--text);font-weight:500}
:is(#hsk,.hsk) .hsk-auth-lang a{color:var(--mut-2)}
.hsk-acc-page:is(#hsk,.hsk){justify-content:flex-start}
/* H24: de kopbalk van de documentpagina boven de kaart (logo links, NL/EN rechts) */
.hsk-login-page:is(#hsk,.hsk):has(>.hsk-auth-top){justify-content:flex-start;padding-top:0}
:is(#hsk,.hsk) .hsk-auth-top{margin-bottom:max(12px,calc(6vh - 18px))}
:is(#hsk,.hsk) .hsk-auth-top .hsk-auth-lang{margin-left:auto}
@media (min-width:768px){
  :is(#hsk,.hsk) .hsk-auth .hsk-h1{font-size:48px;letter-spacing:-.045em}
}
:is(#hsk,.hsk) .hsk-auth[data-hsk-auth="404"] .hsk-h1{font-size:56px;letter-spacing:-.045em}
:is(#hsk,.hsk) .hsk-acc{width:min(600px,100%);display:flex;flex-direction:column;gap:16px;padding:8px 0 24px}
:is(#hsk,.hsk) .hsk-acc .hsk-auth-foot{width:100%}
:is(#hsk,.hsk) .hsk-acc-head{display:flex;flex-direction:column;gap:10px;padding:0 4px 8px}
:is(#hsk,.hsk) .hsk-acc-head .hsk-btn{align-self:flex-start;margin-top:6px}
:is(#hsk,.hsk) .hsk-acc-head .hsk-i-back{transform:rotate(180deg)}
:is(#hsk,.hsk) .hsk-acc-who{display:flex;align-items:center;gap:10px;margin:2px 0 0;color:var(--text-2)}
:is(#hsk,.hsk) .hsk-acc-who b{color:var(--text)}
:is(#hsk,.hsk) .hsk-acc .hsk-acc-sec{width:100%;padding:26px 28px;gap:12px;scroll-margin-top:16px;border-radius:var(--r);box-shadow:var(--shadow)}
:is(#hsk,.hsk) .hsk-acc-sec .hsk-h2{margin:0}
:is(#hsk,.hsk) .hsk-acc-sec .hsk-p{margin:0}
:is(#hsk,.hsk) .hsk-acc-sec .hsk-form .hsk-btn{align-self:flex-start}
/* H1, H12: op Mijn account is er geen hoofdactie in koraal; bewaren is de tweede sterke knop (inkt) */
:is(#hsk,.hsk) .hsk-acc .hsk-acc-sec:not(.hsk-acc-danger) .hsk-btn-p{background:var(--btn-ink);color:var(--btn-ink-tx);box-shadow:var(--btn-ink-edge)}
:is(#hsk,.hsk) .hsk-acc .hsk-acc-sec:not(.hsk-acc-danger) .hsk-btn-p:hover{background:var(--btn-ink-h);color:var(--btn-ink-tx)}
:is(#hsk,.hsk) .hsk-acc-danger{border-color:color-mix(in oklab,var(--danger) 30%,var(--line))}
/* de documentweergave (privacyverklaring) en de 404 */
/* de documentpagina: de kop van de mock-up (logo links, de sterke knop rechts), een grote kaart */
.hsk-doc-page:is(#hsk,.hsk){min-height:100vh;min-height:100dvh;background:var(--bg);padding:0 16px 64px}
:is(#hsk,.hsk) .hsk-doc-top{width:min(820px,100%);height:72px;margin:0 auto 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
:is(#hsk,.hsk) .hsk-doc-top .hsk-btn-s{background:var(--btn-ink);color:var(--btn-ink-tx);border-color:transparent;box-shadow:var(--btn-ink-edge)}
:is(#hsk,.hsk) .hsk-doc-top .hsk-btn-s:hover{background:var(--btn-ink-h);color:var(--btn-ink-tx)}
:is(#hsk,.hsk) .hsk-doc-top .hsk-login-logo{margin:0}
:is(#hsk,.hsk) .hsk-doc-top .hsk-login-home{align-self:center}
:is(#hsk,.hsk) .hsk-doc-main{width:min(820px,100%);margin:0 auto}
:is(#hsk,.hsk) .hsk-doc-card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:48px 52px 40px}
:is(#hsk,.hsk) .hsk-doc-card .hsk-h1{margin:0 0 24px;font-size:48px;letter-spacing:-.045em;line-height:1}
:is(#hsk,.hsk) .hsk-coral{color:var(--coral)}
:is(#hsk,.hsk) .hsk-doc-body{font-size:16px;line-height:1.65;color:var(--text-2);overflow-wrap:anywhere}
:is(#hsk,.hsk) .hsk-doc-body :where(h2,h3){margin:32px 0 10px;font-size:22px;letter-spacing:-.025em;line-height:1.2}
:is(#hsk,.hsk) .hsk-doc-body :where(h3){font-size:18px}
:is(#hsk,.hsk) .hsk-doc-body :where(p,ul,ol){margin:0 0 12px}
:is(#hsk,.hsk) .hsk-doc-body a{color:var(--acc-t)}
:is(#hsk,.hsk) .hsk-doc-body img{height:auto}
:is(#hsk,.hsk) .hsk-doc-date{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:12px;color:var(--mut-2)}
/* de app: een verlopen sessie (check.js, fase 2), met een echte knop */
.hsk:is(#hsk,.hsk) .ohc-session{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hsk:is(#hsk,.hsk) .ohc-session .ohc-error{margin:0;align-self:stretch}
.hsk:is(#hsk,.hsk) .ohc-session .ohc-relogin{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);font-size:15px;font-weight:600;text-decoration:none;border:0}
.hsk:is(#hsk,.hsk) .ohc-session .ohc-relogin:hover{background:var(--acc-h);color:var(--on-acc)}
/* reCAPTCHA: onzichtbaar en zonder badge (beslissing 40) */
.grecaptcha-badge{visibility:hidden!important;opacity:0!important;pointer-events:none!important}

@media (max-width:480px){
  :is(#hsk,.hsk) .hsk-login{padding:30px 22px 26px}
  .hsk-login-page:is(#hsk,.hsk){padding:28px 16px}
  :is(#hsk,.hsk) .hsk-auth .hsk-h1,:is(#hsk,.hsk) .hsk-acc .hsk-h1{font-size:34px}
  :is(#hsk,.hsk) .hsk-auth[data-hsk-auth="404"] .hsk-h1{font-size:36px}
  :is(#hsk,.hsk) .hsk-doc-card .hsk-h1{font-size:36px}
  :is(#hsk,.hsk) .hsk-doc-top{height:64px;margin-bottom:20px}
  :is(#hsk,.hsk) .hsk-row2{grid-template-columns:minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-acc .hsk-acc-sec{padding:20px 18px}
  :is(#hsk,.hsk) .hsk-doc-card{padding:28px 20px 24px}
  :is(#hsk,.hsk) .hsk-acc-sec .hsk-form .hsk-btn{align-self:stretch}
}

/* ==========================================================================
   Breekpunten — op de breedte van de app, niet van het scherm
   ========================================================================== */

/* brede werkruimte: de documenten en het adres naast elkaar, vragen naast het plan */
@container hskmain (min-width: 880px){
  .hsk:is(#hsk,.hsk) .hsk-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container hskmain (min-width: 900px){
  .hsk:is(#hsk,.hsk) .ohc-measures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-wc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .ohc-settle{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-hgrid.is-single{grid-template-columns:minmax(0,1fr)}
}

/* smal: KPI's per twee, de indicator over de volle breedte (vanaf 760 px vier op een rij) */
@container hskmain (max-width: 760px){
  :is(#hsk,.hsk) .hsk-kpis,.hsk:is(#hsk,.hsk) .hsk-kpis-room{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-main{grid-column:1/-1}
}

/* met vaste zijbalk staat het logo daar, niet in de bovenbalk */
@container hskapp (min-width: 1024px){
  .hsk:is(#hsk,.hsk) .hsk-top .hsk-toplogo{display:none!important}
}

/* zonder vaste zijbalk: de zijbalk als lade */
@container hskapp (max-width: 1023px){
  /* H5: de dichte lade is niet zichtbaar, dus ook niet tabbaar of voorgelezen (visibility na de schuif) */
  .hsk:is(#hsk,.hsk) .hsk-sb{position:fixed;top:var(--hsk-bar);left:0;bottom:0;height:auto;width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:var(--shadow-2);z-index:90}
  .hsk:is(#hsk,.hsk)[data-hsk-mode] .hsk-sb{border-right:1px solid var(--edge)}
  .hsk-nav-open:is(#hsk,.hsk) .hsk-sb.hsk-sb{transform:none;visibility:visible;transition:transform .22s ease}
  .hsk:is(#hsk,.hsk) .hsk-sb .hsk-sb-close{display:grid}
  :is(#hsk,.hsk) .hsk-scrim{display:block;position:fixed;inset:0;background:rgba(31,11,25,.42);z-index:80}
  :is(#hsk,.hsk) .hsk-scrim[hidden]{display:none}
  .hsk:is(#hsk,.hsk) .hsk-hamb{display:grid;margin-left:-8px}
  :is(#hsk,.hsk) .hsk-toplogo.hsk-logo--light{display:block}
  .hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-toplogo.hsk-logo--light{display:none}
  .hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-toplogo.hsk-logo--dark{display:block}
  :is(#hsk,.hsk) .hsk-crumb{display:none}
  :is(#hsk,.hsk) .hsk-top{padding:0 12px 0 16px}
  :is(#hsk,.hsk) .hsk-page{padding:26px 20px 44px;gap:20px}
  .hsk:is(#hsk,.hsk) .hsk-abar{margin:0 -20px -44px;padding:14px 20px}
}
@media (prefers-color-scheme:dark){
  @container hskapp (max-width: 1023px){
    .hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-toplogo.hsk-logo--light{display:none}
    .hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-toplogo.hsk-logo--dark{display:block}
  }
}

/* telefoon en smalle kolom */
@container hskmain (max-width: 899px){
  :is(#hsk,.hsk) .hsk-phead{flex-direction:column;align-items:stretch;gap:14px}
  :is(#hsk,.hsk) .hsk-steps{display:none}
  :is(#hsk,.hsk) .hsk-mprog{display:flex;flex-direction:column;gap:8px}
  :is(#hsk,.hsk) .hsk-mprog-lbl{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--mut-2)}
  :is(#hsk,.hsk) .hsk-mprog-lbl span:first-child{color:var(--acc-t);font-weight:500}
  :is(#hsk,.hsk) .hsk-mprog-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  :is(#hsk,.hsk) .hsk-mprog-bar span{height:4px;border-radius:99px;background:var(--surface-3)}
  :is(#hsk,.hsk) .hsk-mprog-bar span.done{background:var(--ink)}
  :is(#hsk,.hsk) .hsk-mprog-bar span.on{background:var(--acc)}
  :is(#hsk,.hsk) .hsk-h1{font-size:30px;letter-spacing:-.035em}
  .hsk:is(#hsk,.hsk) .hsk-intro-top{flex-direction:column;gap:12px}
  .hsk:is(#hsk,.hsk) .hsk-intro .hsk-counts{justify-content:flex-start}
  .hsk:is(#hsk,.hsk) .hsk-card-h,.hsk:is(#hsk,.hsk) .hsk-card-b{padding-left:18px;padding-right:18px}
  .hsk:is(#hsk,.hsk) .hsk-card-f{padding:14px 18px}
  .hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>button{width:100%;min-height:48px}
  .hsk:is(#hsk,.hsk) .ohc-item{padding:18px}
  .hsk:is(#hsk,.hsk) .ohc-item>.ohc-how,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-control,.hsk:is(#hsk,.hsk) .ohc-item>details.ohc-advanced{margin-left:0}
  .hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn{min-height:40px}
  .hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check:not(.ohc-done){min-height:46px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-done{min-height:40px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-field>.ohc-num{flex:1 1 7rem}
  .hsk:is(#hsk,.hsk) .ohc-sides-row{grid-template-columns:minmax(5rem,1.2fr)!important}

  /* het plan als schuifpaneel */
  .hsk:is(#hsk,.hsk) .hsk-mplan{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);text-align:left;cursor:pointer;color:var(--text)}
  .hsk:is(#hsk,.hsk) .hsk-mplan-img{width:96px;height:64px;border-radius:6px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;color:var(--mut)}
  .hsk:is(#hsk,.hsk) .hsk-mplan-img img{width:100%;height:100%;object-fit:cover}
  .hsk:is(#hsk,.hsk) .hsk-mplan-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .hsk:is(#hsk,.hsk) .hsk-mplan-txt b{font-size:14px}
  .hsk:is(#hsk,.hsk) .hsk-planpane{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:95;max-height:88vh;max-height:88dvh;overflow:auto;background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:0 -16px 48px rgba(38,16,31,.3);padding:0 12px 20px;transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;gap:12px;overscroll-behavior:contain}
  /* dicht staat het paneel buiten beeld en ook buiten de tabvolgorde (visibility, pas na het wegschuiven) */
  .hsk-sheet-open:is(#hsk,.hsk) .hsk-planpane{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .hsk:is(#hsk,.hsk) .hsk-sheet-h{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3;background:var(--surface);padding:10px 4px 6px;margin:0 -4px}
  .hsk:is(#hsk,.hsk) .hsk-sheet-h::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;border-radius:99px;background:var(--line-3);transform:translateX(-50%)}
  .hsk:is(#hsk,.hsk) .ohc-viewer{max-height:none;box-shadow:none}
  .hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-page-strip{position:static}
  .hsk:is(#hsk,.hsk) .ohc-correct{box-shadow:none}
  .hsk:is(#hsk,.hsk) .hsk-abar{position:sticky;bottom:0;flex-direction:column;align-items:stretch;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .hsk:is(#hsk,.hsk) .ohc-actions{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .hsk:is(#hsk,.hsk) .ohc-actions>button{min-height:48px;padding:0 10px;font-size:14px}

  /* rapport */
  .hsk:is(#hsk,.hsk) .hsk-rcard,.hsk:is(#hsk,.hsk) .hsk-heat{padding:20px 18px}
  .hsk:is(#hsk,.hsk) .ohc-conclusion{padding:22px 18px}
  .hsk:is(#hsk,.hsk) .hsk-tscroll{margin:0 -18px}
  .hsk:is(#hsk,.hsk) .ohc-table th:first-child,.hsk:is(#hsk,.hsk) .ohc-table td:first-child{padding-left:18px}
  .hsk:is(#hsk,.hsk) .ohc-table th:last-child,.hsk:is(#hsk,.hsk) .ohc-table td:last-child{padding-right:18px}
  .hsk:is(#hsk,.hsk) .hsk-rcard:not(.ohc-conclusion)>h3,.hsk:is(#hsk,.hsk) .hsk-heat-h h3{font-size:21px}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary,.hsk:is(#hsk,.hsk) .hsk-acc-card>summary h3{font-size:16px}
  .hsk:is(#hsk,.hsk) .hsk-split{grid-template-columns:minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-heat-ctl .ohc-house-controls{padding:14px 0 0}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check{margin-left:0;min-height:40px}
  .hsk:is(#hsk,.hsk) .hsk-track{flex-basis:100%;order:3}
  .hsk:is(#hsk,.hsk) .ohc-when{flex:1 1 150px}
  .hsk:is(#hsk,.hsk) .ohc-legend-ramp{width:auto;flex:1}
  .hsk:is(#hsk,.hsk) .ohc-legend{width:100%}
  .hsk:is(#hsk,.hsk) .hsk-acc-b{padding:0 2px 20px}
  .hsk:is(#hsk,.hsk) .hsk-acc-b .hsk-tscroll{margin:0}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary{padding:16px 2px;min-height:48px}

  /* de ruimten als kaartjes in plaats van een brede tabel */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows,.hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tbody{display:block}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr:first-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr:first-child{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td{display:block;padding:0;border:0;text-align:left;white-space:normal;font-size:13px;line-height:1.35}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--mut-2);margin-bottom:3px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:first-child{grid-column:1/-1;font-size:14px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:first-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:first-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:nth-child(2)::before{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:first-child{font-size:14px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:nth-child(2){grid-column:2/-1;font-size:14px;font-weight:600;align-self:center;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child::before{width:100%}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child .hsk-bar,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child .hsk-bar{flex:1;margin-right:10px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr:hover td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr:hover td{background:transparent}

  /* fase 4: de tabel per ruimte en alle cijfers als kaartjes */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tbody{display:block}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan thead,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall thead{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr:last-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr:last-child{border-bottom:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="row"],.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{grid-column:1/-1;display:block;padding:0;border:0;font-size:16px;white-space:normal}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{display:block;padding:0;border:0;text-align:left;white-space:normal;font-size:13px;line-height:1.4}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--mut-2);margin-bottom:4px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh-cell,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{min-width:0}
  /* als kaartje is de kolom smal: een lange chip mag hier wel over twee regels */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell .ohc-chip-s{white-space:normal;border-radius:9px}
  .hsk:is(#hsk,.hsk) .hsk-bar.hsk-khbar{min-width:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-best-cell,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-gain-cell{grid-column:1/-1}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr:hover td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr:hover td{background:transparent}
  .hsk:is(#hsk,.hsk) .hsk-subfold .hsk-tscroll{margin:0 -18px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{padding:0}
  .hsk:is(#hsk,.hsk) .hsk-wc-steps{padding:18px}
  .hsk:is(#hsk,.hsk) .ohc-item-error{margin-left:0}
  .hsk:is(#hsk,.hsk) .ohc-up-file{grid-template-columns:minmax(0,1fr) 44px}
  .hsk:is(#hsk,.hsk) .ohc-up-file progress{grid-column:1/-1;grid-row:2}
}
/* 4.1 (B1): tot 720 px (ook 1280 px op 200 %) de afdruk- en hulpknop enkel als icoon; hun naam
   blijft voor de schermlezer. Eén behandeling: elke icoonknop met een rand in --field (H12). */
@container hskmain (max-width: 720px){
  .hsk:is(#hsk,.hsk) .hsk-print>span,.hsk:is(#hsk,.hsk) .hsk-help>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-print,.hsk:is(#hsk,.hsk) .hsk-help{width:36px;padding:0}
  .hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-help{border-color:var(--field)}
  :is(#hsk,.hsk) .hsk-top-r{min-width:0;flex-shrink:1;gap:6px}
}
@container hskmain (max-width: 560px){
  /* 4.14: de wachtkaart op een telefoon: het teken naast de titel, iets kleiner */
  .hsk:is(#hsk,.hsk) .ohc-wait{display:block;padding:22px 18px}
  .hsk:is(#hsk,.hsk) .ohc-wait-sign{float:left;margin:0 12px 4px 0}
  .hsk:is(#hsk,.hsk) .ohc-wait-sign,.hsk:is(#hsk,.hsk) .hsk-sign{width:32px;height:32px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-wait-title,.hsk:is(#hsk,.hsk) .ohc-wait-title{font-size:20px;margin:3px 0 12px;min-height:28px}
  .hsk:is(#hsk,.hsk) .ohc-wait-body{display:block}
  .hsk:is(#hsk,.hsk) .ohc-wait-body>*+*{margin-top:6px}
  .hsk:is(#hsk,.hsk) .ohc-wait-line{clear:left}
  /* 4.17: op een telefoon staat "PDF downloaden" in het ⋯-menu */
  .hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-pdf{display:none}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in{grid-template-columns:minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-verdict{font-size:20px;letter-spacing:-.025em}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-v:not(.hsk-kpi-name),.hsk:is(#hsk,.hsk) .hsk-kpi-main .hsk-kpi-v{font-size:32px}
  :is(#hsk,.hsk) .hsk-kpis{gap:0 20px}
  :is(#hsk,.hsk) .hsk-kpi{padding:16px 0 20px}
  :is(#hsk,.hsk) .hsk-kpi-v{font-size:44px}
  .hsk:is(#hsk,.hsk) .hsk-kpis-room .hsk-kpi-v{font-size:44px}
  :is(#hsk,.hsk) .hsk-kpi-name{font-size:24px}
  .hsk:is(#hsk,.hsk) .ohc-row{grid-template-columns:100px minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-drop{padding:12px;gap:12px}
  .hsk:is(#hsk,.hsk) .hsk-d-btn{display:none}
  .hsk:is(#hsk,.hsk) .hsk-d-t{overflow-wrap:break-word;hyphens:auto;line-height:1.25}
  .hsk:is(#hsk,.hsk) .hsk-d-s{white-space:normal;overflow-wrap:anywhere}
  /* de week op een telefoon: om de andere dag een label, de schuif onder de knop, de klok op één regel */
  .hsk:is(#hsk,.hsk) .hsk-days span:nth-child(even){display:none}
  .hsk:is(#hsk,.hsk) .hsk-track{order:2}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check{order:3}
  .hsk:is(#hsk,.hsk) .ohc-when{font-size:12px;white-space:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-rbody{gap:24px}
  /* de verdiepingen blijven één spoor: de knoppen delen de breedte, een lange naam op twee regels */
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip{flex-wrap:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip .ohc-page-btn:is([data-page],[data-view]){flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2;padding:5px 8px;font-size:12px;text-align:center}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip .ohc-page-btn:is([data-page],[data-view]):is(:first-child,:last-child){padding-left:12px;padding-right:12px}
}

/* Windows hoog contrast (forced colors): wat enkel met kleur of schaduw getekend is, krijgt een systeemkleur */
@media (forced-colors:active){
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input{forced-color-adjust:none;background:Canvas;border:1px solid ButtonText}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input::after,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input::after{forced-color-adjust:none;background:ButtonText;box-shadow:none;top:1px;left:1px}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input:checked,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input:checked{background:Highlight;border-color:Highlight}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check input:checked::after,.hsk:is(#hsk,.hsk) .hsk-pane-h .ohc-check input:checked::after{background:HighlightText}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.hsk-play::before{forced-color-adjust:none;background:ButtonText}
  :is(#hsk,.hsk) .hsk-seg button.on,.hsk:is(#hsk,.hsk) .ohc-page-btn[aria-pressed="true"],.hsk:is(#hsk,.hsk) .ohc-zoom[aria-pressed="true"]{border:2px solid Highlight}
  .hsk:is(#hsk,.hsk) :is(.ohc-viewer>.ohc-page-strip,.hsk-pane-plan .ohc-plan>.ohc-page-strip) .ohc-page-btn:is([data-page],[data-view]).ohc-page-on::before{border:2px solid Highlight}
  .hsk:is(#hsk,.hsk) :focus-visible,.hsk:is(#hsk,.hsk) .ohc input:focus-visible,.hsk:is(#hsk,.hsk) .ohc select:focus-visible,.hsk:is(#hsk,.hsk) .ohc textarea:focus-visible,:is(#hsk,.hsk) .hsk-form input:focus-visible,:is(#hsk,.hsk) .hsk-login form input:focus-visible,.hsk:is(#hsk,.hsk) .hsk-track .ohc-slider:focus-visible,.hsk:is(#hsk,.hsk) .hsk-drop:has(input:focus-visible),:is(#hsk,.hsk) .hsk-search:has(input:focus-visible){outline:2px solid Highlight}
  :is(#hsk,.hsk) .hsk-scale,.hsk:is(#hsk,.hsk) .hsk-bar{forced-color-adjust:none;border:1px solid CanvasText}
  .hsk:is(#hsk,.hsk) .hsk-bar>i,:is(#hsk,.hsk) .hsk-scale-m{forced-color-adjust:none;background:CanvasText}
}

/* een laag venster (640 × 400, een telefoon liggend): de balken staan niet vast, dan blijft er plaats voor de inhoud */
@media (max-height: 520px){
  .hsk:is(#hsk,.hsk) .hsk-abar{position:static;margin-top:16px}
  :is(#hsk,.hsk) .hsk-top{position:relative}
}

@media print{
  /* op papier altijd het lichte thema: wit papier, aubergine inkt (ook wie de app donker gebruikt) */
  .hsk:is(#hsk,.hsk)[data-hsk-mode]{
    --acc:var(--acc-base,#EF524E); --acc-t:var(--acc-tx,#C3352F); --on-acc:var(--acc-on,#26101F);
    --acc-s:color-mix(in oklab,var(--acc) 8%,#fff); --acc-m:color-mix(in oklab,var(--acc) 30%,#fff);
    --bg:#fff; --surface:#fff; --surface-2:#FAF6F3; --surface-3:#F1EAE5;
    --line:#E4DAD4; --line-2:#EDE5DF; --line-3:#DCCFC8; --field:#8A7882;
    --text:#26101F; --text-2:#4D3B46; --mut:#5E4C57; --mut-2:#6F5E68; --ph:#7D6B75;
    --coral:#EF524E; --coral-tx:#C3352F; --ink:#26101F; --on-ink:#fff; --plum:#4A1A3C; --mauve:#C9B5BE;
    --btn-ink:#26101F; --btn-ink-tx:#FFFCFA; --btn-ink-edge:none; --info-line:#4A1A3C; --seg-bg:#fff; --seg-on:0 1px 3px rgba(38,16,31,.14);
    --amber-bg:#FFF1D6; --amber-tx:#6B4200; --green-bg:#E5F2E8; --green-tx:#1D5E3A; --red-bg:#FCE9E5; --red-tx:#A8322D;
    --edge:var(--line); --bar-hot:#EF524E; --bar:#C9B5BE; --brand-plum:#431239;
    color-scheme:light;
  }
  :is(#hsk,.hsk) .hsk-kpi-v,.hsk:is(#hsk,.hsk) .hsk-kpis-room .hsk-kpi-v,.hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-v:not(.hsk-kpi-name),.hsk:is(#hsk,.hsk) .hsk-kpi-main .hsk-kpi-v{font-size:32px}
  .hsk:is(#hsk,.hsk) .ohc-conclusion,.hsk:is(#hsk,.hsk) .hsk-heat{box-shadow:none}
  :is(#hsk,.hsk) .hsk-sb,:is(#hsk,.hsk) .hsk-top,:is(#hsk,.hsk) .hsk-abar,:is(#hsk,.hsk) .hsk-mplan,:is(#hsk,.hsk) .hsk-scrim,:is(#hsk,.hsk) #hsk-kpis,:is(#hsk,.hsk) .hsk-phead,:is(#hsk,.hsk) .hsk-modal,:is(#hsk,.hsk) .hsk-welcome{display:none!important}
  html.hsk-doc,html.hsk-doc body{background:#fff!important}
  .hsk:is(#hsk,.hsk) .hsk-acc-card,.hsk:is(#hsk,.hsk) .hsk-acc-b,.hsk:is(#hsk,.hsk) .hsk-pane{background:#fff}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan{break-inside:avoid}
  .hsk:is(#hsk,.hsk) .hsk-heat-f{break-before:avoid}
  .hsk:is(#hsk,.hsk) .ohc-three{background:#fff;--ohc-3d-line:#26101F;--ohc-3d-ground:#EEEDE9}
  :is(#hsk,.hsk) .hsk-app{display:block;min-height:0}
  :is(#hsk,.hsk) .hsk-main{display:block}
  :is(#hsk,.hsk) .hsk-page{padding:0;max-width:none}
  .hsk:is(#hsk,.hsk) .hsk-card,.hsk:is(#hsk,.hsk) .hsk-kpi,.hsk:is(#hsk,.hsk) .ohc-item{box-shadow:none;break-inside:avoid}
  .hsk:is(#hsk,.hsk) .hsk-tscroll,.hsk:is(#hsk,.hsk) .hsk-acc-b .hsk-tscroll,.hsk:is(#hsk,.hsk) .hsk-rcard>.hsk-tscroll:last-child{overflow:visible;margin:0}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan,.hsk:is(#hsk,.hsk) .ohc-three canvas{max-width:40rem}
  .hsk:is(#hsk,.hsk) .ohc-three{justify-content:flex-start;padding:0}
  .hsk:is(#hsk,.hsk) .hsk-acc-card:not(.ohc-advanced){display:block!important;border:0;box-shadow:none}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary::before{display:none}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary{padding:12px 0 6px}
  .hsk:is(#hsk,.hsk) .hsk-acc-b{padding:0}
  .hsk:is(#hsk,.hsk) .hsk-heat-ctl,.hsk:is(#hsk,.hsk) .hsk-heat-fold,.hsk:is(#hsk,.hsk) .hsk-pane-h{display:none!important}
  .hsk:is(#hsk,.hsk) .hsk-hgrid{grid-template-columns:minmax(0,1fr)!important}
  .hsk:is(#hsk,.hsk) .hsk-pane{border:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows{display:table!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tbody{display:table-row-group!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr{display:table-row!important;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr:first-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr:first-child{display:table-row!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td{display:table-cell!important;padding:6px 10px;white-space:nowrap}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td::before{display:none!important}
  .hsk:is(#hsk,.hsk) .ohc-table td:first-child{white-space:normal!important}
  .hsk:is(#hsk,.hsk) .hsk-bar{display:none}
  /* fase 4: de kop, de conclusie, de kerncijfers 2 × 2 en de tabel per ruimte op papier */
  .hsk:is(#hsk,.hsk) .ohc-print-head{display:flex!important;align-items:center;gap:16px}
  .hsk:is(#hsk,.hsk) .ohc-print-head .ohc-print-text p{margin:0}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .hsk:is(#hsk,.hsk) .hsk-kpis-room{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-main{grid-column:auto}
  .hsk:is(#hsk,.hsk) .hsk-kpi{padding:10px 12px}
  .hsk:is(#hsk,.hsk) .ohc-conclusion,.hsk:is(#hsk,.hsk) .ohc-warning,.hsk:is(#hsk,.hsk) .ohc-measure{break-inside:avoid}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall{display:table!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan thead,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall thead{display:table-header-group!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tbody{display:table-row-group!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr{display:table-row!important;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th{display:table-cell!important;padding:5px 8px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td::before{display:none!important}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall{font-size:10.5px}
  .hsk:is(#hsk,.hsk) details.hsk-subfold{display:block!important}
  .hsk:is(#hsk,.hsk) details.hsk-subfold>summary::before{display:none}
  .hsk:is(#hsk,.hsk) .hsk-rbody>.ohc-text-copy.hsk-acc-card,.hsk:is(#hsk,.hsk) .ohc-report-trouble,.hsk:is(#hsk,.hsk) .ohc-warning .ohc-warning-link{display:none!important}
}


/* Terugval voor browsers zonder container queries: dezelfde breekpunten op het venster. */
@supports not (container-type: inline-size){
@media (min-width: 880px){
  .hsk:is(#hsk,.hsk) .hsk-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width: 900px){
  .hsk:is(#hsk,.hsk) .ohc-measures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-wc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .ohc-settle{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-hgrid.is-single{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  :is(#hsk,.hsk) .hsk-kpis,.hsk:is(#hsk,.hsk) .hsk-kpis-room{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-main{grid-column:1/-1}
}
@media (min-width: 1024px){
  .hsk:is(#hsk,.hsk) .hsk-top .hsk-toplogo{display:none!important}
}
@media (max-width: 1023px){
  /* H5: de dichte lade is niet zichtbaar, dus ook niet tabbaar of voorgelezen (visibility na de schuif) */
  .hsk:is(#hsk,.hsk) .hsk-sb{position:fixed;top:var(--hsk-bar);left:0;bottom:0;height:auto;width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:var(--shadow-2);z-index:90}
  .hsk:is(#hsk,.hsk)[data-hsk-mode] .hsk-sb{border-right:1px solid var(--edge)}
  .hsk-nav-open:is(#hsk,.hsk) .hsk-sb.hsk-sb{transform:none;visibility:visible;transition:transform .22s ease}
  .hsk:is(#hsk,.hsk) .hsk-sb .hsk-sb-close{display:grid}
  :is(#hsk,.hsk) .hsk-scrim{display:block;position:fixed;inset:0;background:rgba(31,11,25,.42);z-index:80}
  :is(#hsk,.hsk) .hsk-scrim[hidden]{display:none}
  .hsk:is(#hsk,.hsk) .hsk-hamb{display:grid;margin-left:-8px}
  :is(#hsk,.hsk) .hsk-toplogo.hsk-logo--light{display:block}
  .hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-toplogo.hsk-logo--light{display:none}
  .hsk:is(#hsk,.hsk)[data-hsk-mode="dark"] .hsk-toplogo.hsk-logo--dark{display:block}
  :is(#hsk,.hsk) .hsk-crumb{display:none}
  :is(#hsk,.hsk) .hsk-top{padding:0 12px 0 16px}
  :is(#hsk,.hsk) .hsk-page{padding:26px 20px 44px;gap:20px}
  .hsk:is(#hsk,.hsk) .hsk-abar{margin:0 -20px -44px;padding:14px 20px}
}
@media (prefers-color-scheme:dark){@media (max-width: 1023px){
    .hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-toplogo.hsk-logo--light{display:none}
    .hsk:is(#hsk,.hsk)[data-hsk-mode="auto"] .hsk-toplogo.hsk-logo--dark{display:block}
  }}
@media (max-width: 899px){
  :is(#hsk,.hsk) .hsk-phead{flex-direction:column;align-items:stretch;gap:14px}
  :is(#hsk,.hsk) .hsk-steps{display:none}
  :is(#hsk,.hsk) .hsk-mprog{display:flex;flex-direction:column;gap:8px}
  :is(#hsk,.hsk) .hsk-mprog-lbl{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--mut-2)}
  :is(#hsk,.hsk) .hsk-mprog-lbl span:first-child{color:var(--acc-t);font-weight:500}
  :is(#hsk,.hsk) .hsk-mprog-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  :is(#hsk,.hsk) .hsk-mprog-bar span{height:4px;border-radius:99px;background:var(--surface-3)}
  :is(#hsk,.hsk) .hsk-mprog-bar span.done{background:var(--ink)}
  :is(#hsk,.hsk) .hsk-mprog-bar span.on{background:var(--acc)}
  :is(#hsk,.hsk) .hsk-h1{font-size:30px;letter-spacing:-.035em}
  .hsk:is(#hsk,.hsk) .hsk-intro-top{flex-direction:column;gap:12px}
  .hsk:is(#hsk,.hsk) .hsk-intro .hsk-counts{justify-content:flex-start}
  .hsk:is(#hsk,.hsk) .hsk-card-h,.hsk:is(#hsk,.hsk) .hsk-card-b{padding-left:18px;padding-right:18px}
  .hsk:is(#hsk,.hsk) .hsk-card-f{padding:14px 18px}
  .hsk:is(#hsk,.hsk) .hsk-upload .hsk-card-f>button{width:100%;min-height:48px}
  .hsk:is(#hsk,.hsk) .ohc-item{padding:18px}
  .hsk:is(#hsk,.hsk) .ohc-item>.ohc-how,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn,.hsk:is(#hsk,.hsk) .ohc-item>.ohc-control,.hsk:is(#hsk,.hsk) .ohc-item>details.ohc-advanced{margin-left:0}
  .hsk:is(#hsk,.hsk) .ohc-item>.ohc-page-btn{min-height:40px}
  .hsk:is(#hsk,.hsk) .ohc-control>label.ohc-check:not(.ohc-done){min-height:46px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-done{min-height:40px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-field>.ohc-num{flex:1 1 7rem}
  .hsk:is(#hsk,.hsk) .ohc-sides-row{grid-template-columns:minmax(5rem,1.2fr)!important}

  /* het plan als schuifpaneel */
  .hsk:is(#hsk,.hsk) .hsk-mplan{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);text-align:left;cursor:pointer;color:var(--text)}
  .hsk:is(#hsk,.hsk) .hsk-mplan-img{width:96px;height:64px;border-radius:6px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;color:var(--mut)}
  .hsk:is(#hsk,.hsk) .hsk-mplan-img img{width:100%;height:100%;object-fit:cover}
  .hsk:is(#hsk,.hsk) .hsk-mplan-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .hsk:is(#hsk,.hsk) .hsk-mplan-txt b{font-size:14px}
  .hsk:is(#hsk,.hsk) .hsk-planpane{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:95;max-height:88vh;max-height:88dvh;overflow:auto;background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:0 -16px 48px rgba(38,16,31,.3);padding:0 12px 20px;transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;gap:12px;overscroll-behavior:contain}
  /* dicht staat het paneel buiten beeld en ook buiten de tabvolgorde (visibility, pas na het wegschuiven) */
  .hsk-sheet-open:is(#hsk,.hsk) .hsk-planpane{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .hsk:is(#hsk,.hsk) .hsk-sheet-h{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3;background:var(--surface);padding:10px 4px 6px;margin:0 -4px}
  .hsk:is(#hsk,.hsk) .hsk-sheet-h::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;border-radius:99px;background:var(--line-3);transform:translateX(-50%)}
  .hsk:is(#hsk,.hsk) .ohc-viewer{max-height:none;box-shadow:none}
  .hsk:is(#hsk,.hsk) .ohc-viewer>.ohc-page-strip{position:static}
  .hsk:is(#hsk,.hsk) .ohc-correct{box-shadow:none}
  .hsk:is(#hsk,.hsk) .hsk-abar{position:sticky;bottom:0;flex-direction:column;align-items:stretch;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .hsk:is(#hsk,.hsk) .ohc-actions{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .hsk:is(#hsk,.hsk) .ohc-actions>button{min-height:48px;padding:0 10px;font-size:14px}

  /* rapport */
  .hsk:is(#hsk,.hsk) .hsk-rcard,.hsk:is(#hsk,.hsk) .hsk-heat{padding:20px 18px}
  .hsk:is(#hsk,.hsk) .ohc-conclusion{padding:22px 18px}
  .hsk:is(#hsk,.hsk) .hsk-tscroll{margin:0 -18px}
  .hsk:is(#hsk,.hsk) .ohc-table th:first-child,.hsk:is(#hsk,.hsk) .ohc-table td:first-child{padding-left:18px}
  .hsk:is(#hsk,.hsk) .ohc-table th:last-child,.hsk:is(#hsk,.hsk) .ohc-table td:last-child{padding-right:18px}
  .hsk:is(#hsk,.hsk) .hsk-rcard:not(.ohc-conclusion)>h3,.hsk:is(#hsk,.hsk) .hsk-heat-h h3{font-size:21px}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary,.hsk:is(#hsk,.hsk) .hsk-acc-card>summary h3{font-size:16px}
  .hsk:is(#hsk,.hsk) .hsk-split{grid-template-columns:minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-heat-ctl .ohc-house-controls{padding:14px 0 0}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check{margin-left:0;min-height:40px}
  .hsk:is(#hsk,.hsk) .hsk-track{flex-basis:100%;order:3}
  .hsk:is(#hsk,.hsk) .ohc-when{flex:1 1 150px}
  .hsk:is(#hsk,.hsk) .ohc-legend-ramp{width:auto;flex:1}
  .hsk:is(#hsk,.hsk) .ohc-legend{width:100%}
  .hsk:is(#hsk,.hsk) .hsk-acc-b{padding:0 2px 20px}
  .hsk:is(#hsk,.hsk) .hsk-acc-b .hsk-tscroll{margin:0}
  .hsk:is(#hsk,.hsk) .hsk-acc-card>summary{padding:16px 2px;min-height:48px}

  /* de ruimten als kaartjes in plaats van een brede tabel */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows,.hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tbody{display:block}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr:first-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr:first-child{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td{display:block;padding:0;border:0;text-align:left;white-space:normal;font-size:13px;line-height:1.35}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--mut-2);margin-bottom:3px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:first-child{grid-column:1/-1;font-size:14px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:first-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:first-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:nth-child(2)::before{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:first-child{font-size:14px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:nth-child(2){grid-column:2/-1;font-size:14px;font-weight:600;align-self:center;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;padding:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child::before{width:100%}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms td:last-child .hsk-bar,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows td:last-child .hsk-bar{flex:1;margin-right:10px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-rooms tr:hover td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-windows tr:hover td{background:transparent}

  /* fase 4: de tabel per ruimte en alle cijfers als kaartjes */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tbody,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tbody{display:block}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan thead,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall thead{display:none}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr:last-child,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr:last-child{border-bottom:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan th[scope="row"],.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{grid-column:1/-1;display:block;padding:0;border:0;font-size:16px;white-space:normal}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{display:block;padding:0;border:0;text-align:left;white-space:normal;font-size:13px;line-height:1.4}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan td::before,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--mut-2);margin-bottom:4px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-kh-cell,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell{min-width:0}
  /* als kaartje is de kolom smal: een lange chip mag hier wel over twee regels */
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-night-cell .ohc-chip-s{white-space:normal;border-radius:9px}
  .hsk:is(#hsk,.hsk) .hsk-bar.hsk-khbar{min-width:0}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-best-cell,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan .ohc-gain-cell{grid-column:1/-1}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsplan tr:hover td,.hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall tr:hover td{background:transparent}
  .hsk:is(#hsk,.hsk) .hsk-subfold .hsk-tscroll{margin:0 -18px}
  .hsk:is(#hsk,.hsk) .ohc-table.hsk-roomsall th[scope="row"]{padding:0}
  .hsk:is(#hsk,.hsk) .hsk-wc-steps{padding:18px}
  .hsk:is(#hsk,.hsk) .ohc-item-error{margin-left:0}
  .hsk:is(#hsk,.hsk) .ohc-up-file{grid-template-columns:minmax(0,1fr) 44px}
  .hsk:is(#hsk,.hsk) .ohc-up-file progress{grid-column:1/-1;grid-row:2}
}
@media (max-width: 720px){
  .hsk:is(#hsk,.hsk) .hsk-print>span,.hsk:is(#hsk,.hsk) .hsk-help>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-print,.hsk:is(#hsk,.hsk) .hsk-help{width:36px;padding:0}
  .hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-help{border-color:var(--field)}
  :is(#hsk,.hsk) .hsk-top-r{min-width:0;flex-shrink:1;gap:6px}
}
@media (max-width: 560px){
  /* 4.14: de wachtkaart op een telefoon: het teken naast de titel, iets kleiner */
  .hsk:is(#hsk,.hsk) .ohc-wait{display:block;padding:22px 18px}
  .hsk:is(#hsk,.hsk) .ohc-wait-sign{float:left;margin:0 12px 4px 0}
  .hsk:is(#hsk,.hsk) .ohc-wait-sign,.hsk:is(#hsk,.hsk) .hsk-sign{width:32px;height:32px}
  .hsk:is(#hsk,.hsk) .ohc .ohc-wait-title,.hsk:is(#hsk,.hsk) .ohc-wait-title{font-size:20px;margin:3px 0 12px;min-height:28px}
  .hsk:is(#hsk,.hsk) .ohc-wait-body{display:block}
  .hsk:is(#hsk,.hsk) .ohc-wait-body>*+*{margin-top:6px}
  .hsk:is(#hsk,.hsk) .ohc-wait-line{clear:left}
  /* 4.17: op een telefoon staat "PDF downloaden" in het ⋯-menu */
  .hsk:is(#hsk,.hsk) .hsk-top-r>.hsk-pdf{display:none}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in{grid-template-columns:minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-rcard>p.ohc-verdict{font-size:20px;letter-spacing:-.025em}
  .hsk:is(#hsk,.hsk) .hsk-kpis-in .hsk-kpi-v:not(.hsk-kpi-name),.hsk:is(#hsk,.hsk) .hsk-kpi-main .hsk-kpi-v{font-size:32px}
  :is(#hsk,.hsk) .hsk-kpis{gap:0 20px}
  :is(#hsk,.hsk) .hsk-kpi{padding:16px 0 20px}
  :is(#hsk,.hsk) .hsk-kpi-v{font-size:44px}
  .hsk:is(#hsk,.hsk) .hsk-kpis-room .hsk-kpi-v{font-size:44px}
  :is(#hsk,.hsk) .hsk-kpi-name{font-size:24px}
  .hsk:is(#hsk,.hsk) .ohc-row{grid-template-columns:100px minmax(0,1fr)}
  .hsk:is(#hsk,.hsk) .hsk-drop{padding:12px;gap:12px}
  .hsk:is(#hsk,.hsk) .hsk-d-btn{display:none}
  .hsk:is(#hsk,.hsk) .hsk-d-t{overflow-wrap:break-word;hyphens:auto;line-height:1.25}
  .hsk:is(#hsk,.hsk) .hsk-d-s{white-space:normal;overflow-wrap:anywhere}
  /* de week op een telefoon: om de andere dag een label, de schuif onder de knop, de klok op één regel */
  .hsk:is(#hsk,.hsk) .hsk-days span:nth-child(even){display:none}
  .hsk:is(#hsk,.hsk) .hsk-track{order:2}
  .hsk:is(#hsk,.hsk) .ohc-house-controls>.ohc-check{order:3}
  .hsk:is(#hsk,.hsk) .ohc-when{font-size:12px;white-space:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-rbody{gap:24px}
  /* de verdiepingen blijven één spoor: de knoppen delen de breedte, een lange naam op twee regels */
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip{flex-wrap:nowrap}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip .ohc-page-btn:is([data-page],[data-view]){flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2;padding:5px 8px;font-size:12px;text-align:center}
  .hsk:is(#hsk,.hsk) .hsk-pane-plan .ohc-plan>.ohc-page-strip .ohc-page-btn:is([data-page],[data-view]):is(:first-child,:last-child){padding-left:12px;padding-right:12px}
}
}