/* Hittescan Beheer in de app: tegoedkaart, chip, de schermen pakketten,
   welkom en bestelling, de kaart "Uw tegoed is op" en de rondleiding.
   Op de tokens van de skin (--acc, --surface, --line ...), dus ook in de
   donkere modus. Elke regel hangt onder #hsk (het gewicht van de skin).
   De huisstijl van de landingspagina (docs/review/10-huisstijl-landingspagina.md):
   kerncijfers groot en strak, lijstjes met een koraal "→", de stappen als
   "01 — Documenten", kleine kaarten 12 px, grote 20 px met de lange schaduw. */

/* een scherm van Beheer verbergt dat van de app, de kop en de cijfers */
#hsk[data-hsb] #overheating-check,
#hsk[data-hsb] .hsk-phead,
#hsk[data-hsb] .hsk-kpis{display:none !important}
#hsk .hsb-screen[hidden]{display:none !important}
#hsk .hsb-screen:focus{outline:none}
/* de kop krijgt de focus bij het openen van een scherm (voor schermlezers), zonder kader */
#hsk .hsb-screen h1[tabindex="-1"]:focus{outline:none}

/* ------------------------------------------------- tegoed in de zijbalk */
#hsk .hsb-credit{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border:1px solid var(--edge);border-radius:var(--r-c);background:var(--surface)}
#hsk .hsb-credit-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
#hsk .hsb-credit-n{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
#hsk .hsb-credit.is-zero{background:var(--amber-bg);border-color:transparent}
#hsk .hsb-credit.is-zero .hsb-credit-n{color:var(--amber-tx)}
#hsk .hsb-credit-btn{align-self:flex-start}
/* H12: in de zijbalk is "Tegoed kopen" de tweede sterke knop (inkt); koraal blijft voor de hoofdactie van het scherm */
#hsk .hsb-credit-btn.hsk-btn-p{background:var(--btn-ink);color:var(--btn-ink-tx);box-shadow:var(--btn-ink-edge)}
#hsk .hsb-credit-btn.hsk-btn-p:hover{background:var(--btn-ink-h);color:var(--btn-ink-tx)}
#hsk .hsb-refund{height:22px;font-size:11.5px}

/* de chip in de bovenbalk: enkel waar de zijbalk een lade is */
#hsk .hsb-topchip{text-decoration:none;height:28px}
@container hskapp (min-width: 1024px){
  #hsk .hsb-topchip{display:none}
}
/* op de telefoon heeft het rapport "Afdrukken" in de bovenbalk: daar past de chip niet meer bij (live gezien: 407 px op 390) */
@container hskapp (max-width: 479px){
  #hsk[data-hsk-screen="report"] .hsb-topchip{display:none}
}

/* ------------------------------------------------------- de schermen */
#hsk .hsb-wrap{display:flex;flex-direction:column;gap:20px;max-width:1080px;width:100%}
#hsk .hsb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
#hsk .hsb-head-txt{min-width:0;flex:1 1 360px}
#hsk .hsb-head .hsk-p{max-width:720px}
#hsk .hsb-head .hsk-h1{margin-bottom:4px}
#hsk .hsb-testmode{height:auto;min-height:28px;padding:5px 12px;white-space:normal;line-height:1.3;font-size:12.5px}
#hsk .hsb-credit-line{font-family:var(--mono);font-size:13px;color:var(--text-2);margin:0}
#hsk .hsb-actions{display:flex;gap:10px;flex-wrap:wrap}
#hsk .hsb-back{align-self:flex-start}

