/* ==========================================================================
   spring.css — "Spring naar…", het zoekpalet in de app-balk
   ==========================================================================
   Eén knop rechts in de balk (links van de vaste avatar) en één palet dat
   met ⌘K/Ctrl+K opent. De vormtaal is die van de rest van de app: radius 0,
   afschuining linksboven en rechtsonder, rand als `inset box-shadow` (een
   echte `border` zou door de `clip-path` worden weggesneden), labels in
   Oswald uppercase.

   Kleur: de chrome is zwart-wit. De enige kleur in dit palet is de
   leerlijnruit vóór een treffer, en die is decoratief — de rij zegt in tekst
   al wat hij is ("School" / "Persoon"), dus WCAG 1.4.1 leunt nergens op
   kleur. De sleutels reizen als `data-leerlijn`, zodat de kleuren hier uit
   `tokens.css` komen en er geen hex in JS staat.

   De `--vt-*`-variabelen komen uit `vormtaal.css`, de `--vms-*`/`--space-*`
   uit `tokens.css`; de fallbacks houden het palet correct op een pagina die
   een van beide (nog) niet geladen heeft.
   ========================================================================== */

/* --- De knop in de balk -------------------------------------------------- */

.spring-knop {
  display: inline-flex;
  flex: none;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  min-height: var(--vt-raakvlak, 46px);
  padding: 0 var(--space-3, 0.75rem);
  color: var(--vms-ink-500, #6e6e6b);
  font-family: var(--font-label, inherit);
  font-size: 0.75rem;
  font-weight: var(--fw-label, 500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--vms-white, #fff);
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900, #1d1d1b);
  clip-path: polygon(
    var(--vt-schuin-s, var(--vt-schuin-s, 9px)) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))),
    calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))) 100%,
    0 100%,
    0 var(--vt-schuin-s, var(--vt-schuin-s, 9px))
  );
}

/* Zonder `.app-bar-right` (de meeste pagina's) staat de knop alleen in de
   balk; `auto` duwt hem dan naar rechts, tot aan de ruimte die
   `--app-bar-slot` voor de vaste avatar vrijhoudt. */
.app-bar-inner > .spring-knop {
  margin-left: auto;
}

