/* MeesterBaan AI zoeken. Tokens en maten uit docs/design/README.md.
   Het breekpunt (700px) zet app.js als html[data-narrow], gemeten met een ResizeObserver. */

/* ---------- tokens ---------- */
:root{
  --bg:#FBF7F4; --bg2:#FBF7F4; --card:rgba(255,255,255,.62); --field:rgba(255,255,255,.8); --solid:#FFFFFF; --sunk:rgba(255,255,255,.34);
  --ink:#14181F; --muted:#14181F;
  --border:rgba(255,255,255,.9); --line:rgba(20,24,31,.08);
  --blue:#0063CC; --blue-h:#004F99; --purple:#6822FF; --purple-h:#4C12D6;
  --accent:#FF3C22; --ok:#0B6B38; --ok-bg:rgba(15,130,67,.09); --btn:#0063CC; --btn-h:#004F99;
  /* Gevulde knoppen: rood naar paars. Het rood is iets donkerder dan #FF3C22, zodat witte tekst leesbaar blijft. */
  --btn-grad:linear-gradient(90deg,#E0301A 0%,#6822FF 100%); --btn-grad-h:linear-gradient(90deg,#C4260F 0%,#5418E0 100%);
  --chip:rgba(255,255,255,.66); --chip-ink:#4113B8; --chip-br:rgba(104,34,255,.18);
  --grad:linear-gradient(135deg,#0063CC 0%,#6822FF 55%,#5C5CFF 100%);
  /* Van MeesterMatch paars naar MeesterBaan rood: voor voortgang en accentlijnen. */
  --verloop:linear-gradient(90deg,#6822FF 0%,#FF3C22 100%);
  --rim:radial-gradient(66% 230% at 88% -20%,rgba(255,174,26,.92) 0%,rgba(255,60,34,.82) 19%,rgba(104,34,255,.6) 45%,rgba(0,99,204,.48) 72%,rgba(0,99,204,.4) 100%),linear-gradient(180deg,rgba(0,99,204,.4),rgba(0,99,204,.5));
  --glow:rgba(104,34,255,.13); --glow2:rgba(0,99,204,.11);
  --blur:blur(30px) saturate(1.8);
  --hi:inset 0 1px 0 rgba(255,255,255,.95);
  --shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(22,26,44,.04),0 26px 52px -34px rgba(22,26,44,.5);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 100%);
  --sweep1:rgba(0,99,204,.9); --sweep2:rgba(104,34,255,1); --sweep3:rgba(92,92,255,.7); --logofx:none;
  --focus:#6822FF; --navbg:rgba(255,255,255,.55);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#08082E; --bg2:#0A0A3A; --card:rgba(124,124,255,.12); --field:rgba(12,12,52,.72); --solid:#12124A; --sunk:rgba(8,8,46,.5);
  --ink:#FBF7F4; --muted:#B5B0D8;
  --border:rgba(160,160,255,.22); --line:rgba(181,176,216,.16);
  --blue:#5CA8FF; --blue-h:#8CC2FF; --purple:#9A9AFF; --purple-h:#B9B9FF;
  --accent:#FF6A55; --ok:#7BE5A8; --ok-bg:rgba(123,229,168,.13); --btn:#5C5CFF; --btn-h:#4646E0;
  --chip:rgba(122,122,255,.16); --chip-ink:#CFCFFF; --chip-br:rgba(140,140,255,.3);
  --grad:linear-gradient(135deg,#1766CC 0%,#4F4FF0 50%,#5C5CFF 100%);
  --verloop:linear-gradient(90deg,#8B6BFF 0%,#FF6A55 100%);
  --rim:radial-gradient(66% 230% at 88% -20%,rgba(255,194,77,.95) 0%,rgba(255,106,85,.9) 19%,rgba(154,154,255,.8) 45%,rgba(34,137,255,.7) 72%,rgba(34,137,255,.55) 100%),linear-gradient(180deg,rgba(34,137,255,.5),rgba(92,92,255,.6));
  --glow:rgba(92,92,255,.34); --glow2:rgba(34,137,255,.24);
  --blur:blur(30px) saturate(1.6);
  --hi:inset 0 1px 0 rgba(255,255,255,.12);
  --shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 60px -34px rgba(0,0,0,.9),0 0 44px -20px rgba(92,92,255,.3);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 100%);
  --sweep1:rgba(34,137,255,1); --sweep2:rgba(154,154,255,1); --sweep3:rgba(123,123,255,.8); --logofx:none;
  --focus:#9A9AFF; --navbg:rgba(10,10,48,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08082E; --bg2:#0A0A3A; --card:rgba(124,124,255,.12); --field:rgba(12,12,52,.72); --solid:#12124A; --sunk:rgba(8,8,46,.5);
    --ink:#FBF7F4; --muted:#B5B0D8;
    --border:rgba(160,160,255,.22); --line:rgba(181,176,216,.16);
    --blue:#5CA8FF; --blue-h:#8CC2FF; --purple:#9A9AFF; --purple-h:#B9B9FF;
    --accent:#FF6A55; --ok:#7BE5A8; --ok-bg:rgba(123,229,168,.13); --btn:#5C5CFF; --btn-h:#4646E0;
    --chip:rgba(122,122,255,.16); --chip-ink:#CFCFFF; --chip-br:rgba(140,140,255,.3);
    --grad:linear-gradient(135deg,#1766CC 0%,#4F4FF0 50%,#5C5CFF 100%);
    --verloop:linear-gradient(90deg,#8B6BFF 0%,#FF6A55 100%);
  --verloop:linear-gradient(90deg,#8B6BFF 0%,#FF6A55 100%);
    --rim:radial-gradient(66% 230% at 88% -20%,rgba(255,194,77,.95) 0%,rgba(255,106,85,.9) 19%,rgba(154,154,255,.8) 45%,rgba(34,137,255,.7) 72%,rgba(34,137,255,.55) 100%),linear-gradient(180deg,rgba(34,137,255,.5),rgba(92,92,255,.6));
    --glow:rgba(92,92,255,.36); --glow2:rgba(34,137,255,.26);
    --blur:blur(30px) saturate(1.6);
    --hi:inset 0 1px 0 rgba(255,255,255,.12);
    --shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 60px -34px rgba(0,0,0,.9),0 0 44px -20px rgba(92,92,255,.3);
    --sheen:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 100%);
    --sweep1:rgba(34,137,255,1); --sweep2:rgba(154,154,255,1); --sweep3:rgba(123,123,255,.8); --logofx:none;
    --focus:#9A9AFF; --navbg:rgba(10,10,48,.55);
    color-scheme:dark;
  }
}

/* ---------- basis ---------- */
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:hidden}
body{margin:0;min-height:100vh;color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;background-color:var(--bg);
  /* Effen crème (dark: effen donker). De gloed zit alleen in de header. */
  background-image:none}
button,input,textarea{font-family:inherit}
/* Placeholder niet zwart, anders lijkt het ingevulde tekst: een gedempt paars. */
textarea::placeholder,input::placeholder{color:color-mix(in srgb,var(--purple) 55%,var(--ink));opacity:1}
textarea:focus::placeholder,input:focus::placeholder{color:transparent}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-h);text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:var(--chip);color:var(--chip-ink)}
summary::-webkit-details-marker{display:none}
svg[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
html[data-narrow] .only-wide{display:none !important}
html:not([data-narrow]) .only-narrow{display:none !important}
body.locked{overflow:hidden}

/* ---------- keyframes ---------- */
@keyframes auroraShift{0%{background-position:82% 0%,0 0}50%{background-position:100% 30%,0 0}100%{background-position:82% 0%,0 0}}
@keyframes meshDrift{0%{transform:translate3d(-50%,0,0) scale(1)}50%{transform:translate3d(calc(-50% + 2%),-2%,0) scale(1.06)}100%{transform:translate3d(-50%,0,0) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ringSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes micPulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes vu{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes skel{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- glas ---------- */
.glass{background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);box-shadow:var(--shadow)}
.panel{border-radius:24px}
.pill-btn{background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:999px;color:var(--ink);cursor:pointer;box-shadow:var(--hi)}

/* ---------- skip-link ---------- */
.skip{position:absolute;left:12px;top:-48px;z-index:60;background:var(--solid);color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px}
.skip:focus{top:12px;text-decoration:none;color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--navbg);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--hi)}
.hdr__aurora{position:absolute;inset:0;pointer-events:none;opacity:.7;background:radial-gradient(60% 200% at 12% 0%,var(--glow2),transparent 70%),radial-gradient(50% 180% at 88% 0%,var(--glow),transparent 72%)}
.hdr__line{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:.7;background:var(--verloop)}
.hdr__in{position:relative;max-width:920px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hdr__brand{display:flex;align-items:center;gap:10px;min-width:0}
.hdr__logo{display:block;flex-shrink:0}
a.hdr__brand{color:inherit;text-decoration:none;border-radius:999px}
a.hdr__brand:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.logo{height:26px;width:auto;display:block;filter:var(--logofx)}
/* Paarse AI-pil vóór het logo, even hoog als de logopil. Effen #6822FF in beide thema's:
   het verloop eindigt in #5C5CFF, en dat is MeesterMatch Blauw 2. Wit op #6822FF haalt ruim 4,5:1. */
.labs{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:26px;padding:0 11px;border-radius:999px;background:#6822FF;color:#fff;font-size:14px;font-weight:800;letter-spacing:.06em;line-height:1;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.labs::before{content:'';position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 4.6s ease-in-out infinite}
.labs span{position:relative}
.hdr__right{display:flex;align-items:center;gap:8px}
.live{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:var(--chip);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.live__dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);animation:pulseDot 2.6s ease-in-out infinite}
.theme{display:flex;align-items:center;gap:8px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:999px;padding:7px 13px 7px 10px;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .18s,box-shadow .18s;box-shadow:var(--hi)}
.theme:hover{border-color:var(--chip-br);box-shadow:var(--hi),0 10px 22px -14px var(--glow)}
html[data-narrow] .theme{padding:7px 10px;min-width:44px;min-height:44px;justify-content:center}
.theme__orb{position:relative;width:14px;height:14px;border-radius:50%;background:var(--grad);display:block;flex-shrink:0;box-shadow:0 0 12px -2px var(--glow)}
.theme__moon{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--bg2);transition:opacity .2s}

/* ---------- main ---------- */
/* Eén gecentreerde kolom: header, inhoud en footer zijn 880px breed plus 20px marge aan elke kant. */
main{position:relative;max-width:920px;margin:0 auto;padding:0 20px 96px}
.col{position:relative;max-width:880px}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,6vw,56px) 0 8px}
.hero h1{margin:0 0 14px;font-size:clamp(29px,4.4vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.038em;text-wrap:pretty}
.hero p{margin:0;font-size:16.5px;color:var(--muted);max-width:56ch;text-wrap:pretty}

/* Na een zoekopdracht: compacte kop, zodat zoekveld en resultaten duidelijk van elkaar te onderscheiden zijn. */
.hero h1,.hero p{transition:font-size .25s cubic-bezier(.3,0,.2,1),opacity .2s}
body.is-searching .hero{padding:clamp(18px,3vw,26px) 0 0}
body.is-searching .hero h1{font-size:clamp(20px,2.4vw,24px);letter-spacing:-.02em;margin:0}
body.is-searching .hero p{display:none}
body.is-searching .search{padding-top:14px}
body.is-searching .examples{display:none}

/* ---------- zoekveld ---------- */
.search{padding:26px 0 0}
.rim{position:relative;padding:1.5px;border-radius:999px;overflow:hidden;background:var(--rim);background-size:175% 210%,100% 100%;background-position:82% 0%,0 0;animation:auroraShift 18s ease-in-out infinite;box-shadow:0 6px 18px -14px rgba(22,26,44,.3);isolation:isolate}
.rim__ring{position:absolute;left:50%;top:50%;width:135%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 190deg,var(--sweep1) 250deg,var(--sweep2) 290deg,var(--sweep3) 320deg,rgba(255,255,255,0) 356deg);animation:ringSpin 9s linear infinite;pointer-events:none}
.field{position:relative;display:flex;align-items:center;gap:clamp(9px,2.4vw,14px);background:var(--field);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:998px;padding:8px 8px 8px clamp(16px,4vw,24px);overflow:hidden;box-shadow:var(--hi)}
.field::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;background:var(--sheen);pointer-events:none;border-radius:998px 998px 0 0}
.field__icon{flex-shrink:0;opacity:.45;position:relative}
.field textarea,.field input{position:relative;flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font-size:17px;line-height:1.5;resize:none;outline:none;overflow:hidden;padding:6px 0;min-height:34px;margin:0}
/* Een lege textarea met een lange voorbeeldtekst blijft op één regel, anders piept regel twee onder het veld uit. */
.field textarea:placeholder-shown{white-space:nowrap;text-overflow:ellipsis}
/* Zoekveld als glas: doorschijnender, lichtrand boven, schuine glans en een zachte gekleurde schaduw. */
.rim{padding:1px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--accent),var(--purple));background-size:300% 100%;background-position:0 0;animation:rimFlow 8s linear infinite;--sweep1:color-mix(in srgb,var(--accent) 90%,transparent);--sweep2:var(--purple);--sweep3:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--purple) 55%,transparent),0 8px 18px -12px color-mix(in srgb,var(--accent) 35%,transparent)}
@keyframes rimFlow{to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.rim{animation:none}}
.field{background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -10px 24px -18px color-mix(in srgb,var(--purple) 45%,transparent)}
.field::before{height:58%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 70%,rgba(255,255,255,0))}
.field::after{content:'';position:absolute;top:-40%;bottom:-40%;left:14%;width:18%;transform:skewX(-24deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.field>*:not(.sr-only){position:relative;z-index:1}
:root[data-theme="dark"] .field{background:color-mix(in srgb,var(--field) 62%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -10px 24px -18px color-mix(in srgb,var(--purple) 55%,transparent)}
:root[data-theme="dark"] .field::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1),rgba(255,255,255,0))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .field{background:color-mix(in srgb,var(--field) 62%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -10px 24px -18px color-mix(in srgb,var(--purple) 55%,transparent)}
  :root:not([data-theme="light"]) .field::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1),rgba(255,255,255,0))}
}
.mic{position:relative;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--border);border-radius:50%;color:var(--ink);cursor:pointer;transition:border-color .16s,box-shadow .16s,color .16s}
.mic:hover{border-color:var(--chip-br);color:var(--purple);box-shadow:0 10px 22px -14px var(--glow)}
.mic[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;animation:micPulse 1.6s ease-out infinite}
.go{position:relative;flex-shrink:0;background:var(--btn-grad);color:#fff;border:none;border-radius:999px;padding:11px clamp(16px,4vw,24px);font-size:15px;font-weight:700;cursor:pointer;transition:background .18s,box-shadow .18s;box-shadow:0 10px 24px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
.go:hover{background:var(--btn-grad-h);box-shadow:0 14px 28px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
.go--round{width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%}

.status{display:flex;align-items:center;gap:9px;padding:12px 4px 0;font-size:13px;font-weight:600}
.status--listen{color:var(--purple)}
.status--error{color:var(--ink)}
.status__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.vu{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.vu span{width:3px;border-radius:2px;background:currentColor;animation:vu 900ms ease-in-out infinite}
.vu span:nth-child(1){height:6px}
.vu span:nth-child(2){height:12px;animation-delay:140ms}
.vu span:nth-child(3){height:9px;animation-delay:280ms}
.vu span:nth-child(4){height:14px;animation-delay:420ms}

.entities{display:flex;flex-wrap:wrap;gap:6px;padding:12px 4px 0}
.entities__lbl{font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 2px}
.entity{display:inline-flex;align-items:center;gap:6px;background:var(--chip);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--chip-ink);border:1px solid var(--chip-br);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600}
.entity__type{opacity:.65;font-weight:500}

/* Recente zoekopdrachten: alleen op de startpagina, bewaard in de browser van de bezoeker. */
.recent{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:16px 0 0}
.recent[hidden],body.is-searching .recent{display:none}
.recent__lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:2px}
.recent__q{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--card);border:1px solid var(--chip-br);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .16s}
.recent__q svg{flex-shrink:0;color:var(--purple)}
.recent__t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.recent__q:hover{border-color:var(--accent)}
.recent__wis{font-size:12.5px}
html[data-narrow] .recent__q,html[data-narrow] .recent__wis{min-height:44px}
.examples{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 0}
.example{background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;text-align:left;transition:color .16s,border-color .16s,box-shadow .16s;box-shadow:var(--hi)}
.example:hover{color:var(--ink);border-color:var(--chip-br);box-shadow:var(--hi),0 10px 22px -14px var(--glow)}
html[data-narrow] .example{min-height:44px}