/* de pakketten */
#hsk .hsb-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
#hsk .hsb-pack{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 24px 20px;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;min-width:0;transition:border-color .18s,box-shadow .18s}
#hsk .hsb-pack:hover{border-color:var(--line-3)}
/* het gekozen pakket: een grote kaart, de rand in inkt (H10: gekozen is inkt; koraal enkel op "Bestellen en betalen") */
#hsk .hsb-pack.is-on{border-color:var(--text);box-shadow:0 0 0 1px var(--text),var(--shadow-l)}
#hsk .hsb-pack:has(.hsb-pack-radio:focus-visible){outline:2px solid var(--acc-t);outline-offset:3px}
#hsk .hsb-pack-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#hsk .hsb-pack-name{font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text);cursor:pointer;padding-right:96px}
#hsk .hsb-pack-pop{position:absolute;top:22px;right:20px}
#hsk .hsb-pack-desc{margin:0;color:var(--mut);font-size:14px;line-height:1.55}
/* de prijs als een kerncijfer van de mock-up: een dunne inktlijn erboven, groot en strak */
#hsk .hsb-pack-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:16px;border-top:1px solid var(--text)}
#hsk .hsb-pack-amount{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--text);font-variant-numeric:normal}
#hsk .hsb-pack-vat{font-family:var(--mono);font-size:12px;color:var(--mut-2);flex-basis:100%}
#hsk .hsb-pack-runs{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--text-2);font-weight:500}
/* de lijstjes met "→" van de mock-up */
#hsk .hsb-pack-feat{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
#hsk .hsb-pack-feat li{position:relative;padding-left:22px}
#hsk .hsb-pack-feat li::before{content:"\2192";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--text)}
/* "Kiezen" als omlijnde knop, "Gekozen" als inktknop (H12) */
#hsk .hsb-pack-pick{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;height:36px;padding:0 13px;border:1px solid var(--field);border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none}
#hsk .hsb-pack:hover .hsb-pack-pick{background:var(--surface-3)}
#hsk .hsb-pack.is-on .hsb-pack-pick{background:var(--btn-ink);color:var(--btn-ink-tx);border-color:transparent;box-shadow:var(--btn-ink-edge)}
/* de prijslijn op dezelfde hoogte in elke kaart: de kaarten delen de rijen van het rooster (subgrid) */
@supports (grid-template-rows:subgrid){
  #hsk .hsb-packs{grid-auto-rows:auto}
  #hsk .hsb-pack{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:10px;align-content:start}
  #hsk .hsb-pack-pick{justify-self:start;align-self:end;margin-top:6px}
  /* fase 3c: met een kortingscode staat er een chip onder de prijs, een zevende stuk; dan zeven rijen en elk stuk
     op zijn eigen rij, anders schoof de knop over de lijst (samenvoeging met de huisstijl, live gezien) */
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack{grid-row:span 7}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-name{grid-row:1}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-desc{grid-row:2}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-price{grid-row:3}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-cp{grid-row:4}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-runs{grid-row:5}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>.hsb-pack-feat{grid-row:6}
  #hsk .hsb-packs:has(.hsb-pack-cp:not([hidden])) .hsb-pack>:is(.hsb-pack-pick,.hsb-pub-choose){grid-row:7}
  #hsk .hsb-pack-cp{justify-self:start}
}

#hsk .hsb-order .hsk-card-b{gap:14px}
#hsk .hsb-sum{margin:0;font-size:15px;color:var(--text-2)}
#hsk .hsb-terms{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text-2);cursor:pointer}
#hsk .hsb-terms input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
#hsk .hsb-paynote{margin:0}
#hsk .hsb-msg{margin:0;flex:1 1 220px;font-size:13.5px;color:var(--text-2)}
#hsk .hsb-msg:empty{display:none}
#hsk .hsb-order .hsk-card-f{justify-content:flex-end}
#hsk .hsb-order-btn{margin-left:auto}
/* de pijl van de mock-up, enkel bij een stap vooruit: naar de betaling, een pakket kiezen */
#hsk .hsb-order-btn::after,#hsk .hsb-welcome .hsb-actions>.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)}
#hsk .hsb-order-btn:hover:not(:disabled)::after,#hsk .hsb-welcome .hsb-actions>.hsk-btn-p:hover::after{transform:translateX(2px)}

#hsk .hsb-orders{list-style:none;margin:0;padding:6px 0}
#hsk .hsb-orders-row{display:grid;grid-template-columns:110px 130px 1fr auto auto;gap:12px;align-items:center;padding:12px 28px;font-size:14px;border-top:1px solid var(--line-2)}
#hsk .hsb-orders-row:first-child{border-top:0}
#hsk .hsb-orders-pk{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* welkom */
/* welkom: de drie stappen als de kolommen van de mock-up ("01 — Documenten"): een inktlijn, geen kaart */
#hsk .hsb-wsteps{list-style:none;margin:8px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 32px}
#hsk .hsb-wstep{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:20px 0 0;background:transparent;border:0;border-top:1px solid var(--text);border-radius:0;box-shadow:none}
#hsk .hsb-wstep .hsk-h3{font-size:20px;letter-spacing:-.025em;line-height:1.15}
#hsk .hsb-wstep .hsk-p{font-size:14.5px}
#hsk .hsb-wstep-n{flex:none;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--coral-tx)}
#hsk .hsb-wstep-n::before{content:"0"}
#hsk .hsb-winfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
#hsk .hsb-wbox{padding:24px 26px;display:flex;flex-direction:column;gap:10px}
#hsk .hsb-wbox .hsk-h3{font-size:17px;letter-spacing:-.02em}
#hsk .hsb-wlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.5;color:var(--text-2)}
#hsk .hsb-wlist li{position:relative;padding-left:22px}
#hsk .hsb-wlist li::before{content:"\2192";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--text)}
/* de korte lijstjes in mono, zoals de mock-up ("→ bouwplan (PDF)") */
#hsk .hsb-wlist li,#hsk .hsb-pack-feat li{font-family:var(--mono);font-size:13px}
#hsk .hsb-wexample{font-weight:600;font-size:14px;margin-top:4px;align-self:flex-start}

