@font-face {
  font-family: 'RijksSans';
  src: url('/public/fonts/RijksSansVF-Regular.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
}
@font-face {
  font-family: 'RijksSans';
  src: url('/public/fonts/RijksSansVF-Italic.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
}

:root{
  /* Brand */
  --main:#154273;
  --main-hover:#1a5590;
  --main-pressed:#0f3259;
  --main-disabled:#b0b8c1;
  --main-tint:#e8eef6;
  --main-tint-strong:#dde1f0;

  /* Pijler colours (mirror config/factorb-config.json) */
  --pijler-signalering:#d52b1e;
  --pijler-toegankelijkheid:#ffb612;
  --pijler-gedrag:#007bc7;
  --pijler-invloed:#39870c;

  /* Text */
  --text:#1a1a2e;
  --text-muted:#555;
  --text-subtle:#888;
  --text-faint:#aaa;
  --text-inverse:#fff;

  /* Surfaces & borders */
  --surface:#fff;
  --bg-subtle:#f8fafc;
  --bg-muted:#f0f2f5;
  --border:#e0e6ef;
  --border-strong:#c5cdd8;
  --sec-border:#c5cdd8;

  /* Feedback */
  --danger:#d52b1e;
  --danger-soft:#fef2f2;
  --success:#2e7d32;
  --success-soft:#e8f5e9;

  /* Focus */
  --focus-ring:#4a90d9;
  --focus-ring-width:3px;

  /* Type scale */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:22px;
  --fs-xl:28px;
  --fs-2xl:36px;
  --fs-3xl:48px;
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-base:1.5;

  /* Radius */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:999px;

  /* Spacing */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;

  /* Stacking */
  --z-nav:100;
  --z-dropdown:200;
  --z-modal:300;
  --z-toast:400;

  /* Hit target */
  --tap:48px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{
  font-family:'RijksSans',sans-serif;
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--text);
  background:var(--surface);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-tertiary{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  border-radius:var(--r-sm);
  font-size:var(--fs-base);font-weight:700;
  cursor:pointer;border:1.5px solid transparent;outline:none;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary,.btn-secondary{min-height:var(--tap);min-width:var(--tap)}
.btn-primary svg,.btn-secondary svg,.btn-tertiary svg{width:20px;height:20px}

.btn-primary{background:var(--main);color:var(--text-inverse);border-color:var(--main)}
.btn-primary:hover{background:var(--main-hover);border-color:var(--main-hover);text-decoration:underline}
.btn-primary:active{background:var(--main-pressed);border-color:var(--main-pressed)}
.btn-primary:focus-visible{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}
.btn-primary:disabled{background:var(--main-disabled);border-color:var(--main-disabled);color:var(--text-inverse);cursor:default;pointer-events:none}

.btn-secondary{background:var(--surface);color:var(--main);border-color:var(--main)}
.btn-secondary:hover{background:var(--main-tint-strong);color:var(--main-pressed);text-decoration:underline}
.btn-secondary:active{background:var(--main-tint);color:var(--main-pressed);border-color:var(--main-pressed)}
.btn-secondary:focus-visible{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}
.btn-secondary:disabled{border-color:var(--main-disabled);color:var(--main-disabled);cursor:default;pointer-events:none}

.btn-tertiary{background:transparent;color:var(--main)}
.btn-tertiary:hover{background:var(--main-tint);text-decoration:underline}
.btn-tertiary:active{background:var(--main-tint-strong)}
.btn-tertiary:focus-visible{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}
.btn-tertiary.nav-active{background:var(--main-tint);color:var(--main)}

/* Dashed "add" button (used by .admin-add-btn and .fold-add-btn) */
.admin-add-btn,
.fold-add-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;padding:var(--s-3) var(--s-4);margin-top:var(--s-2);
  border:1.5px dashed var(--border-strong);border-radius:var(--r-md);
  background:var(--bg-subtle);color:var(--main);
  font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.admin-add-btn:hover,
.fold-add-btn:hover{background:var(--main-tint);border-color:var(--main);color:var(--main)}

/* Compact secondary controls */
.admin-move-btn,
.seg-bento-size-btn,
.fold-edit-btn,
.card-popup-upload-btn,
.bento-klaar-btn{
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:var(--s-1) var(--s-3);
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-muted);
  font-size:var(--fs-sm);font-weight:600;line-height:1.4;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.admin-move-btn:hover,
.seg-bento-size-btn:hover,
.fold-edit-btn:hover,
.card-popup-upload-btn:hover{background:var(--main-tint);border-color:var(--main);color:var(--main)}
.admin-move-btn:disabled{border-color:var(--border);background:var(--bg-subtle);color:var(--border-strong);cursor:default}
.admin-move-btn.admin-move-btn-danger{border-color:var(--danger);color:var(--danger)}
.admin-move-btn.admin-move-btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.seg-bento-size-btn.active{background:var(--main);border-color:var(--main);color:var(--text-inverse)}

/* Destructive small button */
.admin-delete-btn{
  display:inline-flex;align-items:center;
  padding:var(--s-1) var(--s-3);
  border:1.5px solid var(--danger);border-radius:var(--r-sm);
  background:var(--surface);color:var(--danger);
  font-weight:600;cursor:pointer;transition:background .12s;
}
.admin-delete-btn:hover{background:var(--danger-soft)}

/* Pencil / icon-only button */
.bento-pencil-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;
  border:none;border-radius:var(--r-sm);
  background:var(--main);color:var(--text-inverse);
  cursor:pointer;flex-shrink:0;line-height:0;transition:background .12s;
}
.bento-pencil-btn:hover{background:var(--main-hover)}

/* Tag / chip */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px var(--s-3);border-radius:var(--r-pill);
  background:var(--surface);color:var(--main);
  font-weight:500;cursor:pointer;
  border:1.5px solid var(--sec-border);outline:none;
  transition:background .15s,border-color .15s;
}
.tag:hover{border-color:var(--main);background:var(--main-tint)}
.tag:focus-visible{border-color:var(--main);box-shadow:0 0 0 2px var(--focus-ring)}

/* ── Top nav ───────────────────────────────────────────────────────────────── */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:14px var(--s-6);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.nav-logo-text{font-size:var(--fs-md);font-weight:700;color:var(--main);letter-spacing:-.02em}
.nav-right{display:flex;gap:10px;align-items:center}
.nav-right .btn-tertiary{height:38px}

.view{display:none;padding-top:68px}.view.active{display:block}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header{text-align:center;padding:40px var(--s-5) 10px}
.page-header h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);font-weight:700;color:var(--main);letter-spacing:-.02em;margin-bottom:var(--s-3)}
.page-header p{font-size:var(--fs-lg);line-height:var(--lh-base);color:var(--text-muted);max-width:640px;margin:0 auto 22px}
#view-admin .page-header p{font-size:var(--fs-base)}

