/* Narrow — global navigation (NAV-CONTRACT.md N1–N10; before that BACKLOG 25c). A slim bar on top, one column on the
   left and a status line at the bottom, on every management page; never on the player path.
   Self-contained: the server pages load only this file, so nothing here relies on planner.css.
   The colour tokens (D76) come from tokens.css, imported first below (the one place since 5d3a), scoped to the nav's
   own elements, so the bar never fights the host page over :root. Dark is the default (the Planner and the server
   pages are dark, N11); `[data-theme="light"]` on <html> switches the whole set. Never a hex in a rule below the
   token blocks. */
@import url("tokens.css");

:root { --dw-nav-h: 42px; } /* the bar's height, for hosts that lay out under or beside it (planner.css) */
/* BEKIJKEN-ALS BA4: the strip above the bar while this tab views as someone else (nav.js paintAls); its height moves
   the bar, the column and the page down by the same amount. */
:root { --dw-als-h: 0px; }
html.dw-als-on { --dw-als-h: 30px; }
/* The frame's room (NAV-CONTRACT N1, N5, N7): <html> keeps it free with padding, so the page inside does not change. */
html.dw-nav-on { --dw-foot-h: 26px; --dw-col-w: 212px; }
html.dw-nav-on.dw-col-collapsed { --dw-col-w: 56px; }
.dw-nav, .dw-col, .dw-foot, .dw-tip, .dw-menu, .dw-palette, .dw-note, .dw-dlg, .dw-brand {
  /* the nav's own, dark (the colour set: tokens.css) */
  /* the monochrome mark: duckweaver-harbor-mono-dark.svg (ink, front ribbon, back ribbon, bill); also on .dw-brand
     itself, so the mark keeps its colours where a brand stands outside the bar (the login family, LOGIN-CONTRACT L2) */
  --dw-logo-ink: #B8BDC9; --dw-logo-accent: #838DA2; --dw-logo-accent2: #5A6783; --dw-logo-bill: #D6D9E0;
  --dw-nav-h: 42px;
  --dw-nav-shadow: var(--shadow);   /* the one floating shadow, per theme in tokens.css (5d3b step 6, b4) */
}
:root[data-theme="light"] .dw-nav, :root[data-theme="light"] .dw-col, :root[data-theme="light"] .dw-foot, :root[data-theme="light"] .dw-tip, :root[data-theme="light"] .dw-menu, :root[data-theme="light"] .dw-palette, :root[data-theme="light"] .dw-note, :root[data-theme="light"] .dw-dlg, :root[data-theme="light"] .dw-brand {
  /* the nav's own, light */
  /* duckweaver-harbor-mono.svg */
  --dw-logo-ink: #435272; --dw-logo-accent: #8A94A8; --dw-logo-accent2: #BFC4CF; --dw-logo-bill: #F4F6F9;
}

/* ---- the bar (N6): fixed on top, slim; mark + tenant, ⌘K, Publiceren…, theme, user ---- */
.dw-nav { display: flex; align-items: center; gap: 4px; height: var(--dw-nav-h); padding: 0 12px 0 10px; background: var(--dw-surface); color: var(--dw-text); border-bottom: 1px solid var(--dw-line); font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box;
  position: fixed; top: var(--dw-als-h, 0px); left: 0; right: 0; z-index: 900; }
/* ---- Bekijken als (BA4): the strip in the override colour (the one of Nu tonen), fixed above the bar ---- */
.dw-als { position: fixed; top: 0; left: 0; right: 0; z-index: 901; height: var(--dw-als-h, 30px); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; box-sizing: border-box;
  background: var(--override); color: var(--on-accent); font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; overflow: hidden; }
.dw-als[hidden] { display: none; }
.dw-als-text { overflow: hidden; text-overflow: ellipsis; }
.dw-als-ro { font-weight: 400; opacity: .9; }
.dw-als-sep { opacity: .7; }
.dw-als-stop { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 1px 10px; cursor: pointer; line-height: 1.3; }
.dw-als-stop:hover { background: rgba(255, 255, 255, .16); }
.dw-als-stop:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 1px; }
/* MCP-CONTRACT M10a (ui/mcp-pending.js): the strip for an action of Claude that waits for my Ok, above the bar like the
   Bekijk-als strip; <html> keeps its room with --dw-mcp-h. */
