/* Structuurzoeker – stijl
   Eén lettertype (Atkinson Hyperlegible, ontworpen voor leesbaarheid), koel laboratoriumgrijs,
   kobaltblauw als enige accent. Het opvallende element: de tekening op zeshoekpapier,
   zoals het ruitjespapier voor organische chemie. */

:root {
  --tegel: #eaeef1;          /* pagina-achtergrond */
  --oppervlak: #ffffff;      /* kop, uitklaplijsten */
  --papier: #fcfdfb;         /* tekenpapier: altijd licht, ook in donkere modus */
  --papier-rand: #d5dce2;
  --inkt: #1d2733;
  --gedempt: #566472;
  --zacht: #7a8794;
  --lijn: #d3dae0;
  --kobalt: #2446c4;
  --kobalt-donker: #1a3497;
  --kobalt-zacht: #e2e8fb;
  --kobalt-tekst: #1f3fae;
  --waarschuwing: #9a3412;
  --schaduw: 0 10px 30px -12px rgba(29, 39, 51, 0.28), 0 2px 6px -2px rgba(29, 39, 51, 0.12);

  --zeshoekpapier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0L27.713 8V24L13.856 32L0 24V8ZM13.856 32V48' fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");
  --font: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --maat: 1040px;
  --gutter: 16px;
  --kop-hoogte: 68px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tegel: #11171e;
    --oppervlak: #19222c;
    --papier: #eef1ec;
    --papier-rand: #3a4652;
    --inkt: #e3e9ef;
    --gedempt: #a3b0bc;
    --zacht: #8794a1;
    --lijn: #2c3844;
    --kobalt: #8fa5ff;
    --kobalt-donker: #b3c2ff;
    --kobalt-zacht: #24305a;
    --kobalt-tekst: #b6c4ff;
    --waarschuwing: #fdba74;
    --schaduw: 0 14px 34px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tegel: #11171e;
  --oppervlak: #19222c;
  --papier: #eef1ec;
  --papier-rand: #3a4652;
  --inkt: #e3e9ef;
  --gedempt: #a3b0bc;
  --zacht: #8794a1;
  --lijn: #2c3844;
  --kobalt: #8fa5ff;
  --kobalt-donker: #b3c2ff;
  --kobalt-zacht: #24305a;
  --kobalt-tekst: #b6c4ff;
  --waarschuwing: #fdba74;
  --schaduw: 0 14px 34px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-hoogte) + 16px); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tegel);
  color: var(--inkt);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: var(--kobalt-tekst); text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; border-radius: 4px; }

.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--kobalt); color: #fff; padding: 8px 14px; border-radius: 6px; text-decoration: none;
}
.skiplink:focus { top: 8px; }