.spring-knop:hover {
  color: var(--vms-ink-900, #1d1d1b);
  background: var(--vms-ink-100, #ececec);
}

/* clip-path snijdt een outline weg, dus de focusring is een inset-schaduw. */
.spring-knop:focus-visible {
  outline: none;
  color: var(--vms-ink-900, #1d1d1b);
  box-shadow:
    inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-ink-900, #1d1d1b),
    inset 0 0 0 calc(var(--vt-lijn-dik, 2.5px) + 2px) var(--vms-white, #fff);
}

.spring-knop-lens {
  display: inline-flex;
  flex: none;
}

.spring-knop-lens svg {
  width: 16px;
  height: 16px;
}

/* Inkt op ink-100, niet ink-500: die twee halen samen 4,1:1 en dit is kleine
   tekst (0,69rem), dus AA vraagt 4,5:1. Inkt op ink-100 is 13,6:1. */
.spring-knop-toets {
  padding: 0.15rem 0.35rem;
  color: var(--vms-ink-900, #1d1d1b);
  font-family: var(--font-label, inherit);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  background: var(--vms-ink-100, #ececec);
}

/* Op Start hangt de knop in de keuzekolom, niet in een balk. */
.spring-host {
  display: flex;
  margin: 0 0 var(--space-4, 1rem);
}

/* --- Het palet ----------------------------------------------------------- */

.spring-dialoog {
  width: min(46rem, calc(100vw - 2 * var(--space-4, 1rem)));
  max-width: none;
  max-height: min(80vh, 40rem);
  margin: 6vh auto auto;
  padding: 0;
  color: var(--text, #1d1d1b);
  background: var(--vms-white, #fff);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-ink-900, #1d1d1b);
  /* Bij een lage viewport scrollt de dialoog zelf, niet de pagina erachter.
     Hij draagt zelf knoppen en een invoerveld, dus een scrollende dialoog is
     ook met het toetsenbord bereikbaar. */
  overflow: auto;
}

.spring-dialoog::backdrop {
  background: rgb(29 29 27 / 0.55);
}

.spring-paneel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
}

.spring-zoekrij {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
}

.spring-invoer {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  color: var(--text, #1d1d1b);
  font-family: var(--font-body, inherit);
  font-size: 1.0625rem;
  background: var(--vms-white, #fff);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900, #1d1d1b);
}

/* Expliciet, niet de UA-grijstint: die haalt op wit lang niet overal AA. */
.spring-invoer::placeholder {
  color: var(--vms-ink-500, #6e6e6b);
  opacity: 1;
}

.spring-invoer:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900, #1d1d1b);
  outline-offset: calc(-1 * var(--vt-lijn-dik, 2.5px) - 2px);
}

.spring-sluit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--vt-raakvlak, 46px);
  height: var(--vt-raakvlak, 46px);
  color: var(--vms-ink-900, #1d1d1b);
  background: none;
  border: none;
  cursor: pointer;
}

.spring-sluit:hover {
  background: var(--vms-ink-100, #ececec);
}

.spring-sluit:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900, #1d1d1b);
  outline-offset: -2px;
}

.spring-kop {
  margin: 0;
  color: var(--vms-ink-500, #6e6e6b);
  font-family: var(--font-label, inherit);
  font-size: 0.6875rem;
  font-weight: var(--fw-label, 500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spring-melding {
  margin: 0;
  color: var(--vms-ink-500, #6e6e6b);
  font-family: var(--font-body, inherit);
  font-size: 0.9375rem;
}

.spring-hint {
  margin: 0;
  color: var(--vms-ink-500, #6e6e6b);
  font-family: var(--font-body, inherit);
  font-size: 0.8125rem;
}

/* --- De treffers --------------------------------------------------------- */

.spring-lijst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 22rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.spring-optie {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: baseline;
  min-height: var(--vt-raakvlak, 46px);
  padding: 0.55rem var(--space-3, 0.75rem);
  cursor: pointer;
}

.spring-optie:hover {
  background: var(--vms-ink-100, #ececec);
}

/* De gekozen rij is zwart gevuld — dezelfde "dit is het"-staat als de actieve
   bestemming in de balk. */
.spring-optie.is-gekozen {
  color: var(--vms-white, #fff);
  background: var(--vms-ink-900, #1d1d1b);
}

.spring-optie-merk {
  display: inline-flex;
  flex: none;
  gap: 3px;
  align-self: center;
  width: 3.4rem;
}

/* De leerlijnkleur van een ruit — de enige kleur in dit palet. Alleen hier,
   en alleen op de ruit: js/spring.js zet `data-leerlijn` en kent geen hex.
   De koppeling staat in dit stylesheet en niet in `vormtaal.css`, omdat het
   palet op élke ingelogde pagina hangt en niet elke pagina de per-bestemming
   stylesheets laadt die dezelfde vijf regels al dragen. */

.spring-ruit {
  --vt-ruit-maat: 8px;
}

.spring-ruit[data-leerlijn='groen'] {
  --vt-ruit-kleur: var(--vms-green, #35d864);
}

.spring-ruit[data-leerlijn='gezond'] {
  --vt-ruit-kleur: var(--vms-blue, #1e96fc);
}

.spring-ruit[data-leerlijn='techniek'] {
  --vt-ruit-kleur: var(--vms-red, #f5420a);
}

.spring-ruit[data-leerlijn='filosofie'] {
  --vt-ruit-kleur: var(--vms-yellow, #ffdd38);
}

.spring-ruit[data-leerlijn='budo'] {
  --vt-ruit-kleur: var(--vms-purple, #9b18db);
}

.spring-optie-naam {
  flex: none;
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  font-weight: var(--fw-heading, 600);
}

.spring-optie-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--vms-ink-500, #6e6e6b);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spring-optie.is-gekozen .spring-optie-sub,
.spring-optie.is-gekozen .spring-optie-soort {
  color: rgb(255 255 255 / 0.8);
}

.spring-optie-soort {
  flex: none;
  margin-left: auto;
  color: var(--vms-ink-500, #6e6e6b);
  font-family: var(--font-label, inherit);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- De acties van de gekozen treffer ------------------------------------ */

.spring-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  padding-top: var(--space-3, 0.75rem);
  box-shadow: inset 0 var(--vt-lijn, 1.5px) 0 0 var(--vms-ink-900, #1d1d1b);
}

.spring-acties-kop {
  margin-right: var(--space-2, 0.5rem);
  font-family: var(--font-label, inherit);
  font-size: 0.6875rem;
  font-weight: var(--fw-label, 500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* De eerste actie is wat Enter doet, en staat daarom zwart gevuld. */
.spring-actie:first-of-type {
  color: var(--vms-white, #fff);
  background: var(--vms-ink-900, #1d1d1b);
  --vt-focus-kleur: var(--vms-white, #fff);
}

.spring-actie:first-of-type:hover {
  background: var(--vms-ink-700, #3c3c3a);
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-700, #3c3c3a);
}

/* --- Verborgen delen ------------------------------------------------------
   `display: flex` hierboven wint van de UA-regel voor [hidden], dus die moet
   expliciet terug — anders blijft een lege lijst of een lege actiebalk als
   flex-item ruimte en `gap` bezetten. */

.spring-lijst[hidden],
.spring-acties[hidden],
.spring-kop[hidden],
.spring-melding[hidden] {
  display: none;
}

/* --- Smal scherm ---------------------------------------------------------
   Het palet gaat vol in de breedte en tegen de bovenrand: het toetsenbord
   komt van onderen op en zou het anders wegduwen. De sneltoetshint verdwijnt
   (er is geen toetsenbord) en de rijen breken naar twee regels. */

@media (max-width: 700px) {
  .spring-knop-toets {
    display: none;
  }

  .spring-knop-tekst {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* In de balk alleen het vergrootglas: naast twee regels bestemmingen is
     er geen plek voor "Spring naar…". De tekst blijft in de DOM — hij ís de
     naam van de knop (geen aria-label, zie js/spring.js) — maar wordt
     visueel verborgen. Op Start (`.spring-host`) blijft het woord staan. */
  .app-bar-inner .spring-knop {
    position: relative;
    min-width: var(--vt-raakvlak, 46px);
  }

  .app-bar-inner .spring-knop-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .spring-dialoog {
    width: 100vw;
    max-height: 100dvh;
    margin: 0;
  }

  .spring-optie {
    flex-wrap: wrap;
    align-items: center;
  }

  .spring-optie-sub {
    flex: 1 0 100%;
    padding-left: 3.9rem;
  }

  .spring-hint {
    display: none;
  }
}

/* --- Rustige beweging ----------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .spring-dialoog[open] {
    animation: spring-open 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* Alleen een verschuiving, geen fade: axe meet kleurcontrast mét opacity,
   en een palet dat nog in zijn fade-in zit levert een timing-afhankelijke
   "serious" color-contrast-bevinding op (smoke 2026-09-01, #springKop en
   .spring-hint gemeten op 2,7:1 terwijl ze uitgefaded 4,5:1+ halen). */
@keyframes spring-open {
  from {
    translate: 0 -8px;
  }

  to {
    translate: 0 0;
  }
}

@media print {
  .spring-knop,
  .spring-dialoog {
    display: none;
  }
}

/* Het native wis-kruisje van type="search" tekent Chrome in de
   accentkleur; het palet heeft al een eigen sluitknop en het chrome is
   zwart/wit. Wissen kan met ⌘A + Backspace of door opnieuw te typen. */
.spring-invoer::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}