html.dw-mcp-on { --dw-als-h: 34px; --dw-mcp-top: 0px; }
html.dw-als-on.dw-mcp-on { --dw-als-h: 64px; --dw-mcp-top: 30px; }
.dw-mcp { position: fixed; top: var(--dw-mcp-top, 0px); left: 0; right: 0; height: 34px; z-index: 901; box-sizing: border-box; padding: 0 12px;
  background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line);
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dw-mcp[hidden] { display: none; }
.dw-mcp-head { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; white-space: nowrap; }
.dw-mcp-text { font-weight: 600; }
.dw-mcp-sep { opacity: .6; }
.dw-mcp-what { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.dw-mcp-btn { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 1px 12px; cursor: pointer; line-height: 1.4; }
.dw-mcp-btn:hover { background: var(--panel-2); }
.dw-mcp-btn:disabled { opacity: .5; cursor: default; }
.dw-mcp-ok { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dw-mcp-ok:hover { filter: brightness(1.08); background: var(--accent); }
.dw-mcp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dw-mcp-body { position: absolute; top: 100%; left: 0; right: 0; max-height: 60vh; overflow: auto; padding: 8px 12px 12px; font-weight: 400;
  background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
.dw-mcp-body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.dw-mcp-list { margin: 4px 0; padding-left: 18px; }
.dw-mcp-note { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.dw-mcp-flash { position: absolute; right: 12px; top: 6px; font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); }
.dw-mcp-flash.is-ok { color: var(--ok-ink); }
.dw-mcp-flash.is-warn { color: var(--warn-ink); }
.dw-nav *, .dw-col *, .dw-foot *, .dw-menu *, .dw-palette * { box-sizing: border-box; }
.dw-nav button, .dw-nav a, .dw-col button, .dw-col a, .dw-foot button, .dw-foot a, .dw-menu button, .dw-menu a { font: inherit; color: inherit; }
/* the server pages style bare elements (header wraps, a button is 100% wide on /admin): the frame keeps its own shape */
.dw-nav { flex-wrap: nowrap; }
.dw-nav button, .dw-foot button { width: auto; }
/* the Muur (D61): the frame lies over the wall and fades when nobody touches the page */
.dw-nav.dw-nav-fades, .dw-foot.dw-fades { transition: opacity .35s; }
body.idle .dw-nav.dw-nav-fades, body.idle .dw-foot.dw-fades { opacity: 0; pointer-events: none; }

.dw-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; text-decoration: none; color: var(--dw-text); white-space: nowrap; min-width: 0; }
.dw-brand:hover { background: var(--dw-raised); }
.dw-brand:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; }
.dw-logo { width: 28px; height: 28px; display: inline-block; flex: none; }
.dw-logo svg { width: 100%; height: 100%; display: block; }
.dw-logo .ink { fill: var(--dw-logo-ink); }
.dw-logo .accent { fill: var(--dw-logo-accent); }
.dw-logo .accent2 { fill: var(--dw-logo-accent2); }
.dw-logo .bg { fill: var(--dw-surface); }
.dw-logo .bill { fill: var(--dw-logo-bill); }
.dw-brand-name { font-weight: 600; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }

.dw-spacer { flex: 1; }
.dw-right { display: flex; align-items: center; gap: 4px; }
.dw-btn { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--dw-text); display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.dw-btn:hover { background: var(--dw-raised); }
.dw-btn:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; }
/* D143 13.4.1: "● Live v000124" (calm, the dot in Harbor blue) and the chip "N wachtend" in the concept colour */
.dw-publish { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.dw-btn.dw-live-status { color: var(--dw-text-muted); font-variant-numeric: tabular-nums; }
.dw-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dw-live); flex: none; }
.dw-btn.dw-btn-waiting { background: var(--dw-concept-soft); color: var(--dw-concept-soft-ink); border-color: var(--dw-concept-border); font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.dw-btn.dw-btn-waiting:hover { background: var(--dw-concept); color: var(--dw-concept-on); }
.dw-btn.dw-icon { padding: 5px 7px; font-size: 14px; line-height: 1; }
.dw-btn kbd { font: 11px ui-monospace, Menlo, Consolas, monospace; background: var(--dw-raised); border-radius: 4px; padding: 0 5px; }
.dw-user { max-width: 220px; }
.dw-user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-user .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--dw-live-soft); color: var(--dw-live-soft-ink); border: 1px solid var(--dw-live-border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.dw-nav-burger { display: none; }
/* HULP B8: the Chat button (only when the Chat is on, nav.js): the duck with a headset (img/icons/chat.svg, d1a) at
   20 px + "Chat"; on = the selected state, like an active column item. The panel itself: css/chat.css. */
.dw-btn.dw-btn-chat { border-radius: 999px; padding: 4px 11px 4px 8px; }
.dw-btn.dw-btn-chat[hidden] { display: none; }
.dw-btn.dw-btn-chat[aria-pressed="true"] { background: var(--dw-live-soft); color: var(--dw-live-soft-ink); border-color: var(--dw-live-border); font-weight: 600; }
.dw-chat-duck { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("../img/icons/chat.svg") center / contain no-repeat; mask: url("../img/icons/chat.svg") center / contain no-repeat; }

/* Small line glyphs of the nav's own (the cut-paper set does not read this small; baseline §2): masks in currentColor. */
.dw-glyph { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.dw-glyph-menu { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.dw-glyph-start { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3C/svg%3E"); }
.dw-glyph-system { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.dw-glyph-collapse { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7l-5 5 5 5M18 7l-5 5 5 5'/%3E%3C/svg%3E"); }
html.dw-col-collapsed .dw-glyph-collapse { transform: scaleX(-1); }

/* ---- the column (N1, N3–N5): Start, the rows of the start page, Systeem folded at the bottom ---- */
.dw-col { position: fixed; z-index: 890; left: 0; top: calc(var(--dw-nav-h) + var(--dw-als-h, 0px)); bottom: var(--dw-foot-h); width: var(--dw-col-w); display: flex; flex-direction: column;
  background: var(--dw-surface); color: var(--dw-text); border-right: 1px solid var(--dw-line); font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dw-col-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--dw-line) transparent; }
.dw-col-foot { flex: none; padding: 6px 8px; border-top: 1px solid var(--dw-line); }
.dw-col-sec { margin-top: 6px; }
/* `.dw-col .dw-col-head`: beheren is a button, and `.dw-col button { font: inherit; color: inherit }` (above) would
   otherwise give it the item letter (UI-RONDE AD2) */
.dw-col .dw-col-head { height: 20px; padding: 0 10px; display: flex; align-items: flex-end; font-size: 11px; font-weight: 600; color: var(--dw-text-muted); letter-spacing: .03em; white-space: nowrap; }
.dw-col-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 4px 10px; margin: 1px 0; border: 0; border-radius: 9px; background: transparent;
  color: var(--dw-text); text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; position: relative; font-size: 13.5px; }
.dw-col-item:hover { background: var(--dw-raised); }
.dw-col-item:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: -2px; }
.dw-col-item.active { background: var(--dw-live-soft); color: var(--dw-live-soft-ink); font-weight: 600; }
.dw-col-item.active::before { content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dw-live-ink); }
/* The one icon rule (5d3b a4): every icon of the cut-paper set is a mask in the text colour. nav.css is loaded on every
   page, before the page sheets and the wizard sheets, so each class keeps its own size, opacity and colour in its own
   file (and the more specific overrides there, a .dw-glyph in the column, win). */
.dw-col-icon, .sp-ico, .evo-ico, .sw-ico-34, .sw-look-ico, .ss-thumb-ico, .ap-thumb-ico, .ap-form-ico, .dw-oh-glyph, .dw-ocard-icon, .st-row-icon, .st-icon, .wzm-icon, .ag-mini-ico, .sv-kind-ico {
  background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.dw-col-icon { width: 24px; height: 22px; flex: none; }
.dw-col-icon.dw-glyph { width: 24px; height: 18px; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.dw-col-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dw-col-item.is-later { opacity: .4; cursor: not-allowed; }
.dw-col-item.is-later:hover { background: transparent; }
/* TESTRONDE3 G3, UI-RONDE AD1: the own items of a row (start_tile, form tiles) together, last in the row, 6 px under the
   last core item - no grey shelf in the column (Start keeps its .st-shelf). Structure, not status: no mark on the item. */
.dw-own-shelf { margin-top: 6px; }
.dw-col-ext { color: var(--dw-text-muted); font-size: 11px; }
/* D149 B4: the attention badge beside an item — its own link, red (--now) on content, grey (--muted) on the Agenda */
.dw-col-row { position: relative; }
.dw-col-row > .dw-col-item { padding-right: 42px; }
/* Jeroen 03-10: a small circle with a white number, calm. `.dw-col .dw-col-badge`: `.dw-col a { color: inherit }`
   (above) would otherwise make the number black. */
.dw-col .dw-col-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--on-accent); text-decoration: none; }
.dw-col-badge.is-now { background: var(--now); }
.dw-col-badge.is-muted { background: var(--muted); }
.dw-col-badge.is-override { background: var(--override); }   /* NU-TONEN N12: the places on Nu tonen */
.dw-col-badge:hover { filter: brightness(1.1); }
.dw-col-badge:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; }
.dw-col-sys { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--dw-line); }
.dw-col-syshead { color: var(--dw-text-muted); }
.dw-col-syshead.has-active { color: var(--dw-text); }
.dw-col-caret { font-size: 10px; color: var(--dw-text-muted); }
.dw-col-sysitems { padding: 2px 0 4px; }
.dw-col-item.dw-col-plain { min-height: 28px; padding: 4px 10px 4px 44px; font-size: 12.5px; color: var(--dw-text-muted); }
.dw-col-item.dw-col-plain:hover { color: var(--dw-text); }
.dw-col-item.dw-col-plain.active { color: var(--dw-live-soft-ink); }
.dw-col-toggle { color: var(--dw-text-muted); min-height: 30px; }

