/*
 * Het winkeliersportaal — het hele stijlblad.
 *
 * Dezelfde tokens en dezelfde onderdeelnamen als de Brand Manager, want dat is één ontwerpsysteem
 * en geen twee. En dezelfde regel die alles bij elkaar houdt: chroom is neutraal, inhoud is
 * gekleurd. Alle verzadiging op dit scherm hoort bij een logo, bij een kleur die de winkelier zelf
 * koos, of bij de knop waarop hij klikt.
 *
 * Wat anders is dan de manager, is de indeling. Daar hangt een donkere zijbalk met vijftien
 * schermen; hier zijn het er vier, en dan is een zijbalk meubilair. Dus: een smalle balk bovenaan
 * en daaronder één kolom op leesbreedte.
 */

:root {
  --blue: #2f73f0;
  --blue-deep: #1e56c4;
  --blue-wash: #eaf1fe;
  --navy: #0b1b3a;

  --ink: #0e1729;
  --ink-soft: #4a5568;
  --ink-faint: #6b7688;

  --line: #dde3ec;
  --line-soft: #eaeef4;
  --canvas: #f6f8fb;
  --surface: #ffffff;
  --sunk: #eef1f6;
  --bezel: #8b929e;

  --danger: #b42318;
  --danger-wash: #fdeceb;
  --warn-wash: #fdf3e2;
  --go: #1a7f4b;
  --go-wash: #e7f4ec;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 20px;
  --s-xl: 32px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --vlot: 140ms cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* De schermen waar je nog niet binnen bent: een witte kaart op navy, precies zoals de Brand
   Manager dat doet. Dat is geen kopieerzucht maar herkenning: het is dezelfde firma, en wie beide
   gebruikt hoort niet te hoeven twijfelen of hij goed zit. */
body.kaal {
  display: grid; place-items: center; min-height: 100svh;
  padding: var(--s-lg); background: var(--navy);
}

a { color: var(--blue); }
h1, h2 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1rem; }
p { margin: 0 0 var(--s-md); }

.klein { font-size: .8125rem; }
.zacht { color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: .9em; }

/* ── de balk ────────────────────────────────────────────────────────────────────────────── */