/* ---------- overgang zoeken naar resultaten ---------- */
.stage-divider{position:relative;max-width:880px;height:1px;margin:34px 0 0;background:linear-gradient(90deg,var(--chip-br),var(--line) 60%,transparent)}
.stage-divider::before{content:'';position:absolute;left:0;top:-2px;width:48px;height:5px;border-radius:3px;background:var(--verloop)}

/* ---------- denkfase ---------- */
.think{padding:26px 0 0}
.think__panel{position:relative;overflow:hidden;padding:22px 24px}
.think__panel::before{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;background:linear-gradient(100deg,transparent,var(--glow),transparent);animation:shimmer 2.8s ease-in-out infinite}
.think__head{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 16px}
.think__head h2{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.progress{position:relative;flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.progress span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--verloop);transition:width .34s cubic-bezier(.3,0,.2,1)}
.steps{position:relative;display:flex;flex-direction:column;gap:11px}
.steps::before{content:'';position:absolute;left:7px;top:8px;bottom:10px;width:1.5px;border-radius:2px;background:linear-gradient(180deg,var(--purple),var(--blue) 70%,transparent);opacity:.35}
.step{position:relative;display:flex;align-items:flex-start;gap:12px;animation:stepIn .32s ease both}
.step__mark{flex-shrink:0;margin-top:3px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);border:1.5px solid transparent;color:#fff}
.step__txt{font-size:15.5px;font-weight:500;color:var(--muted);transition:color .3s}
.step--active .step__mark{background:var(--purple);border-color:var(--purple);animation:pulseDot 1.3s ease-in-out infinite}
.step--active .step__txt{color:var(--ink)}

