/* styles.css - v6.2 */
:root{
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#475569;
  --primary:#2563eb; --primary-contrast:#ffffff; --border:#e2e8f0;
  --nav-glass: rgba(6,9,14,.72); --nav-border: rgba(148,163,184,.18);
  --tab-active-bg: rgba(255,255,255,.92); --tab-text: rgba(255,255,255,.95);
  --success:#16a34a; --success-contrast:#ffffff;
}
:root[data-theme="dark"]{
  --bg:#0b0e12; --card:#0f141a; --text:#e5e7eb; --muted:#9aa4af;
  --primary:#2563eb; --primary-contrast:#ffffff; --border:#1f2937;
  --nav-glass: rgba(6,9,14,.72); --nav-border: rgba(148,163,184,.18);
  --tab-active-bg: rgba(255,255,255,.92); --tab-text: rgba(255,255,255,.95);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); scroll-behavior:smooth}

/* Disable selection & I-beam on non-interactive text */
:where(h1,h2,h3,h4,h5,h6,p,span,li,ul,ol,blockquote,code,pre,label){
  user-select:none; -webkit-user-select:none; cursor:default;
}
a, a.tab, button, .btn, .tab{ user-select:auto; -webkit-user-select:auto; cursor:pointer }
input, textarea, select{ user-select:text; -webkit-user-select:text; cursor:text }