/* ── Pie hero / labels ─────────────────────────────────────────────────────── */
.hero{max-width:1360px;margin:0 auto;padding:20px var(--s-6) var(--s-4)}
#view-pie .hero{min-height:calc(100vh - 60px);display:flex;flex-direction:column;padding-top:20px;padding-bottom:20px}
#view-pie .hero::before, #view-pie .hero::after{content:'';flex-grow:1}
#view-pie .hero .pie-layout{width:100%;margin:0;flex-shrink:0}
#view-graph .hero{padding:0}

.pie-layout{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:480px}
.side-labels{display:flex;flex-direction:column;gap:28px}
.side-labels.left{align-items:flex-end;text-align:right}
.side-labels.right{align-items:flex-start;text-align:left}
.label-group-title{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-sm);color:var(--text-inverse);font-weight:700;margin-bottom:var(--s-2);cursor:pointer;transition:transform .15s;user-select:none}
.label-group-title:hover{transform:scale(1.02)}
.label-group-title.active{transform:scale(1.04)}
.label-group-title svg{width:16px;height:16px;fill:var(--text-inverse);flex-shrink:0}
.label-items{display:flex;flex-direction:column;gap:3px}
.label-item{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px var(--s-2);border-radius:var(--r-sm);transition:background .12s,transform .1s;font-weight:500;color:var(--text)}
.label-item:hover{background:rgba(0,0,0,.03)}
.label-item.active{background:rgba(0,0,0,.05);font-weight:700;color:var(--text);transform:translateX(2px)}
.side-labels.left .label-item{justify-content:flex-end}
.side-labels.left .label-item.active{transform:translateX(-2px)}
.label-name{flex:1}
.label-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.label-item.active .label-dot{transform:scale(1.3)}
.pie-container{display:flex;justify-content:center;align-items:center;overflow:visible}
.pie-svg{width:460px;height:460px;cursor:pointer;overflow:visible}
.pie-segment{transition:transform .15s ease,opacity .15s ease,fill .35s ease,stroke .35s ease;transform-origin:250px 250px;cursor:pointer;will-change:transform,opacity,fill}
.pie-segment:hover{transform:scale(1.04)}
.pie-segment.active{transform:scale(1.09);opacity:1}
.pie-segment.dimmed{opacity:.45}
.center-circle{pointer-events:none}
.center-click{cursor:pointer}

.content-area{max-width:1100px;margin:0 auto;padding:0 var(--s-6) 80px;scroll-margin-top:80px}

