/* orbit.edu: zwart op wit, haarlijnen, één rode markering voor "nu". */

/* Lettertypes: IBM Plex, zelf gehost (SIL Open Font License, zie fonts/OFL.txt). Zo gaat er geen verzoek naar Google. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg: #F6F6F3;
  --panel: #FFFFFF;
  --sunk: #F1F1EE;
  --ink: #191919;
  --muted: #62625D;
  --line: #E4E4DF;
  --line-2: #CACAC3;
  --accent: #1A56C9;
  --red: #C62D24;
  --ok: #26773A;
  --warn: #9A5300;
  --exam: #7A3FB8;
  --on-ink: #FFFFFF;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110; --panel: #1A1A19; --sunk: #222220; --ink: #ECECE8; --muted: #A3A39C;
    --line: #2C2C2A; --line-2: #42423E; --accent: #8DB2FF; --red: #FF7469; --ok: #6CCB7F; --warn: #F0AE5A; --exam: #C49BFF; --on-ink: #111110;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111110; --panel: #1A1A19; --sunk: #222220; --ink: #ECECE8; --muted: #A3A39C;
  --line: #2C2C2A; --line-2: #42423E; --accent: #8DB2FF; --red: #FF7469; --ok: #6CCB7F; --warn: #F0AE5A; --exam: #C49BFF; --on-ink: #111110;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--ink); color: var(--on-ink); border-radius: 6px; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.empty { color: var(--muted); }
.pad { padding: 16px; }
.err { color: var(--red); font-size: 14px; min-height: 0; }
.err:empty { display: none; }
.note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); font-size: 14px; }

/* ---------- knoppen & velden ---------- */
.btn { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.danger { color: var(--red); }
.btn.alarm { background: var(--red); border-color: var(--red); color: var(--on-ink); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[aria-pressed="true"] { background: var(--sunk); border-color: var(--ink); }
.icon-btn { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.icon-btn:disabled { opacity: .3; cursor: default; border-color: transparent; }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg { display: inline-flex; align-items: center; gap: 2px; }
.lnk { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.lnk:hover { text-decoration: underline; }
.in { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); }
textarea.in { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); flex: 0 0 17px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.fl { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.fl .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: 14px; font-weight: 500; margin-bottom: 5px; }

/* ---------- bovenbalk ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.mark i { position: relative; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--ink); border-radius: 50%; }
.mark i::after { content: ''; position: absolute; top: -5px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.login .mark i::after { box-shadow: 0 0 0 2px var(--bg); }
.mark { letter-spacing: -0.02em; }
.mark .school-name { font: 500 12.5px var(--font); color: var(--muted); letter-spacing: 0; padding-left: 9px; border-left: 1px solid var(--line-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .mark .school-name { display: none; } }
.tabs { display: flex; height: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ink); }
.count { font: 500 11px/18px var(--mono); min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: var(--on-ink); text-align: center; }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.user { position: relative; margin-left: auto; }
.user-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.user-btn:hover { border-color: var(--line-2); }
.user-t { display: flex; flex-direction: column; line-height: 1.2; }
.user-t b { font-weight: 500; font-size: 14px; }
.user-t span { font-size: 12px; color: var(--muted); }
.menu { position: absolute; right: 0; top: 46px; min-width: 200px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.menu a, .menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px; background: none; text-align: left; color: var(--ink); text-decoration: none; font-size: 14px; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--sunk); }
.av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); color: var(--ink); display: inline-grid; place-items: center; font: 500 11px var(--mono); }
.av.lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 18px; }

.callbar { background: var(--ink); color: var(--on-ink); }
.callbar-in { max-width: 1180px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.callbar .sp { flex: 1; }
.callbar .btn { background: transparent; color: var(--on-ink); border-color: rgba(127, 127, 127, .6); }
.callbar .btn.danger { color: #FF8A80; }
.live-n { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); color: var(--red); }
.live-n i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.6s ease-in-out infinite; }
.callbar .live-n { color: #FF8A80; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- pagina ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 72px; }
.page:focus { outline: none; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.head h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.head .sub { margin-top: 4px; font: 13px var(--mono); color: var(--muted); }
.crumb { display: inline-block; margin-bottom: 6px; font-size: 14px; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { padding: 8px 10px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.panel + .panel { margin-top: 20px; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 15px; font-weight: 600; }
.panel-h .n { margin-left: 8px; font: 12px var(--mono); color: var(--muted); font-weight: 400; }
.panel-b { padding: 16px; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hw { min-width: 0; }
.hw.full { grid-column: 1 / -1; }
.home { position: relative; }
.home.editing .hw { padding: 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--sunk); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; animation: wiggle .3s ease-in-out infinite alternate; }
.home.editing .hw:nth-child(2n) { animation-delay: -.15s; animation-duration: .34s; }
.home.editing .hw.dragging { position: relative; z-index: 10; animation: none; cursor: grabbing; border-style: solid; border-color: var(--ink); background: var(--panel); box-shadow: 0 18px 44px rgba(0, 0, 0, .2); }
.home.is-dragging, .home.is-dragging * { cursor: grabbing; }
@keyframes wiggle { from { rotate: -0.3deg; } to { rotate: 0.3deg; } }
.hw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 2px 8px; }
.hw-tools b { font-size: 13px; font-weight: 600; }
.hw-tools .sp { flex: 1; }
.home.editing .panel a, .home.editing .panel button, .home.editing .panel input { pointer-events: none; }
.add-blocks { margin-top: 20px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* rijen */
.rows > li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.rows > li:first-child { border-top: 0; }
.sw { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 7px; border-radius: 2px; background: var(--c, var(--muted)); display: inline-block; }
.time { flex: 0 0 46px; font: 13px/1.45 var(--mono); }
.time span { display: block; color: var(--muted); }
.ev-main, .task-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ev-main b, .task-main b { font-weight: 500; }
.ev-main span, .task-main span { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.task-main span .sw { margin-top: 0; }
.ev-main b .kind, .task-main b .kind { display: inline-flex; color: inherit; }
.ev-main b .kind-task, .task-main b .kind-task { color: var(--accent); }
.ev-main b .kind-test, .task-main b .kind-test { color: var(--red); }
.ev.past { color: var(--muted); }
.ev.past .sw { opacity: .45; }
.ev.now { background: color-mix(in srgb, var(--red) 6%, var(--panel)); }
.ev.now .time { color: var(--red); }
.nu { font: 500 11px var(--mono); color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.task { align-items: center !important; }
.task label.task-main { cursor: pointer; }
.task.done .task-main b { color: var(--muted); text-decoration: line-through; }
.due { flex: 0 0 auto; font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.due.soon { color: var(--warn); }
.due.late { color: var(--red); }
.score { font: 500 13px var(--mono); white-space: nowrap; }
.prog { font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.prog b { color: var(--ink); font-weight: 500; }
.tag { font: 11.5px var(--mono); padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.tag.warn { color: var(--warn); border-color: currentColor; }
.thr { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
li:first-child > .thr { border-top: 0; }
.thr:hover { background: var(--sunk); }
.thr-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.thr-m b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr-m span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr time { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.thr.unread b { font-weight: 600; }
.thr.unread b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 2px; }
.thr[aria-current="true"] { background: var(--sunk); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stats div { padding: 14px 16px; border-left: 1px solid var(--line); }
.stats div:first-child { border-left: 0; }
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { font: 500 24px var(--mono); margin-top: 2px; }

/* ---------- agenda ---------- */
.daytabs { display: none; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.daytabs .btn { flex: 1 0 auto; flex-direction: column; height: auto; padding: 6px 10px; gap: 0; line-height: 1.2; }
.daytabs .btn span { font: 12px var(--mono); color: var(--muted); }
.cal { --px: 52px; overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(0, 1fr)); }
.cal-dh { padding: 10px 10px 8px; border-left: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.cal-dh b { color: var(--ink); font-weight: 500; }
.cal-dh.is-today b { color: var(--red); }
.cal-ad { min-height: 30px; padding: 0 4px 6px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.cal-lbl { font: 11px var(--mono); color: var(--muted); padding: 4px 6px; }
.cal-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 2px 6px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--ink); font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer; }
.cal-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
span.cal-chip { cursor: default; }
.cal-body { position: relative; border-top: 1px solid var(--line); }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: 8px; transform: translateY(-50%); font: 11px var(--mono); color: var(--muted); }
.cal-hours span:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--px)); }
.cal-col.is-today { background-color: color-mix(in srgb, var(--red) 3%, var(--panel)); }
.cal-ev { position: absolute; padding: 3px 6px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--ink); text-align: left; overflow: hidden; cursor: pointer; font-size: 12.5px; line-height: 1.3; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.cal-ev:hover { box-shadow: inset 0 0 0 1px var(--c); }
.cal-ev b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev span { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .t { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.cal-ev .ev-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0; }
.cal-ev .ev-marks { background: var(--panel); border-radius: 3px; padding: 0 2px; }
.cal-ev > * { min-width: 0; }
.cal-ev span.topic { color: var(--ink); font-style: italic; }
/* Blokken zijn altijd ondoorzichtig: de uurlijnen en de nu-lijn lopen er niet door. */
.cal-ev { z-index: 1; }
.cal-ev.past { background: color-mix(in srgb, var(--c) 7%, var(--panel)); color: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.cal-ev.now { box-shadow: inset 0 0 0 2px var(--red); }
/* Vervangingen en afgelaste lessen */
.chg { color: var(--warn); font-weight: 500; }
.cal-ev.changed { border-left: 3px solid var(--warn); }
.cal-ev span.chg { color: var(--warn); }
.cal-ev.off { background: var(--panel); color: var(--muted); }
.cal-ev.off b, .ev.off .ev-link { text-decoration: line-through; }

/* Secretariaat */
.daypick { gap: 10px 12px; }
.daypick b { font-weight: 500; }

/* Rapporten */
.rep-grid .low, .rep .low, .score.low, .stats .low { color: var(--red); }
/* Vakken en leermateriaal */
.vak-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.vak-nav { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.vak-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.vak-nav a:first-child { border-top: 0; }
.vak-nav a:hover { background: var(--sunk); }
.vak-nav a[aria-current="true"] { background: var(--sunk); box-shadow: inset 3px 0 0 var(--ink); }
.vak-nav a > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vak-nav .mono { font-size: 11.5px; color: var(--muted); }
.vak-nav .n { font: 12px var(--mono); color: var(--muted); }
.vak-nav .sw { margin: 0; }
.mat-f { padding: 14px 16px 4px; border-top: 1px solid var(--line); }
.mat-f:first-of-type { border-top: 0; }
.mat { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.mat-f li.mat:first-child { border-top: 0; padding-top: 2px; }
.mat-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mat-h b { font-weight: 500; }
.mat-h .btn { margin-left: auto; }
.mat-d { font-size: 14px; margin-top: 4px; }
.mat-l { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; }
.mat-l a { padding: 3px 0; }
.mat .files { margin-top: 6px; }
.mat-m { font-size: 12.5px; margin-top: 6px; }
@media (max-width: 760px) {
  .vak-layout { grid-template-columns: 1fr; }
  .vak-nav { flex-direction: row; overflow-x: auto; }
  .vak-nav a { border-top: 0; border-left: 1px solid var(--line); white-space: nowrap; }
  .vak-nav a:first-child { border-left: 0; }
}
.lang-pick { margin-top: 16px; font-size: 13.5px; color: var(--muted); text-align: center; }
.lang-pick .lnk[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.swatch-pick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.swatch-pick .sw { width: 18px; height: 18px; margin: 0; }
.pts-h { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.pts-h .mono { font-size: 11px; color: var(--muted); }
.rep-grid .cm { margin-left: 4px; color: var(--muted); font-size: 12px; }
.report { overflow: hidden; }
.rep-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--line); }
.rep-h h2 { font-size: 22px; font-weight: 600; margin-top: 2px; }
.rep td { vertical-align: top; }
.rep td:first-child { min-width: 180px; }
.rep td:last-child { min-width: 220px; }
.rep b { font-weight: 500; }
.rep .rep-t { display: block; font-size: 12.5px; }
.rep details { margin-top: 4px; font-size: 13px; }
.rep summary { cursor: pointer; color: var(--muted); }
.rep details li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.rep details .mono { margin-left: auto; padding-left: 10px; }
.rep-s { padding: 14px 16px; border-top: 1px solid var(--line); }
.rep-s h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

@media print {
  .top, .callbar, .childbar, .noprint, .subtabs, #toast { display: none !important; }
  body, .page { background: #fff; color: #000; }
  .page { padding: 0; max-width: none; }
  .report { border: 0; }
  .report details { display: none; }
}

/* ---------- berichten ---------- */
.mail { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 56px - 170px); min-height: 520px; overflow: hidden; }
.mail-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.mail-tools { padding: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.mail-list ul { overflow-y: auto; flex: 1; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pane-h { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pane-h h2 { font-size: 17px; font-weight: 600; }
.pane-h p { font-size: 13px; color: var(--muted); }
.pane-h .back { display: none; margin-bottom: 4px; }
.msgs { flex: 1; overflow-y: auto; padding: 10px 18px 16px; }
.m { padding-top: 12px; }
.m.cont { padding-top: 2px; }
.m-h { display: flex; gap: 8px; align-items: baseline; }
.m-h b { font-weight: 600; font-size: 14px; }
.m-h time { font: 12px var(--mono); color: var(--muted); }
.m-b { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 680px; }
.m.mine .m-h b { color: var(--muted); }
.m-day { margin: 18px 0 4px; font: 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 10px; }
.m-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.composer textarea { flex: 1; min-height: 38px; max-height: 200px; resize: none; }
.composer .attach { cursor: pointer; flex: 0 0 auto; height: 38px; }
.composer .attach:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.files.pending { margin: 0 18px; border-bottom: 0; border-radius: 6px 6px 0 0; }
.m-f { margin-top: 4px; max-width: 420px; }
.m-f .files { background: var(--panel); }
.empty-pane { flex: 1; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }
.pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 6px; margin-top: 6px; }
.pick-list label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.pick-list label:first-child { border-top: 0; }
.pick-list label .muted { margin-left: auto; font-size: 12.5px; }
.pick-list .grp { padding: 6px 10px; font: 11.5px var(--mono); color: var(--muted); background: var(--sunk); border-top: 1px solid var(--line); }

/* ---------- live ---------- */
.room { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
li:first-child > .room, .room:first-child { border-top: 0; }
.room-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.room-main b { font-weight: 500; }
.room-main span { font-size: 13.5px; color: var(--muted); }
.stage { padding: 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { padding: 20px 12px 14px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tile b { font-weight: 500; font-size: 14px; }
.tile-s { font: 12px var(--mono); color: var(--muted); min-height: 18px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tile .av.lg { transition: box-shadow .12s; }
.tile.speaking .av.lg { box-shadow: 0 0 0 3px var(--ok); }
.tile.hand { border-color: var(--warn); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- tabellen ---------- */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--mono); }
.tbl .in { height: 32px; }
.tbl td.act { text-align: right; white-space: nowrap; }
.toggle-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row:first-child { border-top: 0; }
.toggle-row input { margin-top: 3px; }
.toggle-row b { font-weight: 500; display: block; }
.toggle-row span { font-size: 13.5px; color: var(--muted); }
.yes { color: var(--ok); font-family: var(--mono); font-size: 13px; }
.no { color: var(--muted); font-family: var(--mono); font-size: 13px; }

/* taken en toetsen: overal hetzelfde icoon */
.kind { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: -2px; }
.kind-task { color: var(--accent); }
.kind-test { color: var(--red); }
.kind-exam { color: var(--exam); }
.ev-main b .kind-exam, .task-main b .kind-exam { color: var(--exam); }
.wt { font: 11.5px var(--mono); color: var(--muted); }
.kind-lead { flex: 0 0 17px; display: inline-flex; }
.kind-head { display: flex; align-items: center; gap: 6px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kind-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); }
.panel > .kind-legend { padding: 10px 16px; border-top: 1px solid var(--line); }
.kind-pick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; font-size: 14px; }
.kind-pick .muted { font-size: 12.5px; }
.kind-pick:has(input:checked) { border-color: var(--ink); background: var(--sunk); }
.mark-line { display: flex; align-items: center; gap: 6px; }
.ev-title { display: flex; align-items: center; gap: 6px; }
.ev-marks { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.task.is-test .task-main b { font-weight: 500; }
.kcards { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.kcard { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); color: var(--ink); text-align: left; cursor: pointer; }
.kcard:hover { box-shadow: inset 0 0 0 1px var(--c); }
.kcard-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.kcard-top > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard b { font-weight: 500; overflow-wrap: anywhere; }
.kcard .due { font-size: 12px; }

/* dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 20px 0; align-items: start; }
.dash .panel + .panel { margin-top: 0; }
.dash .kv { grid-template-columns: 1fr auto; }
.dash .kv dd { text-align: right; }
.tile-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tbl tr.off td { color: var(--muted); }
.tbl tfoot th, .tbl tfoot td { padding: 9px 16px; border-top: 1px solid var(--line-2); }
.tbl tfoot th { color: var(--ink); font-weight: 600; font-size: 14px; }
.tbl tfoot th.num { font-family: var(--mono); font-size: 16px; }
.addon-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ev-link { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer; }
.ev-link:hover { text-decoration: underline; }

/* ouders */
.childbar { background: var(--sunk); border-bottom: 1px solid var(--line); }
.childbar-in { max-width: 1180px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.childbar .btn .muted { font: 11.5px var(--mono); }
.state-dot { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; border: 2px solid var(--line-2); }
.state-dot.on { background: var(--ok); border-color: var(--ok); }

/* berichten: ster en bewaartermijn */
.star-on { display: inline-flex; vertical-align: -1px; margin-right: 5px; color: var(--warn); }
.star-on svg, .icon-btn.on svg { fill: currentColor; }
.icon-btn.on { color: var(--warn); }
.thr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.exp { font: 11px var(--mono); color: var(--red); white-space: nowrap; }
.pane-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pane-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.exp-note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.mail-tools { flex-wrap: wrap; }
.mail-tools .seg { width: 100%; }
.mail-tools .seg .btn { flex: 1; }

/* controle van inleveringen */
.tag.bad { color: var(--red); border-color: currentColor; }
.check-btn { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 2px; border: 0; border-radius: 4px; background: none; cursor: pointer; text-align: left; }
.check-btn:hover .tag { border-color: var(--ink); }
.scan-ok { display: inline-flex; color: var(--ok); flex: 0 0 auto; }

/* lesrooster */
.wk { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px; background: var(--ink); color: var(--on-ink); font: 500 10.5px/16px var(--mono); vertical-align: 1px; }
.lesson-add.half { min-height: 28px; margin-top: 4px; border-color: var(--line-2); color: var(--muted); font: 11.5px var(--mono); gap: 2px; display: flex; align-items: center; justify-content: center; }
.tt { min-width: 720px; table-layout: fixed; }
.tt th:first-child { width: 86px; }
.tt td { padding: 4px; vertical-align: top; border-left: 1px solid var(--line); height: 58px; }
.tt th[scope="row"] { padding: 6px 10px; font-weight: 400; vertical-align: top; }
.tt th[scope="row"] .mono { font-size: 12.5px; line-height: 1.35; display: block; }
.per { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lesson-cell { width: 100%; height: 100%; min-height: 50px; padding: 5px 7px; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--ink); text-align: left; display: flex; flex-direction: column; gap: 1px; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); font-size: 13px; }
.lesson-cell:hover { box-shadow: inset 0 0 0 1px var(--c); }
.lesson-cell b { font-weight: 500; }
.lesson-cell span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-cell.other { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.lesson-add { width: 100%; height: 100%; min-height: 50px; border: 1px dashed transparent; border-radius: 5px; background: none; color: var(--line-2); display: grid; place-items: center; cursor: pointer; }
.lesson-add:hover, .lesson-add:focus-visible { border-color: var(--line-2); color: var(--ink); }
.tt tr.brk th, .tt tr.brk td { height: auto; padding: 3px 10px; background: var(--sunk); font-size: 11.5px; color: var(--muted); }
.tt tr.brk td { border-left: 0; }

/* bestanden */
.staged { padding: 12px; border: 1px solid var(--ink); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
.staged .h3s { margin: 0; }
.files li .fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sub-note { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dlg-b .sub-note { max-width: none; white-space: normal; }
.h3s { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.files { border: 1px solid var(--line); border-radius: 6px; }
.files li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.files li:first-child { border-top: 0; }
.files li a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); text-decoration: none; }
.files li a:hover { text-decoration: underline; }
.files li .mono { font-size: 12px; white-space: nowrap; }
.files.tight { border: 0; }
.files.tight li { min-height: 0; padding: 1px 0; border: 0; }
.files.tight li a { max-width: 180px; display: block; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 14px; border: 1px dashed var(--line-2); border-radius: 8px; text-align: center; cursor: pointer; font-size: 14px; font-weight: 500; }
.drop .muted { font-size: 13px; font-weight: 400; }
.drop:hover, .drop.over { border-color: var(--ink); background: var(--sunk); }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop.busy { opacity: .6; pointer-events: none; }
.up-status { font: 12.5px var(--mono); min-height: 0; }
.up-status:empty { display: none; }

/* koppelen */
.feed { display: flex; gap: 8px; }
.feed .in { font: 12.5px var(--mono); }
.providers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
details.help { border-top: 1px solid var(--line); }
details.help summary { padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 500; }
details.help div { padding: 0 16px 12px; font-size: 14px; color: var(--muted); }
details.help ol { list-style: decimal; padding-left: 20px; }
.cust { border: 1px solid var(--line); border-radius: 6px; }
.cust li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--line); min-height: 46px; }
.cust li:first-child { border-top: 0; }
.cust label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cust-btns { display: flex; }

/* ---------- aanmelden ---------- */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; padding: 32px 16px; }
.login-box { width: min(360px, 100%); }
.login-box .mark { margin-bottom: 36px; }
.login-box h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; }
.login-demo { width: min(420px, 100%); }
.login-demo p { font-size: 14px; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.login-demo button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font-size: 14px; }
.login-demo li:first-child button { border-top: 0; }
.login-demo button:hover { background: var(--sunk); }
.login-demo button span { margin-left: auto; color: var(--muted); font: 12px var(--mono); }
.login-demo .grp { padding: 6px 16px; font: 11.5px var(--mono); color: var(--muted); background: var(--sunk); border-top: 1px solid var(--line); }

/* ---------- dialoog & melding ---------- */
dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .22); }
dialog.wide { width: min(820px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(17, 17, 16, .45); }
.dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.dlg-h h2 { font-size: 17px; font-weight: 600; }
#dlg-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.desc { white-space: pre-wrap; }
#toast { position: fixed; left: 50%; bottom: 20px; z-index: 90; max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 14px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- smal scherm ---------- */
@media (max-width: 900px) {
  .home, .dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .top-in { height: auto; flex-wrap: wrap; gap: 0 12px; padding: 0 12px; }
  .mark { height: 48px; }
  .user { order: 2; }
  .user-t { display: none; }
  .tabs { order: 3; flex-basis: 100%; height: 44px; margin: 0 -12px; padding: 0 6px; border-top: 1px solid var(--line); }
  .page { padding: 20px 16px 56px; }
  .callbar-in, .childbar-in { padding: 8px 16px; }
  .rows > li.trow { flex-wrap: wrap; row-gap: 6px; }
  .rows > li.trow .task-main { flex: 1 1 calc(100% - 30px); }
  .rows > li.trow .prog { margin-left: 23px; }
  .rows > li.trow .btn { margin-left: auto; }
  .head h1 { font-size: 26px; }
  .daytabs { display: flex; }
  .cal { --days: 1 !important; }
  .cal-dh:not(.sel), .cal-ad:not(.sel), .cal-col:not(.sel) { display: none; }
  .mail { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 92px - 130px); }
  .mail.has-thread .mail-list { display: none; }
  .mail:not(.has-thread) .pane { display: none; }
  .pane-h .back { display: inline-block; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 8px; }
  .rows > li { padding: 12px 14px; gap: 12px; }
}
@media (pointer: coarse) {
  .btn { height: 44px; }
  .btn.sm { height: 38px; }
  .icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* wachtwoordeisen */
.pw-rules { list-style: none; margin: -2px 0 4px; padding: 0; font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.pw-rules li.ok { color: var(--ok); }
.pw-ic { display: inline-block; width: 1.1em; font-weight: 600; }
.pw-row { display: flex; gap: 8px; }
.pw-row .in { flex: 1; min-width: 0; }

/* QR-code bij tweestapsverificatie: altijd zwart op wit, ook in het donkere thema */
.qr { margin: 10px 0; line-height: 0; }
.qr svg { max-width: 100%; height: auto; border-radius: 6px; }