/* Een element met het attribuut hidden moet altijd verdwijnen. Zonder deze regel wint een regel als `.row { display: flex }` van de browserstandaard en blijft het zichtbaar. */
[hidden] { display: none !important; }
/* Lesobservatie App - stijl: herkenbaar (lichtblauw, paarse tegels, rolkleuren), iets moderner */
:root {
  --blue: #69c3e8;
  --blue-deep: #3fa6d4;
  --blue-soft: #e4f4fb;
  --purple: #8c1565;
  --purple-dark: #3a0b30;
  --purple-mid: #5d0f47;
  --ink: #1f2430;
  --muted: #667085;
  --line: #e3e8ee;
  --card: #ffffff;
  --ok: #2e9d57;
  --warn: #d9820a;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(22, 40, 70, .12);
  --font: "Titillium Web", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--blue);
  min-height: 100vh; display: flex; flex-direction: column; line-height: 1.45;
}
a { color: var(--purple); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }

/* ---- Logo en koppen ---- */
.brandbar { background: #fff; text-align: center; padding: 10px 16px 8px; position: relative; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.brandbar .logout { position: absolute; right: 14px; top: 14px; }
.brandbar img.logo { height: 56px; max-width: 70%; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark .mark { display: block; width: 52px; height: 52px; flex: none; }   /* hetzelfde bestand als het favicon: het logo en het favicon lopen nooit uit elkaar */
.wordmark .txt { text-align: left; line-height: .95; }
.wordmark .txt b { display: block; font-size: 30px; color: var(--purple); letter-spacing: .5px; font-weight: 700; }
.wordmark .txt i { display: block; font-size: 22px; color: var(--blue-deep); font-style: italic; font-family: Georgia, serif; }

.topbar {
  background: var(--blue); color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 10px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.35);
}
.topbar h1 { margin: 0; text-align: center; font-size: 1.55rem; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.15); letter-spacing: .3px; }
.topbar .right { justify-self: end; }
@media (max-width: 400px) { .topbar h1 { font-size: 1.25rem; } .topbar { padding: 8px 8px; } .topbar .btn.small { padding: 6px 10px; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--purple); color: #fff; font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  text-decoration: none; min-height: 44px; box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.btn:hover { background: var(--purple-mid); }
.btn:focus-visible, .opt:focus-visible, a:focus-visible {
  outline: 3px solid #ffd54a; outline-offset: 2px;
}
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .95rem; }
.btn.ghost { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.6); }
.btn.light { background: var(--blue-soft); color: var(--purple); box-shadow: none; }
.btn.disabled, .btn[disabled] { opacity: .4; pointer-events: none; }
.btn.block { width: 100%; }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 12px 26px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.muted { color: var(--muted); }
.error-box { background: #fde8e8; color: #8a1c1c; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.ok-box { background: #e3f6ea; color: #17613a; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.err-box { background: #fdecea; color: #8a1c14; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
/* Mijn team (teamleiders) */
.team-card h2 { font-size: 1.15rem; margin-bottom: 8px; color: var(--purple); }
.member-list { list-style: none; margin: 0 0 12px; padding: 0; }
.member-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.member-list li:first-child { border-top: 0; }
.member-list form { margin: 0; flex: none; }
.add-colleague > summary { list-style: none; cursor: pointer; }
.add-colleague > summary::-webkit-details-marker { display: none; }
.add-colleague form { margin-top: 12px; }
.add-colleague fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.add-colleague legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.add-colleague label.radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 400; }
.add-colleague label.radio input { width: 20px; height: 20px; }
.add-colleague p.small { font-size: .85rem; margin: 6px 0 0; }