/* ── Bento ─────────────────────────────────────────────────────────────────── */
.bento-section{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.bento-cat-header{display:flex;align-items:center;gap:var(--s-3);margin-bottom:20px;padding-bottom:14px;border-bottom:1.5px solid var(--bg-muted)}
.bento-cat-badge{padding:5px 14px;border-radius:var(--r-sm);color:var(--text-inverse);font-weight:700}
.bento-grid{display:grid;gap:14px;margin-bottom:var(--s-4)}
.bento-grid.cat-overview{grid-template-columns:repeat(3,1fr)}
.bento-grid.cat-overview .bento-intro{grid-column:1/-1}
.bento-grid.sub-detail{grid-template-columns:1.4fr 1fr;align-items:stretch;gap:20px}
.bento-card{border-radius:var(--r-md);padding:26px;position:relative;overflow:hidden;border:none;transition:transform .15s;display:flex;flex-direction:column}
.bento-card.clickable{cursor:pointer}
.bento-card.clickable:hover{transform:translateY(-1px)}
.bento-card h3{font-size:var(--fs-xl);line-height:var(--lh-tight);font-weight:700;margin-bottom:var(--s-2);color:var(--main)}
.bento-card p{color:var(--text);line-height:var(--lh-base)}
.bento-card .label{font-weight:500;margin-bottom:var(--s-2);display:block}
.bento-card a{color:var(--main);font-weight:600;text-decoration:none}
.bento-card a:hover{text-decoration:underline}
.bento-right-stack{display:flex;flex-direction:column;gap:20px}
.bento-right-stack .bento-card{flex:0 0 auto}

.sub-chip{display:inline-flex;align-items:center;gap:7px;padding:5px var(--s-3);border-radius:var(--r-sm);background:var(--main-tint);cursor:pointer;transition:background .12s;font-weight:600;color:var(--main)}
.sub-chip:hover{background:var(--main-tint-strong)}
.chip-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chip-arrow{margin-left:var(--s-1);color:#9ab}

.breadcrumb{color:var(--text-faint);margin-bottom:14px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.breadcrumb span{cursor:pointer;transition:color .12s}
.breadcrumb span:hover{color:var(--text-muted)}
.breadcrumb .sep{color:var(--border-strong);cursor:default}
.breadcrumb .current{color:var(--text-muted);font-weight:600;cursor:default}

/* ── Graph view ────────────────────────────────────────────────────────────── */
.graph-container{width:100%;height:calc(100vh - 60px);position:relative;background:var(--surface);overflow:visible}

/* ── Quiz ──────────────────────────────────────────────────────────────────── */
.quiz-container{max-width:640px;margin:0 auto;padding:var(--s-4) var(--s-5) 80px}
.quiz-progress{width:100%;height:5px;background:var(--bg-muted);border-radius:3px;margin-bottom:28px;overflow:hidden}
.quiz-progress-bar{height:100%;border-radius:3px;transition:width .35s;background:var(--main)}
.quiz-question{animation:fadeUp .3s ease}
.quiz-q-number{font-weight:500;color:var(--text-subtle);margin-bottom:var(--s-2)}
.quiz-q-text{font-size:var(--fs-lg);font-weight:600;margin-bottom:20px;line-height:var(--lh-base);color:var(--main)}
.quiz-scale-labels{display:flex;justify-content:space-between;color:var(--text-faint);font-weight:400;margin-bottom:6px;padding:0 var(--s-1)}
.quiz-scale-row{display:flex;gap:var(--s-2)}
.quiz-scale-btn,
.quiz-scale-btn-text{
  flex:1;min-height:var(--tap);padding:10px 6px;border-radius:var(--r-md);
  border:2px solid var(--border);background:var(--surface);
  font-weight:500;color:var(--text-muted);cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s,color .15s;
  display:flex;align-items:center;justify-content:center;line-height:1.3;
}
.quiz-scale-btn:hover,
.quiz-scale-btn-text:hover{border-color:var(--sec-border);color:var(--text);background:var(--bg-subtle)}
.quiz-scale-btn.selected,
.quiz-scale-btn-text.selected{border-color:var(--main);background:var(--main-tint);color:var(--main);font-weight:600}

.quiz-results{animation:fadeUp .4s ease;text-align:center}
.quiz-results h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:800;margin-bottom:6px;color:var(--main)}
.quiz-results p{color:var(--text-muted);margin-bottom:22px;line-height:var(--lh-base)}
.result-bars{text-align:left;margin:0 0 var(--s-2)}
.qr-section .result-bars{max-width:none}
.result-bar-row{margin-bottom:14px}
.result-bar-label{font-weight:500;color:var(--text);margin-bottom:var(--s-1);display:flex;justify-content:space-between}
.result-bar-track{width:100%;height:7px;background:var(--bg-muted);border-radius:3px;overflow:hidden}
.result-bar-fill{height:100%;border-radius:3px;transition:width .5s}
.result-bar-sublabel{color:var(--text-muted);margin-top:2px}

/* ── Modal pattern (shared) ────────────────────────────────────────────────── */
.intro-modal-overlay,
#adminLoginModal,
.card-popup-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
}
.intro-modal-box,
.admin-modal-box,
.card-popup-modal{
  background:var(--surface);
  box-shadow:0 16px 48px rgba(0,0,0,.18);
  width:calc(100vw - 40px);
}

.intro-modal-box{border-radius:var(--r-lg);padding:40px 44px;max-width:520px;text-align:center}
.intro-modal-box h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:800;color:var(--main);margin-bottom:14px;letter-spacing:-.02em}
.intro-modal-box p{color:var(--text-muted);line-height:var(--lh-base);margin-bottom:28px}
.intro-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.admin-modal-box{border-radius:var(--r-lg);padding:28px 28px 24px;width:360px;max-width:calc(100vw - 40px)}
.admin-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.admin-modal-header h3{font-size:var(--fs-lg);font-weight:700;color:var(--main);margin:0}
.admin-modal-close{background:none;border:none;font-size:var(--fs-lg);color:var(--text-faint);cursor:pointer;padding:0 2px;line-height:1;border-radius:var(--r-sm);transition:color .12s}
.admin-modal-close:hover{color:var(--main)}
.admin-modal-label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-bottom:6px}
.admin-modal-input{display:block;width:100%;padding:9px var(--s-3);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.admin-modal-input:focus{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}
.admin-modal-error{font-size:var(--fs-sm);color:var(--danger);margin-top:var(--s-2)}
.admin-modal-actions{display:flex;gap:var(--s-2);margin-top:20px;justify-content:flex-end}

.card-popup-overlay{animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.card-popup-modal{border-radius:var(--r-md);width:min(720px,calc(100vw - 32px));max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.22);animation:fadeUp .22s ease}
.card-popup-header{display:flex;align-items:center;justify-content:flex-end;padding:10px 14px;background:var(--main-tint);position:sticky;top:0;z-index:1;margin-bottom:-1px}
.card-popup-close{background:none;border:none;font-size:var(--fs-lg);color:var(--main);cursor:pointer;padding:var(--s-1) var(--s-2);line-height:1;border-radius:var(--r-sm);transition:color .12s,background .12s;opacity:.7}
.card-popup-close:hover{opacity:1;background:rgba(0,0,0,.07)}
.card-popup-image{width:100%;background:var(--surface);overflow:hidden;line-height:0}
.card-popup-image img,.card-popup-image svg{width:100%;height:auto;display:block}
.card-popup-question{font-size:var(--fs-lg);font-weight:800;color:var(--main);padding:20px var(--s-5) 0;margin:0}
.card-popup-content{padding:var(--s-3) var(--s-5) 28px}
.card-popup-content textarea{width:100%;min-height:200px;font-family:monospace;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:10px;resize:vertical;box-sizing:border-box;outline:none;transition:border-color .15s}
.card-popup-content textarea:focus{border-color:var(--main)}
.card-popup-empty{color:var(--text-faint);font-style:italic;padding:var(--s-4) 0}

/* ── Admin shared inputs ───────────────────────────────────────────────────── */
.admin-field-row{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-3)}
.admin-field-row label{font-weight:600;color:var(--text-muted);min-width:90px;padding-top:var(--s-2);flex-shrink:0}
.admin-field-row input[type="text"],
.admin-field-row input[type="email"],
.admin-field-row input[type="password"],
.admin-field-row textarea,
.admin-field-row select{
  flex:1;padding:var(--s-2) var(--s-3);
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);resize:vertical;outline:none;
  font-family:'RijksSans',sans-serif;font-size:var(--fs-base);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.admin-field-row input:focus,
.admin-field-row textarea:focus,
.admin-field-row select:focus{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}

#adminSaveBadge{font-weight:600;color:var(--success);background:var(--success-soft);padding:var(--s-1) 10px;border-radius:var(--r-sm);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#adminToggleBtn{font-size:var(--fs-md);line-height:1}
#adminToggleBtn.active{color:var(--main);border-color:var(--main);background:var(--main-tint)}

.admin-section-title{font-size:var(--fs-md);line-height:var(--lh-base);font-weight:700;color:var(--main);margin:28px 0 14px}
.admin-card{border:1.5px solid var(--border);border-radius:var(--r-md);padding:22px;margin-bottom:14px}
.admin-card-header{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--bg-muted)}