.skels{display:flex;flex-direction:column;gap:12px;padding:22px 0 0}
.skel-card{border-radius:20px;padding:16px 18px;display:flex;align-items:flex-start;gap:16px}
.skel-card__body{flex:1;display:flex;flex-direction:column;gap:9px}
.skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--line) 30%,var(--chip-br) 50%,var(--line) 70%);background-size:300% 100%;animation:skel 1.6s ease-in-out infinite}
.skel-tags{display:flex;gap:6px;margin-top:4px}
.skel-tag{display:block;height:24px;border-radius:999px;background:var(--line)}
.skel-logo{flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--line)}

/* ---------- resultaten ---------- */
.results{padding:22px 0 0}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0 0 16px;font-size:14px}
.chain__lbl{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chain .linkbtn{margin-left:auto;text-decoration:none;color:var(--ink);border:1.5px solid transparent;border-radius:999px;padding:6px 12px;background:linear-gradient(var(--solid),var(--solid)) padding-box,linear-gradient(90deg,var(--accent),var(--purple)) border-box}
.chain .linkbtn{display:inline-flex;align-items:center;gap:6px}
.chain .linkbtn + .linkbtn{margin-left:0}
.chain .linkbtn:hover{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--purple) 60%,transparent)}
html[data-narrow] .chain .linkbtn{margin-left:0;min-height:44px}
.chain__sep{color:var(--muted)}
.chain__q{font-weight:500}
.linkbtn{background:transparent;border:none;color:var(--purple);font-size:13px;font-weight:600;cursor:pointer;padding:4px 6px;text-decoration:underline}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:0 0 14px}
.bar h2{margin:0;font-size:19px;font-weight:700}
.bar h2 .count{color:var(--ink)}
.bar__scanned{font-size:14px;color:var(--muted)}
/* Nieuw sinds je vorige bezoek: klein label voor de titel en een telling naast het aantal resultaten. */
.nieuw{display:inline-block;vertical-align:2px;margin-right:8px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bar__nieuw{font-size:13px;font-weight:600;color:var(--purple)}
.bar__plafond{font-size:13px;color:var(--muted)}
/* Sluitingsdatum: binnen een week in MeesterBaan rood, zodat het opvalt zonder te schreeuwen. */
.sluit{white-space:nowrap}
.sluit--snel{color:var(--accent);font-weight:600}
.bar__spacer{flex:1;min-width:12px}
.sort{display:flex;align-items:center;gap:4px;margin:-4px 0 14px}
.sort__lbl{font-size:13px;color:var(--muted);margin-right:4px}
.sort button{border:1px solid transparent;background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.sort button:hover{color:var(--ink)}
.sort button[aria-pressed="true"]{background:var(--card);border-color:var(--btn);color:var(--btn)}
html[data-narrow] .sort button{min-height:38px}
.toggle{padding:8px 14px;font-size:13px;font-weight:600}
.toggle:hover{border-color:var(--purple)}
html[data-narrow] .toggle{min-height:44px}

.cards{display:flex;flex-direction:column;gap:12px}
.card{position:relative;cursor:pointer;border-radius:20px;padding:16px 18px;display:flex;align-items:flex-start;gap:16px;animation:fadeUp .42s ease both;transition:transform .22s cubic-bezier(.3,0,.2,1),box-shadow .22s,border-color .22s}
/* Hover: rode rand met een gloed van rood (links) naar paars (rechts) achter de kaart. */
.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--hi),-12px 10px 30px -14px color-mix(in srgb,var(--accent) 35%,transparent),12px 10px 30px -14px color-mix(in srgb,var(--purple) 35%,transparent)}
/* Het hele kaartje is klikbaar: de titellink spant zich over de kaart. Eén link, dus geen dubbele tabstops. */
.card__title a::after,.row__title::after{content:'';position:absolute;inset:0}
.card__title a::after{border-radius:20px}
.card:hover .card__title a{color:var(--accent);text-decoration:underline}
.row:hover .row__title{color:var(--accent);text-decoration:underline}
@supports selector(:has(a)){
  .card__title a:focus-visible,.row__title:focus-visible{outline:none}
  .card:has(a:focus-visible),.row:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
}
.card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.card__title{margin:0;font-size:17px;font-weight:700;line-height:1.3;text-wrap:pretty}
.card__title a{color:var(--ink)}
.row__title{color:var(--ink)}
.card__title a:hover{color:var(--accent);text-decoration:underline}
.row__title:hover{color:var(--accent);text-decoration:underline}
.card__school{margin:0;font-size:14px;color:var(--muted)}
.card__school strong{color:var(--ink);font-weight:600}
/* Pitch in het detailpaneel als citaat: schuin, met een verlooplijn van rood naar paars ervoor. */
.drawer__pitch{margin:12px 0 0;padding-left:13px;font-size:15px;font-style:italic;line-height:1.55;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;background:linear-gradient(180deg,var(--accent),var(--purple)) left top/3px 100% no-repeat}
/* Meer zoals deze: bescheiden link onder de pitch; de knoppen naar meesterbaan.nl blijven de hoofdactie. */
.drawer__zoals{display:inline-block;margin:12px 0 0;padding:0;font-size:13.5px;text-align:left}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tag{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.why{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.why li{display:flex;align-items:center;gap:6px}
.why svg{flex-shrink:0;color:var(--purple)}
.no-explain .why,.no-explain .uitleg-kort{display:none}
.uitleg-kort{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.card__side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.school-logo{width:clamp(52px,12vw,68px);height:clamp(52px,12vw,68px);object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;display:block}
.best--top{align-self:flex-start;margin:0 0 2px}
.best{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--grad);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px -12px var(--glow)}

.list{overflow:hidden}
.row{position:relative;cursor:pointer;display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);animation:fadeUp .35s ease both}
.row:hover{background:var(--sunk)}
.row:last-child{border-bottom:none}
.row__body{flex:1;min-width:0}
.row__title{font-size:15.5px;font-weight:600}
.row__meta{margin:2px 0 0;font-size:13px;color:var(--muted)}
.row__reason{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--purple) 10%,transparent);border-radius:999px;padding:4px 11px}
html[data-narrow] .row{flex-wrap:wrap}