/* de terugkeer van Mollie */
/* de terugkeer van Mollie: een grote kaart (20 px, de lange schaduw) */
#hsk .hsb-return-card{max-width:680px;border-radius:var(--r-l);box-shadow:var(--shadow-l)}
#hsk .hsb-return-card .hsk-card-b{gap:12px;padding:30px 32px}
#hsk .hsb-return-card .hsk-h1{font-size:30px;letter-spacing:-.035em}
#hsk .hsb-return-card .hsb-testmode{align-self:flex-start}
#hsk .hsb-return-card.is-paid .hsk-card-f>.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}
#hsk .hsb-return-card.is-paid{border-color:color-mix(in oklab,var(--green-tx) 30%,var(--line))}
#hsk .hsb-return-card.is-failed{border-color:color-mix(in oklab,var(--amber-tx) 30%,var(--line))}
#hsk .hsb-return-card.is-checking .hsk-h1::after{content:"";display:inline-block;width:18px;height:18px;margin-left:12px;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));animation:hsb-spin 1s linear infinite;vertical-align:middle}
@keyframes hsb-spin{to{transform:rotate(360deg)}}

/* de kaart "Uw tegoed is op" van check.js, in de stijl van de schil */
/* H19: een infomelding, op elk oppervlak met één pruimen lijn links (zoals .ohc-screen>.ohc-notice in de skin) */
#hsk .ohc-notice{background:var(--surface);color:var(--text-2);border:1px solid var(--line);border-left:2px solid var(--info-line);border-radius:var(--r-c);padding:18px 22px;margin:0 0 4px;display:flex;flex-direction:column;gap:8px;max-width:760px}
#hsk .ohc-notice-title{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--text);margin:0}
#hsk .ohc-notice-text{margin:0;font-size:14px;line-height:1.55;color:inherit}
#hsk .ohc-notice-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);font-weight:600;font-size:14px;text-decoration:none;margin-top:6px;border:0}
#hsk .ohc-notice-btn:hover{background:var(--acc-h);color:var(--on-acc)}

/* ------------------------------------------------------- telefoon */
@container hskapp (max-width: 560px){
  #hsk .hsb-orders-row{grid-template-columns:1fr auto;gap:4px 10px;padding:10px 16px}
  #hsk .hsb-orders-row > :nth-child(2){grid-row:2;color:var(--mut);font-size:12.5px}
  #hsk .hsb-orders-row{padding:12px 18px}
  #hsk .hsb-orders-row > :nth-child(3){grid-column:1/-1}
  #hsk .hsb-pack{padding:20px 18px 18px}
  #hsk .hsb-pack-amount{font-size:36px}
  #hsk .hsb-return-card .hsk-card-b{padding:24px 20px}
  #hsk .hsb-order .hsk-card-f{flex-direction:column;align-items:stretch}
  #hsk .hsb-order-btn{width:100%;margin-left:0}
  #hsk .hsb-actions .hsk-btn{flex:1 1 100%}
}