/* ── Beslisboom (decision tree) admin editor ───────────────────────────────── */
.bb-toolbar{display:flex;gap:var(--s-2);margin-bottom:var(--s-3)}
.bb-toolbar .btn-tertiary{padding:var(--s-1) var(--s-3);font-size:var(--fs-base)}

.bb-node{border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s-2);overflow:hidden}
.bb-node[open]{border-color:var(--main-tint-strong)}
.bb-node-root{border-color:var(--main);border-width:1.5px}

.bb-node-summary{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);cursor:pointer;list-style:none;user-select:none;background:var(--surface);transition:background .12s}
.bb-node-summary::-webkit-details-marker{display:none}
.bb-node-summary:hover{background:var(--bg-subtle)}
.bb-node-chevron{display:inline-block;color:var(--text-subtle);font-size:var(--fs-base);line-height:1;transition:transform .15s ease;flex-shrink:0;width:14px;text-align:center}
.bb-node[open]>.bb-node-summary .bb-node-chevron{transform:rotate(90deg)}
.bb-node-q-preview{flex:1;min-width:0;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-node-meta{font-size:var(--fs-base);color:var(--text-subtle);font-weight:500;background:var(--bg-muted);padding:2px 10px;border-radius:var(--r-pill);flex-shrink:0}
.bb-node-rootbadge{font-size:var(--fs-base);color:var(--main);background:var(--main-tint);font-weight:600;padding:2px 10px;border-radius:var(--r-pill);flex-shrink:0}
.bb-node-delete{display:inline-flex;align-items:center;padding:4px 10px;border:1.5px solid var(--danger);background:var(--surface);color:var(--danger);font-family:inherit;font-size:var(--fs-base);font-weight:600;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;transition:background .12s}
.bb-node-delete:hover{background:var(--danger-soft)}

.bb-node-body{padding:0 var(--s-4) var(--s-3);border-top:1px solid var(--bg-muted)}
.bb-node-q{width:100%;padding:var(--s-2) var(--s-3);margin-top:var(--s-3);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:'RijksSans',sans-serif;font-size:var(--fs-base);line-height:var(--lh-snug);color:var(--text);resize:vertical;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.bb-node-q:focus{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}

.bb-branch{border-left:2px solid var(--border);margin:var(--s-3) 0 0 var(--s-3);padding-left:var(--s-4)}
.bb-branch-head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.bb-branch-badge{font-size:var(--fs-base);font-weight:700;color:var(--text-inverse);background:var(--main);padding:2px 10px;border-radius:var(--r-pill);flex-shrink:0}
.bb-branch-label{flex:1;padding:var(--s-1) var(--s-3);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:'RijksSans',sans-serif;font-size:var(--fs-base);color:var(--text);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}
.bb-branch-label:focus{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}

.bb-leaf{border:1.5px solid var(--leaf-color,var(--border));border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--surface)}
.bb-leaf-head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);flex-wrap:wrap}
.bb-leaf-dot{width:10px;height:10px;border-radius:50%;background:var(--leaf-color,var(--border-strong));flex-shrink:0}
.bb-leaf-title{flex:1;min-width:0;font-size:var(--fs-base);font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-leaf-select{width:100%;padding:6px var(--s-3);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:'RijksSans',sans-serif;font-size:var(--fs-base);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}
.bb-leaf-select:focus{border-color:var(--main);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}

.bb-tree-btn-add{display:inline-flex;align-items:center;gap:var(--s-1);padding:4px 10px;border:1.5px solid var(--main);background:var(--surface);color:var(--main);border-radius:var(--r-sm);font-family:'RijksSans',sans-serif;font-size:var(--fs-base);font-weight:600;line-height:1.4;cursor:pointer;transition:background .12s,color .12s,border-color .12s;flex-shrink:0}
.bb-tree-btn-add:hover{background:var(--main-tint);color:var(--main-pressed)}

.admin-seg-summary{padding:14px 18px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:var(--s-2);list-style:none;user-select:none}
.admin-seg-summary::-webkit-details-marker{display:none}
.admin-seg-body{padding:0 18px 18px}
.admin-quiz-row{border:1.5px solid var(--border);border-radius:var(--r-md);padding:14px var(--s-4);margin-bottom:var(--s-2);display:grid;grid-template-columns:1fr auto auto;gap:var(--s-2);align-items:start}
.admin-toolbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-4) 20px;background:var(--bg-subtle);border-radius:var(--r-md);border:1px solid var(--bg-muted);margin-bottom:var(--s-5)}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .pie-layout{grid-template-columns:1fr;gap:20px}
  .pie-container{order:-1}.pie-svg{width:380px;height:380px}
  .side-labels.left,.side-labels.right{align-items:stretch;text-align:left;flex-direction:row;flex-wrap:wrap;gap:14px;justify-content:center}
  .side-labels.left .label-item{justify-content:flex-start;flex-direction:row-reverse}
  .side-labels.left .label-item.active{transform:translateX(2px)}
  .label-group{min-width:220px}
  .label-group-title{width:100%}
  .label-group-title svg{display:none}
}
@media(max-width:900px){
  .bento-grid.sub-detail{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero{padding:var(--s-3) var(--s-4) var(--s-2)}
  .page-header{padding:var(--s-5) var(--s-4) 6px}
  .pie-svg{width:300px;height:300px}
  .content-area{padding:0 var(--s-4) 60px;scroll-margin-top:80px}
  .bento-grid.cat-overview{grid-template-columns:1fr}
  .bento-right-stack{gap:var(--s-4)}
  .bento-card{padding:22px}
  .label-group{min-width:100%;text-align:left}
  .side-labels.left .label-item,.side-labels.right .label-item{justify-content:flex-start}
  .side-labels.left .label-item{flex-direction:row-reverse;justify-content:flex-end}
  .top-nav{padding:10px var(--s-4)}
  .admin-quiz-row{grid-template-columns:1fr}
}
@media(max-width:480px){.pie-svg{width:260px;height:260px}.page-header h1{font-size:var(--fs-2xl)}}
.bento-grid.sub-detail-wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bento-grid.sub-detail-wide .bento-main{grid-column:span 2}
@media(max-width:768px){.bento-grid.sub-detail-wide{grid-template-columns:1fr}.bento-grid.sub-detail-wide .bento-main{grid-column:span 1}}
@media(max-width:600px){.nav-btn-text{display:none}.top-nav .btn-tertiary{padding:var(--s-2) var(--s-3)}.top-nav{padding:10px var(--s-4)}.nav-right{gap:var(--s-2)}.page-header{padding:18px var(--s-4) 6px}}
@media(max-width:520px){.admin-field-row{flex-direction:column;gap:var(--s-1)}.admin-field-row label{min-width:auto;padding-top:0}.admin-toolbar .btn-primary,.admin-toolbar .btn-secondary{width:100%;justify-content:center}.admin-card{padding:var(--s-4)}}
@media(max-width:400px){.quiz-scale-btn,.quiz-scale-btn-text{padding:var(--s-2) var(--s-1);min-height:42px}.quiz-scale-row{gap:5px}}
@media(max-width:380px){.nav-logo-text{display:none}}

/* ── Toggle switch ─────────────────────────────────────────────────────────── */
.switch{position:relative;display:inline-block;width:50px;height:26px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border-strong);transition:.3s;border-radius:var(--r-pill)}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:var(--s-1);bottom:var(--s-1);background-color:var(--surface);transition:.3s;border-radius:50%}
.switch input:checked + .slider{background-color:var(--main)}
.switch input:checked + .slider:before{transform:translateX(24px)}