/* B7: aparte sectie voor verwante vacatures bij minder dan 3 echte matches. */
.ook{margin:28px 0 0}
.ook__kop{margin:0 0 4px;font-size:17px;font-weight:700}
.ook__uitleg{margin:0 0 12px;font-size:14px;color:var(--muted)}
.more{display:flex;justify-content:center;padding:18px 0 0}
.more button{padding:11px 22px;font-size:14px;font-weight:700}
.more button:hover{border-color:var(--chip-br)}

.refine{margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.refine form{position:relative;display:flex;align-items:center;gap:8px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:var(--hi)}
.refine__chev{flex-shrink:0;font-size:15px;font-weight:700;color:var(--purple)}
.refine input{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font-size:15px;outline:none;padding:8px 0}
.chipbtn{flex-shrink:0;background:var(--chip);color:var(--chip-ink);border:1px solid var(--chip-br);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer}
.chipbtn:hover{border-color:var(--purple)}
html[data-narrow] .chipbtn{min-height:44px}
.sugs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 4px}
/* Experiment: rustige regel onder de resultaten met een maillink voor tips. */
.feedback{margin:4px 0 0;padding:0 4px;font-size:12.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.feedback a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.feedback a:hover{color:var(--accent)}
.sugs__lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.sug{background:transparent;border:1px dashed var(--chip-br);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--chip-ink);cursor:pointer}
.sug:hover{border-style:solid;background:var(--chip)}
html[data-narrow] .sug{min-height:44px}