/* collapsed to icons (N5): only the icons, the name beside it on pointing (.dw-tip) */
@media (min-width: 768px) {
  html.dw-col-collapsed .dw-col-scroll { padding: 8px 6px 12px; scrollbar-width: none; }
  html.dw-col-collapsed .dw-col-foot { padding: 6px; }
  html.dw-col-collapsed .dw-col-item { justify-content: center; padding: 5px 0; gap: 0; }
  html.dw-col-collapsed .dw-col-item.active::before { left: -6px; }
  html.dw-col-collapsed .dw-col-label, html.dw-col-collapsed .dw-col-caret, html.dw-col-collapsed .dw-col-ext { display: none; }
  html.dw-col-collapsed .dw-col-row > .dw-col-item { padding-right: 0; }
  html.dw-col-collapsed .dw-col .dw-col-badge { top: 1px; right: 1px; transform: none; width: 15px; height: 15px; font-size: 9px; }
  html.dw-col-collapsed .dw-col-head { height: 11px; padding: 0 8px; }
  html.dw-col-collapsed .dw-col-head > * { display: none; }
  html.dw-col-collapsed .dw-col-head::after { content: ''; flex: 1; height: 1px; background: var(--dw-line); margin-bottom: 1px; }
  html.dw-col-collapsed .dw-col-sysitems { display: none; }
}
.dw-tip { position: fixed; z-index: 960; transform: translate(0, -50%) translateX(-4px); opacity: 0; pointer-events: none; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  background: var(--dw-text); color: var(--dw-surface); font: 600 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: var(--dw-nav-shadow); transition: opacity .12s, transform .12s; }
.dw-tip.on { opacity: 1; transform: translate(0, -50%); }
.dw-scrim { display: none; }