/* ── Admin tabs ────────────────────────────────────────────────────────────── */
.admin-tab-bar{display:flex;gap:var(--s-1);border-bottom:2px solid var(--border);margin-bottom:var(--s-5);overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-tab{padding:10px 18px;font-weight:500;color:var(--text-subtle);background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s;border-radius:var(--r-sm) var(--r-sm) 0 0}
.admin-tab:hover{color:var(--text-muted);background:var(--bg-subtle)}
.admin-tab.active{color:var(--main);border-bottom-color:var(--main);font-weight:600}
.admin-tab-panel{display:none}.admin-tab-panel.active{display:block}

/* ── Quiz admin cards ──────────────────────────────────────────────────────── */
.quiz-admin-card{border:1.5px solid var(--border);border-radius:var(--r-md);padding:18px 20px;margin-bottom:var(--s-3);position:relative;transition:transform .25s cubic-bezier(.2,.8,.4,1),box-shadow .2s,border-color .2s,opacity .2s}
.quiz-admin-card.drag-active{position:fixed;z-index:var(--z-toast);pointer-events:none;box-shadow:0 12px 36px rgba(0,0,0,.18);border-color:var(--main);transform:scale(1.02);opacity:.95;transition:box-shadow .15s,border-color .15s,transform .15s}
.quiz-admin-card.drag-placeholder{opacity:0;pointer-events:none}
.quiz-admin-card.drag-shift-down{transform:translateY(var(--card-h,0px))}
.quiz-admin-card.drag-shift-up{transform:translateY(calc(-1 * var(--card-h,0px)))}
.quiz-drag-handle{cursor:grab;font-size:var(--fs-md);color:var(--text-faint);user-select:none;padding:var(--s-1) 6px;line-height:1;border-radius:var(--r-sm);transition:color .12s,background .12s}
.quiz-drag-handle:hover{color:var(--text-subtle);background:var(--bg-muted)}
.quiz-drag-handle:active{cursor:grabbing}
.quiz-admin-card .quiz-card-top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
.quiz-admin-card .q-badge{background:var(--main-tint);color:var(--main);font-weight:700;padding:var(--s-1) 10px;border-radius:var(--r-sm);white-space:nowrap}

/* ── Quiz slider ───────────────────────────────────────────────────────────── */
.quiz-slider-wrap{padding:var(--s-1) var(--s-1) 0}
.quiz-slider-display{min-height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.quiz-slider-display .slider-hint{color:var(--text-faint);font-style:italic}
.quiz-slider-display .slider-chosen{font-size:var(--fs-lg);font-weight:800;color:var(--main)}
.quiz-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer;transition:background .15s}
.quiz-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--main);cursor:pointer;border:3px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.22);transition:transform .1s}
.quiz-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--main);cursor:pointer;border:3px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.22)}
.quiz-slider:hover::-webkit-slider-thumb{transform:scale(1.12)}
.quiz-slider-labels{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px}
.quiz-slider-label{color:var(--text-faint);font-weight:600;flex:1;text-align:center}
.quiz-slider-label:first-child{text-align:left}.quiz-slider-label:last-child{text-align:right}

.quiz-scale-nums{display:flex;padding:0 2px;margin-top:var(--s-2)}
.quiz-scale-nums span{flex:1;text-align:center;font-weight:500;color:var(--border-strong)}

/* ── Print ─────────────────────────────────────────────────────────────────── */
.print-pie{display:none}
@media print{.print-pie{display:flex;justify-content:center;margin-bottom:20px}.print-pie svg{width:220px;height:220px}}

/* ── Quiz answers table ────────────────────────────────────────────────────── */
.qr-answers-table{width:100%;border-collapse:collapse}
.qr-answers-table th{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:2px solid var(--bg-muted);font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.04em}
.qr-answers-table td{padding:10px var(--s-3);border-bottom:1px solid var(--bg-muted);vertical-align:middle}
.qr-answers-table tr:last-child td{border-bottom:none}
.qr-answers-table td:last-child{width:52px;text-align:center}
.qr-link{cursor:pointer;color:var(--main);font-weight:700;transition:opacity .12s}
.qr-link:hover{opacity:.7;text-decoration:underline}

.qr-section{margin-bottom:28px;text-align:left;max-width:540px;margin-left:auto;margin-right:auto}
.qr-section h3{font-size:var(--fs-xl);line-height:var(--lh-tight);font-weight:700;color:var(--main);margin-bottom:14px;padding-bottom:var(--s-2);border-bottom:1.5px solid var(--bg-muted)}
.qr-cat-group{margin-bottom:var(--s-4)}
.qr-cat-header{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.qr-cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.qr-answer-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--bg-muted)}
.qr-answer-row:last-child{border-bottom:none}
.qr-answer-score{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-inverse);flex-shrink:0}
.qr-answer-text{flex:1}
.qr-answer-q{font-weight:500;color:var(--text);margin-bottom:2px}
.qr-answer-val{color:var(--text-subtle)}