.empty{padding:26px}
.empty h3{margin:0 0 8px;font-size:18px;font-weight:700}
.empty p{margin:0 0 16px;font-size:15px;color:var(--muted);text-wrap:pretty}
.empty__fixes{display:flex;flex-wrap:wrap;gap:8px}
.btn{background:var(--btn-grad);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--btn-grad-h)}
html[data-narrow] .btn{min-height:44px}

/* ---------- footer ---------- */
.ftr{position:relative;max-width:920px;margin:0 auto;padding:0 20px 40px}
.ftr__panel{max-width:880px;padding:clamp(18px,4vw,28px) clamp(18px,3.4vw,26px) clamp(16px,3vw,22px)}
/* Footer als glas: twee zachte kleurvlekken (rood en paars) achter het paneel, zodat het glas iets heeft om te vervagen. */
.ftr::before,.ftr::after{content:'';position:absolute;z-index:0;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.35}
.ftr::before{left:4%;top:-30px;width:min(34%,320px);height:220px;background:var(--accent)}
.ftr::after{left:min(36%,360px);top:40px;width:min(40%,420px);height:260px;background:var(--purple)}
.ftr__panel{position:relative;z-index:1;background:color-mix(in srgb,var(--card) 70%,transparent);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.3),0 20px 50px -30px color-mix(in srgb,var(--purple) 50%,transparent)}
.ftr__panel::before{content:'';position:absolute;left:0;right:0;top:0;height:140px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.ftr__panel>*{position:relative}
:root[data-theme="dark"] .ftr__panel{border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px -30px color-mix(in srgb,var(--purple) 60%,transparent)}
:root[data-theme="dark"] .ftr__panel::before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ftr__panel{border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px -30px color-mix(in srgb,var(--purple) 60%,transparent)}
  :root:not([data-theme="light"]) .ftr__panel::before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))}
}
.ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,136px),1fr));gap:26px 20px}
.ftr__brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ftr__brand .logo{height:24px}
.ftr__brand p{margin:0;font-size:14px;color:var(--muted);max-width:24ch;text-wrap:pretty}
.ftr__exp{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.ftr__brand .ftr__sync{margin:0;font-size:12px;max-width:none}
.ftr__exp span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ftr a.ftr__exp{font-size:12px;color:var(--muted)}
.ftr a.ftr__exp:hover{color:var(--ink);text-decoration:underline}
.ftr__grp summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:default;padding:0 0 3px}
.ftr__grp h2{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ftr__chev{flex-shrink:0;color:var(--muted);transition:transform .2s}
.ftr__grp[open] .ftr__chev{transform:rotate(180deg)}
.ftr__grp nav{display:flex;flex-direction:column;gap:9px;padding:9px 0 0}
.ftr a{font-size:13px;color:var(--muted);text-decoration:none}
.ftr a:hover{color:var(--ink);text-decoration:underline}
.ftr__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:12.5px;color:var(--muted)}
.ftr__bar a{font-size:12.5px}
.ftr__cookie{font:inherit;font-size:12.5px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.ftr__cookie:hover{color:var(--ink);text-decoration:underline}
.ftr__spacer{flex:1;min-width:8px}
/* Vanaf 940px staat de onderste regel op één rij; smaller mag hij afbreken. */
@media (min-width:940px){.ftr__bar{flex-wrap:nowrap;column-gap:14px;white-space:nowrap}}
html[data-narrow] .ftr__grid{grid-template-columns:minmax(0,1fr);gap:0}
html[data-narrow] .ftr__brand{gap:8px;padding-bottom:16px}
html[data-narrow] .ftr__grp{border-top:1px solid var(--line)}
html[data-narrow] .ftr__grp summary{cursor:pointer;padding:0;min-height:48px}
html[data-narrow] .ftr__grp nav{padding:2px 0 16px}
html[data-narrow] .ftr__bar{margin-top:0;padding-top:14px}

/* ---------- sollicitatiepaneel onder de header ---------- */
.apply-frame{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:35;display:flex;flex-direction:column;background:var(--bg);animation:fadeIn .2s ease both}
.apply-frame[hidden]{display:none}
.apply-frame__bar{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--field);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.apply-frame__back{flex-shrink:0;background:var(--chip);border:1px solid var(--chip-br);color:var(--chip-ink);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;min-height:40px}
.apply-frame__back:hover{border-color:var(--purple)}
.apply-frame__titel{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apply-frame__extern{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.apply-frame__iframe{flex:1;width:100%;border:0;background:#fff}
html[data-narrow] .apply-frame__titel{display:none}
html[data-narrow] .apply-frame__bar{padding:8px 12px;justify-content:space-between}

/* ---------- detailpaneel ---------- */
.drawer{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer__backdrop{position:absolute;inset:0;background:rgba(8,8,46,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .2s ease both}
.drawer__panel{position:relative;width:min(500px,100%);height:100%;display:flex;flex-direction:column;background:var(--field);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-left:1px solid var(--border);box-shadow:var(--hi),-30px 0 70px -30px var(--glow);animation:drawerIn .3s cubic-bezier(.3,0,.2,1) both}
.drawer__head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer__pos{font-size:12.5px;font-weight:600;color:var(--muted)}
.drawer__spacer{flex:1}
.roundbtn{width:44px;height:44px;border-radius:50%;background:var(--chip);border:1px solid var(--border);color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.roundbtn:hover{border-color:var(--chip-br)}
.roundbtn:disabled{opacity:.35;cursor:default}
.roundbtn--close{font-size:18px}
.drawer__body{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:22px}
.drawer__badge{display:inline-flex;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:var(--grad);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.drawer__title{margin:0 0 4px;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.02em;text-wrap:pretty}
.drawer__school{margin:0;font-size:15px;color:var(--muted)}
.drawer__h{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.drawer__h--why{color:var(--purple)}
.reasons{display:flex;flex-direction:column;gap:9px}
.reason{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:12px;font-size:14px}
.reason__l{font-weight:600;color:var(--ink)}
.reason__bar{height:4px;border-radius:2px;background:color-mix(in srgb,var(--purple) 12%,transparent);overflow:hidden;display:block}
.reason__bar span{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--purple))}
.uitleg{margin:14px 0 0;font-size:14.5px;color:var(--muted);line-height:1.55;border-left:2px solid var(--chip-br);padding-left:12px;text-wrap:pretty}
.facts{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 18px;font-size:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.drawer__foot{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 20px;border-top:1px solid var(--line)}
.apply{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-grad);color:#fff;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:700;box-shadow:0 10px 24px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
.apply:hover{background:var(--btn-grad-h);color:#fff;text-decoration:none}
.drawer__foot .info,.drawer__foot .apply{flex:1 1 100%}
/* Meer informatie: rand van rood naar paars, zwarte tekst; past bij Solliciteren eronder. */
.info{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;background:linear-gradient(var(--solid),var(--solid)) padding-box,linear-gradient(90deg,var(--accent),var(--purple)) border-box;color:var(--ink);border-radius:999px;padding:11.5px 20px;font-size:15px;font-weight:700;transition:box-shadow .18s}
.info:hover{color:var(--ink);text-decoration:none;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--purple) 60%,transparent)}

/* C4: schakelaar "Uitleg per vacature" met zichtbare aan- en uitstand. */
.schakelaar{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;font-size:13px;font-weight:600}
.schakelaar__baan{position:relative;flex-shrink:0;width:30px;height:18px;border-radius:999px;background:var(--line);transition:background .18s}
.schakelaar__knop{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s}
.schakelaar[aria-pressed="true"] .schakelaar__baan{background:var(--purple)}
.schakelaar[aria-pressed="true"] .schakelaar__knop{transform:translateX(12px)}
@media (prefers-reduced-motion:reduce){.schakelaar__baan,.schakelaar__knop{transition:none}}

/* C6: herkende eisen als chips bij "Je zocht", met een kruisje om ze te verwijderen. */
.herkend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px}
.herkend__lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.herkend__chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px 4px 12px;border-radius:999px;border:1px solid var(--chip-br);background:var(--chip);color:var(--chip-ink);font-size:12.5px;font-weight:600;cursor:pointer}
.herkend__chip span{font-size:15px;line-height:1;color:var(--muted)}
.herkend__chip:hover{border-color:var(--accent)}
.herkend__chip:hover span{color:var(--accent)}

/* C7: klikdoelen op mobiel minimaal 40 px hoog. */
html[data-narrow] .herkend__chip,html[data-narrow] .entity,html[data-narrow] .example,html[data-narrow] .ftr a,html[data-narrow] .ftr__cookie,html[data-narrow] .sort button,html[data-narrow] .linkbtn,html[data-narrow] .pill-btn{min-height:40px}
html[data-narrow] .ftr a,html[data-narrow] .example,html[data-narrow] .sort button{display:inline-flex;align-items:center}