/* ---------- kop met zoekbalk ---------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--oppervlak) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}

.kop-binnen {
  max-width: var(--maat);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--inkt);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.merk-icoon { width: 28px; height: 28px; fill: none; stroke: var(--kobalt); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

.zoek { position: relative; flex: 1; min-width: 0; }

.zoek-veld {
  display: flex;
  align-items: center;
  background: var(--oppervlak);
  border: 1.5px solid var(--lijn);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.zoek-veld:focus-within {
  border-color: var(--kobalt);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kobalt) 18%, transparent);
}

.zoek-icoon { width: 20px; height: 20px; margin-left: 14px; flex-shrink: 0; fill: none; stroke: var(--zacht); stroke-width: 2.2; stroke-linecap: round; }

#zoekveld {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  font-size: 1.125rem;
  outline: none;
}
#zoekveld::placeholder { color: var(--zacht); opacity: 1; }
#zoekveld::-webkit-search-cancel-button { display: none; }

.zoek-wis {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-right: 2px;
  border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--zacht);
}
.zoek-wis[hidden] { display: none; }
.zoek-wis svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.zoek-wis:hover { color: var(--inkt); background: var(--tegel); }

.zoek-knop {
  margin: 4px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--kobalt);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zoek-knop { color: #0e1630; } }
:root[data-theme="dark"] .zoek-knop { color: #0e1630; }
.zoek-knop:hover { background: var(--kobalt-donker); }

/* suggestielijst (listbox) */
.suggesties {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: var(--schaduw);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.suggesties[hidden] { display: none; }

.suggestie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.suggestie:hover { background: color-mix(in srgb, var(--kobalt-zacht) 55%, transparent); }
.suggestie[aria-selected="true"] { background: var(--kobalt-zacht); box-shadow: inset 3px 0 0 var(--kobalt); }
.suggestie-naam { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.suggestie-alias { font-weight: 400; color: var(--gedempt); }
.suggestie-formule { color: var(--zacht); font-size: 0.9375rem; white-space: nowrap; }
.suggestie-leeg { padding: 10px 12px; color: var(--gedempt); }

sub { font-size: 0.72em; line-height: 0; vertical-align: -0.28em; }

/* ---------- pagina ---------- */

.pagina {
  flex: 1;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
  padding: 32px var(--gutter) 56px;
}

.weergave { outline: none; min-height: 260px; }
.datamelding {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--waarschuwing);
  background: color-mix(in srgb, var(--waarschuwing) 10%, var(--oppervlak));
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
}
.laden-tekst { color: var(--gedempt); padding: 40px 0; }

/* startscherm */
.start { padding: 28px 0 12px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 820px) { .start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } }
.start-voorproef {
  display: grid;
  border: 1px solid var(--papier-rand);
  border-radius: 14px;
  background-color: var(--papier);
  background-image: var(--zeshoekpapier);
  background-position: center;
  box-shadow: var(--schaduw);
  text-decoration: none;
  overflow: hidden;
}
.start-tekening { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 20px; }
.start-tekening svg { display: block; max-width: 100%; height: auto; }
.start-onderschrift { padding: 10px 16px; border-top: 1px solid #dfe5ea; color: #1f3fae; font-weight: 700; background: rgba(255, 255, 255, 0.7); }
.start-voorproef:hover .start-onderschrift { text-decoration: underline; }
.start-titel { font-size: clamp(1.9rem, 5.5vw, 2.75rem); letter-spacing: -0.015em; }
.start-tekst { margin-top: 14px; font-size: 1.1875rem; color: var(--gedempt); max-width: 34rem; }
.start-voorbeelden { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.start-label { color: var(--gedempt); margin-right: 4px; }
.chip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: var(--oppervlak);
  color: var(--inkt);
  text-decoration: none;
  font-size: 0.96875rem;
}
.chip:hover { border-color: var(--kobalt); color: var(--kobalt-tekst); }

/* ---------- resultaat ---------- */

.kaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 820px) {
  .kaart { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}

.kaart-tekening {
  position: relative;
  border: 1px solid var(--papier-rand);
  border-radius: 14px;
  background-color: var(--papier);
  /* zeshoekpapier */
  background-image: var(--zeshoekpapier);
  background-position: center;
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.tekening {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 60px 18px 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
@media (min-width: 820px) { .tekening { min-height: 380px; padding: 64px 28px 36px; } }

.tekening svg.structuur { display: block; max-width: 100%; height: auto; margin: auto; flex-shrink: 0; }
.tekening-status { color: #566472; text-align: center; display: grid; gap: 6px; max-width: 30rem; margin: auto; }
.tekening-status.fout { color: #9a3412; }

.schakelaar {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: #e7ecf0;
  border: 1px solid #d5dce2;
}
.schakel-knop {
  border: 0;
  background: transparent;
  color: #4a5764;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.schakel-knop:hover { color: #1d2733; }
.schakel-knop[aria-pressed="true"] { background: #ffffff; color: #1d2733; box-shadow: 0 1px 3px rgba(29, 39, 51, 0.18); }
.schakel-knop:focus-visible { outline-color: #2446c4; }

.kaart-info { min-width: 0; padding-top: 4px; }

.stofnaam {
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.015em;
  hyphens: none;
}
.stofnaam.naam-lang { font-size: clamp(1.75rem, 6vw, 2.25rem); }
.stofnaam.naam-zeerlang { font-size: clamp(1.5rem, 5vw, 1.875rem); }
.naamdeel { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.triviaal { margin-top: 8px; font-size: 1.25rem; color: var(--gedempt); }
.via {
  margin-top: 14px;
  display: inline-block;
  padding: 6px 12px;
  border-left: 3px solid var(--kobalt);
  background: var(--kobalt-zacht);
  border-radius: 0 8px 8px 0;
  font-size: 0.96875rem;
}

.gegevens { margin: 26px 0 0; display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.gegevens > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}
.gegevens dt { color: var(--gedempt); }
.gegevens dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gegevens .formule { font-size: 1.1875rem; }

.badge {
  border: 1px solid color-mix(in srgb, var(--kobalt) 35%, transparent);
  background: var(--kobalt-zacht);
  color: var(--kobalt-tekst);
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.badge:hover { border-color: var(--kobalt); }

.synoniemen { margin-top: 16px; font-size: 0.9375rem; color: var(--gedempt); }
.synoniemen-label { color: var(--zacht); }

/* ---------- meldingen ---------- */

.melding { padding: 20px 0 8px; max-width: 44rem; }
.melding-titel { font-size: clamp(1.4rem, 4vw, 1.875rem); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.melding-tip { margin-top: 12px; color: var(--gedempt); max-width: 38rem; }

.keuzes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.keuze {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--oppervlak);
  cursor: pointer;
}
.keuze:hover { border-color: var(--kobalt); }
.keuze-naam { font-weight: 700; font-size: 1.125rem; color: var(--kobalt-tekst); overflow-wrap: anywhere; }
.keuze-alias { color: var(--gedempt); }
.keuze-formule { margin-left: auto; color: var(--zacht); white-space: nowrap; }

/* ---------- bladeren ---------- */

.bladeren { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--lijn); }
.bladeren h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.bladeren-intro { margin-top: 6px; color: var(--gedempt); }

.klassen {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 0 28px;
  align-items: start;
}

.klasse { border-bottom: 1px solid var(--lijn); }
.klasse summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.klasse summary::-webkit-details-marker { display: none; }
.klasse summary::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--zacht);
  border-bottom: 2px solid var(--zacht);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-right: 2px;
}
.klasse[open] summary::before { transform: rotate(45deg); }
.klasse summary:hover .klasse-naam { color: var(--kobalt-tekst); }
.klasse-aantal {
  margin-left: auto;
  min-width: 2em;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gedempt);
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.klasse-stoffen { list-style: none; margin: 0; padding: 0 0 12px 22px; display: grid; gap: 2px; }
.klasse-stoffen a { display: inline-block; padding: 3px 0; text-decoration: none; overflow-wrap: anywhere; }
.klasse-stoffen a:hover { text-decoration: underline; }

/* ---------- voet ---------- */

.voet {
  max-width: var(--maat);
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--gutter) 36px;
  color: var(--zacht);
  font-size: 0.875rem;
  display: grid;
  gap: 4px;
}

.noscript { padding: 16px var(--gutter); background: #fff3cd; color: #5c4400; }

/* ---------- smal scherm ---------- */

@media (max-width: 640px) {
  :root { --kop-hoogte: 112px; }
  .kop-binnen { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 12px; }
  .merk { font-size: 1rem; }
  .merk-icoon { width: 22px; height: 22px; }
  .zoek-knop { padding: 8px 12px; }
  .pagina { padding-top: 20px; }
  .bladeren { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}