/* ── Print styles ──────────────────────────────────────────────────────────── */
.print-header,.print-footer{display:none}
@media print{
  body{background:var(--surface)!important}
  .top-nav,.view:not(#view-quiz),#introModal,#adminLoginModal,#exportModal{display:none!important}
  #view-quiz{display:block!important;padding-top:0!important}
  #view-quiz .page-header{display:none!important}
  .quiz-container{max-width:100%!important;padding:0!important}
  .quiz-results{text-align:left!important}
  .quiz-results .btn-primary,.quiz-results .btn-secondary,.quiz-results .btn-tertiary{display:none!important}
  .quiz-progress{display:none!important}
  .qr-section{max-width:100%!important}
  .result-bar-fill{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .qr-cat-dot,.qr-answer-score,.bento-cat-badge{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .qr-cat-group{break-inside:avoid}
  .qr-answer-row{break-inside:avoid}
  @page{size:A4;margin:20mm 15mm}
  .print-header{display:block!important;text-align:center;margin-bottom:var(--s-5)}
  .print-footer{display:block!important;text-align:center;margin-top:var(--s-5);color:var(--text-subtle)}
}
@media(max-width:600px){
  .quiz-admin-card .quiz-card-fields{grid-template-columns:1fr}
  .admin-tab{padding:var(--s-2) var(--s-3)}
  .quiz-admin-card{padding:14px var(--s-4)}
}

/* ── Path (decision tree) view ─────────────────────────────────────────────── */
.path-wrap{display:flex;gap:0;height:calc(100vh - 60px);overflow:hidden}
.path-main{flex:1;display:flex;flex-direction:column;position:relative;min-width:0;overflow:hidden}
.path-canvas{width:100%;flex:1;position:relative;overflow:hidden;background:var(--bg-subtle)}
.path-svg{position:absolute;inset:0;width:100%;height:100%}
.path-line{fill:none;stroke:#d0d8e4;stroke-width:2.5;stroke-linecap:round;opacity:.4}
.path-line.visited{stroke-width:3.5;opacity:1}
.path-line-draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pathDraw .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pathDraw{to{stroke-dashoffset:0}}
.path-node{transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.path-node-circle{stroke-width:0;transition:fill .3s,stroke .3s,r .3s,filter .3s}
.path-node.visited .path-node-circle{filter:none}
.path-node.current .path-node-circle{r:14;filter:none}
.path-node.current{animation:pathPulse 2.5s ease-in-out infinite}
@keyframes pathPulse{0%,100%{opacity:1}50%{opacity:.7}}
.path-node.future{opacity:0}
.path-node.future.reveal{opacity:.5}
.path-node.future .path-node-circle{opacity:.6}
.path-node-label{font-size:var(--fs-base);fill:var(--text-faint);font-weight:600;transition:fill .3s}
.path-node.visited .path-node-label,.path-node.current .path-node-label{fill:var(--main)}

.path-question-card{position:absolute;bottom:40px;left:var(--s-5);right:var(--s-5);margin:0 auto;max-width:480px;background:var(--surface);border-radius:var(--r-lg);padding:28px var(--s-6);box-shadow:0 4px 20px rgba(0,0,0,.06);border:2px solid var(--path-color,var(--border));text-align:center;z-index:10;animation:fadeUp .35s ease;transition:border-color .35s ease}
.path-question-card .path-q-inner{transition:opacity .25s ease;opacity:1}
.path-question-card .path-q-inner.fade-out{opacity:0}
.path-q-step{font-weight:600;color:var(--path-color,var(--text-faint));margin-bottom:6px;letter-spacing:.04em}
.path-q-text{font-size:var(--fs-lg);font-weight:700;color:var(--main);line-height:var(--lh-base);margin-bottom:20px}
.path-choices{display:flex;gap:var(--s-3)}
.path-choice-btn{flex:1;padding:14px var(--s-4);border-radius:var(--r-md);border:2px solid var(--border);background:var(--surface);font-weight:600;color:var(--text-muted);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s;display:flex;align-items:center;justify-content:center;gap:var(--s-2)}
.path-choice-btn:hover{border-color:var(--btn-color,var(--main));color:var(--btn-color,var(--main));background:rgba(0,0,0,.02);transform:translateY(-1px)}
.path-choice-btn:active{transform:translateY(0);background:rgba(0,0,0,.04);border-color:var(--btn-color,var(--main))}
.path-choice-btn svg{width:18px;height:18px;flex-shrink:0;opacity:.8}

.path-start-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;animation:fadeUp .4s ease;pointer-events:none}
.path-start-card>*{pointer-events:auto}
.path-start-card h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:800;color:var(--main);margin-bottom:10px;letter-spacing:-.02em}
.path-start-card p{color:var(--text-muted);line-height:var(--lh-base);max-width:420px;text-align:center;margin-bottom:var(--s-5)}

.path-result{width:0;overflow:hidden;opacity:0;transition:width .6s cubic-bezier(.4,0,.2,1),opacity .4s .15s;border-left:1.5px solid var(--bg-muted);background:#fafbfd;flex-shrink:0}
.path-result.show{width:440px;opacity:1;overflow-y:auto}
.path-result-inner{padding:var(--s-6) 28px;animation:fadeUp .5s ease .3s both}
.path-result-badge{display:inline-flex;align-items:center;gap:6px;padding:5px var(--s-3);border-radius:var(--r-sm);font-weight:700;color:var(--text-inverse);margin-bottom:var(--s-3)}
.path-result h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:800;color:var(--main);margin-bottom:6px}
.path-result h3{font-size:var(--fs-xl);line-height:var(--lh-tight);font-weight:600;color:var(--text-muted);margin-bottom:var(--s-4)}
.path-result-desc{color:var(--text-muted);line-height:var(--lh-base);margin-bottom:20px}
.path-result-section{padding:var(--s-4);background:var(--surface);border-radius:var(--r-md);border:1.5px solid var(--bg-muted);margin-bottom:var(--s-3)}
.path-result-section .label{font-weight:700;color:var(--text-faint);letter-spacing:.04em;margin-bottom:6px}
.path-result-section p,.path-result-section a{color:var(--text-muted);line-height:1.6}
.path-result-section a{color:var(--main);font-weight:600;text-decoration:none}
.path-result-section a:hover{text-decoration:underline}

.path-zoom-out .path-svg{transition:transform .8s cubic-bezier(.4,0,.2,1)}

@media(max-width:900px){
  .path-wrap{flex-direction:column;height:auto;min-height:calc(100vh - 60px)}
  .path-main{min-height:420px}
  .path-result.show{width:100%;border-left:none;border-top:1.5px solid var(--bg-muted)}
}
@media(max-width:600px){
  .path-question-card{padding:20px;bottom:var(--s-4);left:var(--s-3);right:var(--s-3)}
  .path-q-text{font-size:var(--fs-md);line-height:var(--lh-snug)}
  .path-choice-btn{padding:var(--s-3)}
  .path-result-inner{padding:var(--s-5) 20px}
}

/* ── Fold-out / Accordion blocks ───────────────────────────────────────────── */
.fold-section{margin-bottom:var(--s-5)}
.fold-item{border:1.5px solid var(--border);border-radius:var(--r-sm);margin-bottom:var(--s-2);overflow:hidden}
.fold-header{display:flex;align-items:center;gap:10px;padding:var(--s-4) 20px;cursor:pointer;background:var(--surface);user-select:none;transition:background .12s}
.fold-header:hover{background:var(--bg-subtle)}
.fold-icon{color:var(--main);flex-shrink:0;line-height:0}
.fold-title{font-size:var(--fs-lg);line-height:var(--lh-base);font-weight:700;color:var(--main);flex:1}
.fold-chevron{flex-shrink:0;transition:transform .2s;color:var(--text-faint)}
.fold-item.open .fold-chevron{transform:rotate(180deg)}
.fold-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease,border-top-width 0s .15s;border-top:0px solid var(--bg-muted)}
.fold-body>*{overflow:hidden;padding:0 20px}
.fold-item.open .fold-body{grid-template-rows:1fr;border-top:1.5px solid var(--bg-muted);transition:grid-template-rows .15s ease,border-top-width 0s 0s}
.fold-item.open .fold-body>*{padding:var(--s-4) 20px 20px}

/* ── Markdown content ──────────────────────────────────────────────────────── */
.md-content h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:800;margin:0 0 var(--s-3);color:var(--main)}
.md-content h2{font-size:var(--fs-xl);line-height:var(--lh-tight);font-weight:700;margin:var(--s-4) 0 10px;color:var(--main)}
.md-content h3{font-size:var(--fs-lg);line-height:var(--lh-base);font-weight:600;margin:14px 0 var(--s-2);color:var(--text)}
.md-content p{line-height:var(--lh-base);color:var(--text);margin:0 0 10px}
.md-content a{color:var(--main);font-weight:600;text-decoration:none}
.md-content a:hover{text-decoration:underline}
.md-content ul,.md-content ol{padding-left:22px;margin:0 0 10px}
.md-content li{line-height:var(--lh-base);color:var(--text)}
.md-content img{max-width:100%;border-radius:var(--r-sm);margin:var(--s-2) 0;display:block}
.md-content strong{font-weight:700}
.md-content em{font-style:italic}
.md-content hr{border:none;border-top:1.5px solid var(--bg-muted);margin:var(--s-4) 0}
.md-content blockquote{border-left:3px solid var(--main);padding:var(--s-2) var(--s-4);margin:0 0 10px;background:var(--bg-subtle);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-muted)}
.md-content iframe,.ql-editor iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-md);display:block;margin:var(--s-2) 0;min-height:0}