/* ---- the status line (N7): one calm line at the bottom ---- */
.dw-foot { position: fixed; z-index: 890; left: 0; right: 0; bottom: 0; height: var(--dw-foot-h); display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--dw-surface); color: var(--dw-text-muted); border-top: 1px solid var(--dw-line); font: 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; }
.dw-foot-left, .dw-foot-right { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.dw-foot-right { gap: 6px; }
.dw-foot-note { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.dw-foot-env { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; background: var(--dw-live-soft); color: var(--dw-live-soft-ink); }
.dw-foot-env.local, .dw-foot-env.mock { background: var(--dw-raised); color: var(--dw-text-muted); }
.dw-foot-diff:empty, .dw-foot-pub:empty { display: none; }
.dw-foot .dw-foot-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--dw-concept-soft-ink); text-decoration: none; }
.dw-foot .dw-foot-link:hover { text-decoration: underline; }
.dw-foot-link:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 2px; border-radius: 3px; }
.dw-foot .dw-foot-link.warn { color: var(--dw-danger-ink); }
.dw-foot-ver { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }

/* ---- the room around the page: <html> padding, so the page itself does not change (N9) ---- */
html.dw-reserve { box-sizing: border-box; padding: calc(var(--dw-nav-h) + var(--dw-als-h, 0px)) 0 var(--dw-foot-h) var(--dw-col-w); scroll-padding-top: calc(var(--dw-nav-h) + var(--dw-als-h, 0px)); }
html.dw-reserve body::after { content: ''; display: block; height: var(--dw-foot-h); }   /* a scrolling page ends above the status line */
/* hosts that measure themselves against the window instead of their parent */
html.dw-reserve .sv { height: 100%; }                         /* the Kalender (simpleview.css: 100dvh) */
html.dw-nav-on .toast-host, html.dw-nav-on .dw-note, html.dw-nav-on .st-hint { bottom: calc(var(--dw-foot-h) + 12px); }
/* the Muur (D61): the bar and the status line lie over the wall and fade with its header; the column stays and the wall
   starts beside it, so nothing moves when the page goes idle */