/* Hero */
.hero{position:relative; height:70vh; overflow:hidden; background:#000}
.hero__media{position:absolute; inset:0; width:100%; height:100%; overflow:hidden}
.hero__media video,
.hero__media iframe{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero__media video{object-fit:cover}
.hero__media iframe{border:0; transform:scale(1.25); transform-origin:center}
.hero__youtube{display:none}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,.08))}
.hero__inner{position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 1rem}
.hero h1{color:#fff; font-size:clamp(2rem,5vw,4rem); margin:0 0 .75rem; text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero p{color:rgba(255,255,255,.95); max-width:42rem; margin:0 auto}

/* Mute toggle */
.mute-toggle{position:absolute; z-index:3; top:5.25rem; right:1rem; appearance:none; border:0; background:rgba(0,0,0,.55); color:#fff; border-radius:999px; padding:.5rem .75rem; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.25); cursor:pointer}

/* Glassy fixed navbar */
.nav{ position:fixed; inset:0 0 auto 0; z-index:1000; background:linear-gradient(180deg, rgba(2,6,12,.88), rgba(2,6,12,.62)), var(--nav-glass);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid var(--nav-border); box-shadow:0 18px 50px rgba(0,0,0,.24); }
.nav{ transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease }
.nav.is-scrolled{ box-shadow:0 18px 48px rgba(0,0,0,.36); background:rgba(5,8,13,.9) }
.nav__wrap{ max-width:1280px; min-height:72px; margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.nav__right{ display:flex; align-items:center; gap:.65rem; justify-content:flex-end; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:.75rem; min-width:0; padding:.35rem .8rem .35rem .45rem; border:1px solid rgba(148,163,184,.18); border-radius:999px; background:rgba(15,23,42,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); text-decoration:none }
.brand img{ width:44px; height:44px; border-radius:999px; object-fit:contain }
.brand span{ color:#fff; font-size:1.02rem; font-weight:800; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.tabs{ display:flex; gap:.25rem; padding:.3rem; border-radius:999px; background:rgba(15,23,42,.42); border:1px solid rgba(148,163,184,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.tab{ appearance:none; border:1px solid transparent; cursor:pointer; padding:.62rem 1rem; border-radius:999px; font-weight:750; font-size:.9rem; color:var(--tab-text); background:transparent; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap }
.tab, .btn, .card, .theme-pill__btn, .nav-circle, .nav-login{ transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease }
.tab--active{ background: var(--tab-active-bg); color:#0f172a; box-shadow:0 10px 26px rgba(0,0,0,.24) }
.tab:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12) }
.tab[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }
a.tab{ text-decoration:none }
.theme-toggle{ appearance:none; border:1px solid var(--border); background:transparent; color:#fff; border-radius:.8rem; padding:.45rem .7rem; font-weight:700; cursor:pointer }

/* Theme pill (light/dark) */
.theme-pill{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  padding:.28rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}
.theme-pill__btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0;
  border-radius:999px;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.theme-pill__btn svg{ width:18px; height:18px; display:block }
.theme-pill__btn:hover{ background: rgba(255,255,255,.12) }
.theme-pill__btn.is-active{ background: rgba(255,255,255,.18) }

.nav-login{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.68rem 1rem .68rem 1.1rem;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:.92rem;
  font-weight:850;
  letter-spacing:0;
  border:1px solid rgba(147,197,253,.44);
  background:linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow:0 14px 32px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.22);
}
.nav-login svg{ width:18px; height:18px; flex:0 0 auto }
.nav-login:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, #60a5fa 0%, #2563eb 54%, #1e40af 100%);
  box-shadow:0 16px 36px rgba(37,99,235,.44), inset 0 1px 0 rgba(255,255,255,.24);
}
.nav-login:focus-visible,
.tab:focus-visible,
.theme-pill__btn:focus-visible{
  outline:2px solid rgba(96,165,250,.9);
  outline-offset:3px;
}

.language-switcher,
.lang-switcher,
.lang-bar,
.public-language-switch,
[data-language-switcher],
[data-public-language-switcher]{
  display:none !important;
}

/* Login circle button */
.nav-circle{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:.66rem;
  letter-spacing:.6px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color:#fff;
}
.nav-circle:hover{ filter:brightness(1.08) }
.nav-circle:hover{ transform:translateY(-1px) }
.nav-circle--login{
  background:#2563eb;
  border-color:#2563eb;
}
.nav-circle--login:hover{ background:#1e40af }

@media(max-width:980px){
  .nav__wrap{
    align-items:flex-start;
    flex-direction:column;
    gap:.65rem;
  }
  .nav__right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:.15rem;
    scrollbar-width:none;
  }
  .nav__right::-webkit-scrollbar{ display:none }
  .tabs{ flex:0 0 auto }
  .mute-toggle{ top:8.6rem }
}

@media(max-width:640px){
  .nav__wrap{ padding:.55rem .75rem }
  .brand{
    max-width:100%;
    padding:.28rem .7rem .28rem .35rem;
  }
  .brand img{ width:38px; height:38px }
  .brand span{ max-width:calc(100vw - 7rem); font-size:.98rem }
  .tabs{ gap:.18rem; padding:.22rem }
  .tab{ padding:.54rem .78rem; font-size:.84rem }
  .nav-login{
    min-height:40px;
    padding:.55rem .85rem;
    font-size:.86rem;
  }
  .theme-pill__btn{ width:32px; height:32px }
  .mute-toggle{ top:8.15rem; right:.75rem }
}

/* Content */
.container{ max-width:1200px; margin:0 auto; padding:3.75rem 1rem 2.5rem }
.grid{ display:grid; gap:1rem; align-items:stretch }
@media(min-width:768px){ .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} }

.card{ background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:1.25rem; box-shadow:0 10px 20px rgba(15,23,42,.06); display:flex; flex-direction:column; height:100% }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(15,23,42,.10) }
.card--center{text-align:left}