.sitefoot { background: #fff; display: flex; justify-content: center; align-items: center; text-align: center; padding: 12px 18px; font-size: .85rem; color: var(--muted); gap: 12px; }

/* ---- Formulieren ---- */
label { display: block; font-weight: 600; margin: 10px 0 4px; }
/* Alle invulvelden: afgerond, rustig en in dezelfde stijl (ook zoekvelden, datum, keuzelijst en tekstvlak) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]), select, textarea) {
  width: 100%; font: inherit; color: var(--ink); background: #fff; min-height: 46px;
  padding: 10px 16px; border: 1px solid #c5ceda; border-radius: 14px;
  -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 2px rgba(20, 30, 60, .06);
  transition: border-color .15s, box-shadow .15s;
}
textarea { border-radius: 16px; resize: vertical; min-height: 44px; }
select {
  padding-right: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c1565' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 16px center;
}
input[type=date] { padding-right: 12px; min-width: 0; }
input::placeholder, textarea::placeholder { color: #8b95a5; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(140, 21, 101, .28); }
input[type=checkbox], input[type=radio] { accent-color: var(--purple); }
/* zoekvelden: pil met vergrootglas */
input[type=search] {
  border-radius: 999px; padding-left: 44px; border-color: transparent; box-shadow: 0 2px 8px rgba(20, 40, 80, .15);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238c1565' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center;
}
input[type=search]:focus { border-color: var(--purple); }
.grid2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.login-wrap { max-width: 430px; margin: 0 auto; padding-top: 14px; }
.login-wrap input { background: #eaf2ff; border-color: #b8cdea; }

/* ---- Home: tegels ---- */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; text-decoration: none;
  color: #fff; font-weight: 700; padding: 18px 8px 12px; min-height: 128px; border-radius: 16px;
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-dark) 100%);
  box-shadow: 0 3px 10px rgba(58, 11, 48, .35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(58, 11, 48, .4); }
.tile svg { width: 58px; height: 58px; flex: none; }
.tile span { font-size: 1.05rem; text-align: center; }

