/* BoK Toetslab: global styles plus JS-emitted component classes.
   Komt direct uit de Claude Design handoff bundle (HAN look-and-feel),
   uitgebreid met de klassen die workbench.js / source.js / landing.js
   emitten (.status-pill, .step, .modal-*, .mono, .scroll-y, .is-disabled).
   Alle waarden via CSS-variabelen uit tokens.css → swap = visuele swap. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--color-paper); }
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: var(--text-base);
  line-height: var(--leading-norm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--color-accent); color: var(--color-accent-fg); }

/* Headings krijgen automatisch de display-stijl die Manrope verwacht */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

/* ─── Typografie-utilities die in alle drie de pagina's geherbruikt worden ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
}
.muted { color: var(--color-mute); }
.mono  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mute); }

/* ─── Scroll-panels (workbench-kolommen) ─── */
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: var(--radius-pill); }

/* ─── Disabled state (PDF-tab) ─── */
.is-disabled { opacity: 0.4; pointer-events: none; }

/* ─── Status-pill (geëmitteerd door workbench.js) ─── */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--text-xs)/1 var(--font-display);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  text-transform: lowercase;
}
.status-pill::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-faint);
}
.status-pill[data-status="approved"] {
  color: oklch(0.40 0.13 155);
  border-color: oklch(0.85 0.10 155);
  background: oklch(0.97 0.04 155);
}
.status-pill[data-status="approved"]::before { background: var(--color-success); }
.status-pill[data-status="needs_review"] {
  color: oklch(0.40 0.13 75);
  border-color: oklch(0.85 0.10 75);
  background: oklch(0.97 0.04 75);
}
.status-pill[data-status="needs_review"]::before { background: var(--color-warn); }
.status-pill[data-status="rejected"] {
  color: oklch(0.40 0.16 25);
  border-color: oklch(0.88 0.10 25);
  background: oklch(0.97 0.04 25);
}
.status-pill[data-status="rejected"]::before { background: var(--color-danger); }

/* ─── Pipeline-step indicator (controls panel) ─── */
.step {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-2);
  border: var(--border);
  background: var(--color-surface);
  color: var(--color-mute);
  font: 500 var(--text-sm)/1 var(--font-display);
}
.step[data-state="active"] {
  background: var(--color-paper-2);
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.step[data-state="done"]   { color: var(--color-success); border-color: var(--color-success); }
.step[data-state="failed"] { color: var(--color-danger);  border-color: var(--color-danger); }
.step .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-faint);
  flex-shrink: 0;
}
.step[data-state="active"] .dot { background: var(--color-accent); animation: pulse-soft 1.4s ease-in-out infinite; }
.step[data-state="done"]   .dot { background: var(--color-success); }
.step[data-state="failed"] .dot { background: var(--color-danger); }

/* ─── Modals ─── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,14,16,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  animation: fadeIn var(--dur) var(--ease);
}
.modal-panel {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-pop);
  max-width: 720px; width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
}

/* ─── Animaties ─── */
@keyframes pulse-soft { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.pulse { animation: pulse-soft 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin  { animation: spin 1s linear infinite; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn var(--dur) var(--ease); }

/* ─── Form-elementen die niet via Tailwind utility classes komen
   (de native textarea/input/range; range krijgt z'n eigen tokenize) ─── */
textarea, input[type="text"], input[type="number"], input[type="email"], select {
  font-family: var(--font-sans);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--color-line); border-radius: var(--radius-pill);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-ink);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-ink);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-ink);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-ink);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-moz-range-thumb:hover { background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }

/* =============================================================================
   Landing-page componenten, overgenomen uit de Claude Design bundle.
   Worden alleen toegepast op index.html (workbench en source-detail gebruiken
   hun eigen markup en blijven ongewijzigd).
   ============================================================================= */

/* ─── Topbar ─── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: var(--color-ink);
  color: #fff;
  display: flex; align-items: stretch;
  border-bottom: 1px solid #000;
}
.topbar-inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}
.brand {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: var(--text-md);
  color: #fff;
}
.brand .dot {
  display:inline-block; width:8px; height:8px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateY(-1px);
}
.brand .sub {
  color: var(--color-faint);
  font-weight: 500;
  font-size: var(--text-xs);
  margin-left: var(--space-2);
}
.topnav {
  display:flex; gap: var(--space-1);
  margin-left: var(--space-6);
}
.topnav a {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-2);
  color: #d8d8db;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topnav a:hover  { color: #fff; background: rgba(255,255,255,0.06); }
.topnav a.active { color: #fff; background: rgba(255,255,255,0.10); }
.topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--space-4);
  color: #c9c9cd;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}
.topbar-right .who { display:flex; align-items:center; gap: var(--space-2); }
.avatar {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-display);
}

/* ─── Container ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }

/* ─── Buttons (bundle-stijl, ipv tailwind utility, voor de landing-CTAs) ─── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 var(--text-sm)/1 var(--font-display);
  letter-spacing: -0.005em;
  padding: 11px 16px;
  border-radius: var(--radius-2);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-fg); }
.btn-primary:hover { background: var(--color-accent-ink); }
.btn-ghost {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
}
.btn-ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
.btn-lg { padding: 14px 22px; font-size: var(--text-base); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn svg { display: inline-block; }

/* ─── Book card (8 klassiekers) ─── */
.book-card {
  border: var(--border);
  background: var(--color-surface);
  padding: 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.book-card:hover { border-color: var(--color-ink); }
.book-card[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.book-card[aria-disabled="true"]:hover { border-color: var(--color-line); }

/* ─── Badge (gebruikt op de book-card category) ─── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: var(--radius-1);
  background: var(--color-paper-3);
  color: var(--color-ink-soft);
}

/* ─── Footer ─── */
.footer {
  border-top: var(--border);
  background: var(--color-paper);
  padding: var(--space-7) 0;
  font: 500 var(--text-xs)/1.4 var(--font-display);
  color: var(--color-mute);
}
.footer-inner { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; }
.footer .brand-mark {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--color-ink);
  font-weight: 700;
}
.footer .brand-mark .dot { width: 8px; height: 8px; background: var(--color-accent); border-radius: 2px; }
.footer a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-line-strong); }
.footer a:hover { text-decoration-color: var(--color-ink); }