.card h3{ margin:.25rem 0 .5rem; font-size:1.1rem }
.card p{ color:var(--muted); font-size:.95rem; line-height:1.5 }
.card > div:last-child{ margin-top:auto !important }
.btn{ appearance:none; border:1px solid var(--border); background:#ffffff; color:#0f172a; border-radius:1rem; padding:.6rem 1rem; font-weight:700; cursor:pointer }
:root[data-theme="dark"] .btn{ background:#0f141a; color:#e5e7eb }
.btn:hover{ filter:brightness(1.04) }
.btn.is-loading{ display:inline-flex; align-items:center; gap:.55rem; cursor:progress }
.btn-spinner{
  width:.95rem; height:.95rem; display:inline-block;
  border-radius:999px; border:2px solid currentColor; border-right-color:transparent;
  animation: public-spin .7s linear infinite;
}
@keyframes public-spin{ to{ transform:rotate(360deg) } }
.btn--primary{ background:var(--success); color:var(--success-contrast); border-color:var(--success) }
.btn--primary:hover{ filter:brightness(.95) }
/* Blue 'Solliciteer' buttons on cards only */
.card .btn[data-apply]{ background:#2563eb; color:#fff; border:1px solid #2563eb }
.card .btn[data-apply]:hover{ background:#1e40af }

/* Forms */
.form{ background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:1.25rem }
.field{ display:block; margin-bottom:.9rem; font-size:.95rem }
.field label{ display:block; color:var(--text); font-weight:600; margin-bottom:.35rem }
.field input,.field textarea{ width:100%; padding:.6rem .75rem; border:1px solid var(--border); background:#ffffff; color:#0f172a; border-radius:.75rem; outline:none }
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea{ background:#0b0e12; color:#e5e7eb; border-color:#2b3441 }
.field input:focus,.field textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,99,235,.2) }
.form__actions{ display:flex; gap:.6rem; align-items:center; margin-top:.5rem }
.status--ok{ color:#16a34a; font-size:.9rem }
.status--err{ color:#dc2626; font-size:.9rem }

/* Radio group */
.radio-row{ display:flex; align-items:center; gap:1rem; margin:.25rem 0 .5rem }
.radio-row label{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text) }
.radio-row input[type="radio"]{ width:16px; height:16px }

/* Sections */
.hidden{ display:none !important }
.section{ display:none }
.section.active{ display:block }
.section header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem }
.section header h2{ margin:0; font-size:1.5rem }
.muted{ color:var(--muted); font-size:.9rem }
.public-reveal{
  opacity:0;
  transform:translateY(18px) scale(.99);
  filter:blur(8px);
  transition:
    opacity .55s ease var(--reveal-delay, 0ms),
    transform .55s ease var(--reveal-delay, 0ms),
    filter .55s ease var(--reveal-delay, 0ms);
}
.public-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}
@media (prefers-reduced-motion: reduce){
  body{ scroll-behavior:auto }
  .public-reveal{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}

/* Modal */
.modal{ position:fixed; inset:0; z-index:1050; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45) }
.modal__card{ background:var(--card); border-radius:1rem; padding:1rem 1.25rem; max-width:28rem; border:1px solid var(--border); text-align:center; box-shadow:0 10px 30px rgba(15,23,42,.2) }
.modal__card h3{ margin:.25rem 0 .5rem }
.modal__card p{ color:var(--muted); margin:0 0 .75rem }
.lang-modal[hidden]{ display:none !important }
.lang-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:1.5rem;
}
.lang-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,12,.72);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.lang-modal__dialog{
  position:relative;
  z-index:1;
  width:min(100%, 44rem);
  padding:1.5rem;
  border-radius:1.5rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 40%),
    linear-gradient(180deg, rgba(15,20,26,.98), rgba(8,12,18,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  color:#f8fafc;
}
.lang-modal__kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:.85rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#93c5fd;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.lang-modal__dialog h2{
  margin:0 0 .65rem;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.05;
}
.lang-modal__dialog p{
  margin:0;
  max-width:34rem;
  color:rgba(226,232,240,.82);
  line-height:1.6;
}
.lang-modal__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.9rem;
  margin-top:1.35rem;
}
.lang-modal__btn{
  appearance:none;
  width:100%;
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.68);
  color:#f8fafc;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.lang-modal__btn:hover,