/* ---- Lijsten (docenten) ---- */
.search { position: sticky; top: 56px; z-index: 10; background: var(--blue); padding: 8px 0; }
.list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
.divider { background: var(--blue-soft); color: var(--purple); font-weight: 700; padding: 4px 14px; font-size: .95rem; scroll-margin-top: 110px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink); width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; cursor: pointer;
}
.row:first-child { border-top: 0; }
.row:hover { background: #f6fafc; }
.row .name { font-weight: 700; }
.row .meta { font-size: .8rem; color: var(--muted); margin-left: 6px; font-style: italic; font-weight: 400; }
.row .chev { width: 26px; height: 26px; border-radius: 50%; background: #b9c0c9; color: #fff; display: grid; place-items: center; flex: none; }
.pill-open { background: #fff1c9; color: #8a5a00; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.alpha { position: fixed; right: 2px; top: 150px; display: none; flex-direction: column; gap: 1px; font-size: .68rem; z-index: 15; }
.alpha a { text-decoration: none; color: var(--purple); font-weight: 700; padding: 0 5px; background: rgba(255,255,255,.7); }
@media (min-width: 420px) { .alpha { display: flex; } }
.report-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.report-row:first-child { border-top: 0; }
.report-row .actions { display: flex; gap: 6px; }

/* ---- Observatie-stappen ---- */
.obs-for { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 10px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
/* de vijf rolknoppen staan vast onderaan het scherm, zodat je altijd kunt wisselen */
.rolebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.2);
  padding: 14px max(10px, calc((100% - 1100px) / 2 + 12px)) calc(8px + env(safe-area-inset-bottom));
}
.rolebar .step { box-shadow: none; background: #f4f7fb; }
.rolebar .step.active { background: var(--c); }
.rolebar-spacer { height: 12px; }
body:has(.rolebar) { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
/* een veld waar je in tikt blijft zichtbaar: niet onder de plakkende kop en schakelaar, niet onder de rolbalk */
.questions .remark { scroll-margin-top: calc(var(--topbar-h, 56px) + 72px); scroll-margin-bottom: 100px; }   /* alleen voor deze velden: een marge op de hele pagina liet de plakkende schakelaar bij elke tik meeschuiven */
.step {
  text-decoration: none; background: #fff; border-radius: 12px; padding: 8px 4px 7px; text-align: center; font-size: .82rem; font-weight: 700; color: var(--ink);
  border-bottom: 5px solid var(--c); position: relative; box-shadow: var(--shadow); min-width: 0;
}
.step.active { background: var(--c); color: #fff; }
.rolebar .step { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.step .short { display: none; text-decoration: none; font-weight: 700; }
.step .badge {
  position: absolute; top: -7px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--purple); color: #fff;
  font-size: .75rem; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.step .badge[data-zero="1"] { background: var(--ok); }
/* smal scherm: de eerste drie letters van de rol in plaats van de hele naam (de cijfers zeiden niemand iets) */
@media (max-width: 480px) { .step .full { display: none; } .step .short { display: block; font-size: 1rem; } }
.role-intro { background: #fff; border-left: 6px solid var(--c); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--shadow); font-size: .95rem; }
.kind-tabs { display: none; gap: 6px; margin-bottom: 10px; position: sticky; top: var(--topbar-h, 56px); z-index: 15; background: var(--blue); padding: 8px 0; margin-top: -2px; box-shadow: 0 6px 6px -6px rgba(0,0,0,.25); }
.kind-tabs button { flex: 1; }
.kind-tabs button.on { background: var(--purple); color: #fff; }
.pair { display: grid; gap: 0 10px; margin-bottom: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); }
/* De docent- en de leerlingkaart delen dezelfde vijf rijen (label, vraag, toelichting, score, opmerking): elke rij is zo hoog als de hoogste van de twee,
   dus de scoreknoppen en de opmerkingenvelden staan naast elkaar op dezelfde hoogte, ook als de ene vraag langer is. */
.pair > .q { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; }
.pair > .q > .kindlabel { grid-row: 1; }
.pair > .q > h3 { grid-row: 2; }
.pair > .q > .hint { grid-row: 3; }
.pair > .q > .scale { grid-row: 4; }
.pair > .q > .remark { grid-row: 5; }
.q { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border-top: 5px solid var(--c); }
.q.student { border-top-color: var(--c-light); }
.q h3 { font-size: 1.02rem; margin: 0 0 6px; }
.q .kindlabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.q .hint { color: var(--muted); font-size: .88rem; margin: 0 0 6px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 2px 0 8px; align-self: start; }
.opt {
  border: 1px solid #cdd5df; background: #f6f8fb; border-radius: 9px; padding: 9px 2px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; min-height: 44px; color: var(--ink);
  overflow-wrap: anywhere; hyphens: auto;
}
.opt.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.opt.saving { opacity: .6; }
.remark { font-size: .9rem; padding: 8px 10px; min-height: 40px; }
@media (max-width: 760px) {
  .kind-tabs { display: flex; }
  .pair { grid-template-columns: 1fr; }
  .questions[data-show="teacher"] .q.student, .questions[data-show="student"] .q.teacher { display: none; }
}
.stepnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 4px 0; }
.savestate { text-align: center; color: #fff; font-size: .8rem; height: 18px; }

/* ---- Grafieken ---- */
.filters { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.filters .btn { grid-column: 1 / -1; }
@media (min-width: 640px) { .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .filters .btn { grid-column: auto; } }
.filters label { margin: 0 0 3px; font-size: .85rem; }
.charts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .charts { grid-template-columns: 1.6fr 1fr; } .chart-wide { grid-column: 1 / -1; } }
.chartbox { position: relative; height: 320px; }
#chart-obs-am { height: 400px; }
@media (min-width: 900px) { #chart-obs-am { height: 440px; } }
.chartbox.short { height: 220px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; margin: 6px 0 0; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hintline { font-size: .85rem; color: var(--muted); margin-top: 4px; }

/* ---- Notities ---- */
.note { border-left: 5px solid var(--purple); }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.note header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tag { display: inline-block; background: var(--blue-soft); color: var(--purple); border-radius: 999px; padding: 1px 10px; font-size: .8rem; font-weight: 700; }
.tag.private { background: #fde8f3; }
.remarks { margin: 8px 0 0; padding: 0; list-style: none; }
.remarks li { border-top: 1px dashed var(--line); padding: 7px 0; font-size: .92rem; }
.remarks .who { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* ---- Ontwikkeling: editor ---- */
.toolbar { display: flex; gap: 4px; flex-wrap: wrap; background: #eef1f5; border: 1px solid #cdd5df; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 6px; }
.toolbar button { border: 0; background: #fff; border-radius: 6px; min-width: 36px; min-height: 36px; font-weight: 700; cursor: pointer; }
.editor { min-height: 140px; border: 1px solid #cdd5df; border-radius: 0 0 10px 10px; padding: 10px 12px; background: #fff; }
.editor:focus { outline: 3px solid #ffd54a; }
.rich ul, .rich ol { padding-left: 1.3rem; margin: .3rem 0; }

/* ---- Overig ---- */
.center { text-align: center; }
.stack > * + * { margin-top: 10px; }
.formlist .row { align-items: flex-start; }
.qrole { border-left: 6px solid var(--c); padding-left: 12px; margin: 14px 0 6px; }

/* ---- Informatie ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips a { background: var(--blue-soft); color: var(--purple); text-decoration: none; font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }
.chips a:hover { background: #d3ecf8; }
.slideshow .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scroll-behavior: smooth; border-radius: 10px; }
.slideshow .slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.slide { margin: 14px 0 0; }
.slide img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.slide .zoom { all: unset; display: block; cursor: zoom-in; width: 100%; }
.slide .zoom:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.slide figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 4px; }
.slide-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.steps-list, .legend-list { padding-left: 1.3rem; }
.steps-list li, .legend-list li { margin: 6px 0; }
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0; }
.defs dt { font-weight: 700; color: var(--purple); }
.defs dd { margin: 0; }
@media (max-width: 520px) { .defs { grid-template-columns: 1fr; } .defs dd { margin-bottom: 6px; } }
.role-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.role-list li { display: flex; gap: 10px; align-items: flex-start; }
.role-list .swatch { width: 18px; height: 18px; border-radius: 4px; background: var(--c); flex: none; margin-top: 3px; }
.faq-group { margin: 16px 0 6px; color: var(--purple); }
.faq { border-top: 1px solid var(--line); padding: 8px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; position: relative; padding-right: 26px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 0; font-size: 1.3rem; line-height: 1; color: var(--purple); }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 8px 0 2px; }
#lightbox { border: 0; border-radius: 12px; padding: 10px; max-width: min(96vw, 1300px); }
#lightbox::backdrop { background: rgba(10, 20, 40, .7); }
#lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 8px auto 0; }
#lightbox form { text-align: right; }

/* ---- Notities: filter en rijen per indicator in de kleur van de rol ---- */
.notes-panel { display: grid; gap: 14px 24px; grid-template-columns: minmax(0, 1fr); }
.notes-panel > *, .timefilter, .timefilter .dates > div { min-width: 0; }
@media (min-width: 760px) { .notes-panel { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; } }
.notes-panel h3 { margin: 0 0 6px; font-size: .95rem; color: var(--muted); font-weight: 600; }
.timefilter { display: grid; gap: 8px; }
.timefilter .dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.timefilter label { margin: 0 0 3px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.checks { display: grid; gap: 10px; align-content: start; }
.checks label { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 600; cursor: pointer; }
.checks input { width: 22px; height: 22px; min-height: 0; flex: none; padding: 0; box-shadow: none; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.note header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.note-remark { border: 2px solid var(--blue); border-radius: 14px; padding: 10px 14px; margin: 8px 0 12px; background: #fbfdff; white-space: pre-wrap; }
.note-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.note-actions form { display: inline; }
.btn.danger { color: #b3261e; }
.note-bar { background: var(--blue); color: #fff; font-weight: 600; border-radius: 12px; padding: 6px 14px; margin: 6px 0 8px; }
.notes-rows { list-style: none; margin: 0; padding: 0; }
.notes-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 0 0 4px; }
.notes-row[hidden] { display: none; }
.notes-row > * { background: var(--c); color: var(--t); border-radius: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rolecell { grid-column: 1 / -1; padding: 6px 14px; font-weight: 700; font-size: .9rem; letter-spacing: .02em; filter: brightness(.9); }
.ntext { padding: 10px 14px; }
.ntext p { margin: 0; }
.ntext p + p { margin-top: 10px; }
.nq { font-weight: 700; }
.nc { margin-top: 6px; padding-left: 10px; border-left: 3px solid currentColor; font-size: .92rem; white-space: pre-wrap; font-weight: 400; }
.nscore { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; align-items: flex-end; min-width: 108px; }
.score-tag { border-radius: 999px; padding: 3px 12px; font-size: .82rem; font-weight: 700; background: #fff; color: #1f2430; white-space: nowrap; }
.score-tag .lp { opacity: .55; margin-right: 2px; }
.sr-only { position: absolute; left: -9999px; }
@media (min-width: 760px) {
  .notes-row { grid-template-columns: 120px 1fr auto; }
  .rolecell { grid-column: auto; display: flex; align-items: center; justify-content: center; text-align: center; filter: none; }
}
body.print-one .note:not(.print-this), body.print-one .notes-panel-card { display: none !important; }

/* ---- Training ---- */
.training-head { display: grid; gap: 10px; }
.seg { display: flex; gap: 4px; background: var(--blue-soft); padding: 4px; border-radius: 12px; }
.seg a { flex: 1; text-align: center; text-decoration: none; color: var(--purple); font-weight: 700; padding: 9px 6px; border-radius: 9px; }
.seg a.on { background: var(--purple); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.seg .n, .rolechips .n { font-size: .72rem; opacity: .8; font-weight: 600; margin-left: 2px; }
.rolechips { display: flex; flex-wrap: wrap; gap: 6px; }
.rolechips a { text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--ink); background: #fff; border: 2px solid var(--c); border-radius: 999px; padding: 5px 12px; }
.rolechips a.on { background: var(--c); color: #fff; }
.train-tools { display: grid; gap: 8px; margin: 12px 0 0; }
.settingchips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--purple); min-height: 36px; }
.chip.on { background: var(--purple); color: #fff; }
.chip .n { font-size: .72rem; opacity: .75; font-weight: 600; margin-left: 3px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); margin-bottom: 14px; }
.tcard { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border-top: 6px solid var(--c); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.tcard[hidden] { display: none; }
.tcard header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tkind { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.tbadge { flex: none; min-width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: #fff; font-weight: 700; display: grid; place-items: center; text-decoration: none; padding: 0 6px; }
.tbadge:hover { filter: brightness(.92); }
.tcard p { margin: 0; white-space: pre-line; }
.theme-kind { color: #fff; margin: 16px 4px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.theme-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }

@media print {
  body { background: #fff; }
  .topbar, .sitefoot, .brandbar, .noprint, .stepnav, .rolebar, .rolebar-spacer { display: none !important; }
  body:has(.rolebar) { padding-bottom: 0; }
  main { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* support-sessie: onmiskenbaar, op elke pagina */
.support-banner { position: sticky; top: 0; z-index: 100; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #b3261e; color: #fff; padding: 8px 16px; font-size: .95rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.support-banner form { margin: 0; } .support-banner button { background: #fff; color: #b3261e; border: 0; border-radius: 10px; padding: 6px 16px; font: inherit; font-weight: 700; cursor: pointer; }
@media print { .support-banner { display: none; } }