@media (min-width: 768px) { html.dw-nav-on body.dw-has-nav .overview-header, html.dw-nav-on body.dw-has-nav .overview-main { left: var(--dw-col-w); right: 0; } }

/* ---- menus (one open at a time; hover switches while one is open, like a menubar) ---- */
.dw-menu { position: fixed; z-index: 950; min-width: 240px; max-width: min(360px, 94vw); background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); border-radius: 10px; box-shadow: var(--dw-nav-shadow); padding: 6px; display: flex; flex-direction: column; font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dw-menu-title { padding: 6px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dw-text-muted); }
.dw-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; color: var(--dw-text); text-decoration: none; }
.dw-menu-item:hover, .dw-menu-item:focus-visible { background: var(--dw-raised); outline: 0; }
.dw-menu-item.active { box-shadow: inset 3px 0 0 var(--dw-live-ink); }
.dw-menu-item .label { flex: 1; min-width: 0; }
.dw-menu-item .hint { color: var(--dw-text-muted); font-size: 11.5px; white-space: nowrap; }
.dw-menu-item .check { width: 14px; text-align: center; color: var(--dw-live-ink); }
.dw-menu-item.danger { color: var(--dw-danger-ink); }
.dw-menu-sep { height: 1px; background: var(--dw-line); margin: 5px 4px; }
.dw-menu-note { padding: 6px 10px; font-size: 11.5px; color: var(--dw-text-muted); }
.dw-menu-note b { color: var(--dw-text); font-weight: 600; }
.dw-menu-section { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dw-text-muted); }
.dw-menu-note.dw-version { border-top: 1px solid var(--dw-line); margin-top: 4px; padding-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }

/* ---- the palette for pages without the Planner's own (⌘K, N9): the same list, another door ---- */
.dw-palette { position: fixed; inset: 0; z-index: 990; background: rgba(0, 0, 0, .55); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--dw-text); }
.dw-palette-box { width: min(640px, 92vw); background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: 12px; box-shadow: var(--dw-nav-shadow); overflow: hidden; }
.dw-palette-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--dw-line); padding: 14px 16px; font: inherit; font-size: 15px; color: inherit; outline: 0; }
.dw-palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
.dw-palette-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.dw-palette-item.on { background: var(--dw-live-soft); color: var(--dw-live-soft-ink); }
.dw-palette-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-palette-item .hint { color: var(--dw-text-muted); font-size: 11.5px; white-space: nowrap; }
.dw-palette-item.muted { color: var(--dw-text-muted); }
.dw-palette-foot { padding: 6px 12px; border-top: 1px solid var(--dw-line); color: var(--dw-text-muted); font-size: 11.5px; }

/* ---- small notice (e.g. "niet bewaard: noodsleutel"), the nav's own, independent of planner.css toasts ---- */
.dw-note { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 995; background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); border-radius: 10px; padding: 9px 14px; box-shadow: var(--dw-nav-shadow); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; max-width: min(560px, 92vw); }
.dw-note.warn { border-color: var(--dw-concept-border); color: var(--dw-concept-soft-ink); background: var(--dw-concept-soft); }