.lang-modal__btn:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.6);
  background:rgba(20,34,56,.95);
  box-shadow:0 18px 30px rgba(0,0,0,.24);
  outline:none;
}
.lang-modal__btn strong{
  display:block;
  font-size:1rem;
  margin-bottom:.3rem;
}
.lang-modal__btn span{
  display:block;
  color:rgba(191,219,254,.82);
  font-size:.92rem;
}
.lang-modal__hint{
  margin-top:1rem;
  color:rgba(148,163,184,.92);
  font-size:.88rem;
}
@media(max-width:680px){
  .lang-modal{ padding:1rem; }
  .lang-modal__dialog{ padding:1.2rem; border-radius:1.2rem; }
  .lang-modal__grid{ grid-template-columns:1fr; }
}

/* Footer */
.footer{ border-top:1px solid var(--border); padding:1.5rem 1rem; color:var(--muted) }
.footer__inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem }

/* --- v6.6.1: Transparent logos everywhere (no bg, no borders) --- */
.card img.logo{
  width:96px; height:96px;
  object-fit:contain;
  border-radius:.0rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.brand img{
  width:44px; height:44px;
  object-fit:contain;
  border-radius:999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Wetboek (docs-style) */
.wetboek-card{ padding:1.25rem; }
.wetboek-card, .wetboek-card *{ user-select:text !important; -webkit-user-select:text !important; }
.wetboek-pre{
  white-space: pre-wrap;
  margin:0;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text);
}

/* Layout */
.wetboek-layout{ display:grid; gap:1rem; align-items:start; }
@media(min-width:1000px){
  .wetboek-layout{ grid-template-columns: 320px 1fr; }
  .wetboek-sidebar{ position:sticky; top:5.25rem; max-height: calc(100vh - 6.25rem); overflow:auto; }
}

/* Maak alles in Wetboek selecteerbaar */
#section-wetboek, #section-wetboek *{ user-select:text; -webkit-user-select:text; }
#section-wetboek a, #section-wetboek button{ user-select:auto; -webkit-user-select:auto; cursor:pointer; }
#section-wetboek input{ user-select:text; -webkit-user-select:text; cursor:text; }

/* Sidebar */
.wetboek-sidebar__head{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:.75rem; }
.wetboek-sidebar__title{ font-weight:900; letter-spacing:.2px; font-size:1.05rem; }
.wetboek-filter{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid var(--border);
  border-radius:.8rem;
  background:#ffffff;
  color:var(--text);
  outline:none;
}
:root[data-theme="dark"] .wetboek-filter{ background:#0b0e12; border-color:#2b3441; }
.wetboek-filter:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,99,235,.2); }

.wetboek-nav{ display:flex; flex-direction:column; gap:.15rem; }
.wetboek-nav__chapter{ padding:.35rem 0; border-top:1px solid var(--border); }
.wetboek-nav__chapter:first-child{ border-top:0 }
.wetboek-nav__row{ display:flex; align-items:center; gap:.25rem; }
.wetboek-nav__toggle{
  flex:0 0 28px;
  width:28px; height:28px;
  border:1px solid var(--border);
  background: transparent;
  border-radius:.65rem;
  color: var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.wetboek-nav__toggle::before{ content:"▾"; line-height:1; transform: translateY(-1px); }
.wetboek-nav__chapter.is-collapsed .wetboek-nav__toggle::before{ content:"▸"; transform: translateY(-1px); }
.wetboek-nav__toggle:hover{ border-color: rgba(37,99,235,.35); color: var(--text); }

.wetboek-nav__chapterLink{
  flex:1;
  text-decoration:none;
  font-weight:900;
  color:var(--text);
  padding:.35rem .45rem;
  border-radius:.75rem;
}
.wetboek-nav__chapterLink:hover{ background:rgba(37,99,235,.08); }

.wetboek-nav__items{ display:flex; flex-direction:column; gap:.1rem; margin-left: 34px; margin-top:.25rem; }
.wetboek-nav__chapter.is-collapsed .wetboek-nav__items{ display:none; }
.wetboek-nav__link{
  text-decoration:none;
  color:var(--muted);
  padding:.28rem .45rem;
  border-radius:.7rem;
  font-size:.92rem;
}
.wetboek-nav__link:hover{ background:rgba(37,99,235,.08); color:var(--text); }
.wetboek-nav a[aria-current="true"]{
  background:rgba(37,99,235,.12);
  color:var(--text);
  font-weight:900;
}

/* Content */
.wetboek-content{ min-width:0; }
.wetboek-doc{ padding:1.25rem; }

.wetboek-doc__intro{ margin-bottom: 1rem; }

.wetboek-pageToc{
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(15,23,42,.02);
}
:root[data-theme="dark"] .wetboek-pageToc{ background: rgba(255,255,255,.03); }
.wetboek-pageToc__title{ margin:0 0 .6rem; font-size:1.05rem; }
.wetboek-pageToc__list{ margin:0; padding-left: 1.25rem; }
.wetboek-pageToc__items{ margin:.25rem 0 .5rem; padding-left: 1.15rem; }
.wetboek-pageToc a{ color: var(--primary); text-decoration:none; }
.wetboek-pageToc a:hover{ text-decoration:underline; }

.wetboek-chapter{ padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--border); }
.wetboek-chapter:first-of-type{ padding-top:0; margin-top:0; border-top:0; }
.wetboek-anchor{ scroll-margin-top: 6.5rem; }