/* ── Option cards grid ─────────────────────────────────────────────────────── */
.option-cards-section{margin-top:var(--s-6)}
.option-cards-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:14px}
.option-cards-label{font-weight:600;color:var(--text-subtle);letter-spacing:.04em}
.option-cards-search{flex:1;max-width:260px;padding:6px var(--s-3);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg-subtle);outline:none;transition:border-color .15s}
.option-cards-search:focus{border-color:var(--main);background:var(--surface)}
.option-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.option-card{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--border);cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;background:var(--surface);display:flex;flex-direction:column}
.option-card:hover{background:var(--main-tint);outline:2px solid var(--main);outline-offset:-1.5px}
.option-card.deselected{opacity:.4;border-style:dashed}
.option-card.deselected:hover{opacity:.75}
.card-select-btn{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:var(--r-sm);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--text-subtle);transition:background .12s,color .12s,border-color .12s;z-index:1;padding:0;line-height:0}
.card-select-btn:hover{background:var(--surface);border-color:var(--main);color:var(--main)}
.card-select-btn.selected{background:var(--main);border-color:var(--main);color:var(--text-inverse)}
.option-card-image{width:100%;aspect-ratio:21/9;background:var(--surface);flex-shrink:0;overflow:hidden}
.option-card-image img{width:100%;height:100%;object-fit:contain;object-position:top center;display:block}
.option-card-image svg{width:100%;height:100%;display:block}
.option-card-body{padding:var(--s-2) var(--s-3) 10px}
.option-card-body h3{font-weight:400;color:var(--text);margin:0;line-height:1.3}
@media(max-width:700px){.option-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.option-cards-grid{grid-template-columns:1fr}}

/* ── Fold inline editor ────────────────────────────────────────────────────── */
.fold-edit-btn{display:none;flex-shrink:0;margin-right:var(--s-2)}
.fold-item.editable .fold-edit-btn{display:inline-flex}
.fold-editor{display:none;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1.5px solid var(--bg-muted)}
.fold-item.editing .fold-view{display:none}
.fold-item.editing .fold-editor{display:block}
.fold-item.editing .fold-body>*{overflow:visible}
.fold-editor .ql-wrap{border-radius:var(--r-sm);overflow:hidden}
.fold-editor-bar{display:flex;align-items:center;gap:var(--s-2);margin-top:6px}

/* ── Editor session bar ────────────────────────────────────────────────────── */
.editor-bar{position:fixed;bottom:0;left:0;right:0;background:#1a3a5c;color:var(--text-inverse);font-weight:600;padding:var(--s-2) 20px;display:flex;align-items:center;gap:var(--s-3);z-index:var(--z-modal)}
.editor-bar button{background:rgba(255,255,255,.18);border:none;color:var(--text-inverse);padding:var(--s-1) 10px;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-family:inherit;font-size:inherit}
.editor-bar button:hover{background:rgba(255,255,255,.3)}

/* ── Content area headings ─────────────────────────────────────────────────── */
.content-area h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);font-weight:700}