/* ---- a phone (N5): the column is a drawer behind the menu button; the bar keeps mark, live status and user ---- */
@media (max-width: 767px) {
  html.dw-nav-on { --dw-col-w: 0px; }
  /* the Muur's header goes in flow on a phone (planner.css); so does the bar, else it would cover that header */
  .dw-nav.dw-nav-fades { position: static; }
  .dw-nav { padding: 0 8px; gap: 2px; }
  .dw-nav-burger { display: inline-flex; }
  .dw-brand { padding-right: 6px; }
  .dw-user .name { display: none; }
  .dw-right .dw-btn-k { display: none; }
  .dw-btn.dw-btn-chat { padding: 5px 7px; }
  .dw-btn-chat .dw-chat-label { display: none; }
  .dw-nav.dw-nav-fades .dw-btn-chat { display: none; }   /* the Muur on a phone has no room for the Chat (chat.css) */
  .dw-btn.dw-live-status { padding: 5px 6px; font-size: 12px; }
  .dw-btn.dw-btn-waiting { padding: 3px 8px; font-size: 12px; }
  .dw-col { width: min(280px, 84vw); top: 0; bottom: 0; z-index: 970; transform: translateX(-102%); transition: transform .2s ease; }
  html.dw-drawer-open .dw-col { transform: none; box-shadow: var(--dw-nav-shadow); }
  html.dw-drawer-open .dw-scrim { display: block; position: fixed; inset: 0; z-index: 965; background: rgba(10, 12, 16, .4); }
  .dw-col-item { min-height: 40px; }
  .dw-col-foot { display: none; }
  .dw-foot { gap: 8px; padding: 0 10px; }
  .dw-foot-right { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dw-col, .dw-tip { transition: none; } }

/* ---- the frame stays put on a page switch (TESTRONDE2 T1): a cross-document view transition; bar, column and status
   line each carry their own name, so the browser keeps them where they are while the middle changes. No slide: the
   frame's groups do not animate (the new one shows at once), the middle is a short crossfade (120 ms). Less motion
   asked for: no transition at all. ---- */
@view-transition { navigation: auto; }
.dw-nav { view-transition-name: dw-nav; }
.dw-col { view-transition-name: dw-col; }
.dw-foot { view-transition-name: dw-foot; }
::view-transition-group(dw-nav), ::view-transition-group(dw-col), ::view-transition-group(dw-foot) { animation: none; }
::view-transition-old(dw-nav), ::view-transition-old(dw-col), ::view-transition-old(dw-foot) { animation: none; opacity: 0; }
::view-transition-new(dw-nav), ::view-transition-new(dw-col), ::view-transition-new(dw-foot) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Our own confirm dialog for the server pages (Jeroen 26-09: "nooit alert(), altijd onze eigen dialogs, gestyled en met
   voldoende informatie"): a question as the title, what happens and what it affects, buttons that say what they do. */
.dw-dlg { background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); border-radius: 14px; padding: 0; width: min(460px, 92vw);
  box-shadow: var(--dw-nav-shadow); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dw-dlg::backdrop { background: rgba(10, 12, 16, .45); }
.dw-dlg-body { padding: 20px 22px 18px; }
.dw-dlg h2 { margin: 0 0 8px; font-size: 17px; }
.dw-dlg p { margin: 0 0 8px; color: var(--dw-text-muted); }
.dw-dlg p.dw-dlg-effect { color: var(--dw-text); }
.dw-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dw-dlg-actions button { font: inherit; border-radius: var(--r-btn); padding: 7px 14px; cursor: pointer; border: 1px solid var(--dw-line); background: var(--dw-raised); color: var(--dw-text); }
.dw-dlg-actions button.ok { background: var(--dw-live); border-color: var(--dw-live); color: var(--dw-live-on); }
.dw-dlg-actions button.ok.danger { background: var(--dw-danger-ink); border-color: var(--dw-danger-ink); color: var(--on-accent); }
.dw-dlg-actions button:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 2px; }
.dw-dlg-actions button:disabled { opacity: .5; cursor: not-allowed; }   /* W8: Opslaan en verder while a wizard cannot save yet */
/* KNOPPEN-VOET-CONTRACT K5 (D216.2): the groups of ui.js actionBar inside this dialog. The server pages load only this
   file, not planner.css (whose .action-bar is the shared rule), so the dialog's two groups are laid out here too. */
.dw-dlg-actions.action-bar { flex-wrap: wrap; }
.dw-dlg-actions > .action-bar-specials, .dw-dlg-actions > .action-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: inherit; min-width: 0; }
.dw-dlg-actions > .action-bar-specials:empty { display: none; }
.dw-dlg-actions > .action-bar-actions { margin-left: auto; justify-content: flex-end; }

/* KNOPPEN-VOET-CONTRACT K15/K16 (D216.6): the ONE window of ui.js openDialog, on every page (the server pages' questions
   too, which is why it lives here and not in planner.css): the head (title, subtitle, the window's tools, the one ×),
   the middle (the only part that scrolls) and the foot (ui.js actionBar), with a thin light line under the head and above
   the foot (a question, compact: only above the foot). Three sizes, the measures as tokens here and nowhere else:
   compact (a question: one fixed size, a long one grows and scrolls), functional (a landscape rectangle over the page,
   ~16:10; short content leaves room below) and page (near full screen: save windows and wizards). On a phone every
   window fills the screen. A window keeps CSS for its content only. */