.wetboek-chapter__title{ margin:.1rem 0 .5rem; font-size:1.35rem; display:flex; align-items:center; gap:.4rem; }
.wetboek-article__title{ margin:.1rem 0 .5rem; font-size:1.15rem; display:flex; align-items:center; gap:.4rem; }

.wetboek-permalink{ opacity:0; text-decoration:none; color:var(--muted); font-weight:800; }
.wetboek-chapter__title:hover .wetboek-permalink,
.wetboek-article__title:hover .wetboek-permalink{ opacity:1; }
.wetboek-permalink:focus{ opacity:1; outline:none; }

.wetboek-chapter__intro{ color:var(--muted); margin-bottom:.25rem; }

.wetboek-article{ padding:1rem 0; border-top: 1px dashed var(--border); }
.wetboek-article:first-of-type{ border-top:0; padding-top:.25rem; }
.wetboek-article__body{ color:var(--text); }
.wetboek-article__body h4{ margin: .9rem 0 .35rem; }
.wetboek-article__body ul{ margin:.35rem 0 .75rem; padding-left:1.15rem; }
.wetboek-article__body li{ margin:.18rem 0; }

.wetboek-article__penTitle{ margin:.85rem 0 .45rem; font-size:1.0rem; }

/* Strafvakjes */
.penalty-grid{ display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top:.35rem; }
.penalty-card{ border:1px solid var(--border); border-radius:1rem; padding:.75rem .85rem; background: rgba(37,99,235,.05); }
:root[data-theme="dark"] .penalty-card{ background: rgba(37,99,235,.10); }
.penalty-label{ font-weight:900; color:var(--primary); margin-bottom:.15rem; }
.penalty-text{ font-weight:700; color:var(--text); }
.penalty-line{ margin-top:.2rem; font-size:.9rem; color:var(--muted); }

.penalty-card--select{ width:100%; text-align:left; cursor:pointer; }
.penalty-card--select:hover{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 1px rgba(37,99,235,.22) inset; }
.penalty-card--select.is-selected{ background: rgba(22,163,74,.16); border-color: rgba(22,163,74,.78); box-shadow: 0 0 0 1px rgba(22,163,74,.35) inset; }
:root[data-theme="dark"] .penalty-card--select.is-selected{ background: rgba(22,163,74,.22); }

/* Public lawbook (MEOS-style + Strafberekening tab) */
.public-lawbook{ display:block; }
.lawbook-top{ margin-bottom: 1rem; }
.lawbook-tabs{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.03);
}
:root[data-theme="dark"] .lawbook-tabs{ background: rgba(255,255,255,.04); }
.lawbook-tab-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text);
  padding:.55rem .95rem;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.lawbook-tab-btn.is-active{ background: rgba(37,99,235,.14); }