/* --------------------------------------------------- de rondleiding */
.hsk.hsb-tour{position:fixed;inset:0;z-index:100050;background:transparent;container:none}
.hsk.hsb-tour .hsb-tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(31,11,25,.55);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;pointer-events:none}
.hsk.hsb-tour .hsb-tour-pop{position:fixed;width:min(380px,calc(100vw - 24px));background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow-2);padding:22px 22px 16px;display:flex;flex-direction:column;gap:8px}
/* de ballon als de tooltip van de mock-up (§5): donker aubergine met lichte tekst, in beide thema's */
.hsk.hsb-tour .hsb-tour-pop{--surface:#26101F;--surface-2:#321629;--surface-3:#3C1D33;--text:#F6F2EE;--text-2:#E9DFE3;--mut:#C9B5BE;--field:#9A8090;--line-2:rgba(255,255,255,.14);--coral-tx:#FF9A8B;--acc-t:#FF9A8B;--edge:rgba(255,255,255,.14);color-scheme:dark}
.hsk.hsb-tour[data-hsk-mode="dark"] .hsb-tour-pop{--surface:#3C1D33;--surface-3:#4A2B41;--edge:rgba(255,255,255,.2)}
@media (prefers-color-scheme:dark){.hsk.hsb-tour[data-hsk-mode="auto"] .hsb-tour-pop{--surface:#3C1D33;--surface-3:#4A2B41;--edge:rgba(255,255,255,.2)}}
.hsk.hsb-tour .hsb-tour-pop.is-sheet{left:12px !important;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));top:auto !important;width:auto}
.hsk.hsb-tour .hsb-tour-pop.is-sheet.is-top{top:calc(12px + var(--hsk-bar,0px)) !important;bottom:auto}
/* de teller als de genummerde labels van de mock-up: mono, in koraal
   (:is(#hsk,.hsk): het gewicht van de skin, die koppen en alinea's de letter van de app geeft) */
.hsk.hsb-tour:is(#hsk,.hsk) .hsb-tour-count{margin:0;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--coral-tx);text-transform:none}
.hsk.hsb-tour:is(#hsk,.hsk) .hsb-tour-title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
.hsk.hsb-tour .hsb-tour-text{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.hsk.hsb-tour .hsb-tour-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.hsk.hsb-tour .hsb-tour-nav{display:flex;gap:8px}
.hsk.hsb-tour .hsb-tour-prev[disabled]{opacity:.45;cursor:default}
@media (prefers-reduced-motion: reduce){
  .hsk.hsb-tour .hsb-tour-spot{transition:none}
  #hsk .hsb-return-card.is-checking .hsk-h1::after{animation:none}
  #hsk .hsb-order-btn::after,#hsk .hsb-welcome .hsb-actions>.hsk-btn-p::after,#hsk .hsb-pack{transition:none}
}
/* enkel voor schermlezers: de live region van de rondleiding (beslissing 62) */
.hsb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hsb-msg .hsb-relogin{font-weight:600}

/* ---------------------------------------- kortingscode (fase 3c, ontwerp 09) */
#hsk .hsb-pack-was{font-size:15px;font-weight:500;color:var(--mut);text-decoration:line-through;text-decoration-thickness:1.5px}
#hsk .hsb-pack-was[hidden]{display:none}
#hsk .hsb-pack.has-coupon .hsb-pack-amount{color:var(--green-tx)}
#hsk .hsb-pack-cp{align-self:flex-start;height:auto;min-height:24px;white-space:normal;line-height:1.3;padding:3px 10px;font-size:12.5px}
#hsk .hsb-pack-cp[hidden]{display:none}
#hsk .hsb-coupon{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#hsk .hsb-coupon-toggle{border:0;background:none;padding:2px 0;font:inherit;font-size:14px;font-weight:600;color:var(--acc-t);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#hsk .hsb-coupon-toggle:focus-visible,#hsk .hsb-coupon-remove:focus-visible,#hsk .hsb-focus-other:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px;border-radius:4px}
#hsk .hsb-coupon-form{display:flex;flex-direction:column;gap:6px;width:min(440px,100%)}
#hsk .hsb-coupon-form[hidden]{display:none}
#hsk .hsb-coupon-form label{font-size:13px;font-weight:600;color:var(--text-2)}
#hsk .hsb-coupon-row{display:flex;gap:8px}
/* huisstijl: de rand van 3:1 (--field) en de focus als echte ring van 2 px (H18), zoals elk veld; de code in mono */
#hsk .hsb-coupon-row input{flex:1 1 auto;min-width:0;height:44px;border:1px solid var(--field);border-radius:var(--r-sm);padding:0 12px;font-family:var(--mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase;background:var(--surface);color:var(--text);outline:none}
#hsk .hsb-coupon-row input:focus-visible{border-color:var(--acc-t);outline:2px solid var(--acc-t);outline-offset:2px;box-shadow:none}
#hsk .hsb-coupon-row .hsk-btn{height:44px;flex:none}
#hsk .hsb-coupon-msg{margin:0;font-size:13.5px;color:var(--text-2)}
#hsk .hsb-coupon-msg:empty{display:none}
#hsk .hsb-coupon-msg.is-ok{color:var(--green-tx)}
#hsk .hsb-coupon-msg.is-bad{color:var(--red-tx)}
#hsk .hsb-coupon-remove{align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:13px;color:var(--mut);cursor:pointer;text-decoration:underline}
#hsk .hsb-coupon-remove[hidden]{display:none}
#hsk .hsb-sum-cp{display:block;margin-top:4px;color:var(--green-tx)}
#hsk .hsb-return-cp{margin:0;font-size:14px;color:var(--text-2)}
#hsk .hsb-focus-other{align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:14px;font-weight:600;color:var(--acc-t);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#hsk .hsb-packs.is-focus{grid-template-columns:minmax(0,420px)}