:root {
  --dlg-compact-w: 440px; --dlg-compact-min-h: 210px;
  --dlg-functional-w: 960px; --dlg-functional-min-h: 600px;
  --dlg-page-w: 94vw; --dlg-page-h: 92vh;
  --dlg-pad-x: 24px;
}
dialog.dlg { box-sizing: border-box; padding: 0; overflow: hidden; }
dialog.dlg[open] { display: flex; flex-direction: column; }
dialog.dlg.dlg-compact { width: min(var(--dlg-compact-w), 92vw); max-width: 92vw; min-height: min(var(--dlg-compact-min-h), 86vh); max-height: 86vh; }
dialog.dlg.dlg-functional { width: min(var(--dlg-functional-w), 92vw); max-width: 92vw; min-height: min(var(--dlg-functional-min-h), 86vh); max-height: 86vh; }
dialog.dlg.dlg-page { width: var(--dlg-page-w); max-width: var(--dlg-page-w); height: var(--dlg-page-h); max-height: var(--dlg-page-h); }
.dlg-frame { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.dlg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px var(--dlg-pad-x); border-bottom: 1px solid var(--line); }
dialog.dlg-compact .dlg-head { border-bottom: 0; padding-bottom: 2px; }
.dlg-titles { flex: 1 1 auto; min-width: 0; }
.dlg-head .dlg-title { margin: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.dlg-subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.dlg-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.dlg-x { flex: none; align-self: flex-start; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.dlg-x:hover { background: var(--panel-2); color: var(--text); }
.dlg-x:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; }
.dlg-main { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px var(--dlg-pad-x); }
.dlg-main > .dlg-body { padding: 0; }
.dlg-main.dlg-fill { display: flex; flex-direction: column; }   /* a list or a wizard: the content fills the middle and scrolls itself */
.dlg-main.dlg-fill > * { flex: 1 1 auto; min-height: 0; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.dlg-foot { flex: none; margin: 0; padding: 12px var(--dlg-pad-x) 14px; border-top: 1px solid var(--line); }
@media (max-width: 719px) {
  dialog.dlg.dlg-functional, dialog.dlg.dlg-page { width: 100vw; max-width: 100vw; height: 100dvh; min-height: 0; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.dlg.dlg-compact { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  :root { --dlg-pad-x: 14px; }
  .dlg-foot { flex-wrap: wrap; }
}

/* Start is itself the menu: no column, no drawer button there (26-09). */
html.dw-no-col { --dw-col-w: 0px; }
html.dw-no-col .dw-col, html.dw-no-col .dw-scrim, html.dw-no-col .dw-nav-burger { display: none !important; }
/* Beheren folds like Systeem: its head is a button that looks exactly like the other heads (UI-RONDE AD2: the letter,
   colour and bottom alignment of .dw-col-head), only the caret on the right. */
.dw-col-foldhead { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; justify-content: space-between; }
.dw-col-foldhead:hover .dw-col-label { color: var(--dw-text); }

/* The Muur in full screen (Jeroen 26-09): only the wall; its own header still fades in on a touch. */
html.dw-fullscreen .dw-nav, html.dw-fullscreen .dw-col, html.dw-fullscreen .dw-foot, html.dw-fullscreen .dw-scrim { display: none !important; }
html.dw-fullscreen body.dw-has-nav .overview-main { left: 0 !important; right: 0 !important; top: 0; bottom: 0; }
html.dw-fullscreen body.dw-has-nav .overview-header { left: 0 !important; right: 0 !important; top: 0; }

/* ---- Uitleg: the ⓘ and its popover (UITLEG-CONTRACT.md U4/U8, D153; ui/uitleg.js) ----
   Here because every page loads nav.css (the Kalender has no planner.css). Only the Planner's tokens: a glyph of 16 in
   --muted (--accent when pointed at or open) on a hit area of 24 × 24 (WCAG 2.5.8), never hidden without hover; the
   popover on --panel, corner 14, the one floating --shadow, 320 wide (the legend 360), never wider than the window
   minus 32. It is the native popover (top layer) when the browser has it: the UA's inset/margin/border are reset. */
.dw-info-wrap { display: inline-flex; vertical-align: middle; }
.dw-info-wrap[hidden] { display: none; }
.dw-info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin: 0 0 0 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font: inherit; line-height: 1; text-transform: none; }
.dw-info:hover, .dw-info[aria-expanded="true"] { color: var(--accent); }
.dw-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dw-info-glyph { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; box-sizing: border-box;
  border: 1.5px solid currentColor; border-radius: 50%; font: italic 700 10px/1 Georgia, 'Times New Roman', serif; }
.dw-uitleg { position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 16px); overflow: auto;
  box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow); font: 400 13px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: normal; text-align: left;
  text-transform: none; white-space: normal; z-index: 1000; }
.dw-uitleg.is-legend { width: min(360px, calc(100vw - 32px)); }
.dw-uitleg[hidden] { display: none; }
.dw-uitleg:focus { outline: none; }
.dw-uitleg-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.dw-uitleg-text { margin: 0; }
.dw-uitleg-sub { margin: 10px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dw-uitleg-more { display: inline-block; margin-top: 8px; color: var(--accent-2); font-weight: 600; }
.dw-uitleg-list { margin: 8px 0 0; padding: 0 0 0 16px; }
.dw-uitleg-list li { margin: 2px 0; }
@media (prefers-reduced-motion: no-preference) { .dw-uitleg:not([hidden]) { animation: dw-uitleg-in .12s ease-out; } }
@keyframes dw-uitleg-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* U8: each sign drawn with its own class, on a dark plane like the poster or tile it sits on; the page's absolute
   placement of the sign is undone here (only inside the legend). */
.dw-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dw-legend li { display: flex; align-items: center; gap: 10px; }
.dw-legend-sign { flex: 0 0 128px; min-height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 4px 6px;
  border-radius: 6px; background: var(--media-black); overflow: hidden; }
.dw-legend .dw-legend-sign > * { position: static; inset: auto; transform: none; max-width: 100%; margin: 0; flex-basis: auto; pointer-events: none; }
.dw-legend .tile-question-mark { font-size: 20px; color: var(--on-media); }
.dw-legend-text { flex: 1 1 auto; min-width: 0; }
/* A text for screen readers only (Start: the sentence each tile names with aria-describedby). */
.dw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* TESTRONDE1 V1/V2 (js/app/busy.js): a person's call is running. The element of the gesture gets aria-busy and is-busy:
   a spinner before its text, no second click. <html> gets dw-busy after 400 ms: a thin running bar at the top of the
   page, under the navigation bar. With prefers-reduced-motion: a calm, still bar and a still ring. */
.is-busy { cursor: progress; pointer-events: none; }
.is-busy::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .4em; vertical-align: -.1em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dw-busy-spin .7s linear infinite; }
html.dw-busy::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 950; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--dw-live) 40%, var(--dw-live) 60%, transparent 100%) 0 0 / 40% 100% no-repeat;
  animation: dw-busy-run 1.1s ease-in-out infinite; }