:root[data-theme="dark"] .lawbook-tab-btn{ color:#fff; }

.lawbook-main-layout{ display:grid; gap:1rem; align-items:start; }
@media(min-width:1000px){
  .lawbook-main-layout{ grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items:stretch; }
  .lawbook-left-legend{ position:sticky; top:5.25rem; max-height: calc(100vh - 6.25rem); overflow:auto; }
}

.lawbook-left-legend{ padding:0; }
.lawbook-left-legend__head{ padding:.9rem .95rem .8rem; border-bottom:1px solid var(--border); }
.lawbook-left-legend__title{ font-weight:900; margin-bottom:.45rem; }

.lawbook-left-nav{ display:grid; gap:.45rem; padding:.75rem; }
.lawbook-left-group{ display:grid; gap:.35rem; }

.lawbook-left-nav__btn{
  width:100%;
  border:1px solid var(--border);
  border-radius:.85rem;
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding:.55rem .65rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  text-align:left;
  font-weight:800;
}
:root[data-theme="dark"] .lawbook-left-nav__btn{ background: rgba(255,255,255,.04); color:#fff; }
.lawbook-left-nav__btn:hover{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 1px rgba(37,99,235,.18) inset; }
.lawbook-left-nav__meta{ display:inline-flex; align-items:center; gap:.45rem; }
.lawbook-left-nav__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.75rem; height:1.35rem;
  padding:0 .45rem;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  background: rgba(37,99,235,.12);
  color: var(--text);
}
.lawbook-left-nav__chev{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--muted);
  transition: transform .16s ease;
}
.lawbook-left-nav__chev::before{ content:"\25BE"; line-height:1; transform: translateY(-1px); }
.lawbook-left-group.is-open .lawbook-left-nav__chev{ transform: rotate(180deg); }

.lawbook-left-subnav{ display:grid; gap:.28rem; padding: 0 .3rem .25rem; }
.lawbook-left-subnav__btn{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:.75rem;
  background: rgba(255,255,255,.02);
  color: var(--text);
  padding:.45rem .55rem;
  text-align:left;
  font-size:.85rem;
  line-height:1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .lawbook-left-subnav__btn{ border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); color:#fff; }
.lawbook-left-subnav__btn:hover{ border-color: rgba(37,99,235,.45); }

.lawbook-chapter-list{ display:grid; gap:.9rem; }
.lawbook-chapter{ padding:0; overflow:hidden; }
.lawbook-chapter-head{
  padding:.9rem 1rem;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.lawbook-chapter-head__label{ font-weight:900; }
.lawbook-chapter-head__meta{ color: var(--muted); font-weight:800; }
.lawbook-chapter-body{ padding:.2rem 1rem .95rem; }

.lawbook-article{ border-top: 1px dashed var(--border); padding:.95rem 0; }
.lawbook-article:first-child{ border-top:0; }
.lawbook-article__title{ margin:0 0 .35rem; font-size:1.05rem; }
.lawbook-article__body{ color: var(--muted); margin-bottom:.55rem; }

.lawbook-calc-stats{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lawbook-calc-stat{ padding: .95rem 1rem; }
.lawbook-calc-value{ font-weight:900; font-size:1.25rem; margin-top:.25rem; }

.lawbook-tablewrap{ overflow:auto; border-radius: 1rem; border:1px solid var(--border); }
.lawbook-table{ width:100%; border-collapse: collapse; min-width: 720px; }
.lawbook-table thead th{
  text-align:left;
  font-size:.85rem;
  letter-spacing:.2px;
  color: var(--muted);
  padding:.7rem .75rem;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
:root[data-theme="dark"] .lawbook-table thead th{ background: rgba(255,255,255,.03); }
.lawbook-table td{
  padding:.7rem .75rem;
  border-bottom:1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}
.lawbook-table .btn{
  padding:.35rem .6rem;
  border-radius:.8rem;
  font-size:.85rem;
}
.lawbook-table tr:last-child td{ border-bottom:0; }
.lawbook-table__end{ text-align:right; }