/* Tablet ≤1024px */
@media(max-width:1024px){
  .page-header h1,.content-area h1{font-size:var(--fs-2xl)}
  .quiz-results h2,.intro-modal-box h2,.path-start-card h2,.path-result h2,.md-content h1{font-size:var(--fs-xl)}
  .bento-card h3,.qr-section h3,.path-result h3,.md-content h2{font-size:var(--fs-lg)}
  .fold-title,.seg-bento-block-title,.quiz-q-text,.path-q-text,.md-content h3{font-size:var(--fs-md);line-height:var(--lh-snug)}
  .page-header p{font-size:var(--fs-md);line-height:var(--lh-snug)}
}
/* Mobile ≤640px */
@media(max-width:640px){
  .page-header h1,.content-area h1{font-size:var(--fs-2xl)}
  .quiz-results h2,.intro-modal-box h2,.path-start-card h2,.path-result h2,.md-content h1{font-size:var(--fs-xl)}
  .bento-card h3,.qr-section h3,.path-result h3,.md-content h2{font-size:var(--fs-lg)}
  .fold-title,.seg-bento-block-title,.quiz-q-text,.md-content h3{font-size:var(--fs-md);line-height:var(--lh-snug)}
  .page-header p{font-size:var(--fs-md);line-height:var(--lh-snug)}
}

/* ── Quill WYSIWYG ─────────────────────────────────────────────────────────── */
.ql-toolbar.ql-snow{border:1.5px solid var(--border-strong);border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;padding:6px var(--s-2);background:var(--bg-subtle)}
.ql-container.ql-snow{border:1.5px solid var(--border-strong);border-top:none;border-radius:0 0 var(--r-sm) var(--r-sm)}
.ql-editor{min-height:120px;padding:10px var(--s-3);line-height:var(--lh-base);color:var(--text)}
.ql-editor p,.ql-editor ol,.ql-editor ul{margin-bottom:var(--s-1)}
.ql-editor h2{font-size:var(--fs-lg);font-weight:700;margin:var(--s-3) 0 var(--s-1);line-height:1.2}
.ql-editor h3{font-size:var(--fs-md);font-weight:700;margin:10px 0 var(--s-1);line-height:1.2}
.ql-editor a{color:var(--main);text-decoration:underline}
.ql-editor img{max-width:100%;border-radius:var(--r-md);margin:6px 0;display:block}
.ql-editor blockquote{border-left:3px solid var(--border-strong);margin:var(--s-2) 0;padding:var(--s-1) var(--s-3);color:var(--text-muted);font-style:italic}
.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke{stroke:var(--main)}
.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill{fill:var(--main)}
.ql-snow .ql-picker{font-family:inherit;font-size:inherit}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before{content:'Kop 2' !important}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before{content:'Kop 3' !important}
.ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before,.ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value="2"]):not([data-value="3"])::before{content:'Alinea' !important}

/* ── Segment bento grid ────────────────────────────────────────────────────── */
.seg-bento-wrap{margin-bottom:var(--s-5)}
.seg-bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.seg-bento-block{border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;grid-column:span 3;min-height:120px;position:relative}
.seg-bento-block[data-size="sm"]{grid-column:span 2}
.seg-bento-block[data-size="md"]{grid-column:span 3}
.seg-bento-block[data-size="lg"]{grid-column:span 4}
.seg-bento-block[data-size="wide"]{grid-column:span 6}
.seg-bento-block-header{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
.seg-bento-block-icon{color:var(--main);flex-shrink:0;line-height:0}
.seg-bento-block-title{font-size:var(--fs-lg);font-weight:700;color:var(--main);flex:1;margin:0}
.seg-bento-edit-bar{display:none;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bg-muted);flex-wrap:wrap}
.bento-edit-bar-label{font-size:var(--fs-sm);font-weight:700;color:var(--main);margin-right:2px}
.seg-bento-block.editing .bento-block-view{display:none}
.seg-bento-block.editing .fold-editor{display:block!important}
.seg-bento-block.editing .seg-bento-edit-bar{display:flex}
.seg-bento-block.editing .bento-pencil-btn{display:none}
.seg-bento-block.editing{overflow:visible;align-self:start}
.seg-bento-block .fold-editor .ql-container{height:auto;overflow:visible}
.seg-bento-block .fold-editor .ql-wrap{overflow:visible}
.seg-bento-block .fold-editor .ql-editor{background:rgba(255,255,255,.5)}

@media(max-width:900px){
  .seg-bento-block,.seg-bento-block[data-size="sm"],.seg-bento-block[data-size="md"],.seg-bento-block[data-size="lg"],.seg-bento-block[data-size="wide"]{grid-column:span 6}
}
@media(max-width:600px){
  .seg-bento-wrap{padding:14px}
  .seg-bento-grid{gap:10px}
  .seg-bento-block{padding:var(--s-4)}
}

/* ── Segment speak button ──────────────────────────────────────────────────── */
.seg-speak-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--main);cursor:pointer;flex-shrink:0;outline:none;padding:0}
.seg-speak-btn:hover{color:var(--main-hover)}
.seg-speak-btn:focus-visible{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring);border-radius:var(--r-sm)}
.seg-speak-btn.speaking{color:#b91c1c;opacity:1}

/* ── Local-only indicator (bottom-left dot) ────────────────────────────────── */
#localOnlyIndicator{position:fixed;left:14px;bottom:14px;z-index:var(--z-modal);display:inline-flex;align-items:center;gap:8px;cursor:default;outline:none}
#localOnlyIndicator[hidden]{display:none}
.localonly-dot{width:10px;height:10px;border-radius:50%;background:#f5c518;box-shadow:0 0 6px rgba(245,197,24,.6);animation:localonly-pulse 1.8s ease-in-out infinite}
.localonly-tip{font-size:13px;font-weight:600;color:#856404;background:#fff3cd;border:1px solid #f0d97a;border-radius:4px;padding:4px 10px;white-space:nowrap;opacity:0;transform:translateY(2px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
#localOnlyIndicator:hover .localonly-tip,#localOnlyIndicator:focus-visible .localonly-tip{opacity:1;transform:translateY(0)}
@keyframes localonly-pulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.localonly-dot{animation:none;opacity:.9}}