.balk {
  display: flex; align-items: center; gap: var(--s-lg);
  padding: var(--s-md) var(--s-lg);
  background: var(--navy); color: #fff;
}
.merk { display: flex; align-items: center; gap: var(--s-sm); color: #fff; text-decoration: none; font-size: 1.05rem; }
.merk strong { font-weight: 700; }
.merk-bij { color: #93a4c4; font-weight: 400; }

/* Het echte logo, hetzelfde bestand als de Brand Manager gebruikt. */
.merk-logo { width: 30px; height: 30px; flex: none; }

.balk-menu { display: flex; gap: var(--s-md); margin-left: var(--s-md); }
.balk-menu a { color: #b9c6dd; text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; }
.balk-menu a:hover { color: #fff; }
.balk-menu a.aan { color: #fff; border-bottom-color: var(--blue); }

.wie { display: flex; align-items: center; gap: var(--s-sm); margin-left: auto; }
.wie-naam { color: #b9c6dd; font-size: .8125rem; }
.wie-uit {
  background: none; border: 0; color: #93a4c4; font: inherit; font-size: .8125rem;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.wie-uit:hover { color: #fff; }

/* ── het werkvlak ───────────────────────────────────────────────────────────────────────── */

.werkvlak { max-width: 980px; margin: 0 auto; padding: var(--s-xl) var(--s-lg) 64px; }
.werkvlak.breed { max-width: 1180px; }
/* De kale schermen: de melding en de kaart delen één kolom, anders steekt een melding breder uit
   dan de kaart eronder en valt het uit elkaar. */
.werkvlak.midden { padding: 0; width: min(100%, 440px); max-width: none; }
.werkvlak.midden.breed { width: min(100%, 520px); }

.paginakop { margin-bottom: var(--s-lg); }
.paginakop-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; }
.bijschrift { color: var(--ink-soft); margin: var(--s-xs) 0 0; max-width: 62ch; }
.terug { display: inline-block; font-size: .8125rem; margin-bottom: var(--s-xs); text-decoration: none; }
.terug::before { content: "← "; }

/* ── panelen ────────────────────────────────────────────────────────────────────────────── */

.paneel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s-lg); overflow: hidden; }
.paneel-kop { padding: var(--s-md) var(--s-md) 0; }
.paneel-lijf { padding: var(--s-md); }
.paneel-lijf > :last-child { margin-bottom: 0; }

.rooster-twee { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-lg); align-items: start; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
.vier { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-md); }

/* De kleurvelden. Geen vast aantal kolommen: het zijn er nu vijf, en een raster van twee laat er
   dan één alleen op de laatste regel staan. Ze vullen de breedte die er is. */
.kleuren { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: var(--s-md); }

/* ── velden ─────────────────────────────────────────────────────────────────────────────── */

.veld { margin-bottom: var(--s-md); }
.veld > label { display: block; font-weight: 600; font-size: .8125rem; margin-bottom: var(--s-xs); }
.veld input[type="text"], .veld input[type="email"], .veld input[type="password"],
.veld input:not([type]), .veld select, .veld textarea, .veld input[type="file"] {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--vlot), box-shadow var(--vlot);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
.veld textarea { resize: vertical; }

/* Een veld dat nu niet mag. Op slot en niet weg: verdwijnen leest als een storing, op slot met de
   reden ernaast leest als een regel. */
.veld-uit { opacity: .5; }
.veld-uit input, .veld-uit button { cursor: not-allowed; }
/* ── het kleurveld ──────────────────────────────────────────────────────────────────────
 *
 * Een hexveld met het staal ernaast. Geen `input[type=color]`: die opent de kleurdialoog van het
 * besturingssysteem, ziet er op elke machine anders uit, is niet te stylen, en je kunt er geen
 * hexcode in plakken. Een winkelier kent zijn huisstijl als hexcode, dus dat is wat er in het
 * veld staat; de kiezer hangt ernaast voor wie hem niet uit zijn hoofd weet. */
.kleurveld { position: relative; display: flex; align-items: stretch; gap: var(--s-xs); }
.kleurveld input[data-hex] { flex: 1; min-width: 0; text-transform: uppercase; }
.kleurknop {
  flex: none; width: 38px; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px #fff;
}
.kleurknop:hover { border-color: var(--bezel); }
.kleurknop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.kiezer {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 200px;
  padding: var(--s-sm); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(11, 27, 58, .18);
}
.kiezer[hidden] { display: none; }

/* Het vlak: verzadiging naar rechts, helderheid naar beneden, over de gekozen tint heen. */
.kiezer-vlak {
  position: relative; height: 120px; border-radius: var(--r-sm); cursor: crosshair;
  background-image: linear-gradient(to bottom, transparent, #000),
                    linear-gradient(to right, #fff, var(--tint, #f00));
  touch-action: none;
}
.kiezer-stip, .kiezer-greep {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%); pointer-events: none;
}
.kiezer-tint {
  position: relative; height: 12px; margin-top: var(--s-sm); border-radius: 999px;
  cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.kiezer-greep { top: 50%; }
.hulp { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: var(--s-xs); }
.hulp-fout { color: var(--danger); }

/* De sterktemeter. Vier standen, en de kleur is nooit het enige signaal: het woord ernaast zegt
   hetzelfde, want een balkje dat alleen van kleur verandert zegt niets tegen wie kleuren niet
   onderscheidt. */
.meter { margin-top: var(--s-xs); }
.meter-balk { height: 4px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.meter-balk > span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width var(--vlot), background var(--vlot); }
.meter-tekst { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: var(--s-xs); }

.meter[data-punten="0"] .meter-balk > span { width: 25%; background: var(--danger); }
.meter[data-punten="1"] .meter-balk > span { width: 50%; background: #a15c07; }
.meter[data-punten="2"] .meter-balk > span { width: 75%; background: var(--blue); }
.meter[data-punten="3"] .meter-balk > span { width: 100%; background: var(--go); }
.meter[data-punten="0"] .meter-tekst { color: var(--danger); }

/* Het webadres: één veld met vaste stukken eromheen.
 *
 * Eerst had het hele vak de grijze toon van de vaste stukken, en dan leest het als uitgeschakeld:
 * je ziet niet waar je mag typen. Nu is het andersom, zoals elk ander veld met een voor- en
 * achtervoegsel: de vaste stukken zijn grijs en het invulbare deel is wit. De focusrand ligt om
 * het gehéél, want voor wie erin typt is dit één veld en niet drie dingen naast elkaar. */
.voorvoegsel {
  display: flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  transition: border-color var(--vlot), box-shadow var(--vlot);
}
.voorvoegsel:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.voorvoegsel > span {
  display: flex; align-items: center; padding: 8px 10px;
  background: var(--sunk); color: var(--ink-faint);
  font-size: .8125rem; white-space: nowrap; user-select: none;
}
.voorvoegsel > span:first-child { border-right: 1px solid var(--line); }
.voorvoegsel > span:last-child { border-left: 1px solid var(--line); }
.voorvoegsel input {
  flex: 1; min-width: 6ch;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 8px 10px !important; border-radius: 0 !important;
}

.vinkje { display: block; margin: var(--s-md) 0; font-size: .875rem; }
.vinkje input { margin-right: 6px; }
.vinkje .hulp { margin-left: 20px; }

/* Het lokvakje voor bots: buiten beeld, maar niet display:none, want dat vullen ze niet in. */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── knoppen ────────────────────────────────────────────────────────────────────────────── */

.knop, .knop-primair {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font: inherit; font-size: .875rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background var(--vlot), border-color var(--vlot);
}
.knop:hover { background: var(--sunk); border-color: #cfd7e3; }
.knop-primair { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; padding: 7px 14px; }
.knop-primair:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.knop-rij { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }

/* ── meldingen en badges ────────────────────────────────────────────────────────────────── */

.melding { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s-md); }
.melding-goed { background: var(--go-wash); border-color: color-mix(in srgb, var(--go) 35%, transparent); color: #0f5c35; }
.melding-let-op { background: var(--warn-wash); border-color: color-mix(in srgb, #a15c07 35%, transparent); color: #7a4505; }
.melding-fout { background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: #8c1b12; }
.melding-info { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 25%, transparent); color: #16408c; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--sunk); color: var(--ink-soft); }
.badge-go { background: var(--go-wash); color: #0f5c35; }

/* ── de lijst met pagina's ──────────────────────────────────────────────────────────────── */

.rijen { display: flex; flex-direction: column; gap: var(--s-sm); }
.rij {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--vlot), transform var(--vlot);
}
.rij:hover { border-color: var(--bezel); transform: translateY(-1px); }

/* De tegel staat in de verhouding van de app, op een neutrale rand: zonder die rand verdwijnt
   een witte tegel in de kaart en beoordeel je een logo dat je niet ziet. */
.rij-tegel {
  width: 76px; aspect-ratio: 1.62; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden; padding: 4% 8%;
  box-shadow: 0 0 0 1px var(--bezel);
}
.rij-tegel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rij-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rij-naam { font-weight: 600; }
.rij-eind { margin-left: auto; }

.logovak {
  aspect-ratio: 1.62; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); overflow: hidden; padding: 4% 8%;
  box-shadow: 0 0 0 1px var(--bezel); margin-bottom: var(--s-md);
}
.logovak img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Een tweede blok in hetzelfde paneel. Een streep en geen tweede kader: het is één onderwerp
   (deze kaart), maar het logo gaat door een eigen formulier en dat mag je zien. */
.paneel-deel { border-top: 1px solid var(--line); }
.deel-kop { font-size: .9375rem; margin: 0 0 var(--s-sm); }

/* Het vakje met het huidige logo naast het uploadveld, want onder elkaar duwde het de rest van
   het paneel een half scherm omlaag. */
.logo-rij { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-md); align-items: start; }
.logo-rij .logovak { width: 104px; height: 104px; margin: 0; }
.logo-rij form > :last-child { margin-bottom: 0; }
@media (max-width: 720px) { .logo-rij { grid-template-columns: 1fr; } }

/* Wat de upload aan het doen is. Staat naast de knop en niet als melding bovenaan: het gaat over
   dit ene vakje, en bovenaan zou het scherm eronder verspringen. */
.logo-stand { margin-left: var(--s-sm); font-size: .8125rem; color: var(--ink-soft); }
.logo-stand-fout { color: #a12222; }
.logo-uitleg { margin-top: var(--s-md); }

/* De maat van het logo. Hoort bij de pagina en niet bij de upload, maar staat ernaast omdat je
   hem verzet terwijl je naar je logo kijkt. */
.logo-maat { margin-top: var(--s-md); }
.logo-maat .vinkje { margin: 0 0 var(--s-sm); }
.maat-velden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.maat-velden .veld { margin-bottom: var(--s-sm); }
.maat-velden[hidden] { display: none; }

/* ── de vouwen ──────────────────────────────────────────────────────────────────────────── */

/* Eén onderwerp tegelijk open. `<details name>` regelt dat in een moderne browser zelf; de
   javascript doet het in een oudere. De pijl is van ons, want de standaardpijl staat op elk
   besturingssysteem ergens anders en springt bij het openen. */
.stapel > form { margin: 0; }

/* Elke vouw is een eigen kaart. Een stapel kaarten in plaats van één paneel met streepjes: elk
   onderwerp staat dan op zichzelf, ook als het dicht is, en dat is wat een dichte vouw hoort te
   zijn. De kop blijft zichtbaar en aanklikbaar, de rest schuift eronder vandaan. */
.vouw {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: var(--s-md); overflow: hidden;
  transition: border-color var(--vlot), box-shadow var(--vlot);
}
.vouw[open] { border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.vouw > summary {
  list-style: none; cursor: pointer; padding: var(--s-md);
  font-weight: 600; font-size: .9375rem;
  display: flex; align-items: center; gap: var(--s-sm);
}
.vouw > summary::-webkit-details-marker { display: none; }
.vouw > summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform var(--vlot);
}
.vouw[open] > summary::before { transform: rotate(45deg); }
.vouw > summary:hover { color: var(--blue); }
.vouw > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.vouw-lijf { padding: 0 var(--s-md) var(--s-md); }
.vouw-lijf > :last-child { margin-bottom: 0; }

/* Een waarde die vastligt. Ziet eruit als een veld maar is er geen, want hij is niet te wijzigen
   en een uitgezet invoerveld leest als een storing. */
.vast {
  margin: 0; padding: 8px 10px; font-size: .8125rem; color: var(--ink-soft);
  background: var(--bezel); border-radius: var(--r-sm); word-break: break-all;
}

/* De opslaanknop staat buiten de vouwen: altijd waar je hem verwacht, en niet in een kaart, want
   hij hoort bij alle kaarten samen. */
.bewaar-rij { margin-top: var(--s-xs); }

/* De maat van een regel: vijf knopjes naast elkaar, klein en rustig, want het is een bijstelling
   van het veld erboven en geen eigen onderwerp. */
.maatrij { display: flex; align-items: center; gap: var(--s-sm); margin-top: var(--s-xs); }
.maat-kop { font-size: .6875rem; color: var(--ink-soft); }
.maatknoppen { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.maatknop { position: relative; }
.maatknop input { position: absolute; opacity: 0; width: 0; height: 0; }
.maatknop span {
  display: block; padding: 3px 9px; font-size: .6875rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; border-left: 1px solid var(--line); transition: background var(--vlot), color var(--vlot);
}
.maatknop:first-child span { border-left: 0; }
.maatknop:hover span { background: var(--sunk); }
.maatknop:has(input:checked) span { background: var(--blue); color: #fff; }
.maatknop:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ── de letterkiezer ───────────────────────────────────────────────────────────────────── */

/* Elke letter toont zichzelf. Een lijst met namen zegt niets: je kiest een letter aan hoe hij
   eruitziet, niet aan hoe hij heet. De radioknop is weg en het vak zelf is de knop. */
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-sm); }
.letter {
  position: relative; display: block; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--vlot), background var(--vlot);
}
.letter:hover { border-color: #cfd7e3; background: var(--sunk); }
.letter input { position: absolute; opacity: 0; width: 0; height: 0; }
.letter:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.letter:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.letter-proef {
  display: block; font-size: 1.125rem; line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.letter-naam {
  display: flex; justify-content: space-between; gap: 6px; align-items: baseline;
  margin-top: 4px; font-size: .6875rem; color: var(--ink-soft);
}
.letter-soort { font-size: .625rem; opacity: .75; }

/* ── het voorbeeld ──────────────────────────────────────────────────────────────────────── */

/* Een verkleinde nabootsing van de deelpagina. De maten komen uit `www-share/assets/css/share.css`
   en zijn niet gegokt: dezelfde verhoudingen, dezelfde radii, dezelfde volgorde. Wijkt dit af, dan
   belooft het voorbeeld iets anders dan de klant te zien krijgt, en dat is erger dan geen
   voorbeeld. */
.voorbeeld {
  padding: 22px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-align: center; transition: background var(--vlot);
}
.vb-sub { font-size: .8125rem; line-height: 1.5; margin: 0 0 6px; transition: color var(--vlot); }
.vb-note { font-size: .6875rem; line-height: 1.5; opacity: .85; margin: 0 0 18px; transition: color var(--vlot); }

/* De kaart: radius 26 op 400 breed wordt hier ongeveer 18. */
.vb-kaart {
  border-radius: 18px; padding: 18px 15px; margin: 0 auto 18px;
  box-shadow: 0 18px 40px -12px rgba(11, 27, 58, .42), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background var(--vlot);
}
.vb-logo { margin: 0 auto 12px; }
/* De maten komen uit javascript, meegeschaald met de echte kaart: zie `pt_logo_maten()`. Wat hier
   staat is alleen wat er geldt voordat dat één keer heeft gedraaid. */
.vb-logo img { max-width: 78%; max-height: 40px; object-fit: contain; display: block; margin: 0 auto; }

/* De barcode staat altijd op wit, want daar leest een kassascanner hem van af. */
.vb-code { background: #fff; border-radius: 10px; padding: 12px 11px 8px; box-shadow: 0 6px 18px rgba(11, 27, 58, .18); }

/* Een ECHTE code, met dezelfde bibliotheek als de deelpagina. Een tekening zou er ook goed
   uitzien bij een nummer dat niet in het gekozen type past, en dat is precies wat hier zichtbaar
   moet worden. Vandaar ook de regel eronder als het misgaat. */
.vb-code canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.vb-geen { font-size: .625rem; line-height: 1.4; color: #8a4a12; padding: 10px 4px; }
.vb-num { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; color: var(--ink); font-size: .625rem; margin-top: 7px; word-break: break-all; }
.vb-num[hidden] { display: none; }

.vb-knop {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; padding: 10px; font-size: .75rem; font-weight: 600; color: #fff;
  margin-bottom: 8px; transition: background var(--vlot);
}
.vb-knop img { border-radius: 4px; }
.vb-knop-uit { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(11, 27, 58, .16); }

/* Wat onder het voorbeeld hoort, hoort er ook los van te staan: het bedient de nabootsing, het is
   er geen onderdeel van. Een streep en lucht in plaats van drie blokken op elkaar. */
.vb-bediening { margin-top: var(--s-md); padding-top: var(--s-md); border-top: 1px solid var(--line); }
.vb-bediening .veld { margin-bottom: var(--s-sm); }
.vb-bediening .vinkje { margin: var(--s-sm) 0; }

.vb-echt { margin-top: var(--s-md); padding-top: var(--s-md); border-top: 1px solid var(--line); }
.vb-echt .hulp { margin-top: var(--s-sm); }

/* ── code ───────────────────────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: var(--s-xs); margin-bottom: var(--s-md); border-bottom: 1px solid var(--line); }
.tabs a { padding: 6px 12px; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.aan { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }

.code {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.55;
  background: var(--navy); color: #dbe4f4;
  padding: var(--s-md); border-radius: var(--r-md);
  overflow-x: auto; margin: 0 0 var(--s-md); white-space: pre;
}

/* ── leeg en inloggen ───────────────────────────────────────────────────────────────────── */

.leeg { text-align: center; padding: var(--s-xl) var(--s-md); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.leeg h2 { margin-bottom: var(--s-xs); }
.leeg p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto var(--s-md); }
.leeg .knop-rij { justify-content: center; }

.inlogkaart {
  width: 100%; padding: var(--s-xl);
  background: var(--surface); border-radius: var(--r-lg); text-align: center;
}
.inlogkaart .veld { text-align: left; }
.inlogkaart .knop-primair { width: 100%; justify-content: center; margin-top: var(--s-sm); }
.inlogkaart h1 { font-size: 1.25rem; margin-bottom: var(--s-sm); }
.inlogkaart .bijschrift { font-size: .875rem; margin: 0 0 var(--s-lg); }

/* Het merk boven het formulier: hetzelfde logo en dezelfde opbouw als in de manager. */
.merk-groot { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--s-lg); }
.merk-groot img { width: 64px; height: 64px; margin-bottom: var(--s-md); }
.merk-groot .naam { font-size: 1.05rem; color: var(--ink); }
.merk-groot .naam strong { font-weight: 700; }
.merk-groot .naam span { color: var(--ink-faint); }
.onderkaart { text-align: center; font-size: .8125rem; margin: var(--s-md) 0 0; color: var(--ink-faint); }
.onderkaart a { text-decoration: none; }
.onderkaart a:hover { text-decoration: underline; }

.kleurstaal { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; box-shadow: 0 0 0 1px var(--bezel); }

/* ── smal ───────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .rooster-twee, .twee, .drie, .vier { grid-template-columns: 1fr; }
  .balk { flex-wrap: wrap; gap: var(--s-sm); }
  .balk-menu { margin-left: 0; order: 3; width: 100%; }
  .wie { margin-left: auto; }
  .werkvlak { padding: var(--s-lg) var(--s-md) 48px; }
}