html.dw-nav-on.dw-busy::after { top: calc(var(--dw-nav-h) + var(--dw-als-h, 0px)); }
@keyframes dw-busy-spin { to { transform: rotate(360deg); } }
@keyframes dw-busy-run { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  .is-busy::before { animation: none; border-right-color: currentColor; opacity: .5; }
  html.dw-busy::after { animation: none; background: var(--dw-live); opacity: .45; }
}

/* RONDE-W W2 (D213.2, js/ui/busy-overlay.js): while a window or a wizard saves, the whole window is grey with a spinner
   and "Bezig met opslaan…" in the middle; nothing in it can be clicked. Tokens only (light and dark); with
   prefers-reduced-motion the spinner stands still and the text stays. */
.dw-busy-overlay { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--overlay); color: var(--text); cursor: progress; border-radius: inherit; }
.dw-busy-spinner { width: 36px; height: 36px; box-sizing: border-box; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  animation: dw-busy-spin .8s linear infinite; }
.dw-busy-text { padding: 6px 14px; border-radius: var(--r-pill); background: var(--panel); color: var(--text); box-shadow: var(--shadow-card);
  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dw-busy-overlay.is-page { position: fixed; z-index: 900; border-radius: 0; }   /* a save straight from a page: the page waits */
@media (prefers-reduced-motion: reduce) { .dw-busy-spinner { animation: none; } }