:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --line: #cbd5e1;
  --grid: #e2e8f0;
  --grid-major: #cbd5e1;
  --accent: #0f172a;
  --accent-contrast: #ffffff;
  --node: #ffffff;
  --node-line: #0f172a;
  --edge: #334155;
  --current: #ef4444;
  --lex: #2563eb;
  --synt: #16a34a;
  --log: #7c3aed;
  --warn: #b45309;
  --shadow: rgba(15, 23, 42, 0.16);
  --og-font-scale: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --panel: #0f172a;
    --panel-2: #111827;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --line: #334155;
    --grid: #1e293b;
    --grid-major: #334155;
    --accent: #e5e7eb;
    --accent-contrast: #020617;
    --node: #0f172a;
    --node-line: #e5e7eb;
    --edge: #cbd5e1;
    --lex: #93c5fd;
    --synt: #86efac;
    --log: #c4b5fd;
    --shadow: rgba(226, 232, 240, 0.12);
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.1; }
h2 { font-size: 0.98rem; margin-bottom: 0.45rem; }
button, select, input { font: inherit; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.75rem;
  background: var(--accent);
  color: var(--accent-contrast);
}
.eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.75; }
.header-subtitle { margin-top: 0.35rem; font-size: 0.86rem; opacity: 0.84; max-width: 78rem; }
.version-tag { font-size: 0.72rem; opacity: 0.75; font-weight: 700; }

.app-shell {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  max-width: 1440px;
  margin: 0 auto;
}

.toolbar,
.intro-panel,
.status-panel,
.text-panel,
.panel-card,
.canvas-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 0.2rem 1rem var(--shadow);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(15rem, 1.15fr) 1fr 1fr;
  gap: 0.7rem;
  padding: 0.65rem;
  align-items: end;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.compact-actions { justify-content: flex-end; }

.download-main-zip {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  padding-inline: 1rem;
}

.download-main-zip:hover,
.download-main-zip:focus-visible {
  filter: brightness(0.92);
}

button,
.file-label,
.button-link {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 0.78rem;
  background: var(--panel);
  color: var(--text);
  min-height: 2.35rem;
  padding: 0.35rem 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:hover,
.file-label:hover,
.button-link:hover { background: var(--panel-2); }
button:active,
.file-label:active,
.button-link:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.ghost { color: var(--accent-contrast); background: transparent; border-color: color-mix(in srgb, var(--accent-contrast), transparent 65%); }
.hidden { display: none !important; }
.file-label input { display: none; }

.field { display: grid; gap: 0.25rem; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.field input,
.field select {
  min-height: 2.25rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: var(--panel);
  color: var(--text);
  padding: 0.25rem 0.55rem;
}
.field input:disabled { opacity: 0.7; }
.example-field select { min-height: 2.45rem; }

.intro-panel,
.status-panel,
.text-panel,
.panel-card { padding: 0.75rem 0.85rem; }
.intro-panel { line-height: 1.45; }
.intro-panel p { color: var(--muted); font-size: 0.92rem; }
.intro-kicker { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; margin-bottom: 0.25rem; }
.title-line { font-weight: 800; margin-bottom: 0.3rem; }
.meta-line { color: var(--muted); font-size: 0.86rem; }
.action-feedback {
  margin-top: 0.48rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.86rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel), var(--bg) 45%);
}
.action-feedback.ok { color: #15803d; border-color: color-mix(in srgb, #15803d, var(--line) 55%); }
.action-feedback.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn), var(--line) 50%); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  gap: 0.75rem;
  min-height: 62vh;
}
.side-panel {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  max-height: min(78vh, 900px);
  overflow: auto;
  padding-right: 0.1rem;
}
.panel-card { box-shadow: none; }
.inline-help,
.text-panel p,
.muted-box { color: var(--muted); font-size: 0.86rem; line-height: 1.42; }
.muted-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.55rem;
}

.projection-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.32rem;
  margin-bottom: 0.55rem;
}
.projection-tab { min-height: 2.15rem; padding: 0.25rem; font-size: 0.82rem; }
.projection-tab.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.center-mode-field { margin: 0.55rem 0 0.55rem; }

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.55rem;
  margin-top: 0.65rem;
  font-size: 0.84rem;
}
.check-grid label { display: flex; gap: 0.35rem; align-items: center; color: var(--text); }
.check-grid input { width: 1rem; height: 1rem; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.node-editor { display: grid; gap: 0.48rem; }
.editor-card, .lex-card, .relation-card { display: grid; gap: 0.55rem; }
.lex-order-list,
.edge-list {
  display: grid;
  gap: 0.32rem;
  max-height: 11rem;
  overflow: auto;
}
.lex-pill,
.edge-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.42rem 0.5rem;
  background: var(--panel-2);
  cursor: pointer;
  font-size: 0.84rem;
}
.lex-pill.selected { outline: 2px solid var(--lex); }
.edge-pill small,
.lex-pill small { color: var(--muted); font-weight: 700; }
.edge-pill button { min-height: 1.8rem; padding: 0.1rem 0.45rem; border-radius: 0.55rem; }

.canvas-wrap {
  min-height: 62vh;
  height: min(76vh, 900px);
  overflow: hidden;
  position: relative;
}
#graphSvg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  --og-font-scale: 1;
}

/* v4450: canvas/boom links, projectievenster rechts. */
.canvas-wrap { grid-column: 1; grid-row: 1; }
.side-panel { grid-column: 2; grid-row: 1; }
.grid-line { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grid-line.major { stroke: var(--grid-major); stroke-width: 1.25; }
.axis-line { stroke: color-mix(in srgb, var(--line), var(--text) 25%); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 6 6; }
.projection-frame { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.edge,
.relation-edge,
.tree-edge,
.lex-arc,
.log-edge {
  fill: none;
  stroke: var(--edge);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.relation-edge { stroke-dasharray: 6 4; opacity: 0.82; }
.lex-axis { stroke: var(--lex); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.lex-arc { stroke: var(--lex); opacity: 0.7; }
.tree-edge { stroke: var(--synt); }
.log-edge { stroke: var(--log); stroke-dasharray: 6 4; }
.node-circle {
  fill: var(--node);
  stroke: var(--node-line);
  stroke-width: 2.3;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.node-circle.selected { stroke: var(--current); stroke-width: 3.8; }
.node-circle.lex { stroke: var(--lex); }
.node-circle.synt { stroke: var(--synt); }
.node-circle.log { stroke: var(--log); }
.synthetic-node {
  fill: color-mix(in srgb, var(--panel), var(--synt) 10%);
  stroke: var(--synt);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.log-role-box,
.lex-slot-box,
.synt-box {
  fill: color-mix(in srgb, var(--panel), var(--bg) 35%);
  stroke: var(--line);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}
.node-label,
.role-label,
.axis-label,
.box-label {
  fill: var(--text);
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.node-sub-label,
.edge-label,
.rule-label {
  fill: var(--muted);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.edge-label-bg {
  fill: var(--panel);
  opacity: 0.85;
}
.drag-target { cursor: grab; }
.dragging { cursor: grabbing; }

.axis-band {
  fill: color-mix(in srgb, var(--panel), var(--bg) 38%);
  stroke: var(--line);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 5;
}
.axis-label-bg {
  fill: var(--panel);
  opacity: 0.92;
}
.projection-line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 5;
  opacity: 0.62;
}
.projection-line.lex { stroke: var(--lex); }
.projection-line.synt { stroke: var(--synt); }
.projection-line.log { stroke: var(--log); }

.projection-axis-line,
.logical-axis {
  fill: none;
  stroke-width: 2.3;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
.projection-axis-line.synt { stroke: var(--synt); }
.projection-axis-line.log { stroke: var(--log); }
.logical-axis.synt { stroke: var(--synt); }
.logical-axis.log { stroke: var(--log); }
.logical-projection-line {
  opacity: 0.72;
  stroke-dasharray: 4 4;
}
.logical-order-box {
  fill: color-mix(in srgb, var(--panel), var(--bg) 26%);
  stroke: var(--log);
  stroke-width: 1.65;
  vector-effect: non-scaling-stroke;
}
.logical-minor-box {
  fill: color-mix(in srgb, var(--log), var(--panel) 86%);
  stroke-dasharray: 6 3;
}
.logical-major-box {
  fill: color-mix(in srgb, var(--panel), var(--bg) 18%);
}
.logical-order-label,
.logical-order-sub {
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.logical-order-label {
  fill: var(--text);
  font-size: calc(13px * var(--og-font-scale));
  font-weight: 900;
}
.logical-order-sub {
  fill: var(--muted);
  font-size: calc(11px * var(--og-font-scale));
  font-weight: 800;
}
.grid-axis {
  stroke: color-mix(in srgb, var(--line), var(--text) 18%);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 5;
}
.source-free-node .node-circle { cursor: grab; }
.source-free-node .node-circle:active { cursor: grabbing; }

.free-slot-box {
  fill: color-mix(in srgb, var(--panel), var(--bg) 50%);
  stroke: var(--line);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 5;
  opacity: 0.92;
}

.text-panel details { margin-top: 0.7rem; }
.text-panel summary { cursor: pointer; font-weight: 800; margin-bottom: 0.35rem; }
.text-panel p + p { margin-top: 0.45rem; }

@media (max-width: 980px) {
  .toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .compact-actions { justify-content: flex-start; }
  .workspace { grid-template-columns: 1fr; }
  .side-panel { max-height: none; overflow: visible; }
  .canvas-wrap { height: 58vh; min-height: 24rem; }
}

@media (max-width: 640px) {
  .app-shell { padding: 0.55rem; }
  .app-header { align-items: flex-start; }
  .header-subtitle { font-size: 0.8rem; }
  .projection-tabs { grid-template-columns: repeat(2, 1fr); }
  .button-row button,
  .button-row .file-label,
  .button-row .button-link { flex: 1 1 auto; }
  .check-grid { grid-template-columns: 1fr; }
  .canvas-wrap { min-height: 22rem; }
}


.projection-line.orthogonal {
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
  stroke-linecap: square;
}

.syntax-rule-box {
  stroke-width: 1.6;
}

.axes-synt-rules .axis-label-bg,
.synt-rule-view .axis-label-bg {
  opacity: 0.96;
}


.tree-subbox {
  fill: color-mix(in srgb, var(--panel), transparent 25%);
  stroke: color-mix(in srgb, var(--line), var(--accent) 22%);
  stroke-width: 1.2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

.tree-subbox.root {
  stroke-width: 1.8;
  stroke-dasharray: none;
}

.tree-subbox.leaf {
  fill: color-mix(in srgb, var(--panel), var(--accent) 6%);
  stroke-dasharray: 3 5;
}

.tree-subbox-label {
  fill: var(--muted);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* v4380 redesign: free HOR/VER syntax-box placement, LEX second. */
.jan-subtree-box {
  fill: rgba(248, 250, 252, 0.62);
  stroke: #94a3b8;
  stroke-width: 1.3;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}
.jan-box-caption {
  fill: #475569;
  font-size: calc(13px * var(--og-font-scale));
  font-weight: 800;
  letter-spacing: .08em;
}
.syntax-tree-edge {
  stroke: #16a34a;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.tree-node text,
.lex-label,
.lex-local-label,
.rule-label,
.axis-title,
.slot-caption,
.lex-index {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.tree-node .node-circle,
.functional-node {
  fill: #f8fafc;
  stroke: #0f172a;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.tree-node.leaf-node .node-circle {
  stroke: #16a34a;
  stroke-width: 3.2;
}
.tree-node.selected .node-circle,
.tree-node.selected .synt-box {
  stroke: #ef4444;
  stroke-width: 4;
}
.node-main-label {
  fill: #0f172a;
  font-size: calc(18px * var(--og-font-scale));
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(248,250,252,.85);
  stroke-width: 4px;
}
.node-sub-label {
  fill: #475569;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 800;
  text-anchor: middle;
}
.category-box {
  fill: #f8fafc;
  stroke: #cbd5e1;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.box-label {
  fill: #0f172a;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: calc(16px * var(--og-font-scale));
  font-weight: 900;
}
.axis-title {
  fill: #0f172a;
  font-size: calc(14px * var(--og-font-scale));
  font-weight: 900;
  letter-spacing: .04em;
}
.graph-sentence-box {
  fill: color-mix(in srgb, var(--panel), #ffffff 12%);
  stroke: color-mix(in srgb, var(--text), var(--line) 70%);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.graph-sentence-text {
  fill: var(--text);
  font-size: calc(18px * var(--og-font-scale));
  font-weight: 950;
  letter-spacing: .025em;
  text-anchor: middle;
}
.lex-axis-line {
  stroke: var(--lex);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.projection-line.lex {
  stroke: var(--lex);
  stroke-width: 2;
  stroke-dasharray: 8 5;
  vector-effect: non-scaling-stroke;
}
.lex-slot-box,
.lex-local-slot,
.lex-free-slot,
.syntax-rule-box {
  fill: #f8fafc;
  stroke: #cbd5e1;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.lex-local-slot,
.lex-free-slot {
  stroke-dasharray: 8 5;
  fill: #fff7ed;
}
.lex-open-slot {
  fill: color-mix(in srgb, var(--lex), white 94%);
  stroke: var(--lex);
  stroke-dasharray: 4 6;
  opacity: .9;
}
.lex-open-slot-label {
  fill: var(--lex);
  letter-spacing: .08em;
}
.lex-open-slot-caption {
  fill: color-mix(in srgb, var(--lex), #334155 45%);
}
.comp-slot {
  stroke: #f97316;
}
.lex-label,
.lex-local-label {
  text-anchor: middle;
  font-size: calc(16px * var(--og-font-scale));
  font-weight: 900;
  fill: #0f172a;
}
.lex-local-label {
  fill: #9a3412;
}
.vertical-lex-letter {
  text-anchor: middle;
  dominant-baseline: middle;
}
.lex-oriented-content[data-vertical-lex-items="north"] .lex-label,
.lex-oriented-content[data-vertical-lex-items="south"] .lex-label,
.lex-oriented-content[data-vertical-lex-items="north"] .lex-local-label,
.lex-oriented-content[data-vertical-lex-items="south"] .lex-local-label {
  letter-spacing: 0;
}
.lex-oriented-content[data-lex-turn-density="comfortable"] .lex-label,
.lex-oriented-content[data-lex-turn-density="comfortable"] .lex-local-label { font-weight:760; }
.lex-oriented-content[data-lex-turn-density="compact"] .lex-label,
.lex-oriented-content[data-lex-turn-density="compact"] .lex-local-label {
  font-size:calc(15px * var(--og-font-scale));
  font-weight:680;
}
.lex-oriented-content[data-lex-turn-density="dense"] .lex-label,
.lex-oriented-content[data-lex-turn-density="dense"] .lex-local-label {
  font-size:calc(14px * var(--og-font-scale));
  font-weight:600;
}
.lex-oriented-content[data-lex-turn-density="compact"] .rule-label,
.lex-oriented-content[data-lex-turn-density="compact"] .axis-title { font-weight:700; }
.lex-oriented-content[data-lex-turn-density="dense"] .rule-label,
.lex-oriented-content[data-lex-turn-density="dense"] .axis-title {
  font-weight:620;
  letter-spacing:0;
}
.lex-index,
.slot-caption {
  fill: #64748b;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 800;
  text-anchor: middle;
}
.lex-order-item.local {
  border-style: dashed;
  color: #9a3412;
}
.functional-node {
  stroke: #7c3aed;
}

.role-box { stroke-dasharray: 5 4; }
.role-node .box-label { font-size: 0.86rem; letter-spacing: 0.05em; }

/* v4383: functional OGN must be visible as CLAUSE > role-boxes, not as pred-root triangle. */
.tree-node .synt-box.role-root-box,
.role-root-box {
  fill: #f5f3ff;
  stroke: #6d28d9;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.tree-node .synt-box.role-box,
.role-box {
  fill: #faf5ff;
  stroke: #8b5cf6;
  stroke-width: 2.0;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

/* v4383: make OGN functional role-box structure unmistakable. */
.role-root-box {
  fill: #ede9fe !important;
  stroke: #5b21b6 !important;
  stroke-width: 2.8 !important;
}
.role-box {
  fill: #f5f3ff !important;
  stroke: #7c3aed !important;
  stroke-width: 2.4 !important;
  stroke-dasharray: 7 4 !important;
}
.role-node .box-label {
  font-size: calc(15px * var(--og-font-scale)) !important;
  font-weight: 950 !important;
}

/* v4384: projection = horizontal mapping from source node to projection axis. */
.projection-line.horizontal {
  stroke-dasharray: 10 5;
  opacity: 0.78;
}
.lex-projection-slot {
  stroke-width: 2.2;
}


/* v4399: OGN topicalization/fronting slot inside syntax and functional sources. */
.ogn-topicalization-slot {
  fill: #ecfeff;
  stroke: #0891b2;
  stroke-width: 2.2;
  stroke-dasharray: 9 5;
  vector-effect: non-scaling-stroke;
  opacity: 0.96;
}
.ogn-slot-label {
  fill: #0e7490;
  font-size: calc(15px * var(--og-font-scale));
  font-weight: 950;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.topic-slot {
  stroke: #0891b2;
  fill: #ecfeff;
}
.ogn-slot-caption {
  fill: #0e7490;
}

/* v4399: example sentences are readable HTML-input; strong=subject, em=object. */
.input-sentence-tools {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sentence-preview {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.8rem;
  background: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}
.sentence-preview strong {
  font-weight: 950;
  color: #166534;
}
.sentence-preview em {
  font-style: italic;
  color: #7c2d12;
}

/* v4420: compact menu for layout density/fit and per-branch flip configuration. */
.view-config-grid,
.branch-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 12px;
  background: rgba(248, 250, 252, .72);
}
.mini-field span { font-size: 11px; }
.mini-field select { min-height: 34px; font-size: calc(12px * var(--og-font-scale)); }


.growth-controls {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel), var(--panel-2) 48%);
}
.growth-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 850;
  color: var(--text);
}
.growth-range {
  width: 100%;
  accent-color: var(--accent);
}
.growth-step-label {
  min-height: 1.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.growth-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.growth-buttons button {
  min-height: 2.05rem;
  padding: 0.2rem 0.35rem;
}


/* v4414: V2/Wissel on the LEX axis. */
.ogn-v2-slot {
  fill: #eff6ff;
  stroke: #2563eb;
  stroke-width: 2.2;
  stroke-dasharray: 9 5;
  vector-effect: non-scaling-stroke;
  opacity: 0.96;
}
.v2-slot {
  stroke: #2563eb;
  fill: #eff6ff;
}
.moved-slot {
  stroke: #1d4ed8;
  stroke-width: 2.8;
  fill: #dbeafe;
}
.lex-trace-tick {
  stroke: #94a3b8;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.lex-trace-label {
  fill: #64748b;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 850;
  text-anchor: end;
}
.lex-trace-label.east-axis-trace { text-anchor: start; }
.lex-trace-marker {
  pointer-events: none;
}
.lex-wissel-movement {
  pointer-events: none;
}
.lex-wissel-step-label {
  fill: #1e3a8a;
  font-size: calc(10px * var(--og-font-scale));
  font-weight: 900;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
  stroke-linejoin: round;
  text-anchor: middle;
}
.lex-wissel-line {
  stroke: #1d4ed8;
  stroke-width: 2.2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}
.lex-wissel-arrow {
  fill: #1d4ed8;
}
.wissel-label {
  fill: #1e3a8a;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 900;
}
.trace-projection {
  opacity: 0.55;
}


/* v4450: mobile stage-first UX.  The visual tree/projection stage comes first;
   projection controls sit left of the canvas, the rest follows below. */
.mobile-only { display: none; }

@media (max-width: 760px) {
  html, body { min-height: 100%; overflow-x: hidden; }
  body { font-size: 15px; }

  .app-header {
    padding: max(.52rem, env(safe-area-inset-top)) .62rem .48rem;
    gap: .45rem;
  }
  .eyebrow { font-size: .58rem; letter-spacing: .10em; }
  h1 { font-size: 1.02rem; }
  .version-tag { font-size: .62rem; }
  .header-subtitle { display: none; }

  .app-shell {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    padding: .38rem;
    gap: .45rem;
  }

  /* Top: boom/canvas links, projectie-window rechts. */
  .workspace {
    order: 0;
    display: grid;
    grid-template-columns: minmax(820px, 1fr) minmax(12.2rem, 34vw);
    grid-auto-rows: auto;
    align-items: stretch;
    gap: .45rem;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: .18rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .side-panel { display: contents; }
  .side-panel > .panel-card:first-child {
    grid-column: 2;
    grid-row: 1;
    max-height: 70dvh;
    min-height: 25rem;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .canvas-wrap {
    grid-column: 1;
    grid-row: 1;
    height: 70dvh;
    min-height: 25rem;
    max-height: 48rem;
    overflow: auto;
    border-radius: .82rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #graphSvg {
    width: 100%;
    min-width: 820px;
    height: 100%;
    min-height: 100%;
    touch-action: pan-x pan-y;
  }
  .canvas-wrap::before {
    content: "mobiel: boven = boom links · projectie rechts · veeg horizontaal";
    position: sticky;
    left: .45rem;
    top: .45rem;
    z-index: 3;
    display: inline-block;
    padding: .22rem .42rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel), transparent 8%);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    pointer-events: none;
  }

  .status-panel { order: 1; }
  .toolbar { order: 2; }
  .text-panel { order: 4; }

  .toolbar {
    display: flex;
    overflow-x: auto;
    align-items: stretch;
    gap: .45rem;
    padding: .48rem;
    border-radius: .82rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .toolbar .example-field { width: min(82vw, 26rem); }
  .input-sentence-tools { width: max-content; max-width: none; flex-wrap: nowrap; align-items: stretch; }
  .input-sentence-tools .button-link { white-space: nowrap; min-height: 2.25rem; }
  .compact-actions { flex-wrap: nowrap; justify-content: flex-start; }
  .compact-actions > * { white-space: nowrap; }

  .intro-panel { display: none; }

  .status-panel {
    padding: .55rem .62rem;
    border-radius: .82rem;
  }
  .title-line { font-size: .92rem; margin-bottom: .12rem; }
  .meta-line { font-size: .74rem; max-height: 2.3em; overflow: hidden; }
  .sentence-preview { font-size: .92rem; padding: .35rem .5rem; margin-top: .25rem; }
  .action-feedback { font-size: .74rem; padding: .38rem .48rem; margin-top: .35rem; }

  .side-panel > .panel-card:not(:first-child) {
    grid-column: 1 / -1;
  }
  .panel-card { padding: .58rem .62rem; border-radius: .82rem; }
  .panel-card h2 { font-size: .9rem; margin-bottom: .35rem; }

  .projection-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: .28rem;
    margin-bottom: .45rem;
  }
  .projection-tab {
    min-width: 0;
    min-height: 2rem;
    font-size: .74rem;
    padding: .22rem .4rem;
  }
  .field { font-size: .76rem; }
  .field input,
  .field select { min-height: 2.05rem; border-radius: .62rem; }
  .branch-config-grid,
  .view-config-grid {
    grid-template-columns: 1fr;
    padding: .48rem;
    gap: .38rem;
  }
  .check-grid { grid-template-columns: 1fr 1fr; font-size: .78rem; }
  .inline-help, .muted-box, .text-panel p { font-size: .76rem; line-height: 1.35; }
  .growth-controls { padding: .48rem; gap: .32rem; }
  .growth-buttons { flex-wrap: nowrap; }
  .growth-buttons button { min-height: 1.95rem; padding-inline: .42rem; }

  .node-editor, .editor-card, .lex-card, .relation-card { gap: .4rem; }
  .two-cols { grid-template-columns: 1fr; }
  .lex-order-list, .edge-list { max-height: 8rem; }

  .text-panel { padding: .58rem .62rem; border-radius: .82rem; }
  .text-panel details[open] { max-height: 8rem; overflow: auto; }
}

@media (max-width: 420px) {
  .app-shell { padding: .3rem; }
  .workspace { grid-template-columns: minmax(760px, 1fr) 10.8rem; }
  .side-panel > .panel-card:first-child,
  .canvas-wrap { height: 72dvh; min-height: 24rem; }
  #graphSvg { min-width: 760px; }
  .check-grid { grid-template-columns: 1fr 1fr; }
  button, .file-label, .button-link { min-height: 2.12rem; padding: .28rem .48rem; font-size: .78rem; }
}


/* v4450: stage-first layout for every platform.
   Het boom/LEX-canvas staat links, het projectievenster rechts.
   Alle overige controls en tekst volgen daaronder. */
.app-shell {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: min(1600px, 100%);
}

.workspace {
  order: 0;
  display: grid;
  grid-template-columns: minmax(760px, 1fr) minmax(18rem, 25rem);
  grid-auto-rows: auto;
  align-items: stretch;
  gap: .75rem;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: .15rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.status-panel { order: 1; }
.toolbar { order: 2; }
.intro-panel { order: 3; }
.text-panel { order: 4; }

.side-panel {
  display: contents;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.side-panel > .panel-card:first-child {
  grid-column: 2;
  grid-row: 1;
  min-height: 34rem;
  max-height: min(74vh, 880px);
  overflow: auto;
  overscroll-behavior: contain;
}

.canvas-wrap {
  grid-column: 1;
  grid-row: 1;
  min-height: 34rem;
  height: min(74vh, 880px);
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#graphSvg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: 100%;
  min-height: 100%;
  touch-action: pan-x pan-y;
}

.side-panel > .panel-card:not(:first-child) {
  grid-column: 1 / -1;
}

/* Editors under the stage: readable row of cards on wide screens. */
.side-panel > .editor-card,
.side-panel > .lex-card,
.side-panel > .relation-card {
  min-width: 0;
}

@media (min-width: 980px) {
  .side-panel > .editor-card,
  .side-panel > .lex-card,
  .side-panel > .relation-card {
    grid-column: auto;
  }
  .side-panel > .editor-card { grid-column: 1 / 2; }
  .side-panel > .lex-card { grid-column: 2 / 3; }
  .side-panel > .relation-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .app-shell {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    padding: .38rem;
    gap: .45rem;
  }

  .workspace {
    order: 0;
    grid-template-columns: minmax(820px, 1fr) minmax(12.2rem, 34vw);
    gap: .45rem;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: .18rem;
  }

  .side-panel > .panel-card:first-child {
    min-height: 25rem;
    max-height: 70dvh;
  }

  .canvas-wrap {
    height: 70dvh;
    min-height: 25rem;
    max-height: 48rem;
  }

  #graphSvg { min-width: 820px; }

  .status-panel { order: 1; }
  .toolbar { order: 2; }
  .intro-panel { order: 3; }
  .text-panel { order: 4; }
}

@media (max-width: 420px) {
  .workspace { grid-template-columns: minmax(760px, 1fr) 10.8rem; }
  .side-panel > .panel-card:first-child,
  .canvas-wrap { height: 72dvh; min-height: 24rem; }
  #graphSvg { min-width: 760px; }
}


/* v4450: boom + LEX-as zijn beweeglijk binnen het canvas. */
.canvas-wrap {
  cursor: grab;
}
.canvas-wrap:active,
.canvas-wrap.is-panning {
  cursor: grabbing;
}
#graphSvg {
  cursor: grab;
  touch-action: none;
}
#graphSvg:active,
#graphSvg.is-panning {
  cursor: grabbing;
}
#graphSvg:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: -3px;
}
.view-pan-hint {
  fill: #64748b;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 800;
}


/* v4450: viewer-first UI cleanup */
.toolbar {
  grid-template-columns: minmax(14rem, 22rem) minmax(18rem, 1fr) auto;
}
.input-sentence-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.panel-card > .field:not(.example-field),
.panel-card .two-cols > .field,
.branch-config-grid .field,
.view-config-grid .field {
  grid-template-columns: minmax(6.8rem, max-content) minmax(7.5rem, 1fr);
  align-items: center;
  column-gap: 0.55rem;
}
.panel-card > .field:not(.example-field) span,
.branch-config-grid .field span,
.view-config-grid .field span {
  white-space: nowrap;
}
.panel-card select { width: 100%; min-width: 7.5rem; }
.example-field select { min-width: 14rem; }
.branch-config-grid,
.view-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.42rem;
}
.relation-heading {
  font-weight: 800;
  background: color-mix(in srgb, var(--panel), var(--accent) 10%);
}
.edge-item {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.38rem 0.48rem;
  background: var(--panel-2);
  font-size: 0.83rem;
}
@media (max-width: 760px) {
  .toolbar { grid-template-columns: 1fr; }
  .panel-card > .field:not(.example-field),
  .panel-card .two-cols > .field,
  .branch-config-grid .field,
  .view-config-grid .field {
    grid-template-columns: 1fr;
  }
  .example-field select { min-width: 0; }
}


/* v4450: vaste projectie- en groeibalk boven de boom, op alle platforms. */
.projection-sticky-bar {
  order: 0;
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  gap: .75rem;
  align-items: start;
  padding: .48rem .58rem;
  border: 1px solid var(--line);
  border-radius: 0 0 1rem 1rem;
  background: color-mix(in srgb, var(--panel), white 4%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
  backdrop-filter: blur(10px);
}

.projection-sticky-bar .top-projection-tabs {
  grid-column: 1;
  min-width: 0;
}

.projection-sticky-bar .top-growth-wrap {
  grid-column: 1;
  min-width: 0;
  width: 100%;
}

.projection-sticky-bar .projection-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin: 0;
}

.projection-sticky-bar .projection-tab {
  min-width: 5.2rem;
  min-height: 2.42rem;
  padding: .36rem .68rem;
  font-size: .86rem;
  line-height: 1.05;
}

.projection-sticky-bar .top-growth-controls {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: .42rem .5rem;
  border-radius: .8rem;
  display: grid;
  grid-template-columns: max-content minmax(9rem, 1fr) max-content;
  gap: .38rem .55rem;
  align-items: center;
  background: color-mix(in srgb, var(--panel-2), var(--accent) 5%);
}

.projection-sticky-bar .growth-toggle {
  white-space: nowrap;
  font-weight: 900;
}

.projection-sticky-bar .growth-range {
  width: 100%;
  min-width: 8rem;
}

.projection-sticky-bar .growth-step-label {
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 900;
}

.projection-sticky-bar .growth-buttons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: .35rem;
}

.projection-sticky-bar .growth-buttons button {
  min-height: 2rem;
  padding: .24rem .68rem;
}

.projection-sticky-bar .top-growth-controls > .inline-help {
  display: none;
}

.workspace { order: 1; }
.status-panel { order: 2; }
.toolbar { order: 3; }
.intro-panel { order: 4; }
.text-panel { order: 5; }

.sticky-note {
  background: color-mix(in srgb, var(--panel-2), var(--accent) 7%);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .42rem .52rem;
}

@media (max-width: 900px) {
  .projection-sticky-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: .42rem;
    padding: .38rem .42rem;
    border-radius: 0 0 .82rem .82rem;
  }
  .projection-sticky-bar .projection-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .08rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .projection-sticky-bar .projection-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 4.9rem;
  }
  .projection-sticky-bar .top-growth-controls {
    grid-template-columns: max-content minmax(7rem, 1fr);
  }
  .projection-sticky-bar .growth-step-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .projection-sticky-bar {
    top: 0;
    max-height: 44dvh;
    overflow: auto;
  }
  .projection-sticky-bar .projection-tab {
    min-height: 2.15rem;
    min-width: 4.4rem;
    padding: .28rem .48rem;
    font-size: .78rem;
  }
  .projection-sticky-bar .top-growth-controls {
    grid-template-columns: 1fr;
    gap: .28rem;
  }
  .projection-sticky-bar .growth-buttons button {
    flex: 1 1 auto;
    padding-inline: .38rem;
  }
}


/* v4450: compacte Groei-bediening. De voortgangsbalk is kort; Play/pijlen staan links ervan.
   Belangrijk voor portrait mobile: geen hoge sticky balk en geen full-width range. */
.projection-sticky-bar .top-growth-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .32rem .42rem;
  width: fit-content;
  max-width: 100%;
  padding: .34rem .42rem;
}

.projection-sticky-bar .growth-toggle {
  flex: 0 0 auto;
  font-size: .82rem;
}

.projection-sticky-bar .growth-buttons {
  order: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: .22rem;
}

.projection-sticky-bar .growth-buttons button {
  min-height: 1.82rem;
  min-width: 2.25rem;
  padding: .18rem .42rem;
  font-size: .82rem;
}

.projection-sticky-bar .growth-range {
  order: 3;
  flex: 0 1 clamp(7rem, 18vw, 12rem);
  width: clamp(7rem, 18vw, 12rem);
  min-width: 7rem;
}

.projection-sticky-bar .growth-step-label {
  order: 4;
  flex: 0 1 18rem;
  min-width: 0;
  max-width: min(18rem, 45vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
}

.projection-sticky-bar .top-growth-controls > .inline-help {
  display: none;
}

@media (min-width: 901px) {
  .projection-sticky-bar .top-growth-wrap {
    display: flex;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .projection-sticky-bar .top-growth-controls {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .projection-sticky-bar .growth-step-label {
    max-width: 13rem;
  }
}

@media (max-width: 520px) {
  .projection-sticky-bar {
    max-height: none;
    overflow: visible;
  }
  .projection-sticky-bar .top-growth-controls {
    gap: .24rem;
    padding: .28rem .34rem;
  }
  .projection-sticky-bar .growth-toggle {
    font-size: .76rem;
  }
  .projection-sticky-bar .growth-buttons button {
    min-width: 2rem;
    min-height: 1.7rem;
    padding-inline: .32rem;
  }
  .projection-sticky-bar .growth-range {
    flex: 0 0 6.8rem;
    width: 6.8rem;
    min-width: 6.8rem;
  }
  .projection-sticky-bar .growth-step-label {
    flex: 0 0 5.8rem;
    max-width: 5.8rem;
  }
}

/* v4450: mobiele viewer-first bediening */
.mobile-bottom-nav,
.mobile-growth-nav,
.mobile-sheet,
.mobile-sheet-backdrop {
  display: none;
}

.mobile-sheet h3 {
  margin: 0 0 .45rem;
  font-size: .9rem;
}

.mobile-sheet-button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--panel);
  color: var(--text);
  min-height: 2.75rem;
  padding: .45rem .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(8.1rem + env(safe-area-inset-bottom));
  }

  .app-header {
    padding: max(.58rem, env(safe-area-inset-top)) .65rem .55rem;
  }

  .app-header h1 {
    font-size: 1rem;
  }

  .eyebrow {
    font-size: .62rem;
    letter-spacing: .11em;
  }

  .header-subtitle,
  .projection-sticky-bar,
  .toolbar,
  .intro-panel {
    display: none;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: .34rem;
    gap: .38rem;
  }

  .workspace {
    order: 0;
    display: block;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .canvas-wrap {
    width: 100%;
    height: min(68dvh, 44rem);
    min-height: 24rem;
    max-height: none;
    overflow: hidden;
    border-radius: .85rem;
  }

  #graphSvg {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    touch-action: none;
  }

  .side-panel {
    display: none;
  }

  .status-panel {
    order: 1;
    border-radius: .85rem;
    padding: .58rem .64rem;
  }

  .title-line {
    font-size: .9rem;
  }

  .meta-line,
  .action-feedback,
  .sentence-preview {
    font-size: .78rem;
  }

  .text-panel {
    order: 2;
    border-radius: .85rem;
    padding: .62rem .7rem;
  }

  .text-panel details:not([open]) {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: max(.5rem, env(safe-area-inset-bottom));
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .38rem;
    padding: .42rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel), white 7%);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .26);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom-nav button {
    min-height: 2.9rem;
    padding: .35rem .25rem;
    border-radius: .78rem;
    font-size: .86rem;
  }

  .mobile-sheet-backdrop:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: block;
    background: rgba(15, 23, 42, .36);
  }

  .mobile-sheet:not(.hidden) {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: calc(5.15rem + env(safe-area-inset-bottom));
    z-index: 320;
    display: block;
    max-height: min(76dvh, 38rem);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 1.05rem;
    background: var(--panel);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .34);
    padding: .65rem;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-sheet-handle {
    width: 2.6rem;
    height: .28rem;
    border-radius: 999px;
    background: var(--line);
    margin: 0 auto .55rem;
  }

  .mobile-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .7rem;
  }

  .mobile-sheet-header h2 {
    margin: 0;
  }

  .mobile-sheet-section {
    border-top: 1px solid var(--line);
    padding-top: .65rem;
    margin-top: .65rem;
  }

  .mobile-projection-grid,
  .mobile-action-grid,
  .mobile-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
  }

  .mobile-projection-grid button,
  .mobile-action-grid button,
  .mobile-link-grid a,
  .mobile-sheet-button {
    min-height: 2.75rem;
    border-radius: .8rem;
    font-size: .86rem;
    text-align: center;
  }

  .mobile-projection-grid button.active {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
  }

  .mobile-link-grid a {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .55rem;
    font-weight: 800;
    text-decoration: none;
  }

  .mobile-sheet-note {
    margin-top: .7rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .app-header {
    display: none;
  }
  .canvas-wrap {
    height: 72dvh;
    min-height: 18rem;
  }
  .status-panel,
  .text-panel {
    font-size: .82rem;
  }
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* v4457: portrait mobile had no visible Play because the sticky desktop growth bar is hidden.
   This fixed mini-bar exposes growth reset/step/play directly above the mobile bottom nav. */
.mobile-growth-step-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .mobile-growth-nav {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    z-index: 295;
    display: grid;
    grid-template-columns: 2.45rem 2.45rem minmax(3.75rem, .72fr) 2.45rem minmax(0, 1fr);
    gap: .28rem;
    align-items: stretch;
    padding: .34rem .38rem;
    border: 1px solid var(--line);
    border-radius: .95rem;
    background: color-mix(in srgb, var(--panel), white 8%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
    backdrop-filter: blur(12px);
  }

  .mobile-growth-nav button {
    min-height: 2.35rem;
    padding: .28rem .18rem;
    border-radius: .74rem;
    font-size: .82rem;
  }

  #mobileGrowthPlayButton {
    font-weight: 900;
  }
}

@media (max-width: 360px) {
  .mobile-growth-nav {
    grid-template-columns: 2.15rem 2.15rem minmax(3.3rem, .7fr) 2.15rem minmax(0, 1fr);
    gap: .2rem;
  }
  .mobile-growth-step-label { font-size: .72rem; }
}


/* v4457: mobile portrait en landscape gebruiken dezelfde bovenbalk voor Groei/Play.
   De aparte portrait-growthbalk boven de onderbalk blijft in DOM voor compatibiliteit,
   maar is visueel uitgeschakeld. */
@media (max-width: 760px) {
  body {
    padding-bottom: calc(4.7rem + env(safe-area-inset-bottom));
  }

  .header-subtitle,
  .toolbar,
  .intro-panel {
    display: none;
  }

  .projection-sticky-bar {
    order: 0;
    display: grid;
    position: sticky;
    top: 0;
    z-index: 285;
    margin: 0;
    max-height: none;
    overflow: visible;
  }

  .workspace {
    order: 1;
  }

  .status-panel {
    order: 2;
  }

  .text-panel {
    order: 3;
  }

  .mobile-growth-nav {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .projection-sticky-bar .projection-tab {
    min-width: 4.15rem;
    font-size: .74rem;
  }

  .projection-sticky-bar .growth-step-label {
    flex: 0 0 5.2rem;
    max-width: 5.2rem;
  }
}

/* v4457: zin-menu ook zichtbaar in mobile portrait; FIT expliciet als viewbox-correctie. */
.mobile-sentence-bar {
  display: none;
}

@media (max-width: 760px) {
  .mobile-sentence-bar {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .42rem .5rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--panel);
  }

  .mobile-sentence-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .42rem;
    min-width: 0;
    font-weight: 900;
    color: var(--muted);
    font-size: .76rem;
  }

  .mobile-sentence-field select {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    border-radius: .72rem;
    font-size: .86rem;
    font-weight: 850;
  }

  .mobile-fit-note {
    white-space: nowrap;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
  }

  .workspace { order: 2; }
  .status-panel { order: 3; }
  .text-panel { order: 4; }

  .mobile-bottom-nav button:disabled {
    opacity: .42;
    cursor: default;
  }
}

@media (max-width: 390px) {
  .mobile-sentence-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }
  .mobile-fit-note {
    font-size: .68rem;
  }
}

/* v4457: desktop krijgt hetzelfde expliciete Zin-menu als mobile. */
.desktop-sentence-field {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr);
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  max-width: 32rem;
  color: var(--muted);
  font-weight: 900;
  font-size: .82rem;
}
.desktop-sentence-field select {
  min-height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .25rem .55rem;
  font-weight: 800;
}
.projected-rule-box {
  fill: #f8fafc;
  stroke: #94a3b8;
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
}
.projected-functional-rule-box {
  fill: #f8fafc;
  stroke: #a78bfa;
}
.projected-rule-label {
  font-size: calc(13px * var(--og-font-scale));
  font-weight: 900;
  text-anchor: middle;
}
.projected-rule-line {
  opacity: .72;
}
@media (max-width: 760px) {
  .desktop-sentence-field { display: none; }
}

.logical-order-badge { opacity: 0.98; }

.logical-order-badge-interactive {
  stroke-width: 2.35;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
}
.logical-badge-group.clickable:hover .logical-order-badge,
.logical-badge-group.clickable:hover .logical-order-badge-interactive {
  filter: brightness(0.98);
  stroke-width: 2.4;
}
.logical-flip-hint {
  font-size: calc(11px * var(--og-font-scale));
  font-weight: 900;
}


.logical-badge-group.clickable,
.logical-badge-group.clickable * {
  pointer-events: auto;
}
.logical-badge-group.clickable {
  cursor: pointer;
}

.logical-source-line {
  stroke-dasharray: 6 4;
  opacity: 0.88;
}

.logical-order-badge-label {
  font-size: calc(15px * var(--og-font-scale));
  font-weight: 950;
}
.logical-order-badge-sub {
  font-size: calc(10px * var(--og-font-scale));
  font-weight: 900;
}

/* v4504: mobile portrait stage-first. Het gridvenster staat standaard helemaal bovenaan.
   Portret-menu-ruimte is configureerbaar: 0, 1 of 2 menuhoogtes; standaard 0. */
.mobile-sheet-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  font-weight: 900;
  color: var(--muted);
  font-size: .82rem;
}
.mobile-sheet-field select {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid var(--line);
  border-radius: .78rem;
  background: var(--panel);
  color: var(--text);
  padding: .35rem .55rem;
  font-weight: 850;
}

@media (max-width: 760px) and (orientation: portrait) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    padding-top: 0 !important;
    padding-bottom: calc(4.85rem + env(safe-area-inset-bottom));
  }

  .app-header,
  .projection-sticky-bar,
  .mobile-sentence-bar,
  .toolbar,
  .intro-panel {
    display: none !important;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--portrait-menu-reserve, 0px) .22rem .28rem;
    gap: .28rem;
  }

  .workspace {
    order: 0 !important;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .canvas-wrap {
    width: 100%;
    height: var(--mobile-fit-height, min(52dvh, 32rem));
    min-height: 0;
    max-height: calc(100dvh - var(--portrait-menu-reserve, 0px) - 5.35rem - env(safe-area-inset-bottom));
    margin: 0;
    overflow: hidden;
    border-radius: .72rem;
  }

  .canvas-wrap::before {
    content: none !important;
    display: none !important;
  }

  #graphSvg {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: block;
    touch-action: none;
  }

  .side-panel {
    display: none !important;
  }

  .status-panel {
    order: 1 !important;
  }

  .text-panel {
    order: 2 !important;
  }
}


/* v4504: portrait definitief grid-eerst. Geen menu of reserve boven het grid;
   eventuele portret-menu-ruimte komt onder het gridvenster. */
@media (max-width: 760px) and (orientation: portrait) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    padding-top: 0 !important;
    padding-bottom: calc(4.85rem + env(safe-area-inset-bottom)) !important;
  }

  .app-header {
    display: none !important;
  }

  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 .22rem .28rem !important;
    gap: .28rem !important;
  }

  .workspace {
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 var(--portrait-menu-reserve, 0px) !important;
    overflow: visible !important;
  }

  .canvas-wrap {
    width: 100% !important;
    height: var(--mobile-fit-height, min(52dvh, 32rem)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--portrait-menu-reserve, 0px) - 5.35rem - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: .72rem !important;
  }

  .canvas-wrap::before {
    content: none !important;
    display: none !important;
  }

  #graphSvg {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    touch-action: none !important;
  }

  .side-panel {
    display: none !important;
  }

  .projection-sticky-bar,
  .mobile-sentence-bar,
  .toolbar,
  .status-panel,
  .text-panel {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin-top: .28rem !important;
  }

  .projection-sticky-bar {
    order: 1 !important;
    display: grid !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-sentence-bar {
    order: 2 !important;
    display: grid !important;
  }

  .toolbar {
    order: 3 !important;
    display: flex !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    gap: .45rem !important;
    padding: .48rem !important;
    border-radius: .82rem !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .toolbar > * {
    flex: 0 0 auto !important;
  }

  .status-panel {
    order: 4 !important;
  }

  .text-panel {
    order: 5 !important;
  }

  .intro-panel {
    display: none !important;
  }
}


/* v4504: harde portrait-correctie. De browser kan in portrait breder dan 760px
   rapporteren; daarom gebruikt JS body.portrait-grid-first. In die modus mag
   niets boven het gridvenster staan. Alle menu's komen eronder. */
body.portrait-grid-first {
  padding-top: 0 !important;
  padding-bottom: calc(4.85rem + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
}
body.portrait-grid-first .app-header,
body.portrait-grid-first .intro-panel {
  display: none !important;
}
body.portrait-grid-first .app-shell {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 .22rem .28rem !important;
  gap: .28rem !important;
}
body.portrait-grid-first .workspace {
  order: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 var(--portrait-menu-reserve, 0px) !important;
  overflow: visible !important;
}
body.portrait-grid-first .canvas-wrap {
  width: 100% !important;
  height: var(--mobile-fit-height, min(52dvh, 32rem)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--portrait-menu-reserve, 0px) - 5.35rem - env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: .72rem !important;
}
body.portrait-grid-first .canvas-wrap::before {
  content: none !important;
  display: none !important;
}
body.portrait-grid-first #graphSvg {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  touch-action: none !important;
}
body.portrait-grid-first .side-panel {
  display: none !important;
}
body.portrait-grid-first .projection-sticky-bar,
body.portrait-grid-first .mobile-sentence-bar,
body.portrait-grid-first .toolbar,
body.portrait-grid-first .status-panel,
body.portrait-grid-first .text-panel {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin-top: .28rem !important;
}
body.portrait-grid-first .projection-sticky-bar {
  order: 1 !important;
  display: grid !important;
  max-height: none !important;
  overflow: visible !important;
}
body.portrait-grid-first .mobile-sentence-bar {
  order: 2 !important;
  display: grid !important;
}
body.portrait-grid-first .toolbar {
  order: 3 !important;
  display: flex !important;
  overflow-x: auto !important;
  align-items: stretch !important;
  gap: .45rem !important;
  padding: .48rem !important;
  border-radius: .82rem !important;
  -webkit-overflow-scrolling: touch !important;
}
body.portrait-grid-first .toolbar > * {
  flex: 0 0 auto !important;
}
body.portrait-grid-first .status-panel { order: 4 !important; }
body.portrait-grid-first .text-panel { order: 5 !important; }


/* v4504: grid-first geldt op alle platforms, niet alleen mobile/portrait.
   Niets staat nog boven het gridvenster: projectiekeuze, zinmenu, groei/play,
   toolbar, status en documentatie komen onder het canvas. */
body.grid-first-all,
body {
  display: flex !important;
  flex-direction: column !important;
}
body.grid-first-all .app-shell,
.app-shell {
  order: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: min(1600px, 100%) !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
}
body.grid-first-all .app-header,
.app-header {
  order: 90 !important;
  margin-top: .55rem !important;
}
body.grid-first-all .workspace,
.workspace {
  order: 0 !important;
}
body.grid-first-all .projection-sticky-bar,
.projection-sticky-bar {
  order: 1 !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin-top: .45rem !important;
  border-radius: 1rem !important;
}
body.grid-first-all .mobile-sentence-bar,
.mobile-sentence-bar {
  order: 2 !important;
}
body.grid-first-all .toolbar,
.toolbar {
  order: 3 !important;
}
body.grid-first-all .status-panel,
.status-panel {
  order: 4 !important;
}
body.grid-first-all .intro-panel,
.intro-panel {
  order: 5 !important;
}
body.grid-first-all .text-panel,
.text-panel {
  order: 6 !important;
}
body.grid-first-all .canvas-wrap,
.canvas-wrap {
  height: var(--mobile-fit-height, min(74vh, 880px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 3.5rem) !important;
  width: 100% !important;
  max-width: min(100%, var(--stage-fit-width, 100%)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.grid-first-all #graphSvg,
#graphSvg {
  height: 100% !important;
}

/* v4504: benoemde meerkeuze voor menu's boven het grid.
   Standaard: geen enkel menu boven het grid. Alle benoemde menu's kunnen boven het grid. */
.top-menu-choice-field {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .62rem .68rem .58rem;
  display: grid;
  gap: .42rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 35%);
}
.top-menu-choice-field legend {
  padding: 0 .28rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
.top-menu-choice-field label {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .86rem;
  color: var(--text);
  font-weight: 800;
  line-height: 1.25;
}
.top-menu-choice-field input[type="checkbox"] {
  margin-top: .1rem;
}
.top-menu-choice-field input[type="checkbox"]:disabled + span,
.top-menu-choice-field label:has(input:disabled) {
  opacity: .55;
}
.top-menu-choice-count {
  color: var(--accent);
  font-weight: 950;
}
.top-menu-choice-help {
  margin: .1rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.mobile-top-menu-choice-field {
  border-radius: .85rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 30%);
}

/* Maak de drie delen uit de oude sticky bar afzonderlijk plaatsbaar rond het grid. */
body.grid-first-all .projection-sticky-bar,
.projection-sticky-bar,
body.grid-first-all .projection-sticky-bar .top-projection-tabs,
.projection-sticky-bar .top-projection-tabs,
body.grid-first-all .projection-sticky-bar .top-growth-wrap,
.projection-sticky-bar .top-growth-wrap {
  display: contents !important;
}
body.grid-first-all .workspace,
.workspace {
  order: 0 !important;
}
body.grid-first-all .projection-tabs,
.projection-tabs {
  order: 10 !important;
  margin-top: .45rem !important;
}
body.grid-first-all .desktop-sentence-field,
.desktop-sentence-field,
body.grid-first-all .mobile-sentence-bar,
.mobile-sentence-bar {
  order: 11 !important;
  margin-top: .45rem !important;
}
body.grid-first-all .top-growth-controls,
.top-growth-controls {
  order: 12 !important;
  margin-top: .45rem !important;
}
body.grid-first-all .toolbar,
.toolbar {
  order: 13 !important;
  margin-top: .45rem !important;
}
body.grid-first-all .status-panel,
.status-panel { order: 14 !important; }
body.grid-first-all .intro-panel,
.intro-panel { order: 15 !important; }
body.grid-first-all .text-panel,
.text-panel { order: 16 !important; }

body.top-menu-projection .projection-tabs,
html.top-menu-projection .projection-tabs {
  order: -40 !important;
  margin: 0 0 .45rem !important;
}
body.top-menu-sentence .desktop-sentence-field,
html.top-menu-sentence .desktop-sentence-field,
body.top-menu-sentence .mobile-sentence-bar,
html.top-menu-sentence .mobile-sentence-bar {
  order: -30 !important;
  margin: 0 0 .45rem !important;
}
body.top-menu-play .top-growth-controls,
html.top-menu-play .top-growth-controls {
  order: -20 !important;
  margin: 0 0 .45rem !important;
}
body.top-menu-tools .toolbar,
html.top-menu-tools .toolbar {
  order: -10 !important;
  margin: 0 0 .45rem !important;
}

body.grid-first-all .projection-tabs,
body.grid-first-all .desktop-sentence-field,
body.grid-first-all .mobile-sentence-bar,
body.grid-first-all .top-growth-controls,
body.grid-first-all .toolbar {
  width: min(100%, 1600px);
  align-self: stretch;
}

/* v4504: configureerbare vrije LEX-slots op de LEX-as. */
.lex-config-free-slot {
  fill: color-mix(in srgb, var(--lex), var(--panel) 84%);
  stroke: var(--lex);
  stroke-width: 1.8;
  stroke-dasharray: 7 4;
}
.lex-free-slot-sub {
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  fill: var(--muted);
  font-size: calc(10px * var(--og-font-scale));
  font-weight: 850;
}
.mobile-sheet-field {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0;
  font-weight: 850;
}
.mobile-sheet-field select {
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .25rem .55rem;
  font-weight: 850;
}
.lex-extension-field {
  grid-column: 1 / -1;
}
.lex-extension-field label {
  display: inline-flex;
  margin-right: .55rem;
  margin-bottom: .35rem;
}
.lex-insertion-box {
  stroke-width: 2.05;
  stroke-dasharray: 8 4;
}


/* v4504: portrait split tussen grid en rechter menu.
   Het grid gebruikt niet meer de volle breedte als dat niet nodig is;
   het rechter menu blijft zichtbaar en de grens is sleepbaar/touchbaar. */
.pane-splitter {
  display: none;
}
body.portrait-grid-first .workspace {
  display: grid !important;
  grid-template-columns: minmax(96px, var(--stage-pane-width, 40vw)) var(--pane-splitter-width, 18px) minmax(12rem, var(--side-pane-width, 56vw)) !important;
  grid-template-rows: auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
body.portrait-grid-first .canvas-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: .72rem 0 0 .72rem !important;
}
body.portrait-grid-first #graphSvg {
  width: 100% !important;
  min-width: 0 !important;
}
body.portrait-grid-first .pane-splitter {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: var(--pane-splitter-width, 12px) !important;
  min-width: 12px !important;
  height: var(--mobile-fit-height, 52dvh) !important;
  align-self: stretch !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--line), transparent 35%) 0 1px,
    color-mix(in srgb, var(--accent), var(--panel) 45%) 1px 11px,
    color-mix(in srgb, var(--line), transparent 35%) 11px 12px);
  cursor: ew-resize !important;
  touch-action: none !important;
  z-index: 7 !important;
  position: relative !important;
}
body.portrait-grid-first .pane-splitter::before {
  content: "↔";
  position: sticky;
  top: .42rem;
  display: block;
  width: 100%;
  padding-top: .2rem;
  color: var(--bg);
  font-size: .68rem;
  font-weight: 950;
  text-align: center;
  pointer-events: none;
}
body.portrait-grid-first .pane-splitter.is-dragging,
body.portrait-grid-first .pane-splitter:hover {
  background: var(--accent) !important;
}
body.portrait-grid-first .side-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--mobile-fit-height, 52dvh) !important;
  max-height: var(--mobile-fit-height, 52dvh) !important;
  overflow: auto !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 8%) !important;
  border: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-radius: 0 .72rem .72rem 0 !important;
  padding: .32rem !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
body.portrait-grid-first .side-panel > .panel-card {
  display: none !important;
}
body.portrait-grid-first .side-panel > .panel-card:first-child {
  display: grid !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: .46rem !important;
  border-radius: .66rem !important;
  gap: .38rem !important;
}
body.portrait-grid-first .side-panel .panel-card h2 {
  font-size: .78rem !important;
  margin-bottom: .1rem !important;
}
body.portrait-grid-first .side-panel .field,
body.portrait-grid-first .side-panel .inline-help,
body.portrait-grid-first .side-panel .top-menu-choice-help,
body.portrait-grid-first .side-panel label {
  font-size: .68rem !important;
  line-height: 1.22 !important;
}
body.portrait-grid-first .side-panel .field input,
body.portrait-grid-first .side-panel .field select {
  min-height: 1.85rem !important;
  font-size: .72rem !important;
  padding: .2rem .35rem !important;
}
body.portrait-grid-first .side-panel .view-config-grid,
body.portrait-grid-first .side-panel .branch-config-grid,
body.portrait-grid-first .side-panel .check-grid {
  grid-template-columns: 1fr !important;
  gap: .28rem !important;
  padding: .32rem !important;
}
body.portrait-grid-first .side-panel .top-menu-choice-field,
body.portrait-grid-first .side-panel .lex-extension-field {
  padding: .36rem !important;
  gap: .24rem !important;
}
body.pane-split-dragging,
body.pane-split-dragging * {
  user-select: none !important;
}


/* v4504: desktop toont LEX-insertie en takverlenging in het rechter menu. */
.lex-extension-field {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .62rem .68rem .58rem;
  display: grid;
  gap: .38rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 30%);
}
.lex-extension-field legend {
  padding: 0 .28rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
.lex-extension-field label {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.25;
}
.lex-extension-field input[type=checkbox] {
  margin-top: .1rem;
}
@media (min-width: 761px) {
  .side-panel > .panel-card:first-child {
    max-height: min(86vh, 1040px);
    scrollbar-gutter: stable;
  }
  .view-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v2.0.0-rc.20: Config is divided into focused tabs; MAX is the first view. */
body.config-screen-active .side-panel {
  display: block !important;
}
body.config-screen-active .config-tab-list {
  display: flex;
  align-items: center;
  gap: .42rem;
  width: 100%;
  margin: 0 0 .8rem;
  padding: .36rem;
  overflow-x: auto;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 12%);
  box-shadow: var(--shadow-soft);
}
body.config-screen-active .config-tab-list,
body.config-screen-active .config-global-save-slot,
body.config-screen-active .config-tab-panel {
  grid-column: 1 / -1 !important;
}
body.config-screen-active .config-global-save-slot {
  display: block !important;
  width: 100% !important;
  min-width: 0;
}
body.config-screen-active .config-global-save-card {
  display: block !important;
  width: 100% !important;
  margin: 0 0 .8rem !important;
  padding: .45rem .55rem !important;
  box-sizing: border-box;
  border-color: color-mix(in srgb, var(--accent), var(--line) 50%) !important;
  background: color-mix(in srgb, var(--accent), var(--panel) 95%) !important;
}
body.config-screen-active .config-global-save-card .config-save-field {
  margin: 0;
  padding: .4rem .5rem;
}
body.config-screen-active .config-global-save-card #configSaveStatus {
  margin: 0 0 .35rem;
}
body.config-screen-active .config-tab-button {
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: .68rem;
  background: var(--panel);
  color: var(--text);
  font-size: .94rem;
  font-weight: 900;
  cursor: pointer;
}
body.config-screen-active .config-tab-button.active,
body.config-screen-active .config-tab-button[aria-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel) 82%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 56%);
}
body.config-screen-active .config-tab-button[data-config-tab-button="files"] {
  border-color: color-mix(in srgb, var(--accent), var(--line) 34%);
  font-weight: 950;
}
body.config-screen-active .config-tab-button[data-config-tab-button="files"]:not(.active) {
  background: color-mix(in srgb, var(--accent), var(--panel) 94%);
}
body.config-screen-active .config-tab-panel[hidden] {
  display: none !important;
}
body.config-screen-active .config-tab-panel.active {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: .8rem;
  width: 100%;
  align-items: start;
}
body.config-screen-active .config-tab-panel > .panel-card {
  display: block !important;
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.config-screen-active [data-config-tab-panel="view"] > [data-config-card="tree"],
body.config-screen-active [data-config-tab-panel="files"] > [data-config-card="graph-export"],
body.config-screen-active [data-config-card="log-settings"],
body.config-screen-active [data-config-card="advanced"] {
  grid-column: 1 / -1 !important;
}
body.config-screen-active [data-config-tab-panel="direct"] > .direct-config-card {
  grid-column: 1 / -1 !important;
}
/* In een actieve directe methode is Config geen algemeen projectscherm.
   Toon uitsluitend de eigen methodevelden en de eerder vereiste savebalk. */
body.config-screen-active.config-direct-method-only .config-tab-list,
body.config-screen-active.config-direct-method-only .config-scope-nav,
body.config-screen-active.config-direct-method-only #configLanguageMenu,
body.config-screen-active.config-direct-method-only #openHelpFromConfigButton,
body.config-screen-active.config-direct-method-only .config-topbar > div {
  display: none !important;
}
body.config-screen-active.config-direct-method-only .config-topbar {
  justify-content: flex-start !important;
}
body.config-screen-active.config-direct-method-only [data-config-tab-panel="direct"] {
  order: 1;
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 46rem;
  margin-inline: auto;
}
body.config-screen-active.config-direct-method-only .config-global-save-slot {
  order: 2;
  max-width: 46rem;
  margin-inline: auto;
}
body.config-screen-active.config-direct-method-only #downloadConfigLogButton {
  display: none !important;
}
.config-max-callout {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .15rem 0 .7rem;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 42%);
  border-radius: .78rem;
  background: color-mix(in srgb, var(--accent), var(--panel) 88%);
  color: var(--text);
  line-height: 1.4;
}
.config-max-badge {
  flex: 0 0 auto;
  padding: .28rem .52rem;
  border-radius: .52rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: .9rem;
  letter-spacing: .05em;
}
.config-primary-view-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .75rem;
}
body.config-screen-active .config-primary-view-grid .field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .3rem;
  align-content: start;
  min-width: 0;
  padding: .58rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 15%);
}
body.config-screen-active .config-primary-view-grid .field span {
  min-width: 0 !important;
  white-space: normal !important;
  font-weight: 900;
}
body.config-screen-active .config-primary-view-grid select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.55rem;
  font-weight: 850;
}
body.config-screen-active #layoutDensitySelect,
body.config-screen-active #viewFitSelect {
  border-color: color-mix(in srgb, var(--accent), var(--line) 28%);
  background: color-mix(in srgb, var(--accent), var(--panel) 92%);
}
body.config-screen-active .config-file-settings-card .config-save-field {
  margin: 0;
}
@media (max-width: 760px) {
  .config-primary-view-grid {
    grid-template-columns: 1fr;
  }
  body.config-screen-active .config-tab-button {
    min-height: 2.35rem;
    padding-inline: .7rem;
    font-size: .84rem;
  }
  .config-max-callout {
    align-items: flex-start;
  }
}

/* Open top-menu panels must paint above the Play bar and above later siblings. */
body.main-screen-active .main-topbar {
  z-index: 2000 !important;
}
body.main-screen-active .top-menu-item[open] {
  z-index: 2200 !important;
}
body.main-screen-active .top-menu-item[open] .top-menu-popover {
  z-index: 2210 !important;
  opacity: 1 !important;
  color: var(--text) !important;
}
body.main-screen-active .top-menu-item[open] .main-menu-option-list {
  display: grid !important;
}
body.portrait-grid-first .side-panel .lex-extension-field label {
  font-size: .66rem !important;
}


/* v4504: gridvenster past op boom + assen; resterende breedte is rechterkolom. */
body.grid-first-all .workspace,
.workspace {
  display: grid !important;
  grid-template-columns: minmax(96px, var(--stage-pane-width, 40vw)) var(--pane-splitter-width, 12px) minmax(16rem, var(--side-pane-width, 56vw)) !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
body.grid-first-all .canvas-wrap,
.canvas-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 1rem 0 0 1rem !important;
  cursor: default !important;
}
body.grid-first-all #graphSvg,
#graphSvg {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  touch-action: manipulation !important;
}
body.grid-first-all .pane-splitter,
.pane-splitter {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: var(--pane-splitter-width, 12px) !important;
  min-width: 12px !important;
  height: var(--mobile-fit-height, min(74vh, 880px)) !important;
  align-self: stretch !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--line), transparent 30%) 0 1px,
    color-mix(in srgb, var(--accent), var(--panel) 42%) 1px 11px,
    color-mix(in srgb, var(--line), transparent 30%) 11px 12px) !important;
  cursor: ew-resize !important;
  touch-action: none !important;
  position: relative !important;
  z-index: 8 !important;
}
body.grid-first-all .pane-splitter::before,
.pane-splitter::before {
  content: "↔";
  position: sticky;
  top: .5rem;
  display: block;
  width: 100%;
  padding-top: .25rem;
  color: var(--bg);
  font-size: .72rem;
  font-weight: 950;
  text-align: center;
  pointer-events: none;
}
body.grid-first-all .pane-splitter:hover,
body.grid-first-all .pane-splitter.is-dragging,
.pane-splitter:hover,
.pane-splitter.is-dragging {
  background: var(--accent) !important;
}
body.grid-first-all .side-panel,
.side-panel,
body.portrait-grid-first .side-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: start !important;
  gap: .55rem !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--mobile-fit-height, min(74vh, 880px)) !important;
  max-height: var(--mobile-fit-height, min(74vh, 880px)) !important;
  overflow: auto !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 8%) !important;
  border: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-radius: 0 1rem 1rem 0 !important;
  padding: .55rem !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
body.grid-first-all .side-panel > .panel-card,
.side-panel > .panel-card,
body.portrait-grid-first .side-panel > .panel-card,
body.portrait-grid-first .side-panel > .panel-card:first-child {
  display: grid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: .82rem !important;
}
body.grid-first-all .side-panel > .editor-card,
body.grid-first-all .side-panel > .lex-card,
body.grid-first-all .side-panel > .relation-card,
.side-panel > .editor-card,
.side-panel > .lex-card,
.side-panel > .relation-card {
  grid-column: auto !important;
  grid-row: auto !important;
}
.right-menu-width-field select,
#rightMenuWidthSelect,
#mobileRightMenuWidthSelect {
  font-weight: 850;
}
body.grid-first-all .view-pan-hint {
  display: none !important;
}


/* v4504: maak Rechterkolom-config zichtbaar bovenaan het rechter menu. */
.right-menu-width-callout {
  grid-column: 1 / -1;
  border: 2px solid color-mix(in srgb, var(--accent), var(--line) 18%);
  border-radius: 1rem;
  padding: .72rem .78rem;
  background: color-mix(in srgb, var(--accent), var(--panel) 88%);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  display: grid;
  gap: .45rem;
}
.right-menu-width-callout-field {
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) minmax(10rem, 1fr);
  gap: .65rem;
  align-items: center;
  margin: 0;
}
.right-menu-width-callout-field span {
  color: var(--text);
  font-size: .96rem;
  font-weight: 950;
}
.right-menu-width-callout-field select,
#rightMenuWidthSelectTop {
  min-height: 2.65rem;
  border: 2px solid color-mix(in srgb, var(--accent), var(--line) 25%);
  border-radius: .82rem;
  background: var(--panel);
  color: var(--text);
  padding: .35rem .65rem;
  font-size: .96rem;
  font-weight: 950;
}
.right-menu-width-field {
  grid-column: 1 / -1;
}
body.portrait-grid-first .right-menu-width-callout {
  padding: .48rem !important;
  gap: .28rem !important;
}
body.portrait-grid-first .right-menu-width-callout-field {
  grid-template-columns: 1fr !important;
  gap: .22rem !important;
}
body.portrait-grid-first .right-menu-width-callout-field span {
  font-size: .72rem !important;
}
body.portrait-grid-first #rightMenuWidthSelectTop {
  min-height: 2rem !important;
  font-size: .76rem !important;
}


/* v4504: mobile portrait grid smaller and fixed; right menu + splitter visible. */
body.portrait-grid-first .workspace {
  grid-template-columns: minmax(92px, var(--stage-pane-width, 40vw)) var(--pane-splitter-width, 18px) minmax(13rem, var(--side-pane-width, 56vw)) !important;
}
body.portrait-grid-first .canvas-wrap {
  max-width: none !important;
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: contain !important;
}
body.portrait-grid-first #graphSvg {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.portrait-grid-first .pane-splitter,
body.grid-first-all .pane-splitter,
.pane-splitter {
  min-width: var(--pane-splitter-width, 18px) !important;
  touch-action: none !important;
}
body.portrait-grid-first .pane-splitter::before,
body.grid-first-all .pane-splitter::before,
.pane-splitter::before {
  content: "⇆" !important;
  font-size: .9rem !important;
}
body.portrait-grid-first .side-panel {
  min-width: 0 !important;
  overflow: auto !important;
}


/* v4504 app redesign: hoofdbeeld = grid + zin + config. Config = apart scherm met alle menu's. */
.main-topbar,
.config-topbar {
  display: none;
}
.main-topbar {
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 16%);
  box-shadow: var(--shadow-soft);
}
.main-sentence-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 900;
  color: var(--muted);
}
.main-sentence-field select {
  width: min(100%, 32rem);
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .25rem .65rem;
  font-weight: 900;
}
.config-open-button,
.config-back-button {
  min-height: 2.35rem;
  padding-inline: 1rem;
  font-weight: 950;
}
.config-topbar {
  align-items: center;
  gap: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 12%);
  box-shadow: var(--shadow-soft);
}
.config-topbar h2 {
  margin: 0;
  font-size: 1.12rem;
}
.config-topbar p {
  margin: .18rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}

body.main-screen-active .app-header,
body.main-screen-active .projection-sticky-bar,
body.main-screen-active .mobile-sentence-bar,
body.main-screen-active .toolbar,
body.main-screen-active .intro-panel,
body.main-screen-active .status-panel,
body.main-screen-active .side-panel,
body.main-screen-active .pane-splitter,
body.main-screen-active .text-panel,
body.main-screen-active .mobile-growth-nav,
body.main-screen-active .mobile-bottom-nav,
body.main-screen-active .mobile-sheet,
body.main-screen-active .mobile-sheet-backdrop,
body.main-screen-active .config-topbar {
  display: none !important;
}
body.main-screen-active .main-topbar {
  display: flex !important;
  order: 0 !important;
}
body.main-screen-active .app-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
  padding: .35rem !important;
  max-width: none !important;
  width: 100vw !important;
  min-height: 100dvh !important;
}
body.main-screen-active .workspace {
  display: block !important;
  order: 1 !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.main-screen-active .canvas-wrap {
  display: block !important;
  width: min(100%, var(--stage-pane-width, 100%)) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  min-height: 18rem !important;
  height: min(var(--mobile-canvas-height, 76dvh), calc(100dvh - 4.2rem)) !important;
  max-height: calc(100dvh - 4.2rem) !important;
  border-radius: .9rem !important;
}
body.main-screen-active #graphSvg {
  width: 100% !important;
  height: 100% !important;
}

body.config-screen-active .app-header,
body.config-screen-active .main-topbar,
body.config-screen-active .mobile-sentence-bar,
body.config-screen-active .canvas-wrap,
body.config-screen-active .pane-splitter,
body.config-screen-active .mobile-growth-nav,
body.config-screen-active .mobile-bottom-nav,
body.config-screen-active .mobile-sheet,
body.config-screen-active .mobile-sheet-backdrop {
  display: none !important;
}
body.config-screen-active .config-topbar {
  display: flex !important;
  order: 0 !important;
}
body.config-screen-active .app-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  padding: .75rem !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}
body.config-screen-active .projection-sticky-bar,
body.config-screen-active .toolbar,
body.config-screen-active .status-panel,
body.config-screen-active .intro-panel,
body.config-screen-active .text-panel {
  display: block !important;
  order: initial !important;
}
body.config-screen-active .projection-sticky-bar {
  display: grid !important;
}
body.config-screen-active .toolbar {
  display: flex !important;
}
body.config-screen-active .workspace {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
body.config-screen-active .side-panel {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)) !important;
  gap: .8rem !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}
body.config-screen-active .side-panel > .panel-card,
body.config-screen-active .side-panel > .panel-card:first-child,
body.config-screen-active .side-panel > .editor-card,
body.config-screen-active .side-panel > .lex-card,
body.config-screen-active .side-panel > .relation-card {
  display: block !important;
  grid-column: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 760px) {
  body.main-screen-active .app-shell {
    padding: .25rem !important;
  }
  body.main-screen-active .main-topbar {
    border-radius: .75rem;
    padding: .35rem .45rem;
  }
  body.main-screen-active .main-sentence-field span {
    font-size: .86rem;
  }
  body.main-screen-active .config-open-button {
    padding-inline: .8rem;
  }
  body.config-screen-active .config-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}
body.main-screen-active .canvas-wrap::before {
  content: none !important;
  display: none !important;
}

/* v4504: main fixed topbar on all platforms.
   Main = alleen full viewport grid, met overlay topmenu Zin + Config.
   Config blijft apart scherm met alle instellingen. */
html,
body {
  width: 100%;
}
body.main-screen-active {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}
body.main-screen-active .app-shell {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.main-screen-active .main-topbar {
  position: fixed !important;
  left: max(.45rem, env(safe-area-inset-left)) !important;
  right: max(.45rem, env(safe-area-inset-right)) !important;
  top: max(.45rem, env(safe-area-inset-top)) !important;
  z-index: 120 !important;
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: .42rem .54rem !important;
  border-radius: .9rem !important;
  background: color-mix(in srgb, var(--panel), transparent 5%) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  box-shadow: 0 .35rem 1.1rem rgba(15, 23, 42, .18) !important;
}
body.main-screen-active .main-sentence-field {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.main-screen-active .main-sentence-field select {
  width: 100% !important;
  max-width: none !important;
}
body.main-screen-active .workspace {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}
body.main-screen-active .canvas-wrap {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.main-screen-active #graphSvg {
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  display: block !important;
}
body.main-screen-active .canvas-wrap::before {
  content: none !important;
  display: none !important;
}
body.main-screen-active .app-header,
body.main-screen-active .projection-sticky-bar,
body.main-screen-active .mobile-sentence-bar,
body.main-screen-active .toolbar,
body.main-screen-active .intro-panel,
body.main-screen-active .status-panel,
body.main-screen-active .side-panel,
body.main-screen-active .pane-splitter,
body.main-screen-active .text-panel,
body.main-screen-active .mobile-growth-nav,
body.main-screen-active .mobile-bottom-nav,
body.main-screen-active .mobile-sheet,
body.main-screen-active .mobile-sheet-backdrop,
body.main-screen-active .config-topbar {
  display: none !important;
}
@media (orientation: landscape) {
  body.main-screen-active .main-topbar {
    left: max(.55rem, env(safe-area-inset-left)) !important;
    right: max(.55rem, env(safe-area-inset-right)) !important;
    top: max(.45rem, env(safe-area-inset-top)) !important;
  }
}
@media (max-width: 760px) {
  body.main-screen-active .main-topbar {
    gap: .45rem !important;
    padding: .34rem .42rem !important;
    border-radius: .76rem !important;
  }
  body.main-screen-active .main-sentence-field span {
    font-size: .84rem !important;
  }
  body.main-screen-active .main-sentence-field select,
  body.main-screen-active .config-open-button {
    min-height: 2.2rem !important;
    font-size: .9rem !important;
  }
}


/* v4504: fixed topbar; grid starts below it and fits content with minimal empty grid. */
body.main-screen-active .main-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 140 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  padding: max(.36rem, env(safe-area-inset-top)) max(.55rem, env(safe-area-inset-right)) .46rem max(.55rem, env(safe-area-inset-left)) !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 4%) !important;
  box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .16) !important;
}
body.main-screen-active .workspace {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--main-grid-top, 3.55rem) !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: var(--main-grid-height, calc(100dvh - 3.55rem)) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
body.main-screen-active .canvas-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--panel) !important;
}
body.main-screen-active #graphSvg {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
@media (max-width: 760px) {
  body.main-screen-active .main-topbar {
    gap: .45rem !important;
    padding: max(.28rem, env(safe-area-inset-top)) .42rem .38rem max(.42rem, env(safe-area-inset-left)) !important;
  }
  body.main-screen-active .main-sentence-field select,
  body.main-screen-active .config-open-button {
    min-height: 2.05rem !important;
  }
}


/* v4504: main placement redesign.
   Main keeps a fixed topbar; the projection grid is the primary view.
   SOV/SVO controls live inside the boomvenster.  Play/Reset and Assen/LOG
   move out of Config and become always visible in Main. */
body.main-screen-active .canvas-wrap {
  touch-action: manipulation !important;
}
body.main-screen-active .main-south-control,
body.main-screen-active .main-grid-controls {
  position: absolute !important;
  z-index: 150 !important;
  box-sizing: border-box !important;
  font: inherit !important;
}
body.main-screen-active .main-south-control {
  left: 50% !important;
  bottom: .48rem !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .26rem !important;
  padding: .25rem !important;
  border: 1px solid color-mix(in srgb, var(--log), var(--line) 45%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel), transparent 6%) !important;
  backdrop-filter: blur(9px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.05) !important;
  box-shadow: 0 .3rem 1rem rgba(15, 23, 42, .18) !important;
}
body.main-screen-active .main-south-control button,
body.main-screen-active .main-grid-controls button {
  min-width: 2.35rem !important;
  min-height: 2.25rem !important;
  border: 1px solid var(--line) !important;
  border-radius: .72rem !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 4%) !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 .16rem .45rem rgba(15, 23, 42, .10) !important;
}
body.main-screen-active #mainSouthModeButton {
  min-width: 6.9rem !important;
  padding-inline: .72rem !important;
  background: color-mix(in srgb, var(--log), var(--panel) 82%) !important;
}
body.main-screen-active .main-grid-controls {
  display: flex !important;
  gap: .34rem !important;
  pointer-events: auto !important;
}
body.main-screen-active .main-play-strip,
body.main-screen-active .main-projection-strip {
  display: flex !important;
  align-items: center !important;
  gap: .26rem !important;
  padding: .26rem !important;
  border: 1px solid var(--line) !important;
  border-radius: .9rem !important;
  background: color-mix(in srgb, var(--panel), transparent 5%) !important;
  backdrop-filter: blur(9px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.06) !important;
  box-shadow: 0 .28rem 1rem rgba(15, 23, 42, .16) !important;
}
body.main-screen-active .main-growth-step-label {
  min-width: 4.8rem !important;
  max-width: 8rem !important;
  padding: .2rem .34rem !important;
  color: var(--muted) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}
body.main-screen-active .main-projection-strip button.active,
body.main-screen-active .main-projection-strip button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--synt), var(--panel) 76%) !important;
  border-color: color-mix(in srgb, var(--synt), var(--line) 35%) !important;
}

/* Portrait: playbar below the grid; reset directly next to it; Assen/LOG attached below. */
@media (orientation: portrait) {
  body.main-screen-active .workspace {
    --main-control-height: clamp(6.8rem, 12dvh, 8.8rem);
  }
  body.main-screen-active .canvas-wrap {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--main-control-height) !important;
    height: auto !important;
    max-height: none !important;
  }
  body.main-screen-active .main-south-control {
    bottom: calc(var(--main-control-height) + .42rem) !important;
  }
  body.main-screen-active .main-grid-controls {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: var(--main-control-height) !important;
    padding: .34rem max(.42rem, env(safe-area-inset-right)) max(.38rem, env(safe-area-inset-bottom)) max(.42rem, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    background: color-mix(in srgb, var(--bg), transparent 4%) !important;
    border-top: 1px solid var(--line) !important;
  }
  body.main-screen-active .main-play-strip,
  body.main-screen-active .main-projection-strip {
    width: min(100%, 48rem) !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }
  body.main-screen-active .main-play-strip {
    flex-wrap: nowrap !important;
  }
  body.main-screen-active .main-projection-strip {
    margin-top: .22rem !important;
  }
  body.main-screen-active .main-play-strip button,
  body.main-screen-active .main-projection-strip button {
    flex: 0 0 auto !important;
  }
  body.main-screen-active .main-growth-step-label {
    flex: 1 1 auto !important;
    min-width: 3.8rem !important;
  }
}

/* Landscape: vertical playbar on the right side of the syntax-axis zone; reset below; Assen/LOG attached below it. */
@media (orientation: landscape) {
  body.main-screen-active .canvas-wrap {
    inset: 0 !important;
  }
  body.main-screen-active .main-grid-controls {
    left: var(--main-controls-left, auto) !important;
    right: auto !important;
    top: var(--main-controls-top, calc(.55rem + env(safe-area-inset-top))) !important;
    bottom: auto !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.main-screen-active .main-play-strip,
  body.main-screen-active .main-projection-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 6.35rem !important;
  }
  body.main-screen-active .main-play-strip button,
  body.main-screen-active .main-projection-strip button {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.main-screen-active .main-growth-step-label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body.main-screen-active .main-south-control {
    bottom: max(.45rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  body.main-screen-active .main-play-strip button,
  body.main-screen-active .main-projection-strip button,
  body.main-screen-active .main-south-control button {
    min-height: 2.05rem !important;
    min-width: 2.08rem !important;
    padding-inline: .45rem !important;
    font-size: .84rem !important;
  }
  body.main-screen-active #mainSouthModeButton {
    min-width: 5.75rem !important;
  }
  body.main-screen-active .main-growth-step-label {
    display: none !important;
  }
}

/* v4504 config: main-only controls must not leak into Config. */
body.config-screen-active .main-grid-controls,
body.config-screen-active .main-south-control {
  display: none !important;
}


/* v4504: main controls align to the SYNTAX axis in landscape and show the full projection series. */
body.main-screen-active .main-projection-strip {
  flex-wrap: wrap !important;
}
body.main-screen-active .main-projection-strip button {
  font-size: .82rem !important;
  letter-spacing: -.01em !important;
}
@media (orientation: landscape) {
  body.main-screen-active .main-grid-controls {
    max-height: calc(100% - 1rem) !important;
  }
  body.main-screen-active .main-play-strip,
  body.main-screen-active .main-projection-strip {
    gap: .22rem !important;
    padding: .24rem !important;
  }
  body.main-screen-active .main-grid-controls::before {
    content: "";
    position: absolute;
    left: -10px;
    top: .3rem;
    bottom: .3rem;
    width: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--synt), transparent 45%);
    opacity: .72;
  }
}
@media (orientation: portrait) {
  body.main-screen-active .main-projection-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
  body.main-screen-active .main-projection-strip button {
    min-width: 4.35rem !important;
  }
}

/* v4504: Main-controls blijven in het boomvenster.
   De HTML ZUID/SOV-bediening vervangt de oude SVG-badge visueel en wordt
   precies op de oude badgepositie gezet.  De oude badge blijft alleen als
   onzichtbaar anker bestaan, zodat de positie uit de getekende LOG-as komt. */
body.main-screen-active .logical-flip-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.main-screen-active .main-south-control {
  left: var(--main-south-left, 50%) !important;
  top: var(--main-south-top, calc(100% - 4.5rem)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
body.main-screen-active #mainSouthModeButton {
  min-width: 7.2rem !important;
}

/* v4504: rechter vensterbalk staat als eigen paneel in het boomvenster,
   vlak rechts van de SYNTAX-as en met de hele projectiereeks. */
@media (orientation: landscape) {
  body.main-screen-active .main-grid-controls {
    position: absolute !important;
    left: var(--main-controls-left, auto) !important;
    right: auto !important;
    top: var(--main-controls-top, .6rem) !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .32rem !important;
    padding: 0 !important;
  }
  body.main-screen-active .main-play-strip,
  body.main-screen-active .main-projection-strip {
    width: 6.9rem !important;
    box-sizing: border-box !important;
  }
  body.main-screen-active .main-projection-strip {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  body.main-screen-active .main-projection-strip button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

@media (orientation: portrait) {
  body.main-screen-active .main-south-control {
    left: var(--main-south-left, 50%) !important;
    top: var(--main-south-top, calc(100% - var(--main-control-height, 7.6rem) - 3.2rem)) !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  body.main-screen-active .main-projection-strip {
    gap: .22rem !important;
  }
  body.main-screen-active .main-projection-strip button {
    min-width: 4.05rem !important;
  }
}


/* v4504: rechter hoofd-balk echt in het boomvenster.
   De controls zijn nu DOM-kinderen van canvas-wrap. Landscape gebruikt
   absolute coördinaten t.o.v. het canvas; portrait houdt de play/projectie-balk
   onder het grid als vaste onderbalk. */
body.main-screen-active .canvas-wrap {
  position: absolute !important;
}
@media (orientation: landscape) {
  body.main-screen-active .canvas-wrap .main-grid-controls {
    position: absolute !important;
    left: var(--main-controls-left, auto) !important;
    right: auto !important;
    top: var(--main-controls-top, .6rem) !important;
    bottom: auto !important;
    z-index: 170 !important;
  }
  body.main-screen-active .canvas-wrap .main-grid-controls::before {
    left: -11px !important;
  }
}
@media (orientation: portrait) {
  body.main-screen-active .canvas-wrap .main-grid-controls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 170 !important;
  }
}

body.main-screen-active .main-south-control.is-hidden { display: none !important; }

/* v4535: Help-scherm; zinmenu zo smal als langste zin. */
.main-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
}
.help-open-button {
  min-height: 2.35rem;
  padding-inline: .95rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 8%);
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
}
body.main-screen-active .main-sentence-field {
  flex: 0 1 auto !important;
  max-width: min(72vw, calc(var(--main-example-select-ch, 18ch) + 4.2rem)) !important;
}
body.main-screen-active .main-sentence-field select {
  width: min(calc(var(--main-example-select-ch, 18ch) + 2.6rem), 52vw) !important;
  max-width: 100% !important;
}
.help-topbar,
.help-screen {
  display: none;
}
.help-topbar {
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 12%);
  box-shadow: var(--shadow-soft);
}
.help-topbar h2 {
  margin: 0;
  font-size: 1.12rem;
}
.help-topbar p {
  margin: .18rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}
body.help-screen-active .app-header,
body.help-screen-active .main-topbar,
body.help-screen-active .config-topbar,
body.help-screen-active .projection-sticky-bar,
body.help-screen-active .mobile-sentence-bar,
body.help-screen-active .toolbar,
body.help-screen-active .intro-panel,
body.help-screen-active .status-panel,
body.help-screen-active .workspace,
body.help-screen-active .side-panel,
body.help-screen-active .pane-splitter,
body.help-screen-active .text-panel,
body.help-screen-active .mobile-growth-nav,
body.help-screen-active .mobile-bottom-nav,
body.help-screen-active .mobile-sheet,
body.help-screen-active .mobile-sheet-backdrop {
  display: none !important;
}
body.help-screen-active .app-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: .65rem !important;
  padding: .65rem !important;
  max-width: none !important;
  width: 100vw !important;
  min-height: 100dvh !important;
}
body.help-screen-active .help-topbar {
  display: flex !important;
  order: 0 !important;
}
body.help-screen-active .help-screen {
  display: flex !important;
  flex-direction: column !important;
  order: 1 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: auto !important;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.help-screen iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: var(--bg);
}
.help-fallback {
  margin: 0;
  padding: .45rem .65rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}
body.config-screen-active .help-topbar,
body.config-screen-active .help-screen,
body.main-screen-active .help-topbar,
body.main-screen-active .help-screen {
  display: none !important;
}
/* v4504: ook de voorbeeldzin-keuzes in Config volgen de langste zin. */
.desktop-sentence-field {
  grid-template-columns: auto minmax(12rem, calc(var(--main-example-select-ch, 18ch) + 2.6rem)) !important;
  max-width: calc(var(--main-example-select-ch, 18ch) + 5rem) !important;
}
.desktop-sentence-field select,
.mobile-sentence-field select,
#exampleSelect {
  max-width: calc(var(--main-example-select-ch, 18ch) + 2.8rem) !important;
}

.language-toggle-button { border: 1px solid var(--line); border-radius: .8rem; background: color-mix(in srgb, var(--panel), var(--bg) 6%); color: var(--text); font-weight: 900; min-height: 2.45rem; padding: .4rem .75rem; }
.language-toggle-button[aria-pressed="true"] { background: color-mix(in srgb, var(--synt), var(--panel) 72%); border-color: color-mix(in srgb, var(--synt), var(--line) 28%); }

/* v4504: controls moved to Main. Do not show their old Config/mobile duplicates. */
body.config-screen-active .projection-sticky-bar,
body.config-screen-active .mobile-growth-nav,
body.config-screen-active .toolbar .example-field,
body.config-screen-active [aria-label="Projecties"],
body.config-screen-active [aria-label="Snelle acties"] {
  display: none !important;
}


/* v4504: hoofdvenster-config kan als menu boven het Main-grid staan. */
.main-window-fit-menu {
  display: none;
  align-items: center;
  gap: .45rem;
  flex: 1 1 24rem;
  min-width: min(100%, 22rem);
  max-width: 46rem;
}
body.main-screen-active.top-menu-fit .main-window-fit-menu {
  display: inline-flex !important;
}
.main-window-fit-field {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}
.main-window-fit-field select {
  min-height: 2.25rem;
  max-width: 16.5rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .22rem .55rem;
  font-weight: 850;
}
body.main-screen-active .main-topbar {
  flex-wrap: wrap !important;
  align-content: center !important;
}
body.main-screen-active.main-window-window .canvas-wrap {
  overflow: hidden !important;
}
body.main-screen-active.main-window-scroll {
  overflow: auto !important;
}
body.main-screen-active.main-window-scroll .app-shell {
  min-height: 100dvh !important;
  overflow: visible !important;
}
body.main-screen-active.main-window-scroll .workspace {
  overflow: auto !important;
}
body.main-screen-active.main-window-scroll .canvas-wrap {
  min-width: min(1500px, 145vw) !important;
  height: min(112dvh, 980px) !important;
  max-height: none !important;
}
body.config-screen-active .top-menu-choice-field:not(.mobile-top-menu-choice-field),
body.config-screen-active [aria-label="Menu's boven grid"] {
  display: grid !important;
}
@media (max-width: 760px) {
  body.main-screen-active.top-menu-fit .main-window-fit-menu {
    flex-basis: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  .main-window-fit-field span { display: none; }
  .main-window-fit-field select { max-width: 48vw; }
}


/* v4504: Config topbar stays fixed while the settings page scrolls. */
body.config-screen-active .config-topbar {
  position: sticky !important;
  top: max(.35rem, env(safe-area-inset-top)) !important;
  z-index: 600 !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
body.config-screen-active .intro-panel { display: none !important; }
body.config-screen-active .top-menu-choice-field:not(.lex-extension-field) {
  display: block !important;
}
body.config-screen-active .top-menu-choice-field:not(.lex-extension-field) label {
  display: block;
  margin: .22rem 0;
}
.help-doc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: .7rem;
  padding: .75rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel), var(--bg) 8%);
}
.help-doc-card {
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--panel), #fff 7%);
  padding: .75rem .85rem;
}
.help-doc-card h3 {
  margin: 0 0 .28rem;
  font-size: .98rem;
}
.help-doc-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .9rem;
}

.help-doc-card .help-doc-link { margin-top: .45rem; }
.help-doc-card .help-doc-link a { font-weight: 800; color: var(--accent); text-decoration: none; }
.help-doc-card .help-doc-link a:hover { text-decoration: underline; }

/* v4535 config: maak LEX-bijwoordinsert zichtbaar en voorkom overlap in Config. */
body.config-screen-active .config-topbar {
  position: sticky !important;
  top: .5rem !important;
  z-index: 40 !important;
}
body.config-screen-active .view-config-grid,
body.config-screen-active .branch-config-grid {
  grid-template-columns: 1fr !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.lex-adverb-insert-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  margin: .25rem 0;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 65%);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--panel), var(--accent) 7%);
}
.lex-open-slot-field {
  display: grid;
  gap: .5rem;
  margin: .25rem 0 .75rem;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--lex), var(--line) 65%);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--panel), var(--lex) 5%);
}
.lex-open-slot-field legend {
  padding: 0 .35rem;
  font-weight: 950;
}
.lex-open-slot-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.lex-open-slot-config-grid .field {
  grid-template-columns: 1fr !important;
  align-items: start;
}
.lex-open-slot-config-grid select {
  width: 100%;
  min-width: 0;
}
.lex-open-slot-live-explanation {
  margin: 0;
  padding: .65rem .75rem;
  border-left: 4px solid var(--lex);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--panel), var(--lex) 10%);
  color: var(--text);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.45;
}
.lex-open-slot-field .config-control-explanation[open] {
  border-color: color-mix(in srgb, var(--lex), var(--line) 45%);
}
.lex-open-slot-field .config-control-explanation p,
.lex-open-slot-field .config-control-explanation li {
  line-height: 1.48;
}
@media (max-width: 720px) {
  .lex-open-slot-config-grid { grid-template-columns: 1fr; }
}
.lex-adverb-insert-field legend {
  padding: 0 .35rem;
  font-weight: 950;
  color: var(--text);
}
.lex-adverb-insert-field .field {
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr) !important;
  align-items: center;
}
.lex-adverb-insert-field .field span,
body.config-screen-active .view-config-grid .field span,
body.config-screen-active .branch-config-grid .field span {
  white-space: normal !important;
  min-width: 0 !important;
}
body.config-screen-active .view-config-grid .field,
body.config-screen-active .branch-config-grid .field {
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr) !important;
  min-width: 0 !important;
}
body.config-screen-active .view-config-grid select,
body.config-screen-active .branch-config-grid select,
body.config-screen-active .lex-adverb-insert-field select {
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  body.config-screen-active .view-config-grid .field,
  body.config-screen-active .branch-config-grid .field,
  body.config-screen-active .lex-adverb-insert-field .field {
    grid-template-columns: 1fr !important;
  }
}

/* v4535: Uitleg hoort niet in Config. Config blijft puur instellingen; uitleg staat in Help/docs. */
body.config-screen-active .text-panel {
  display: none !important;
}
body.config-screen-active .side-panel {
  align-items: start !important;
}
.help-doc-card {
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 25%);
}
.help-doc-card h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
}
.help-doc-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


body.help-screen-active .help-screen {
  overflow: auto !important;
}

/* v4535: voorbeeldzinnen beheer in Config. */
.examples-config-card .button-row { gap: .5rem; }
.examples-config-card .button-link.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* rc.24: Opslaan & exporteren opent als eerste; de publicatiekaart is de hoofdingang. */
.graph-export-card {
  border: 2px solid color-mix(in srgb, var(--accent), var(--line) 30%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent), var(--panel) 95%),
      color-mix(in srgb, var(--panel), var(--bg) 8%)) !important;
  box-shadow: 0 .55rem 1.35rem color-mix(in srgb, var(--accent), transparent 86%);
}
.config-save-menu-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 .35rem;
  padding: .24rem .52rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .055em;
}
.graph-export-card > h2 {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.graph-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: .55rem;
}
.graph-export-actions > button {
  min-height: 3.1rem;
  white-space: normal;
  font-size: .98rem;
  font-weight: 950;
}
.graph-export-video-button {
  border-color: color-mix(in srgb, var(--accent), var(--line) 44%);
  background: color-mix(in srgb, var(--accent), var(--panel) 91%);
}
.export-status {
  min-height: 2.6em;
  margin-top: .62rem;
}
.export-status.is-error {
  color: #a61b1b;
  font-weight: 750;
}
@media (max-width: 720px) {
  .graph-export-actions {
    grid-template-columns: 1fr;
  }
}

/* v4540: bijwoorden blijven op de LEX-as; hostbox is alleen hoogteanker. */
.adverb-host-slot-layer {
  pointer-events: none;
}
.adverb-host-box {
  fill: rgba(255, 255, 255, 0.96);
  stroke: #8f5b00;
  stroke-width: 2.2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.adverb-host-caption {
  font-size: calc(12px * var(--og-font-scale, 1));
  font-weight: 700;
  text-anchor: middle;
  fill: #8f5b00;
}
.adverb-host-label {
  font-size: calc(17px * var(--og-font-scale, 1));
  font-weight: 800;
  text-anchor: middle;
  fill: #392100;
}
/* v4536: takverlenging geldt niet meer voor bijwoordplaatsing; hostbox stuurt de plaats. */
.lex-extension-field {
  display: none !important;
}

.adverb-virtual-host-box {
  fill: rgba(255, 251, 235, 0.92);
  stroke: #8f5b00;
  stroke-width: 1.8;
  stroke-dasharray: 7 5;
}
.adverb-virtual-host-label {
  font-size: calc(16px * var(--og-font-scale, 1));
  font-weight: 900;
  text-anchor: middle;
  fill: #78350f;
}

/* v4540: tweede hoofdmenu naast ZIN: BIJWOORD. Bijwoord is een externe LEX-laag. */
.main-adverb-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 0 1 auto;
  font-weight: 900;
  color: var(--muted);
}
.main-adverb-field select {
  width: min(26rem, 34vw);
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .25rem .65rem;
  font-weight: 900;
}
.mobile-adverb-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .42rem;
  min-width: 0;
  font-weight: 900;
  color: var(--muted);
  font-size: .76rem;
}
.mobile-adverb-field select {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .25rem .65rem;
  font-weight: 850;
}
@media (max-width: 760px) {
  body.main-screen-active .main-adverb-field span {
    font-size: .84rem !important;
  }
  body.main-screen-active .main-adverb-field select {
    width: min(34vw, 18rem) !important;
    min-height: 2.2rem !important;
    font-size: .9rem !important;
  }
}

/* v4540: bijwoorden zijn externe LEX-slots op de LEX-as, niet syntaxboomlabels. */
.lex-adverb-axis-slot {
  stroke-width: 2.5;
}

/* v4546: bijwoordslot zelf is klikbare knoop voor gemarkeerde/ongemarkeerde variant. */
.lex-adverb-axis-slot-node.clickable {
  cursor: pointer;
}
.lex-adverb-axis-slot-node.clickable .lex-adverb-axis-slot {
  stroke-width: 2.5px;
}
.lex-adverb-axis-slot-node.marked .lex-adverb-axis-slot {
  stroke-dasharray: 7 5;
}
.lex-adverb-toggle-marker {
  font-size: 18px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.lex-adverb-toggle-help {
  font-size: 10px;
  text-anchor: middle;
  pointer-events: none;
}


/* v4550: Config toont de bijwoordplaatsingsregels per categorie. */
.adverb-placement-rules-config {
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 55%);
  border-radius: .75rem;
  padding: .55rem .65rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 22%);
}
.adverb-placement-rules-config summary {
  cursor: pointer;
  font-weight: 950;
  color: var(--text);
}
.adverb-rules-table-wrap {
  overflow-x: auto;
  margin: .55rem 0;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--panel);
}
.adverb-rules-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: .82rem;
}
.adverb-rules-table th,
.adverb-rules-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: .45rem .55rem;
  vertical-align: top;
  text-align: left;
}
.adverb-rules-table th {
  background: color-mix(in srgb, var(--accent), var(--panel) 82%);
  font-weight: 950;
}
.adverb-rules-table tr:last-child td { border-bottom: 0; }
.adverb-rules-table td:last-child,
.adverb-rules-table th:last-child { border-right: 0; }
.help-doc-card ol,
.help-doc-card ul {
  margin: .5rem 0 0 1.25rem;
  padding: 0;
  color: var(--muted);
  line-height: 1.5;
}

/* v4558: compactere topbar zodat alle knoppen passen; label Bijwoord; selects smaller than longest option. */
body.main-screen-active .main-topbar {
  gap: .38rem !important;
  padding: .24rem .38rem !important;
  flex-wrap: nowrap !important;
}
body.main-screen-active .main-sentence-field,
body.main-screen-active .main-adverb-field,
body.main-screen-active .main-window-fit-menu,
body.main-screen-active .main-topbar-actions {
  min-width: 0 !important;
}
body.main-screen-active .main-sentence-field {
  gap: .28rem !important;
  max-width: min(26vw, 24rem) !important;
}
body.main-screen-active .main-sentence-field span,
body.main-screen-active .main-adverb-field span,
body.main-screen-active .main-window-fit-field span {
  font-size: .72rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.main-screen-active .main-sentence-field select {
  width: clamp(10.5rem, 20vw, 15rem) !important;
  min-height: 2.15rem !important;
  padding: .18rem .52rem !important;
  font-size: .82rem !important;
}
body.main-screen-active .main-adverb-field {
  gap: .28rem !important;
}
body.main-screen-active .main-adverb-field select {
  width: clamp(9.5rem, 18vw, 13rem) !important;
  min-height: 2.15rem !important;
  padding: .18rem .52rem !important;
  font-size: .82rem !important;
}
body.main-screen-active .main-window-fit-menu {
  gap: .28rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
body.main-screen-active .main-window-fit-field {
  gap: .24rem !important;
  font-size: .72rem !important;
}
body.main-screen-active .main-window-fit-field select {
  min-height: 2.1rem !important;
  max-width: 12.75rem !important;
  padding: .14rem .45rem !important;
  font-size: .76rem !important;
}
body.main-screen-active .main-topbar-actions {
  gap: .26rem !important;
}
body.main-screen-active .language-toggle-button,
body.main-screen-active .help-open-button,
body.main-screen-active .config-open-button {
  min-height: 2.08rem !important;
  padding: .22rem .62rem !important;
  font-size: .78rem !important;
  border-radius: .72rem !important;
}
@media (max-width: 1500px) {
  body.main-screen-active .main-sentence-field select { width: clamp(9rem, 17vw, 13rem) !important; }
  body.main-screen-active .main-adverb-field select { width: clamp(8.4rem, 15vw, 11rem) !important; }
  body.main-screen-active .main-window-fit-field select { max-width: 10.5rem !important; font-size: .72rem !important; }
  body.main-screen-active .language-toggle-button,
  body.main-screen-active .help-open-button,
  body.main-screen-active .config-open-button { padding-inline: .52rem !important; font-size: .74rem !important; }
}

/* v4558: Play/Reset op een eigen centrale balk direct boven het grid. */
.main-play-reset-bar {
  display: none;
}
body.main-screen-active .main-play-reset-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--main-playbar-top, 3.55rem) !important;
  z-index: 139 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: .28rem max(.55rem, env(safe-area-inset-right)) .3rem max(.55rem, env(safe-area-inset-left)) !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 1%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 .2rem .72rem rgba(15, 23, 42, .12) !important;
}
body.main-screen-active .main-play-reset-controls {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  padding: .18rem .32rem !important;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 48%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent), var(--panel) 88%) !important;
  box-shadow: 0 .24rem .8rem rgba(15, 23, 42, .16) !important;
}
body.main-screen-active .main-play-reset-controls button {
  min-height: 2.55rem !important;
  min-width: 5.15rem !important;
  padding-inline: 1.15rem !important;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 35%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel), white 6%) !important;
  color: var(--text) !important;
  font-weight: 1000 !important;
  letter-spacing: .015em !important;
  cursor: pointer !important;
}
body.main-screen-active .main-play-reset-controls button:disabled {
  opacity: .52 !important;
  cursor: not-allowed !important;
}
body.config-screen-active .main-play-reset-bar,
body.help-screen-active .main-play-reset-bar {
  display: none !important;
}
@media (max-width: 760px) {
  body.main-screen-active .main-play-reset-bar {
    padding-block: .22rem !important;
  }
  body.main-screen-active .main-play-reset-controls {
    gap: .38rem !important;
    padding: .14rem .24rem !important;
  }
  body.main-screen-active .main-play-reset-controls button {
    min-height: 2.22rem !important;
    min-width: 4.35rem !important;
    padding-inline: .8rem !important;
    font-size: .9rem !important;
  }
}

/* v4558: groei-stapknoppen en status terug rond de centrale Play-knop. */
body.main-screen-active .main-play-reset-controls {
  gap: .42rem !important;
  padding: .2rem .36rem !important;
}
body.main-screen-active .main-play-reset-controls button {
  min-height: 2.32rem !important;
  padding-inline: .85rem !important;
}
body.main-screen-active .main-play-reset-controls .main-play-step-button {
  min-width: 2.65rem !important;
  padding-inline: .55rem !important;
  font-size: 1rem !important;
}
body.main-screen-active .main-play-reset-controls .main-play-button {
  min-width: 4.65rem !important;
  font-weight: 1000 !important;
}
body.main-screen-active .main-play-reset-controls .main-reset-button {
  min-width: 4.3rem !important;
}
body.main-screen-active .main-play-reset-controls .main-snapshot-button,
body.main-screen-active .main-play-reset-controls .main-snapshot-open {
  min-width: auto !important;
  min-height: 2.32rem !important;
  padding: .42rem .78rem !important;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 35%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel), white 6%) !important;
  color: var(--text) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
body.main-screen-active .main-play-reset-controls .main-snapshot-button {
  background: color-mix(in srgb, var(--accent), var(--panel) 82%) !important;
}
body.main-screen-active .main-play-reset-controls .main-snapshot-open.is-ready-for-window {
  border-color: #15803d !important;
  background: #dcfce7 !important;
  color: #14532d !important;
}
.main-snapshot-open input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

body.main-screen-active .main-play-growth-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 5.3rem !important;
  max-width: 7.4rem !important;
  min-height: 2.05rem !important;
  padding: .15rem .52rem !important;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 8%) !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

/* v4558: de SOV/VSO/enz.-bediening is een eigen ruime LOG-box rechts onder de LOG-projectie. */
body.main-screen-active .main-south-control {
  gap: .42rem !important;
  padding: .48rem .58rem !important;
  border-radius: 1.05rem !important;
  border: 1.8px solid color-mix(in srgb, var(--log), var(--line) 32%) !important;
  background: color-mix(in srgb, var(--panel), var(--log) 7%) !important;
  box-shadow: 0 .34rem 1.1rem rgba(15, 23, 42, .18) !important;
}
body.main-screen-active .main-south-control button {
  min-height: 2.2rem !important;
}
body.main-screen-active #mainSouthModeButton {
  min-width: 8.25rem !important;
  padding-inline: .8rem !important;
  background: color-mix(in srgb, var(--log), var(--panel) 78%) !important;
}
@media (max-width: 760px) {
  body.main-screen-active .main-play-reset-controls {
    gap: .24rem !important;
    padding: .14rem .22rem !important;
  }
  body.main-screen-active .main-play-reset-controls button {
    min-height: 2.08rem !important;
    padding-inline: .48rem !important;
    font-size: .82rem !important;
  }
  body.main-screen-active .main-play-reset-controls .main-play-step-button {
    min-width: 2.16rem !important;
    padding-inline: .38rem !important;
  }
  body.main-screen-active .main-play-reset-controls .main-play-button {
    min-width: 3.65rem !important;
  }
  body.main-screen-active .main-play-reset-controls .main-reset-button {
    min-width: 3.75rem !important;
  }
  body.main-screen-active .main-play-reset-controls .main-snapshot-button,
  body.main-screen-active .main-play-reset-controls .main-snapshot-open {
    padding-inline: .5rem !important;
    min-height: 2.08rem !important;
    font-size: .68rem !important;
  }
  body.main-screen-active .main-play-growth-label {
    min-width: 4.15rem !important;
    max-width: 5.2rem !important;
    min-height: 1.88rem !important;
    padding-inline: .32rem !important;
    font-size: .68rem !important;
  }
  body.main-screen-active .main-south-control {
    gap: .22rem !important;
    padding: .34rem .42rem !important;
  }
  body.main-screen-active #mainSouthModeButton {
    min-width: 6.75rem !important;
  }
}

/* build 62: hervatbare OGN-snapshots met expliciete paradata en naamkeuze. */
.ogn-snapshot-backdrop[hidden] { display: none !important; }
.ogn-snapshot-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .08);
}
.ogn-snapshot-dialog {
  width: min(920px, calc(100vw - 2rem));
  max-height: min(86vh, 760px);
  overflow: auto;
  box-sizing: border-box;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 45%);
  border-radius: 1.1rem;
  background: var(--panel);
  box-shadow: 0 1.2rem 4rem rgba(15, 23, 42, .35);
  color: var(--text);
}
.ogn-snapshot-dialog > header,
.ogn-snapshot-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ogn-snapshot-dialog > header {
  cursor: grab;
  user-select: none;
  touch-action: none;
  padding: .35rem .4rem;
  margin: -.35rem -.4rem 0;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--accent), var(--panel) 91%);
}
.ogn-snapshot-dialog.is-dragging > header { cursor: grabbing; }
.ogn-snapshot-dialog > header button { cursor: pointer; touch-action: manipulation; }
.ogn-snapshot-dialog h2 { margin: .15rem 0 0; }
.ogn-snapshot-dialog > header > button { min-width: 2.4rem; min-height: 2.4rem; border-radius: 999px; font-size: 1.35rem; }
.ogn-snapshot-kicker { color: var(--accent); font-size: .72rem; font-weight: 1000; letter-spacing: .1em; }
.ogn-snapshot-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .8rem; margin: .9rem 0; }
.ogn-snapshot-dialog fieldset { min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: .8rem; }
.ogn-snapshot-dialog legend { padding: 0 .35rem; font-weight: 950; }
.ogn-snapshot-choice-list { display: grid; gap: .42rem; }
.ogn-snapshot-choice-list label { display: flex; align-items: flex-start; gap: .48rem; padding: .42rem .5rem; border-radius: .58rem; background: color-mix(in srgb, var(--panel), var(--bg) 30%); }
.ogn-snapshot-choice-list small { display: block; margin-top: .12rem; color: var(--muted); }
.ogn-snapshot-action-list { max-height: 13rem; overflow: auto; }
.ogn-snapshot-empty, .ogn-snapshot-status { color: var(--muted); font-size: .82rem; }
.ogn-snapshot-proposals { margin-bottom: .75rem; }
#ognSnapshotNameProposals { display: grid; gap: .38rem; }
#ognSnapshotNameProposals button { width: 100%; overflow-wrap: anywhere; padding: .52rem .65rem; text-align: left; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ogn-snapshot-name-field { display: grid; gap: .3rem; font-weight: 900; }
.ogn-snapshot-name-field input { width: 100%; box-sizing: border-box; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--bg); color: var(--text); font: 700 .9rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.ogn-snapshot-dialog > footer { justify-content: flex-end; margin-top: .8rem; }
.ogn-snapshot-dialog > footer button { min-height: 2.5rem; padding-inline: 1rem; }
.ogn-snapshot-workspace-window[hidden] { display: none !important; }
.ogn-snapshot-workspace-window {
  position: fixed;
  z-index: 1180;
  top: 6.5rem;
  left: max(1rem, 6vw);
  width: min(88vw, 1320px);
  height: min(78vh, 900px);
  min-width: min(32rem, calc(100vw - 1rem));
  min-height: 22rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  resize: both;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--accent), var(--line) 36%);
  border-radius: .9rem;
  background: var(--panel);
  box-shadow: 0 1.25rem 4rem rgba(15, 23, 42, .42);
}
.ogn-snapshot-workspace-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.2rem;
  padding: .45rem .7rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent), var(--panel) 91%);
}
.ogn-snapshot-workspace-window.is-dragging > header { cursor: grabbing; }
.ogn-snapshot-workspace-window h2 { margin: .08rem 0 0; font-size: 1rem; }
.ogn-snapshot-workspace-window > header button {
  flex: 0 0 auto;
  min-width: 2.35rem;
  min-height: 2.35rem;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 999px;
  font-size: 1.3rem;
}
.ogn-snapshot-workspace-window iframe {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: var(--bg);
}
@media (max-width: 760px) {
  body.main-screen-active .main-play-reset-controls { max-width: calc(100vw - .6rem); overflow-x: auto; justify-content: flex-start !important; }
  .ogn-snapshot-dialog { width: calc(100vw - 1rem); max-height: 92vh; padding: .8rem; }
  .ogn-snapshot-columns { grid-template-columns: 1fr; }
  .ogn-snapshot-workspace-window {
    top: 4.5rem;
    left: .5rem;
    width: calc(100vw - 1rem);
    height: calc(100vh - 5rem);
    min-width: 0;
  }
}


/* v4560: SOV/VSO/enz.-box staat direct onder de projectiestrip, dus onder LOG. */
body.main-screen-active .main-grid-controls .main-south-control {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 6.9rem !important;
  margin: .58rem 0 0 !important;
  gap: .32rem !important;
  padding: .54rem .44rem !important;
  border-radius: 1.05rem !important;
  border: 1.8px solid color-mix(in srgb, var(--log), var(--line) 30%) !important;
  background: color-mix(in srgb, var(--panel), var(--log) 8%) !important;
  box-shadow: 0 .34rem 1.05rem rgba(15, 23, 42, .18) !important;
}
body.main-screen-active .main-grid-controls .main-south-control.is-hidden {
  display: none !important;
}
body.main-screen-active .main-grid-controls .main-south-control::before {
  content: "LOG";
  display: block !important;
  flex: 0 0 100% !important;
  color: var(--muted) !important;
  font-size: .64rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
}
body.main-screen-active .main-grid-controls .main-south-control button {
  min-height: 2.02rem !important;
  border-radius: .72rem !important;
}
body.main-screen-active .main-grid-controls #mainSouthModeButton {
  order: 1 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: .25rem !important;
  font-size: .8rem !important;
  background: color-mix(in srgb, var(--log), var(--panel) 78%) !important;
}
body.main-screen-active .main-grid-controls #mainSouthPrevButton,
body.main-screen-active .main-grid-controls #mainSouthNextButton {
  order: 2 !important;
  flex: 1 1 calc(50% - .18rem) !important;
  min-width: 0 !important;
  padding-inline: .2rem !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-grid-controls .main-south-control {
    width: min(100%, 22rem) !important;
    margin: .34rem auto 0 !important;
    flex-wrap: nowrap !important;
    padding: .34rem .46rem !important;
  }
  body.main-screen-active .main-grid-controls .main-south-control::before { display: none !important; }
  body.main-screen-active .main-grid-controls #mainSouthModeButton {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 6.1rem !important;
  }
  body.main-screen-active .main-grid-controls #mainSouthPrevButton,
  body.main-screen-active .main-grid-controls #mainSouthNextButton {
    flex: 0 0 2.3rem !important;
  }
}


/* v4571: Hoofdvenster-opties herontworpen. Default = volledige boom zichtbaar. */
body.main-screen-active .main-window-fit-menu {
  flex: 0 1 auto !important;
}
body.main-screen-active .main-window-fit-field:first-child select {
  max-width: 13.5rem !important;
  min-width: 9.5rem !important;
  font-weight: 950 !important;
}
body.main-screen-active.main-window-window .canvas-wrap {
  overflow: hidden !important;
}
body.main-screen-active.main-window-auto .canvas-wrap {
  overflow: hidden !important;
}
body.main-screen-active.main-window-window #graphSvg,
body.main-screen-active.main-window-auto #graphSvg {
  display: block !important;
}
@media (max-width: 760px) {
  body.main-screen-active .main-window-fit-field:first-child select {
    max-width: 9.8rem !important;
    min-width: 8.2rem !important;
  }
}


/* v4571: smallere keuze-boxen; popup/optiontekst blijft volledig als option-title aanwezig. */
body.main-screen-active .main-topbar {
  gap: .22rem !important;
  padding: .2rem .3rem !important;
}
body.main-screen-active .main-sentence-field,
body.main-screen-active .main-adverb-field,
body.main-screen-active .main-window-fit-field {
  gap: .18rem !important;
}
body.main-screen-active .main-sentence-field {
  max-width: 12.2rem !important;
}
body.main-screen-active .main-sentence-field select {
  width: clamp(7.8rem, 13vw, 10.2rem) !important;
  max-width: 10.2rem !important;
}
body.main-screen-active .main-adverb-field select {
  width: clamp(7.4rem, 12vw, 9.8rem) !important;
  max-width: 9.8rem !important;
}
body.main-screen-active .main-window-fit-menu {
  gap: .2rem !important;
}
body.main-screen-active .main-window-fit-field:first-child select {
  width: clamp(7.2rem, 11vw, 9.6rem) !important;
  min-width: 0 !important;
  max-width: 9.6rem !important;
}
body.main-screen-active .main-window-fit-field:last-child select,
body.main-screen-active .main-window-fit-field select {
  width: clamp(7rem, 10vw, 8.9rem) !important;
  min-width: 0 !important;
  max-width: 8.9rem !important;
}
body.main-screen-active .main-sentence-field select,
body.main-screen-active .main-adverb-field select,
body.main-screen-active .main-window-fit-field select {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-height: 2rem !important;
  padding: .12rem .38rem !important;
  font-size: .76rem !important;
}
body.main-screen-active .main-sentence-field span,
body.main-screen-active .main-adverb-field span,
body.main-screen-active .main-window-fit-field span {
  font-size: .68rem !important;
}
@media (max-width: 900px) {
  body.main-screen-active .main-topbar { gap: .18rem !important; }
  body.main-screen-active .main-sentence-field select { width: 7.4rem !important; max-width: 7.4rem !important; }
  body.main-screen-active .main-adverb-field select { width: 7.1rem !important; max-width: 7.1rem !important; }
  body.main-screen-active .main-window-fit-field:first-child select { width: 7.8rem !important; max-width: 7.8rem !important; }
  body.main-screen-active .main-window-fit-field:last-child select,
  body.main-screen-active .main-window-fit-field select { width: 7.2rem !important; max-width: 7.2rem !important; }
}


/* v4571: mobile/Pages mag niet automatisch donker worden door systeem-dark-mode.
   Het viewer-hoofdscherm blijft licht en configureerbaar via deze variabelen. */
body.main-screen-active {
  color-scheme: light !important;
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --line: #cbd5e1;
  --grid: #e2e8f0;
  --grid-major: #cbd5e1;
  --accent: #0f172a;
  --accent-contrast: #ffffff;
  --node: #ffffff;
  --node-line: #0f172a;
  --edge: #334155;
  --lex: #2563eb;
  --synt: #16a34a;
  --log: #7c3aed;
  --shadow: rgba(15, 23, 42, 0.16);
}
@media (max-width: 900px) {
  html:has(body.main-screen-active),
  body.main-screen-active,
  body.main-screen-active .app-shell,
  body.main-screen-active .workspace,
  body.main-screen-active .canvas-wrap,
  body.main-screen-active #graphSvg {
    background: #f8fafc !important;
  }
  body.main-screen-active .main-topbar,
  body.main-screen-active .main-play-reset-bar {
    background: #ffffff !important;
  }
}


/* v4571: projectieknoppenbox staat rechts van de SYNT-as; de marker staat binnen de box, niet over de as. */
@media (orientation: landscape) {
  body.main-screen-active .canvas-wrap .main-grid-controls::before,
  body.main-screen-active .main-grid-controls::before {
    left: 0 !important;
    transform: translateX(-7px) !important;
  }
}

/* v4571: mobile hoofdscherm blijft expliciet licht, ook op browsers zonder :has(). */
@media (max-width: 900px) {
  html,
  body,
  body.main-screen-active {
    color-scheme: light !important;
    background: #f8fafc !important;
  }
  body.main-screen-active .canvas-wrap,
  body.main-screen-active #graphSvg {
    background-color: #f8fafc !important;
  }
}


/* v4571: projectiebox niet over de SYNT-as. De SVG-as blijft de enige verticale as;
   de oude HTML-separator kon visueel als overlap met de SYNT-as worden gelezen. */
@media (orientation: landscape) {
  body.main-screen-active .main-grid-controls::before,
  body.main-screen-active .canvas-wrap .main-grid-controls::before {
    display: none !important;
    content: none !important;
  }
  body.main-screen-active .canvas-wrap .main-grid-controls {
    margin-left: 0 !important;
  }
}


/* v4569: LOG-balk blijft zelfstandig rechts van de SYNT-as; SOV-box staat los links naast die balk. */
body.main-screen-active .main-grid-controls {
  display: block !important;
  width: 6.9rem !important;
}
body.main-screen-active .main-grid-controls .main-projection-strip {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .32rem !important;
}
body.main-screen-active .main-south-control {
  position: absolute !important;
  left: var(--main-south-left, 1rem) !important;
  top: var(--main-south-top, 1rem) !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 6.9rem !important;
  margin: 0 !important;
  gap: .32rem !important;
  padding: .54rem .44rem !important;
  border-radius: 1.05rem !important;
  border: 1.8px solid color-mix(in srgb, var(--log), var(--line) 30%) !important;
  background: color-mix(in srgb, var(--panel), var(--log) 8%) !important;
  box-shadow: 0 .34rem 1.05rem rgba(15, 23, 42, .18) !important;
  z-index: 151 !important;
}
body.main-screen-active .main-south-control::before {
  content: "LOG";
  display: block !important;
  flex: 0 0 100% !important;
  color: var(--muted) !important;
  font-size: .64rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
}
body.main-screen-active .main-south-control button {
  min-height: 2.02rem !important;
  border-radius: .72rem !important;
}
body.main-screen-active .main-south-control #mainSouthModeButton {
  order: 1 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: .25rem !important;
  font-size: .8rem !important;
  background: color-mix(in srgb, var(--log), var(--panel) 78%) !important;
}
body.main-screen-active .main-south-control #mainSouthPrevButton,
body.main-screen-active .main-south-control #mainSouthNextButton {
  order: 2 !important;
  flex: 1 1 calc(50% - .18rem) !important;
  min-width: 0 !important;
  padding-inline: .2rem !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-south-control {
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--main-control-height) + .42rem) !important;
    transform: translateX(-50%) !important;
    width: min(100%, 22rem) !important;
    padding: .34rem .46rem !important;
    flex-wrap: nowrap !important;
  }
  body.main-screen-active .main-south-control::before { display: none !important; }
  body.main-screen-active .main-south-control #mainSouthModeButton {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 6.1rem !important;
  }
  body.main-screen-active .main-south-control #mainSouthPrevButton,
  body.main-screen-active .main-south-control #mainSouthNextButton {
    flex: 0 0 2.3rem !important;
  }
}


/* v4571: verplaatsbare taalactiebox. Default-anker wordt in JS berekend: LEX-as × LOG-as. */
body.main-screen-active .main-south-control.language-action-box {
  cursor: default !important;
  user-select: none !important;
  touch-action: none !important;
}
body.main-screen-active .main-south-control.language-action-box.is-draggable {
  cursor: grab !important;
}
body.main-screen-active .main-south-control.language-action-box.is-draggable:active {
  cursor: grabbing !important;
}
.checkbox-mini-field .inline-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  min-height: 2rem !important;
  padding: .32rem .5rem !important;
  border: 1px solid var(--line) !important;
  border-radius: .7rem !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 4%) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
}
.checkbox-mini-field .inline-checkbox input { accent-color: var(--accent) !important; }


/* v4572: taalactiebox-drag mag de viewer niet breken; drag-cursor alleen op de box zelf. */
body.main-screen-active .main-south-control.language-action-box.is-draggable {
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
}
body.main-screen-active .main-south-control.language-action-box.is-dragging {
  cursor: grabbing !important;
  opacity: .96 !important;
}
body.main-screen-active .main-south-control.language-action-box button {
  cursor: pointer !important;
}


/* v4574: compacte SOV-box op positie LEX-as × LOG-as. */
body.main-screen-active .main-south-control {
  width: 4.25rem !important;
  min-width: 4.25rem !important;
  padding: .28rem !important;
  border-radius: .82rem !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}
body.main-screen-active .main-south-control::before {
  content: none !important;
  display: none !important;
}
body.main-screen-active .main-south-control button {
  min-height: 1.9rem !important;
}
body.main-screen-active .main-south-control #mainSouthModeButton {
  order: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: .2rem !important;
  font-size: .82rem !important;
}
body.main-screen-active .main-south-control #mainSouthPrevButton,
body.main-screen-active .main-south-control #mainSouthNextButton {
  display: none !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-south-control {
    left: var(--main-south-left, 1rem) !important;
    top: var(--main-south-top, 1rem) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    padding: .28rem !important;
  }
  body.main-screen-active .main-south-control #mainSouthModeButton {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* v4575: compacte taalactiebox; pijlen links/rechts naast SOV; geen LOG-label. */
body.main-screen-active .main-south-control.language-action-box {
  width: 7.55rem !important;
  min-width: 7.55rem !important;
  max-width: 7.55rem !important;
  padding: .24rem .28rem !important;
  gap: .24rem !important;
  display: grid !important;
  grid-template-columns: 1.75rem 3.35rem 1.75rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: .86rem !important;
}
body.main-screen-active .main-south-control.language-action-box::before {
  content: none !important;
  display: none !important;
}
body.main-screen-active .main-south-control.language-action-box button {
  min-height: 1.9rem !important;
  height: 1.9rem !important;
  padding: .12rem .18rem !important;
  border-radius: .62rem !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthPrevButton {
  display: inline-flex !important;
  order: 1 !important;
  grid-column: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthModeButton {
  display: inline-flex !important;
  order: 2 !important;
  grid-column: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: .18rem !important;
  background: color-mix(in srgb, var(--log), var(--panel) 78%) !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthNextButton {
  display: inline-flex !important;
  order: 3 !important;
  grid-column: 3 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-south-control.language-action-box {
    width: 7.55rem !important;
    min-width: 7.55rem !important;
    max-width: 7.55rem !important;
    grid-template-columns: 1.75rem 3.35rem 1.75rem !important;
    flex-wrap: nowrap !important;
  }
}


/* v4576: SOV-box startpositie stabiel; pijlen klein naast SOV; stijl volgt LOG-as-boxen. */
body.main-screen-active .main-south-control.language-action-box {
  width: 6.45rem !important;
  min-width: 6.45rem !important;
  max-width: 6.45rem !important;
  padding: .22rem .26rem !important;
  gap: .18rem !important;
  display: grid !important;
  grid-template-columns: 1.28rem 3.05rem 1.28rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: .9rem !important;
  border-width: 1.7px !important;
}
body.main-screen-active .main-south-control.language-action-box::before {
  content: none !important;
  display: none !important;
}
body.main-screen-active .main-south-control.language-action-box button {
  min-height: 1.66rem !important;
  height: 1.66rem !important;
  padding: .08rem .12rem !important;
  border-radius: .58rem !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthPrevButton,
body.main-screen-active .main-south-control.language-action-box #mainSouthNextButton {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--panel), white 7%) !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthModeButton {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: .14rem !important;
  font-size: .82rem !important;
  font-weight: 1000 !important;
  background: color-mix(in srgb, var(--log), var(--panel) 76%) !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-south-control.language-action-box {
    width: 6.45rem !important;
    min-width: 6.45rem !important;
    max-width: 6.45rem !important;
    grid-template-columns: 1.28rem 3.05rem 1.28rem !important;
    padding: .22rem .26rem !important;
    gap: .18rem !important;
  }
}


/* v4578: SOV-box links van LOG-as, conform referentiebeeld; kleiner knopformaat, vet label. */
body.main-screen-active .main-south-control.language-action-box {
  width: 5.7rem !important;
  min-width: 5.7rem !important;
  max-width: 5.7rem !important;
  padding: .24rem .28rem !important;
  gap: .16rem !important;
  grid-template-columns: 1.12rem 2.72rem 1.12rem !important;
  border-radius: .92rem !important;
  border-width: 1.7px !important;
}
body.main-screen-active .main-south-control.language-action-box button {
  min-height: 1.54rem !important;
  height: 1.54rem !important;
  padding: .06rem .10rem !important;
  border-radius: .52rem !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}
body.main-screen-active .main-south-control.language-action-box #mainSouthModeButton {
  font-size: .84rem !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
  background: color-mix(in srgb, var(--log), var(--panel) 74%) !important;
}
@media (orientation: portrait) {
  body.main-screen-active .main-south-control.language-action-box {
    width: 5.7rem !important;
    min-width: 5.7rem !important;
    max-width: 5.7rem !important;
    grid-template-columns: 1.12rem 2.72rem 1.12rem !important;
    padding: .24rem .28rem !important;
    gap: .16rem !important;
  }
}


/* v4578: SOV-box wordt met zijn werkelijke hoogte op de oorspronkelijke LOG-as gecentreerd. */
body.main-screen-active .main-south-control.language-action-box {
  min-height: 0 !important;
  height: auto !important;
  align-content: center !important;
}

/* v1.0.3: mobile topbar smal; Zin/Bijwoord tonen alleen de pulldown, labels verborgen. */
body.main-screen-active .main-window-fit-menu {
  display: none !important;
}
@media (max-width: 760px), (orientation: portrait) {
  body.main-screen-active .main-topbar {
    gap: .24rem !important;
    padding: .30rem .36rem !important;
  }
  body.main-screen-active .main-sentence-field,
  body.main-screen-active .main-adverb-field {
    flex: 0 1 auto !important;
    gap: 0 !important;
    min-width: 0 !important;
  }
  body.main-screen-active .main-sentence-field span,
  body.main-screen-active .main-adverb-field span,
  .mobile-sentence-field span,
  .mobile-adverb-field span {
    display: none !important;
  }
  body.main-screen-active .main-sentence-field select {
    width: clamp(7.2rem, 38vw, 9.2rem) !important;
    max-width: clamp(7.2rem, 38vw, 9.2rem) !important;
    min-height: 2.0rem !important;
    padding-inline: .42rem !important;
    font-size: .78rem !important;
  }
  body.main-screen-active .main-adverb-field select {
    width: clamp(6.4rem, 31vw, 8.2rem) !important;
    max-width: clamp(6.4rem, 31vw, 8.2rem) !important;
    min-height: 2.0rem !important;
    padding-inline: .42rem !important;
    font-size: .78rem !important;
  }
  body.main-screen-active .main-topbar-actions {
    gap: .18rem !important;
    margin-left: auto !important;
  }
  body.main-screen-active .language-toggle-button,
  body.main-screen-active .help-open-button,
  body.main-screen-active .config-open-button {
    min-height: 2.0rem !important;
    padding: .18rem .42rem !important;
    font-size: .72rem !important;
  }
}

.grouped-testmateriaal-list {
  grid-template-columns: repeat(var(--testmateriaal-list-count, 1), minmax(14.5rem, 1fr));
  align-items: start;
  gap: .45rem;
  min-width: calc(var(--testmateriaal-list-count, 1) * 15rem);
  overflow-x: auto;
}
.testmateriaal-list-panel {
  display: grid;
  align-content: start;
  gap: .24rem;
  min-width: 0;
  padding: .22rem;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: .62rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 7%);
  box-sizing: border-box;
}
.testmateriaal-list-panel .compact-choice-group,
.testmateriaal-list-panel .compact-choice-option {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: .14rem;
}
.testmateriaal-list-panel .compact-choice-group { position: static; }
@media (max-width: 760px), (orientation: portrait) {
  .grouped-testmateriaal-list {
    grid-template-columns: repeat(var(--testmateriaal-list-count, 1), minmax(11.25rem, 1fr));
    min-width: calc(var(--testmateriaal-list-count, 1) * 11.5rem);
  }
}

/* v3.1.0-rc.10: Config begint met een herkenbare oriëntatiekaart. */
.config-orientation-card {
  margin: 12px 0 18px;
  border: 1px solid #b8c7db;
  background: linear-gradient(145deg, #f8fbff, #edf4fc);
  box-shadow: 0 8px 24px rgba(32, 56, 85, .08);
}
.config-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.config-section-heading h2 { margin: 2px 0 0; }
.config-section-kicker {
  color: #52677f;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.config-section-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #172235;
  color: #fff;
  font-weight: 800;
}
.lex-axis-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
}
.lex-axis-choice-grid button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid #9fb1c7;
  border-radius: 12px;
  background: #fff;
  color: #172235;
  text-align: left;
}
.lex-axis-choice-grid button small { color: #52677f; font-weight: 800; }
.lex-axis-choice-grid button:hover { border-color: #385d8c; background: #f4f8fd; }
.lex-axis-choice-grid button.active {
  border-color: #172235;
  background: #172235;
  color: #fff;
  box-shadow: 0 3px 10px rgba(23, 34, 53, .18);
}
.lex-axis-choice-grid button.active small { color: #d9e8fa; }
.lex-axis-side-select-field { margin-top: 8px; }
@media (max-width: 680px) {
  .lex-axis-choice-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}

/* v3.1.0-rc.10: algemene oriëntatie ook rechtstreeks op Main. */
.main-lex-orientation-menu { position:relative; flex:0 0 auto; }
.main-lex-orientation-menu > summary {
  min-height:2rem;
  display:flex;
  align-items:center;
  padding:.28rem .58rem;
  border:1px solid #9fb1c7;
  border-radius:.62rem;
  background:#fff;
  color:#172235;
  font-weight:850;
  list-style:none;
  cursor:pointer;
}
.main-lex-orientation-menu > summary::-webkit-details-marker { display:none; }
.main-lex-orientation-menu > summary::after { content:'▾'; margin-left:.3rem; font-size:.62rem; }
.main-lex-orientation-popover {
  left:0;
  top:calc(100% + .35rem);
  width:min(24rem,calc(100vw - .7rem));
  padding:.62rem;
  z-index:120;
}
.main-lex-orientation-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.35rem; margin:.5rem 0; }
.main-lex-orientation-grid button { min-height:2rem; border:1px solid #9fb1c7; border-radius:.55rem; background:#fff; font-weight:800; }
.main-lex-orientation-grid button.active { background:#172235; color:#fff; border-color:#172235; }
.lex-label-turn-control {
  display:grid;
  grid-template-columns:4.8rem 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  gap:.25rem .62rem;
  margin:.15rem 0 .55rem;
  padding:.55rem;
  border:1px solid color-mix(in srgb,var(--lex),var(--line) 45%);
  border-radius:.8rem;
  background:color-mix(in srgb,var(--lex),var(--panel) 91%);
}
.lex-label-turn-dial {
  --dial-angle:135deg;
  position:relative;
  grid-row:1 / span 2;
  width:4.35rem;
  height:4.35rem;
  border:1px solid #71839a;
  border-radius:50%;
  background:
    radial-gradient(circle at 37% 31%,#fff 0 8%,transparent 9%),
    radial-gradient(circle,#f8fafc 0 43%,#d9e2ee 44% 69%,#aebdce 70% 74%,#eef3f8 75%);
  box-shadow:inset 0 0 0 2px #fff,0 2px 7px rgb(15 23 42 / .22);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.lex-label-turn-dial:active { cursor:grabbing; }
.lex-label-turn-dial:focus-visible { outline:3px solid color-mix(in srgb,var(--lex),#fff 25%); outline-offset:3px; }
.lex-label-turn-dial.is-disabled { opacity:.42; cursor:not-allowed; }
.lex-label-turn-dial-pointer {
  position:absolute;
  inset:.38rem;
  transform:rotate(var(--dial-angle));
  transition:transform 45ms linear;
  pointer-events:none;
}
.lex-label-turn-dial-pointer::before {
  content:'';
  position:absolute;
  top:.08rem;
  left:50%;
  width:.22rem;
  height:1.48rem;
  border-radius:999px;
  background:#172235;
  transform:translateX(-50%);
  box-shadow:0 0 0 1px rgb(255 255 255 / .5);
}
.lex-label-turn-dial-center {
  position:absolute;
  left:50%;
  top:50%;
  width:.72rem;
  height:.72rem;
  border-radius:50%;
  background:#172235;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px #eef3f8;
  pointer-events:none;
}
#mainLexLabelTurnOutput { align-self:end; font-size:1.22rem; font-weight:1000; color:#172235; }
.lex-label-turn-scale { align-self:start; display:flex; flex-direction:column; gap:.08rem; color:var(--muted); font-size:.68rem; font-weight:750; }
.lex-label-turn-calibration {
  grid-column:1 / -1;
  padding-top:.3rem;
  border-top:1px solid color-mix(in srgb,var(--lex),var(--line) 65%);
  color:var(--muted);
  font-size:.66rem;
  font-weight:650;
}
.main-lex-orientation-menu.is-disabled { opacity:.55; }
.main-lex-orientation-menu.is-disabled > summary { cursor:not-allowed; }
.lex-axis-mobile-warning {
  margin:.28rem .55rem;
  padding:.42rem .58rem;
  border:1px solid #f59e0b;
  border-radius:.55rem;
  background:#fffbeb;
  color:#78350f;
  font-size:.78rem;
}
.lex-axis-mobile-warning[hidden], body:not(.main-screen-active) .lex-axis-mobile-warning { display:none !important; }
@media (max-width:760px), (max-height:480px) {
  .main-lex-orientation-menu > summary { min-height:1.85rem; padding:.2rem .4rem; font-size:.72rem; }
  .lex-axis-mobile-warning { font-size:.7rem; margin:.2rem .35rem; padding:.34rem .45rem; }
}

/* v1.0.3: SYNT-knop toont geïsoleerde syntax-regels, zonder centrale boomkopie. */
.synt-isolated-view .synt-isolated-title {
  fill: var(--synt);
  font-size: calc(17px * var(--og-font-scale));
  font-weight: 1000;
  text-anchor: start;
}
.synt-isolated-view .synt-isolated-subtitle {
  text-anchor: start;
  font-size: calc(12px * var(--og-font-scale));
}
.synt-isolated-view .synt-isolated-source-label {
  text-anchor: end;
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 900;
  fill: var(--synt);
}
.synt-isolated-view .synt-isolated-rule-box {
  stroke: var(--synt);
  fill: color-mix(in srgb, var(--panel), var(--synt) 8%);
}
.synt-isolated-view .synt-isolated-note-box {
  stroke: color-mix(in srgb, var(--synt), var(--line) 55%);
  fill: color-mix(in srgb, var(--panel), var(--bg) 18%);
  stroke-dasharray: 6 5;
}
.synt-isolated-view .synt-isolated-note {
  font-size: calc(11px * var(--og-font-scale));
  text-anchor: middle;
}
.synt-isolated-view .synt-isolated-stack-note {
  text-anchor: start;
  font-size: calc(10px * var(--og-font-scale));
}

/* v1.0.3: mobile-versies testbaar op desktop via lokale keuzeknop
   (`local-mobile-test.js`) of URL-parameter `?viewport=...`.
   De echte browser blijft desktop, maar het hoofdvenster krijgt een telefoonframe. */
body.viewport-mobile-test.main-screen-active {
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, .10), transparent 46%),
    var(--bg) !important;
}
body.viewport-mobile-test.main-screen-active::after {
  content: var(--viewport-test-label, "mobile test");
  position: fixed;
  left: calc(50vw - var(--viewport-test-width, 390px) / 2);
  top: calc(50vh + var(--viewport-test-height, 844px) / 2 + .45rem);
  z-index: 500;
  min-width: min(var(--viewport-test-width, 390px), calc(100vw - 1rem));
  box-sizing: border-box;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}
body.viewport-mobile-test.main-screen-active .app-shell,
body.viewport-mobile-test.main-screen-active .workspace,
body.viewport-mobile-test.main-screen-active .canvas-wrap {
  position: fixed !important;
  left: calc(50vw - var(--viewport-test-width, 390px) / 2) !important;
  top: calc(50vh - var(--viewport-test-height, 844px) / 2) !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: var(--viewport-test-width, 390px) !important;
  min-width: var(--viewport-test-width, 390px) !important;
  max-width: var(--viewport-test-width, 390px) !important;
  height: var(--viewport-test-height, 844px) !important;
  min-height: var(--viewport-test-height, 844px) !important;
  max-height: var(--viewport-test-height, 844px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.viewport-mobile-test.main-screen-active .canvas-wrap {
  border: 1px solid color-mix(in srgb, var(--text), transparent 78%) !important;
  border-radius: 1.45rem !important;
  box-shadow: 0 1.2rem 4rem rgba(15, 23, 42, .34) !important;
  background: #f8fafc !important;
}
body.viewport-mobile-test.main-screen-active #graphSvg {
  width: var(--viewport-test-width, 390px) !important;
  min-width: var(--viewport-test-width, 390px) !important;
  max-width: var(--viewport-test-width, 390px) !important;
  height: var(--viewport-test-height, 844px) !important;
  min-height: var(--viewport-test-height, 844px) !important;
  max-height: var(--viewport-test-height, 844px) !important;
}
body.viewport-mobile-test.main-screen-active .main-topbar {
  left: calc(50vw - var(--viewport-test-width, 390px) / 2 + .42rem) !important;
  right: calc(50vw - var(--viewport-test-width, 390px) / 2 + .42rem) !important;
  top: calc(50vh - var(--viewport-test-height, 844px) / 2 + .42rem) !important;
  width: auto !important;
  max-width: none !important;
  padding: .32rem .38rem !important;
  gap: .28rem !important;
  border-radius: .82rem !important;
}
body.viewport-mobile-test.main-screen-active .main-play-reset-bar {
  left: calc(50vw - var(--viewport-test-width, 390px) / 2) !important;
  right: auto !important;
  top: calc(50vh - var(--viewport-test-height, 844px) / 2 + var(--main-playbar-top, 3.25rem)) !important;
  width: var(--viewport-test-width, 390px) !important;
  max-width: var(--viewport-test-width, 390px) !important;
  padding: .18rem .32rem !important;
  border-radius: 0 !important;
}
body.viewport-mobile-test.main-screen-active .main-play-reset-controls {
  max-width: calc(var(--viewport-test-width, 390px) - .7rem) !important;
  gap: .2rem !important;
  padding: .12rem .18rem !important;
}
body.viewport-mobile-test.main-screen-active .main-play-reset-controls button {
  min-width: 2.3rem !important;
  min-height: 2.05rem !important;
  padding-inline: .45rem !important;
  font-size: .82rem !important;
}
body.viewport-mobile-test.main-screen-active .main-growth-step-label {
  max-width: 4.8rem !important;
  font-size: .72rem !important;
}
body.viewport-mobile-test.main-screen-active .main-sentence-field span,
body.viewport-mobile-test.main-screen-active .main-adverb-field span {
  display: none !important;
}
body.viewport-mobile-test.main-screen-active .main-sentence-field,
body.viewport-mobile-test.main-screen-active .main-adverb-field {
  flex: 1 1 7rem !important;
  min-width: 0 !important;
  gap: 0 !important;
}
body.viewport-mobile-test.main-screen-active .main-sentence-field select,
body.viewport-mobile-test.main-screen-active .main-adverb-field select {
  width: 100% !important;
  min-height: 2.05rem !important;
  max-width: none !important;
  padding: .2rem .35rem !important;
  font-size: .76rem !important;
  border-radius: .65rem !important;
}
body.viewport-mobile-test.main-screen-active .main-topbar-actions {
  gap: .2rem !important;
  flex: 0 0 auto !important;
}
body.viewport-mobile-test.main-screen-active .language-toggle-button,
body.viewport-mobile-test.main-screen-active .help-open-button,
body.viewport-mobile-test.main-screen-active .config-open-button {
  min-height: 2.05rem !important;
  padding-inline: .42rem !important;
  font-size: .7rem !important;
}
body.viewport-mobile-landscape-test.main-screen-active .main-topbar {
  max-width: calc(var(--viewport-test-width, 844px) - .84rem) !important;
}
body.viewport-desktop.main-screen-active::after,
body.viewport-auto.main-screen-active::after {
  content: none !important;
}

/* v1.0.3 correction: telefoonframe gebruikt geen CSS-calc-deling; alle overlays
   worden absoluut binnen het vaste app-shell frame geplaatst. */
body.viewport-mobile-test.main-screen-active::after {
  content: none !important;
}
body.viewport-mobile-test.main-screen-active .app-shell {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: var(--viewport-test-width, 390px) !important;
  height: var(--viewport-test-height, 844px) !important;
  min-width: var(--viewport-test-width, 390px) !important;
  min-height: var(--viewport-test-height, 844px) !important;
  max-width: var(--viewport-test-width, 390px) !important;
  max-height: var(--viewport-test-height, 844px) !important;
  overflow: visible !important;
  padding: 0 !important;
}
body.viewport-mobile-test.main-screen-active .app-shell::after {
  content: var(--viewport-test-label, "mobile test");
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .45rem);
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}
body.viewport-mobile-test.main-screen-active .workspace,
body.viewport-mobile-test.main-screen-active .canvas-wrap {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
body.viewport-mobile-test.main-screen-active #graphSvg {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
body.viewport-mobile-test.main-screen-active .main-topbar {
  position: absolute !important;
  left: .42rem !important;
  right: .42rem !important;
  top: .42rem !important;
  transform: none !important;
}
body.viewport-mobile-test.main-screen-active .main-play-reset-bar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--main-playbar-top, 3.25rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

/* v1.0.16: lokale mobile-test. Portrait/landscape worden op desktop niet via
   echte media queries bepaald, maar via body-classes uit local-mobile-test.js.
   Maak portrait daarom expliciet zoom/pinch-veilig en zorg dat de onderbalk
   binnen het telefoonframe blijft. */
body.viewport-mobile-test.main-screen-active .canvas-wrap,
body.viewport-mobile-test.main-screen-active #graphSvg {
  touch-action: none !important;
  overscroll-behavior: none !important;
}
body.viewport-mobile-portrait-test.main-screen-active .canvas-wrap {
  --main-control-height: 7.6rem;
}
body.viewport-mobile-portrait-test.main-screen-active #graphSvg {
  height: calc(100% - var(--main-control-height, 7.6rem)) !important;
  min-height: calc(100% - var(--main-control-height, 7.6rem)) !important;
  max-height: calc(100% - var(--main-control-height, 7.6rem)) !important;
}
body.viewport-mobile-portrait-test.main-screen-active .canvas-wrap .main-grid-controls,
body.viewport-mobile-portrait-test.main-screen-active .main-grid-controls {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  min-height: var(--main-control-height, 7.6rem) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: .22rem !important;
  padding: .34rem .42rem .38rem .42rem !important;
  background: color-mix(in srgb, var(--bg), transparent 4%) !important;
  border-top: 1px solid var(--line) !important;
  z-index: 180 !important;
}
body.viewport-mobile-portrait-test.main-screen-active .main-projection-strip {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
}
body.viewport-mobile-portrait-test.main-screen-active .main-projection-strip button {
  min-width: 4.05rem !important;
}
body.viewport-mobile-landscape-test.main-screen-active #graphSvg {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* v2.0.0-rc.14: View-menu bevat Syntax als eerste view en FT als tweede view; LOG blijft de zuidas. */
.main-view-field {
  display: flex;
  align-items: center;
  gap: .28rem;
  min-width: 0;
  flex: 0 0 auto;
  font-weight: 900;
  color: var(--muted);
}
.main-view-field select {
  min-height: 2.15rem;
  width: clamp(6.4rem, 10vw, 8.6rem);
  max-width: 8.6rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .14rem .42rem;
  font-size: .76rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.main-screen-active .main-view-field {
  gap: .18rem !important;
  max-width: 8.8rem !important;
}
body.main-screen-active .main-view-field span {
  font-size: .68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.main-screen-active .main-view-field select {
  width: clamp(5.8rem, 9vw, 7.6rem) !important;
  max-width: 7.6rem !important;
  min-height: 2rem !important;
  padding: .12rem .34rem !important;
  font-size: .74rem !important;
}
@media (max-width: 900px) {
  body.main-screen-active .main-view-field select {
    width: 5.7rem !important;
    max-width: 5.7rem !important;
  }
}
body.viewport-mobile-test.main-screen-active .main-view-field span {
  display: none !important;
}
body.viewport-mobile-test.main-screen-active .main-view-field {
  flex: 0 0 4.9rem !important;
  min-width: 0 !important;
  gap: 0 !important;
}
body.viewport-mobile-test.main-screen-active .main-view-field select {
  width: 100% !important;
  min-height: 2.05rem !important;
  max-width: none !important;
  padding: .2rem .30rem !important;
  font-size: .72rem !important;
  border-radius: .65rem !important;
}
body.viewport-mobile-landscape-test.main-screen-active .main-view-field {
  flex-basis: 5.8rem !important;
}


/* v1.0.16: Help als boomnavigatie; één onderwerp tegelijk; ruimte voor documentatiecarousel. */
.help-tree-screen {
  display: grid !important;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: .85rem;
  padding: .85rem !important;
  align-items: stretch;
  background: color-mix(in srgb, var(--bg), var(--panel) 20%);
}
.help-tree-nav,
.help-topic-stage {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel), #fff 6%);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}
.help-tree-nav {
  padding: .8rem;
  overflow: auto;
  max-height: calc(100vh - 9.5rem);
}
.help-tree-nav h3 {
  margin: 0 0 .55rem;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.help-topic-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.help-topic-tree-simple > ol {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-topic-tree-simple > ol > li {
  margin: 0;
}
.help-topic-tree li {
  position: relative;
  margin: .12rem 0;
}
.help-topic-tree li ul {
  margin-left: .75rem;
  padding-left: .75rem;
  border-left: 1px solid color-mix(in srgb, var(--line), var(--accent) 15%);
}
.help-topic-button {
  width: 100%;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: var(--text);
  padding: .42rem .5rem;
  text-align: left;
  font-weight: 750;
  cursor: pointer;
}
.help-topic-button:hover,
.help-topic-button:focus-visible {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  outline: none;
}
.help-topic-button.is-active {
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.help-topic-stage {
  min-height: min(60vh, 42rem);
  padding: clamp(.9rem, 2vw, 1.35rem);
  overflow: auto;
}
.help-topic-panel {
  display: none;
  max-width: 64rem;
}
.help-topic-panel.is-active {
  display: block;
}
.help-topic-panel h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}
.help-topic-panel p {
  max-width: 55rem;
  color: var(--muted);
  line-height: 1.55;
  font-size: 1rem;
}
.help-topic-panel ul {
  color: var(--muted);
  line-height: 1.55;
}
.help-carousel-reserved {
  margin-top: 1rem;
  width: min(100%, 54rem);
  aspect-ratio: 16 / 9;
  min-height: 15rem;
  border: 2px dashed color-mix(in srgb, var(--accent), var(--line) 60%);
  border-radius: 1.1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 92%), transparent 55%),
    color-mix(in srgb, var(--panel), var(--bg) 18%);
  display: grid;
  place-items: center;
}
.help-carousel-large {
  width: min(100%, 62rem);
  min-height: 20rem;
}
.help-carousel-frame {
  display: grid;
  gap: .45rem;
  text-align: center;
  padding: 1rem;
  color: var(--muted);
}
.help-carousel-frame strong {
  color: var(--text);
  font-size: 1.1rem;
}
.help-lang-en { display: none !important; }
body.lang-en .help-lang-nl { display: none !important; }
body.lang-en span.help-lang-en { display: inline !important; }
body.lang-en div.help-lang-en { display: block !important; }
body.lang-en p.help-lang-en,
body.lang-en small.help-lang-en { display: block !important; }
body.lang-en .help-carousel-frame .help-lang-en { display: inline !important; }
body.lang-en .help-topic-panel > .help-lang-en { display: block !important; }
@media (max-width: 860px) {
  .help-tree-screen {
    grid-template-columns: 1fr;
    padding: .65rem !important;
  }
  .help-tree-nav {
    max-height: 14rem;
  }
  .help-topic-stage {
    min-height: 24rem;
  }
  .help-carousel-reserved {
    min-height: 12rem;
  }
}

/* v1.0.16: minimale belijning; projectielijnen dragen de nadruk. */
:root {
  --grid: color-mix(in srgb, #e2e8f0, transparent 55%);
  --grid-major: color-mix(in srgb, #cbd5e1, transparent 46%);
}
body.main-screen-active .main-grid-controls.is-hidden,
body.main-screen-active .canvas-wrap .main-grid-controls.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
body.main-screen-active .main-grid-controls {
  align-items: stretch !important;
}
body.main-screen-active .main-projection-title {
  display: block !important;
  padding: .18rem .32rem .02rem !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
body.main-screen-active .grid-line {
  stroke-width: .65 !important;
  opacity: .24 !important;
}
body.main-screen-active .grid-line.major {
  stroke-width: .8 !important;
  opacity: .32 !important;
}
body.main-screen-active .tree-edge,
body.main-screen-active .syntax-tree-edge,
body.main-screen-active .relation-edge,
body.main-screen-active .log-edge,
body.main-screen-active .tree-subbox,
body.main-screen-active .jan-subtree-box {
  opacity: .46 !important;
  stroke-width: 1.15 !important;
}
body.main-screen-active .projection-line,
body.main-screen-active .projection-line.horizontal,
body.main-screen-active .projection-line.orthogonal,
body.main-screen-active .logical-projection-line {
  opacity: .9 !important;
  stroke-width: 2.15 !important;
  stroke-dasharray: 9 5 !important;
}
body.main-screen-active .projection-axis-line,
body.main-screen-active .logical-axis,
body.main-screen-active .lex-axis-line {
  opacity: .92 !important;
  stroke-width: 2.35 !important;
}
@media (orientation: landscape) {
  body.main-screen-active .main-grid-controls {
    gap: .18rem !important;
    background: color-mix(in srgb, var(--panel), transparent 12%) !important;
    border: 1px solid color-mix(in srgb, var(--line), transparent 28%) !important;
    border-radius: .9rem !important;
    padding: .22rem !important;
  }
}
@media (orientation: portrait) {
  body.main-screen-active .main-grid-controls {
    gap: .18rem !important;
  }
}


/* v1.0.16: named projection colors and LEX projection markers. */
.projection-color-field {
  border: 1px dashed color-mix(in srgb, var(--line), transparent 22%);
  border-radius: .9rem;
  padding: .55rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: .5rem;
  margin: .45rem 0;
}
.projection-color-field legend {
  font-weight: 950;
  color: var(--muted);
  padding-inline: .25rem;
}
.projection-color-field .top-menu-choice-help {
  grid-column: 1 / -1;
}
.projection-line.lex-source-projection-line {
  stroke: var(--lex) !important;
  stroke-width: 2.35 !important;
  stroke-dasharray: 8 5 !important;
  opacity: .94 !important;
}
.lex-slot-box.lex-projection-slot,
.lex-local-slot,
.lex-free-slot {
  stroke: var(--lex) !important;
}
.projection-axis-line.synt,
.projection-line.synt,
.syntax-rule-box {
  stroke: var(--synt);
}
.logical-axis.log,
.projection-line.log,
.logical-order-box {
  stroke: var(--log);
}
body.main-screen-active .grid-line { opacity: .18 !important; }
body.main-screen-active .grid-line.major { opacity: .24 !important; }
body.main-screen-active .tree-edge,
body.main-screen-active .syntax-tree-edge,
body.main-screen-active .relation-edge,
body.main-screen-active .tree-subbox,
body.main-screen-active .jan-subtree-box {
  opacity: .34 !important;
  stroke-width: .95 !important;
}
@media (max-width: 720px) {
  .projection-color-field { grid-template-columns: 1fr; }
}

/* v1.0.16: Projecties-box stabiel en sleepbaar; LOG-kleur hard via CSS-var. */
body.main-screen-active .main-grid-controls.is-draggable {
  cursor: move !important;
}
body.main-screen-active .main-grid-controls.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}
body.main-screen-active .main-grid-controls.is-draggable .main-projection-title {
  cursor: move !important;
}
body.main-screen-active .logical-axis.log,
body.main-screen-active .projection-line.log,
body.main-screen-active .logical-source-line,
body.main-screen-active .logical-projection-line,
body.main-screen-active .logical-order-box,
body.main-screen-active .logical-order-badge,
body.main-screen-active .logical-order-badge-interactive {
  stroke: var(--log) !important;
}
body.main-screen-active .logical-order-badge,
body.main-screen-active .logical-order-badge-interactive,
body.main-screen-active .logical-order-box {
  background: color-mix(in srgb, var(--panel), var(--log) 8%) !important;
}
.config-save-field {
  border: 1px dashed color-mix(in srgb, var(--line), transparent 20%);
  border-radius: .9rem;
  padding: .55rem;
  margin: .45rem 0;
}
.config-save-field legend {
  font-weight: 950;
  color: var(--muted);
  padding-inline: .25rem;
}
.config-save-row {
  flex-wrap: wrap;
  gap: .4rem;
}
@media (max-width: 860px) {
  .help-tree-screen {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    padding: .5rem !important;
    overflow: auto !important;
  }
  .help-tree-nav {
    max-height: 38dvh !important;
    padding: .55rem !important;
    border-radius: .85rem !important;
  }
  .help-topic-tree li ul {
    margin-left: .35rem !important;
    padding-left: .5rem !important;
  }
  .help-topic-button {
    padding: .36rem .42rem !important;
    font-size: .92rem !important;
  }
  .help-topic-stage {
    min-height: 42dvh !important;
    max-height: none !important;
    padding: .75rem !important;
    border-radius: .85rem !important;
  }
  .help-topic-panel p,
  .help-topic-panel ul {
    font-size: .94rem !important;
    line-height: 1.45 !important;
  }
  .help-carousel-reserved {
    min-height: 10rem !important;
    aspect-ratio: 16 / 10 !important;
  }
}
body.main-screen-active .logical-order-badge,
body.main-screen-active .logical-order-badge-interactive,
body.main-screen-active .logical-order-box {
  fill: color-mix(in srgb, var(--panel), var(--log) 8%) !important;
}

/* rc.18: README links/rechts. De specifieke gridregel herstelt het directe
   rechter tekstpaneel dat anders door de algemene flexregel werd overschreven. */
body.help-screen-active .help-screen {
  overflow: hidden !important;
}
body.help-screen-active .help-screen.help-tree-screen {
  display: grid !important;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.help-tree-screen {
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) !important;
  min-height: 0 !important;
}
.help-tree-nav {
  max-height: none !important;
  height: 100% !important;
  min-height: 0 !important;
}
.help-topic-stage {
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
}
.help-topic-panel.is-active {
  display: block !important;
}
.help-topic-carousel-slot,
.help-carousel-reserved {
  margin-top: 1.1rem !important;
}
.help-topic-carousel-slot::before {
  content: attr(data-carousel-topic);
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.readme-intro-panel {
  max-width: 68rem;
}
.readme-intro-panel h4 {
  margin: 1rem 0 .35rem;
  color: var(--text);
  font-size: 1.03rem;
}
.readme-intro-panel a {
  color: var(--accent);
  font-weight: 750;
  text-underline-offset: .16em;
}
.readme-query-note {
  font-size: .88rem !important;
  font-style: italic;
}
.readme-tree-carousel {
  width: min(100%, 64rem);
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel), var(--bg) 18%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
}
.readme-carousel-viewport {
  aspect-ratio: 16 / 10;
  min-height: 20rem;
}
.readme-carousel-slide {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  margin: 0;
}
.readme-carousel-slide[hidden] {
  display: none !important;
}
.readme-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #f8fafc;
}
.readme-carousel-slide figcaption {
  min-height: 3rem;
  padding: .65rem .85rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel), var(--bg) 9%);
  color: var(--muted);
  line-height: 1.4;
}
.readme-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .55rem .75rem;
  border-top: 1px solid var(--line);
}
.readme-carousel-controls[hidden] {
  display: none !important;
}
.readme-carousel-controls > button {
  min-width: 2.4rem;
  min-height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.readme-carousel-dots {
  display: flex;
  align-items: center;
  gap: .38rem;
}
.readme-carousel-dots button {
  width: .72rem;
  height: .72rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted), transparent 52%);
  cursor: pointer;
}
.readme-carousel-dots button.is-active {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
@media (max-width: 860px) {
  body.help-screen-active .help-screen {
    overflow: hidden !important;
  }
  body.help-screen-active .help-screen.help-tree-screen {
    display: grid !important;
    grid-template-columns: minmax(8.5rem, 36vw) minmax(0, 1fr) !important;
  }
  .help-tree-screen {
    grid-template-columns: minmax(8.5rem, 36vw) minmax(0, 1fr) !important;
    gap: .45rem !important;
    padding: .45rem !important;
    overflow: hidden !important;
  }
  .help-tree-nav {
    height: calc(100dvh - 6.6rem) !important;
    max-height: calc(100dvh - 6.6rem) !important;
    overflow: auto !important;
  }
  .help-tree-nav h3 {
    font-size: .72rem !important;
  }
  .help-topic-button {
    padding: .32rem .34rem !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
  }
  .help-topic-stage {
    height: calc(100dvh - 6.6rem) !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: .62rem !important;
  }
  .help-topic-panel h3 {
    font-size: 1.05rem !important;
  }
  .help-topic-panel p,
  .help-topic-panel ul {
    font-size: .86rem !important;
  }
  .help-topic-carousel-slot,
  .help-carousel-reserved {
    min-height: 8.5rem !important;
    aspect-ratio: 4 / 3 !important;
  }
  .readme-carousel-viewport {
    min-height: 11rem;
    aspect-ratio: 4 / 3;
  }
  .readme-carousel-slide figcaption {
    padding: .5rem .6rem;
    font-size: .78rem;
  }
  body.help-screen-active .help-screen.help-tree-screen.help-simple-screen {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: auto !important;
  }
  .help-simple-screen .help-tree-nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .help-simple-screen .help-tree-nav h3 {
    display: none;
  }
  .help-topic-tree-simple > ol {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding-bottom: .1rem;
    scrollbar-width: thin;
  }
  .help-topic-tree-simple > ol > li {
    flex: 0 0 auto;
  }
  .help-topic-tree-simple .help-topic-button {
    width: auto;
    min-height: 2rem;
    padding: .38rem .55rem !important;
    white-space: nowrap;
  }
  .help-simple-screen .help-panel-resizer {
    display: none !important;
  }
  .help-simple-screen .help-topic-stage {
    height: auto !important;
    min-height: 60dvh !important;
  }
}

/* v2.0.0-rc.14: vaste Play-balkhoogte voor alle projectie-views.
   LEX/SYNT schakelen Groei uit; de langere statustekst mag de balk en dus het
   grid nooit lager zetten. */
body.main-screen-active .main-play-growth-label {
  box-sizing: border-box !important;
  width: 7.4rem !important;
  min-width: 7.4rem !important;
  max-width: 7.4rem !important;
  height: 2.05rem !important;
  min-height: 2.05rem !important;
  max-height: 2.05rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 0 7.4rem !important;
}
@media (max-width: 760px) {
  body.main-screen-active .main-play-growth-label {
    width: 5.2rem !important;
    min-width: 5.2rem !important;
    max-width: 5.2rem !important;
    height: 1.88rem !important;
    min-height: 1.88rem !important;
    max-height: 1.88rem !important;
    flex-basis: 5.2rem !important;
  }
}


/* v2.0.0-rc.14: projectiekeuze buiten het canvas; Bron kan meerdere assen combineren. */
body.main-screen-active .main-grid-controls {
  display: none !important;
}
.main-projection-field {
  display: flex;
  align-items: center;
  gap: .18rem;
  flex: 0 0 auto;
  min-width: 0;
  color: var(--muted);
  font-weight: 900;
}
.main-projection-field span {
  font-size: .68rem;
  line-height: 1;
  white-space: nowrap;
}
.main-projection-field select {
  width: clamp(5.6rem, 8vw, 7rem);
  max-width: 7rem;
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  padding: .12rem .34rem;
  font-size: .74rem;
  font-weight: 900;
}
.source-axis-menu {
  position: relative;
  flex: 0 0 8.9rem;
  min-width: 8.9rem;
  z-index: 420;
}
.source-axis-menu > summary {
  list-style: none;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: .12rem .42rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: var(--panel);
  color: var(--text);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.source-axis-menu > summary::-webkit-details-marker { display: none; }
.source-axis-menu > summary::after {
  content: "▾";
  margin-left: .34rem;
  color: var(--muted);
  font-size: .65rem;
}
.source-axis-menu[open] > summary::after { content: "▴"; }
.source-axis-popover {
  position: absolute;
  top: calc(100% + .36rem);
  left: 0;
  width: min(19rem, calc(100vw - 1rem));
  box-sizing: border-box;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 .7rem 2rem rgba(15, 23, 42, .22);
}
.source-axis-toggle-row,
.source-axis-action-row {
  display: flex;
  gap: .34rem;
}
.source-axis-action-row { margin-top: .42rem; }
.source-axis-popover button {
  min-height: 2rem;
  flex: 1 1 0;
  border: 1px solid var(--line);
  border-radius: .68rem;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.source-axis-popover button.active,
.source-axis-popover button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel) 84%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 40%);
}
.source-axis-popover p {
  margin: .48rem .08rem 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .main-projection-field span { display: none; }
  .main-projection-field select { width: 5.1rem; }
  .source-axis-menu { flex-basis: 7.6rem; min-width: 7.6rem; }
  .source-axis-menu > summary { font-size: .68rem; padding-inline: .26rem; }
}
@media (max-width: 620px) {
  .source-axis-popover { left: auto; right: 0; }
}

/* v2.0.0-rc.14: gekozen Bronassen-oplossing en compacte, leesbare bovenbalk.
   Projectie en Bronassen blijven boven het canvas; taal/Help/Config staan in
   één Menu-popover. De topbar blijft één vaste rij en verandert de viewBox niet. */
body.main-screen-active .main-topbar {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .16rem !important;
  min-height: 2.08rem !important;
  padding: .12rem .22rem !important;
  overflow: visible !important;
}
body.main-screen-active .main-sentence-field,
body.main-screen-active .main-adverb-field,
body.main-screen-active .main-view-field,
body.main-screen-active .main-projection-field {
  gap: .12rem !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
body.main-screen-active .main-sentence-field span,
body.main-screen-active .main-adverb-field span,
body.main-screen-active .main-view-field span,
body.main-screen-active .main-projection-field span {
  font-size: .62rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
body.main-screen-active .main-sentence-field select,
body.main-screen-active .main-adverb-field select,
body.main-screen-active .main-view-field select,
body.main-screen-active .main-projection-field select {
  box-sizing: border-box !important;
  min-height: 1.78rem !important;
  height: 1.78rem !important;
  padding: .08rem .30rem !important;
  border-radius: .54rem !important;
  font-size: .70rem !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.main-screen-active .main-sentence-field select {
  width: clamp(7.8rem, 14vw, 10.8rem) !important;
  max-width: 10.8rem !important;
}
body.main-screen-active .main-adverb-field select {
  width: clamp(6.4rem, 10vw, 8.4rem) !important;
  max-width: 8.4rem !important;
}
body.main-screen-active .main-view-field select {
  width: 4.9rem !important;
  max-width: 4.9rem !important;
}
body.main-screen-active .main-projection-field select {
  width: 5.0rem !important;
  max-width: 5.0rem !important;
}
.source-axis-menu[hidden] {
  display: none !important;
}
body.main-screen-active .source-axis-menu {
  position: relative !important;
  flex: 0 0 7.4rem !important;
  min-width: 7.4rem !important;
  z-index: 430 !important;
}
body.main-screen-active .source-axis-menu > summary {
  min-height: 1.78rem !important;
  height: 1.78rem !important;
  justify-content: center !important;
  gap: .22rem !important;
  padding: .08rem .30rem !important;
  border-radius: .54rem !important;
  font-size: .70rem !important;
}
.source-axis-summary-state::before {
  content: "·";
  margin-right: .22rem;
  color: var(--muted);
}
body.main-screen-active .source-axis-popover {
  top: calc(100% + .28rem) !important;
  width: min(17rem, calc(100vw - .5rem)) !important;
  padding: .42rem !important;
  border-radius: .72rem !important;
}
body.main-screen-active .source-axis-popover button {
  min-height: 1.78rem !important;
  padding: .10rem .34rem !important;
  border-radius: .54rem !important;
  font-size: .70rem !important;
}
body.main-screen-active .source-axis-popover p {
  margin-top: .34rem !important;
  font-size: .68rem !important;
}
.main-actions-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  z-index: 440;
}
.main-actions-menu > summary {
  list-style: none;
  box-sizing: border-box;
  min-width: 3.35rem;
  min-height: 1.78rem;
  height: 1.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .08rem .34rem;
  border: 1px solid var(--line);
  border-radius: .54rem;
  background: var(--panel);
  color: var(--text);
  font-size: .70rem;
  font-weight: 950;
  cursor: pointer;
  user-select: none;
}
.main-actions-menu > summary::-webkit-details-marker { display: none; }
.main-actions-menu > summary::after {
  content: "▾";
  margin-left: .24rem;
  color: var(--muted);
  font-size: .62rem;
}
.main-actions-menu[open] > summary::after { content: "▴"; }
body.main-screen-active .main-actions-menu .main-topbar-actions {
  position: absolute !important;
  top: calc(100% + .28rem) !important;
  right: 0 !important;
  width: 7.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .24rem !important;
  box-sizing: border-box !important;
  padding: .38rem !important;
  border: 1px solid var(--line) !important;
  border-radius: .72rem !important;
  background: color-mix(in srgb, var(--panel), #fff 4%) !important;
  box-shadow: 0 .7rem 2rem rgba(15, 23, 42, .22) !important;
}
body.main-screen-active .main-actions-menu .language-toggle-button,
body.main-screen-active .main-actions-menu .help-open-button,
body.main-screen-active .main-actions-menu .config-open-button {
  width: 100% !important;
  min-height: 1.82rem !important;
  padding: .12rem .36rem !important;
  border-radius: .54rem !important;
  font-size: .70rem !important;
}
@media (max-width: 1100px) {
  body.main-screen-active .main-sentence-field span,
  body.main-screen-active .main-adverb-field span,
  body.main-screen-active .main-view-field span,
  body.main-screen-active .main-projection-field span {
    display: none !important;
  }
  body.main-screen-active .main-sentence-field select { width: 7.1rem !important; max-width: 7.1rem !important; }
  body.main-screen-active .main-adverb-field select { width: 6.0rem !important; max-width: 6.0rem !important; }
  body.main-screen-active .main-view-field select { width: 4.35rem !important; max-width: 4.35rem !important; }
  body.main-screen-active .main-projection-field select { width: 4.45rem !important; max-width: 4.45rem !important; }
}
@media (max-width: 760px), (orientation: portrait) {
  body.main-screen-active .main-topbar {
    gap: .10rem !important;
    min-height: 1.98rem !important;
    padding: .10rem .16rem !important;
  }
  body.main-screen-active .main-sentence-field select,
  body.main-screen-active .main-adverb-field select,
  body.main-screen-active .main-view-field select,
  body.main-screen-active .main-projection-field select,
  body.main-screen-active .source-axis-menu > summary,
  .main-actions-menu > summary {
    min-height: 1.70rem !important;
    height: 1.70rem !important;
    padding-inline: .22rem !important;
    font-size: .66rem !important;
  }
  body.main-screen-active .main-sentence-field select { width: 5.1rem !important; max-width: 5.1rem !important; }
  body.main-screen-active .main-adverb-field select { width: 4.2rem !important; max-width: 4.2rem !important; }
  body.main-screen-active .main-view-field select { width: 3.4rem !important; max-width: 3.4rem !important; }
  body.main-screen-active .main-projection-field select { width: 3.5rem !important; max-width: 3.5rem !important; }
  body.main-screen-active .source-axis-menu { flex-basis: 3.4rem !important; min-width: 3.4rem !important; }
  body.main-screen-active .source-axis-summary-state { display: none !important; }
  body.main-screen-active .source-axis-summary-label { font-size: .66rem !important; }
  body.main-screen-active .source-axis-summary-state::before { content: none !important; }
  .main-actions-menu > summary { min-width: 2.8rem !important; }
}


/* v2.0.0-rc.14: smalle koppen, brede uitklappen; Projecties vervangt Bron. */
.main-control-select-compat {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
  opacity: 0 !important; pointer-events: none !important;
}
body.main-screen-active .main-topbar {
  align-items: center !important; justify-content: flex-start !important;
  gap: .16rem !important; min-height: 2.08rem !important;
  padding: .12rem .22rem !important; overflow: visible !important;
}
.compact-choice-menu { position: relative; flex: 0 0 auto; z-index: 430; }
.compact-choice-menu > summary {
  list-style: none; box-sizing: border-box; min-height: 1.78rem; height: 1.78rem;
  display: flex; align-items: center; justify-content: center;
  padding: .08rem .38rem; border: 1px solid var(--line); border-radius: .54rem;
  background: var(--panel); color: var(--text); font-size: .70rem; font-weight: 950;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.compact-choice-menu > summary::-webkit-details-marker { display: none; }
.compact-choice-menu > summary::after { content: '▾'; margin-left: .24rem; color: var(--muted); font-size: .62rem; }
.compact-choice-menu[open] > summary::after { content: '▴'; }
.compact-choice-popover {
  position: absolute; top: calc(100% + .28rem); left: 0; z-index: 520;
  width: min(17rem, calc(100vw - .5rem)); box-sizing: border-box; padding: .42rem;
  border: 1px solid var(--line); border-radius: .72rem;
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 .7rem 2rem rgba(15,23,42,.22);
}
.compact-choice-popover-wide { width: min(28rem, calc(100vw - .5rem)); }
.compact-choice-popover-small { width: min(10rem, calc(100vw - .5rem)); }
.compact-choice-list {
  display: grid;
  gap: .24rem;
  max-height: min(26rem, 72vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}
.compact-choice-option {
  width: 100%; min-height: 2rem; padding: .30rem .48rem; text-align: left;
  border: 1px solid var(--line); border-radius: .58rem; background: var(--panel-2);
  color: var(--text); font-size: .76rem; line-height: 1.28; font-weight: 760; cursor: pointer;
}
.compact-choice-group {
  position: sticky; top: 0; z-index: 1;
  margin: .18rem 0 .04rem; padding: .25rem .42rem .18rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel), #fff 3%);
  color: var(--muted); font-size: .66rem; line-height: 1.2;
  font-weight: 900; letter-spacing: .055em; text-transform: uppercase;
}
.compact-choice-label,.compact-choice-tags { display: block; }
.compact-choice-tags {
  margin-top: .12rem; color: var(--muted); font-size: .64rem;
  line-height: 1.18; font-weight: 650;
}
.compact-choice-option.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent),var(--panel) 84%); font-weight: 950; }
.main-sentence-menu > summary { min-width: 3.0rem; }
.main-adverb-menu > summary { min-width: 4.6rem; }
.main-view-menu > summary { min-width: 4.2rem; }
body.main-screen-active .source-axis-menu { display: block !important; flex: 0 0 auto !important; min-width: 6.3rem !important; }
body.main-screen-active .source-axis-menu > summary { min-width: 6.3rem; }
body.main-screen-active .source-axis-popover { width: min(18rem, calc(100vw - .5rem)) !important; }
.source-axis-toggle-row,.source-axis-action-row { display:flex; gap:.34rem; }
.source-axis-action-row { margin-top:.42rem; }
.source-axis-popover button { min-height:1.9rem; flex:1 1 0; font-size:.72rem; }
.source-axis-popover p { margin:.42rem .04rem 0; font-size:.69rem; line-height:1.35; color:var(--muted); }

/* Menu > Extra: SOV/LOG order is outside the graph canvas. */
body.main-screen-active .canvas-wrap > .main-south-control,
body.main-screen-active .canvas-wrap > .language-action-box { display:none !important; }
.main-actions-menu { position:relative; flex:0 0 auto; margin-left:auto; z-index:540; }
.main-actions-menu > summary {
  list-style:none; min-width:3.35rem; min-height:1.78rem; height:1.78rem;
  display:flex; align-items:center; justify-content:center; padding:.08rem .34rem;
  border:1px solid var(--line); border-radius:.54rem; background:var(--panel);
  color:var(--text); font-size:.70rem; font-weight:950; cursor:pointer;
}
.main-actions-menu > summary::-webkit-details-marker { display:none; }
.main-actions-menu > summary::after { content:'▾'; margin-left:.24rem; color:var(--muted); font-size:.62rem; }
.main-actions-menu[open] > summary::after { content:'▴'; }
body.main-screen-active .main-actions-menu .main-topbar-actions {
  position:absolute !important; top:calc(100% + .28rem) !important; right:0 !important;
  width:12.6rem !important; display:flex !important; flex-direction:column !important;
  align-items:stretch !important; gap:.24rem !important; box-sizing:border-box !important;
  padding:.38rem !important; border:1px solid var(--line) !important; border-radius:.72rem !important;
  background:color-mix(in srgb,var(--panel),#fff 4%) !important;
  box-shadow:0 .7rem 2rem rgba(15,23,42,.22) !important;
}
body.main-screen-active .main-actions-menu .language-toggle-button,
body.main-screen-active .main-actions-menu .help-open-button,
body.main-screen-active .main-actions-menu .config-open-button { width:100% !important; min-height:1.82rem !important; font-size:.72rem !important; }
.main-extra-menu { position:relative; width:100%; }
.main-extra-menu > summary {
  list-style:none; cursor:pointer; min-height:2rem; display:flex; align-items:center;
  justify-content:space-between; padding:.35rem .55rem; border:1px solid var(--line);
  border-radius:.65rem; background:color-mix(in srgb,var(--panel),white 4%); font-size:.78rem; font-weight:900;
}
.main-extra-menu > summary::-webkit-details-marker { display:none; }
.main-extra-menu > summary::after { content:'›'; transform:rotate(90deg); }
.main-extra-menu[open] > summary::after { transform:rotate(-90deg); }
.main-extra-popover { margin-top:.35rem; padding:.55rem; border:1px solid var(--line); border-radius:.75rem; background:var(--panel); }
.extra-log-order-panel { display:grid; gap:.42rem; }
.extra-log-order-panel > strong { font-size:.78rem; }
.extra-log-order-panel > p { margin:0; font-size:.68rem; line-height:1.35; color:var(--muted); }
.extra-south-control { display:grid; grid-template-columns:2rem minmax(4.1rem,1fr) 2rem; gap:.28rem; align-items:center; }
.extra-south-control button { min-height:2rem; border:1px solid color-mix(in srgb,var(--log),var(--line) 45%); border-radius:.58rem; background:color-mix(in srgb,var(--log),var(--panel) 84%); font-weight:950; cursor:pointer; }
@media (max-width:760px),(orientation:portrait) {
  body.main-screen-active .main-topbar { gap:.10rem !important; min-height:1.98rem !important; padding:.10rem .16rem !important; }
  .compact-choice-menu > summary,.main-actions-menu > summary { min-height:1.70rem; height:1.70rem; padding-inline:.22rem; font-size:.66rem; }
  .main-sentence-menu > summary { min-width:2.65rem; }
  .main-adverb-menu > summary { min-width:3.8rem; }
  .main-view-menu > summary { min-width:3.4rem; }
  body.main-screen-active .source-axis-menu,body.main-screen-active .source-axis-menu > summary { min-width:5.2rem !important; }
  .compact-choice-popover { left:auto; right:0; }
}

/* v2.0.0-rc.14: één plat hoofdmenu; geen geneste submenu's. */
body.main-screen-active .main-topbar {
  min-height: 2.02rem !important;
  padding: .10rem .18rem !important;
  gap: 0 !important;
}
body.main-screen-active .main-unified-menu {
  position: relative;
  margin: 0;
  z-index: 650;
}
body.main-screen-active .main-unified-menu > summary {
  min-width: 4rem !important;
  min-height: 1.72rem !important;
  height: 1.72rem !important;
  padding: .08rem .42rem !important;
  border: .6px solid color-mix(in srgb, var(--line), transparent 18%) !important;
  border-radius: .48rem !important;
  font-size: .70rem !important;
}
.main-unified-popover {
  position: absolute;
  top: calc(100% + .24rem);
  left: 0;
  z-index: 700;
  width: min(48rem, calc(100vw - .7rem));
  max-height: min(78vh, 42rem);
  overflow: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(14rem, 1.45fr) minmax(12rem, 1fr);
  gap: .44rem;
  padding: .48rem;
  border: .6px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: .68rem;
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 .55rem 1.6rem rgba(15,23,42,.16);
}
.main-menu-group {
  min-width: 0;
  padding: .42rem;
  border: .55px solid color-mix(in srgb, var(--line), transparent 28%);
  border-radius: .56rem;
  background: color-mix(in srgb, var(--panel), var(--bg) 16%);
}
.main-menu-group > h3 {
  margin: 0 0 .32rem;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.main-menu-sentence-group,
.main-menu-adverb-group { grid-row: span 2; }
.main-menu-option-list {
  max-height: 13.5rem;
  overflow: auto;
  gap: .18rem;
}
.main-menu-option-list .compact-choice-option {
  min-height: 1.72rem;
  padding: .22rem .38rem;
  border-width: .55px;
  border-radius: .44rem;
  font-size: .72rem;
  font-weight: 720;
}
.main-menu-view-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
}
.main-menu-view-options .compact-choice-option { text-align: center; }
.main-menu-projection-group .source-axis-toggle-row,
.main-menu-projection-group .source-axis-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .24rem;
}
.main-menu-projection-group .source-axis-action-row {
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: .26rem;
}
.main-menu-projection-group button,
.main-menu-log-group button,
.main-menu-actions button {
  min-height: 1.75rem !important;
  border-width: .55px !important;
  border-radius: .44rem !important;
  font-size: .70rem !important;
}
.main-menu-help {
  margin: .30rem 0 0;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.32;
}
.main-menu-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .28rem;
  padding-top: .02rem;
}
body.main-screen-active .main-actions-menu .main-topbar-actions,
body.main-screen-active .main-extra-menu,
body.main-screen-active .main-extra-popover { display: none !important; }
@media (max-width: 720px), (orientation: portrait) {
  .main-unified-popover {
    width: min(29rem, calc(100vw - .42rem));
    grid-template-columns: 1fr;
    max-height: 80vh;
    padding: .38rem;
    gap: .34rem;
  }
  .main-menu-sentence-group,
  .main-menu-adverb-group { grid-row: auto; }
  .main-menu-option-list { max-height: 10.5rem; }
}

/* v2.0.0-rc.14: lichte belijning; alleen named projections krijgen nadruk. */
body.main-screen-active .grid-line { stroke-width: .42 !important; opacity: .16 !important; }
body.main-screen-active .grid-line.major { stroke-width: .58 !important; opacity: .21 !important; }
body.main-screen-active .axis-line,
body.main-screen-active .grid-axis { stroke-width: .60 !important; opacity: .46 !important; }
body.main-screen-active .edge,
body.main-screen-active .relation-edge,
body.main-screen-active .tree-edge,
body.main-screen-active .syntax-tree-edge,
body.main-screen-active .lex-arc,
body.main-screen-active .log-edge,
body.main-screen-active .lex-axis,
body.main-screen-active .lex-axis-line {
  stroke-width: .72 !important;
  opacity: .58 !important;
}
body.main-screen-active .node-circle,
body.main-screen-active .functional-node,
body.main-screen-active .synthetic-node {
  stroke-width: .62 !important;
}
body.main-screen-active .tree-node.leaf-node .node-circle { stroke-width: .72 !important; }
body.main-screen-active .node-circle.selected,
body.main-screen-active .tree-node.selected .node-circle,
body.main-screen-active .tree-node.selected .synt-box { stroke-width: 1.15 !important; }
body.main-screen-active .projection-frame,
body.main-screen-active .axis-band,
body.main-screen-active .tree-subbox,
body.main-screen-active .tree-subbox.root,
body.main-screen-active .jan-subtree-box,
body.main-screen-active .log-role-box,
body.main-screen-active .lex-slot-box,
body.main-screen-active .synt-box,
body.main-screen-active .category-box,
body.main-screen-active .syntax-rule-box,
body.main-screen-active .free-slot-box,
body.main-screen-active .lex-local-slot,
body.main-screen-active .lex-free-slot,
body.main-screen-active .logical-order-box,
body.main-screen-active .projection-stability-frame {
  stroke-width: .52 !important;
  opacity: .78 !important;
}
body.main-screen-active .projection-line,
body.main-screen-active .projection-line.horizontal,
body.main-screen-active .projection-line.orthogonal,
body.main-screen-active .logical-projection-line,
body.main-screen-active .logical-source-line {
  stroke-width: 1.42 !important;
  opacity: .86 !important;
}
body.main-screen-active .projection-axis-line,
body.main-screen-active .logical-axis,
body.main-screen-active .projection-line.lex-source-projection-line {
  stroke-width: 1.58 !important;
  opacity: .92 !important;
}
body.main-screen-active .node-main-label {
  stroke-width: 1.25px !important;
}

/* v2.0.0-rc.14: alle SVG-boxcontouren minimaal; projecties blijven herkenbaar. */
body.main-screen-active #graphSvg rect {
  stroke-width: .50 !important;
}
body.main-screen-active #graphSvg circle {
  stroke-width: .60 !important;
}
body.main-screen-active #graphSvg .node-circle.selected,
body.main-screen-active #graphSvg .tree-node.selected .node-circle,
body.main-screen-active #graphSvg .tree-node.selected .synt-box {
  stroke-width: 1.10 !important;
}
body.main-screen-active .lex-wissel-line,
body.main-screen-active .projected-rule-line,
body.main-screen-active .projection-line,
body.main-screen-active .logical-projection-line,
body.main-screen-active .logical-source-line {
  stroke-width: 1.42 !important;
}
body.main-screen-active .main-topbar,
body.main-screen-active .main-play-reset-bar,
body.main-screen-active .canvas-wrap,
body.main-screen-active .main-unified-popover,
body.main-screen-active .main-menu-group,
body.main-screen-active button,
body.main-screen-active select {
  border-width: .55px !important;
}

/* Alleen projecties zijn nadruklijnen; een LEX-Wissel blijft een dunne actielijn. */
body.main-screen-active .lex-wissel-line {
  stroke-width: .72 !important;
  opacity: .66 !important;
}
body.main-screen-active .node-main-label {
  stroke-width: .75px !important;
}


/* v2.0.0-rc.14: één zichtbaar topmenu met acht hoofditems; geen algemene Menu-knop. */
body.main-screen-active .main-topbar {
  min-height: 2.08rem !important;
  padding: .10rem .18rem !important;
  overflow: visible !important;
}
body.main-screen-active .main-top-menu {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: .12rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
body.main-screen-active .top-menu-item {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  z-index: 650;
}
body.main-screen-active .top-menu-item > summary,
body.main-screen-active .top-menu-action {
  box-sizing: border-box;
  min-height: 1.72rem !important;
  height: 1.72rem !important;
  padding: .08rem .38rem !important;
  border: .55px solid color-mix(in srgb, var(--line), transparent 18%) !important;
  border-radius: .46rem !important;
  background: color-mix(in srgb, var(--panel), var(--bg) 10%) !important;
  color: var(--text) !important;
  font-size: .70rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
}
body.main-screen-active .top-menu-item[open] > summary,
body.main-screen-active .top-menu-action:hover,
body.main-screen-active .top-menu-action:focus-visible {
  background: color-mix(in srgb, var(--accent), var(--panel) 88%) !important;
}
body.main-screen-active .top-menu-action.primary {
  background: color-mix(in srgb, var(--accent), var(--panel) 82%) !important;
}
body.main-screen-active .top-menu-popover {
  position: absolute;
  top: calc(100% + .22rem);
  left: 0;
  z-index: 720;
  box-sizing: border-box;
  width: min(25rem, calc(100vw - .7rem));
  max-height: min(72vh, 31rem);
  overflow: auto;
  padding: .42rem;
  border: .55px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 .45rem 1.3rem rgba(15,23,42,.15);
}
body.main-screen-active .top-menu-sentence-popover {
  width: min(var(--testmateriaal-popover-width, 31rem), calc(100vw - .7rem));
  overflow: hidden !important;
}
body.main-screen-active .top-menu-adverb-popover { width: min(25rem, calc(100vw - .7rem)); }
body.main-screen-active .top-menu-view-popover { width: min(15rem, calc(100vw - .7rem)); }
body.main-screen-active .top-menu-projection-popover { width: min(22rem, calc(100vw - .7rem)); }
body.main-screen-active .top-menu-log-popover { width: min(19rem, calc(100vw - .7rem)); }
body.main-screen-active .main-projection-menu .top-menu-popover,
body.main-screen-active .main-log-menu .top-menu-popover {
  left: auto;
  right: 0;
}
body.main-screen-active .top-menu-panel-heading {
  margin: 0 0 .30rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
body.main-screen-active .top-menu-popover .main-menu-option-list {
  max-height: 22rem;
}
body.main-screen-active .top-menu-popover .source-axis-toggle-row,
body.main-screen-active .top-menu-popover .source-axis-action-row {
  display: grid;
  gap: .24rem;
}
body.main-screen-active .top-menu-popover .source-axis-toggle-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.main-screen-active .top-menu-popover .source-axis-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .26rem;
}
body.main-screen-active .main-unified-menu,
body.main-screen-active .main-unified-popover,
body.main-screen-active .main-actions-menu {
  display: none !important;
}
@media (max-width: 760px), (orientation: portrait) {
  body.main-screen-active .main-topbar {
    min-height: 3.92rem !important;
    padding: .10rem .14rem !important;
  }
  body.main-screen-active .main-top-menu { gap: .10rem; }
  body.main-screen-active .top-menu-item > summary,
  body.main-screen-active .top-menu-action {
    min-height: 1.68rem !important;
    height: 1.68rem !important;
    padding-inline: .28rem !important;
    font-size: .66rem !important;
  }
  body.main-screen-active .top-menu-popover {
    position: fixed;
    top: calc(max(.45rem, env(safe-area-inset-top)) + 3.98rem);
    left: max(.25rem, env(safe-area-inset-left)) !important;
    right: max(.25rem, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-height: calc(100dvh - 4.6rem);
  }
}

body.main-screen-active .main-extra-menu.top-menu-item { display: block !important; }


/* rc.14: visible OGN save/export/import workflow */
.ogn-document-card { border-style: solid; }
.ogn-document-actions { align-items: center; flex-wrap: wrap; }
.ogn-document-actions .primary, .ogn-mobile-actions button { font-weight: 900; }
.ogn-mobile-actions .file-label { width: auto; }


/* v2.0.0-rc.20: desktop MAX is the readable full-window default. */
body.main-screen-active.main-window-max,
body.main-screen-active.main-window-max .app-shell,
body.main-screen-active.main-window-max .workspace,
body.main-screen-active.main-window-max .canvas-wrap {
  width: 100vw !important;
  max-width: none !important;
  overflow: hidden !important;
}
body.main-screen-active.main-window-max .workspace {
  height: var(--main-grid-height, calc(100dvh - 5.5rem)) !important;
}
body.main-screen-active.main-window-max .canvas-wrap,
body.main-screen-active.main-window-max #graphSvg {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

@media (min-width: 761px) {
  body.main-screen-active .main-topbar {
    min-height: 2.62rem !important;
    padding: .20rem .34rem !important;
  }
  body.main-screen-active .main-top-menu {
    gap: .22rem !important;
  }
  body.main-screen-active .top-menu-item > summary,
  body.main-screen-active .top-menu-action {
    min-height: 2.12rem !important;
    height: 2.12rem !important;
    padding: .16rem .60rem !important;
    border-radius: .58rem !important;
    font-size: .88rem !important;
    line-height: 1.1 !important;
  }
  body.main-screen-active .top-menu-popover,
  body.main-screen-active .top-menu-popover button,
  body.main-screen-active .top-menu-popover select {
    font-size: .92rem !important;
  }
}


/* v2.0.0-rc.36 · zinsgebonden lexicale disambiguatie */
.canvas-wrap { position: relative; }
.lex-ambiguity-panel {
  position:absolute; z-index:24; top:.7rem; right:.7rem; width:min(25rem,calc(100% - 1.4rem));
  padding:.75rem .8rem; border:1px solid #f59e0b; border-radius:1rem; background:rgba(255,251,235,.97);
  box-shadow:0 12px 28px rgba(15,23,42,.18); color:#422006; backdrop-filter:blur(5px);
}
.lex-ambiguity-panel.hidden { display:none !important; }
.lex-ambiguity-kicker { font-size:.69rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; color:#92400e; }
.lex-ambiguity-panel h3 { margin:.15rem 0 .25rem; font-size:1rem; }
.lex-ambiguity-panel p { margin:.25rem 0; font-size:.8rem; line-height:1.35; }
.lex-ambiguity-options { display:grid; gap:.35rem; margin-top:.55rem; }
.lex-ambiguity-options button { text-align:left; border:1px solid #fbbf24; background:white; border-radius:.7rem; padding:.46rem .55rem; font-weight:800; line-height:1.25; }
.lex-ambiguity-options button:hover,.lex-ambiguity-options button:focus-visible { border-color:#b45309; outline:2px solid rgba(245,158,11,.2); }
.lex-ambiguity-options .recommended::after { content:' · voorstel'; font-size:.7rem; color:#92400e; }
.lex-ambiguity-help { color:#78350f; }
.lexical-choice-panel {
  position:absolute; z-index:25; top:.7rem; left:.7rem; width:min(27rem,calc(100% - 1.4rem));
  padding:.75rem .8rem; border:1px solid #60a5fa; border-radius:1rem; background:rgba(239,246,255,.97);
  box-shadow:0 12px 28px rgba(15,23,42,.18); color:#172554; backdrop-filter:blur(5px);
}
.lexical-choice-panel.hidden { display:none !important; }
.lexical-choice-kicker { font-size:.69rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:#1d4ed8; }
.lexical-choice-header { display:flex; align-items:start; justify-content:space-between; gap:.5rem; }
.lexical-choice-panel h3 { margin:.15rem 0 .25rem; font-size:1rem; }
.lexical-choice-panel p { margin:.25rem 0; font-size:.8rem; line-height:1.35; }
.lexical-choice-header button { min-width:2rem; min-height:2rem; border:0; border-radius:50%; background:transparent; color:#1e3a8a; font-size:1.25rem; cursor:pointer; }
.lexical-choice-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; margin-top:.55rem; }
.lexical-choice-options button { display:flex; align-items:center; justify-content:space-between; gap:.5rem; text-align:left; border:1px solid #93c5fd; background:white; border-radius:.7rem; padding:.48rem .56rem; color:#172554; font-weight:800; cursor:pointer; }
.lexical-choice-options button span { color:#64748b; font-size:.68rem; font-weight:600; }
.lexical-choice-options button:hover,.lexical-choice-options button:focus-visible,.lexical-choice-options button.is-selected { border-color:#2563eb; background:#dbeafe; outline:2px solid rgba(37,99,235,.16); }
.lexical-choice-help { color:#1e40af; }
[data-action="lexical-role-choice"] { cursor:pointer; }
@media (max-width:760px), (max-height:480px) {
  .lex-ambiguity-panel { top:.35rem; right:.35rem; width:calc(100% - .7rem); max-height:46%; overflow:auto; padding:.55rem .6rem; }
  .lex-ambiguity-panel p { font-size:.72rem; }
  .lex-ambiguity-options { grid-template-columns:1fr; }
  .lexical-choice-panel { top:.35rem; left:.35rem; width:calc(100% - .7rem); max-height:62%; overflow:auto; padding:.55rem .6rem; }
  .lexical-choice-panel p { font-size:.72rem; }
  .lexical-choice-options { grid-template-columns:1fr; }
}

/* v2.0.0-rc.36: fixed semantic two-row top menu.
   Row 1: Sentence, Adverb, Syntax/Functional, Interface, Projections, LOG.
   Row 2: Language, README/LEESMIJ, Config. */
body.main-screen-active .main-topbar {
  min-height: 3.78rem !important;
}
body.main-screen-active .main-top-menu {
  display: grid !important;
  grid-template-columns: repeat(6, max-content) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: .22rem !important;
  row-gap: .24rem !important;
}
body.main-screen-active .main-top-menu > :nth-child(-n+6) { grid-row: 1 !important; }
body.main-screen-active .main-top-menu > :nth-child(7) { grid-row: 2 !important; grid-column: 1 !important; }
body.main-screen-active .main-top-menu > :nth-child(8) { grid-row: 2 !important; grid-column: 2 !important; }
body.main-screen-active .main-top-menu > :nth-child(9) { grid-row: 2 !important; grid-column: 3 !important; }
body.main-screen-active .main-top-menu > :nth-child(-n+6) .top-menu-popover {
  top: calc(200% + .46rem) !important;
}
@media (max-width: 760px), (orientation: portrait) {
  body.main-screen-active .main-top-menu,
  body.viewport-mobile-test.main-screen-active .main-top-menu {
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    width: 100% !important;
  }
  body.main-screen-active .main-top-menu > :nth-child(7),
  body.viewport-mobile-test.main-screen-active .main-top-menu > :nth-child(7) { grid-column: 1 / span 2 !important; }
  body.main-screen-active .main-top-menu > :nth-child(8),
  body.viewport-mobile-test.main-screen-active .main-top-menu > :nth-child(8) { grid-column: 3 / span 2 !important; }
  body.main-screen-active .main-top-menu > :nth-child(9),
  body.viewport-mobile-test.main-screen-active .main-top-menu > :nth-child(9) { grid-column: 5 / span 2 !important; }
  body.main-screen-active .top-menu-item > summary,
  body.main-screen-active .top-menu-action,
  body.viewport-mobile-test.main-screen-active .top-menu-item > summary,
  body.viewport-mobile-test.main-screen-active .top-menu-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Five-language menu. English is the default; non-Dutch technical help falls
   back to English. The examples remain Dutch and state that explicitly. */
.language-menu { position: relative; }
.language-menu > summary { list-style: none; }
.language-menu > summary::-webkit-details-marker { display: none; }
.language-menu > summary::after { content: '▾'; margin-left: .24rem; color: var(--muted); font-size: .62rem; }
.language-menu[open] > summary::after { content: '▴'; }
.language-popover { width: min(20rem, calc(100vw - .7rem)) !important; }
.language-option-list { display: grid; gap: .26rem; }
.language-option-list button {
  min-height: 2rem; padding: .34rem .52rem;
  border: .55px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: .52rem; background: color-mix(in srgb, var(--panel), var(--bg) 7%);
  color: var(--text); font-weight: 800; text-align: left; cursor: pointer;
}
.language-option-list button:hover,
.language-option-list button:focus-visible,
.language-option-list button.is-selected {
  background: color-mix(in srgb, var(--accent), var(--panel) 84%);
  border-color: color-mix(in srgb, var(--accent), var(--line) 38%);
}
.language-option-list button.is-selected::after { content: ' ✓'; }
.language-sentence-note { margin: .45rem .06rem 0; line-height: 1.35; }
.config-language-menu > summary,
.help-language-menu > summary {
  box-sizing: border-box; min-height: 2.35rem; display: flex; align-items: center;
  justify-content: center; padding: .36rem .72rem; border: 1px solid var(--line);
  border-radius: .8rem; background: color-mix(in srgb, var(--panel), var(--bg) 6%);
  color: var(--text); font-weight: 900; cursor: pointer;
}
.config-language-menu .language-popover,
.help-language-menu .language-popover {
  position: absolute; z-index: 900; top: calc(100% + .3rem); left: 0;
  box-sizing: border-box; max-height: min(70vh,28rem); overflow: auto;
  padding: .42rem; border: 1px solid var(--line); border-radius: .66rem;
  background: var(--panel); box-shadow: 0 .55rem 1.5rem rgba(15,23,42,.18);
}
@media (max-width:760px), (orientation:portrait) {
  body.main-screen-active .language-menu > summary::after,
  body.viewport-mobile-test.main-screen-active .language-menu > summary::after { display:none !important; }
  body.main-screen-active .language-popover,
  body.viewport-mobile-test.main-screen-active .language-popover {
    position:fixed !important; left:.35rem !important; right:.35rem !important;
    width:auto !important; top:calc(max(.35rem, env(safe-area-inset-top)) + 3.98rem) !important;
  }
}

/* README/LEESMIJ first view in every interface mode: topic tree above, active
   text below. Both halves scroll independently. */
body.help-screen-active .app-shell {
  box-sizing: border-box !important; height:100dvh !important; min-height:100dvh !important;
  max-height:100dvh !important; overflow:hidden !important;
}
body.help-screen-active .help-topbar { flex:0 0 auto !important; }
body.help-screen-active .help-screen {
  flex:1 1 auto !important; height:auto !important; min-height:0 !important; overflow:hidden !important;
}
body.help-screen-active .help-screen.help-tree-screen,
body.help-screen-active .help-tree-screen {
  display:grid !important; grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important;
  height:100% !important; min-height:0 !important; overflow:hidden !important;
}
body.help-screen-active .help-tree-nav,
body.help-screen-active .help-topic-stage {
  box-sizing:border-box !important; width:100% !important; height:auto !important;
  min-height:0 !important; max-height:none !important; overflow:auto !important;
}
body.help-screen-active .help-topic-stage { scroll-padding-top:.6rem !important; }

/* Compact Config overview added without changing save/restore semantics. */
.config-scope-nav {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; width:100%;
  padding:.55rem; border:1px solid var(--line); border-radius:.82rem;
  background:color-mix(in srgb,var(--panel),var(--bg) 7%);
}
.config-scope-group { display:flex; flex-wrap:wrap; align-items:center; gap:.38rem; min-width:0; }
.config-scope-group-label {
  flex:0 0 100%; color:var(--muted); font-size:.7rem; font-weight:900; letter-spacing:.045em; text-transform:uppercase;
}
.config-scope-button {
  flex:1 1 7rem; min-height:2.35rem; padding:.42rem .58rem; border:1px solid var(--line);
  border-radius:.62rem; background:var(--panel); color:var(--text); font-weight:850; cursor:pointer;
}
.config-scope-button.active {
  border-color:var(--accent); background:color-mix(in srgb,var(--accent),var(--panel) 86%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent),transparent 40%);
}
.config-scope-button:hover,.config-scope-button:focus-visible { border-color:var(--accent); }
.config-dashboard {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.58rem; margin-top:.7rem;
}
.config-dashboard > button {
  display:grid; gap:.28rem; min-height:5rem; padding:.7rem; text-align:left;
  border:1px solid var(--line); border-radius:.8rem; background:color-mix(in srgb,var(--panel),var(--bg) 9%);
  color:var(--text); cursor:pointer;
}
.config-dashboard > button:hover,.config-dashboard > button:focus-visible {
  border-color:var(--accent); background:color-mix(in srgb,var(--accent),var(--panel) 90%);
}
.config-dashboard > button strong { font-size:.95rem; }
.config-dashboard > button span { color:var(--muted); font-size:.78rem; line-height:1.35; }
body.config-screen-active .config-item-help {
  display:block; margin-top:.28rem; color:var(--muted); font-size:.73rem; line-height:1.35;
}

/* Direct placement has one Config tab with a separate submenu per method. */
.direct-config-card { display:grid !important; gap:.75rem; }
.direct-config-card > fieldset,
.direct-config-method-panel {
  margin:0; padding:.75rem; border:1px solid var(--line); border-radius:.82rem;
  background:color-mix(in srgb,var(--panel),var(--bg) 8%);
}
.direct-config-card legend { padding:0 .3rem; font-weight:900; }
.direct-config-choice-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.58rem; align-items:start;
}
#direct-config-panel-random .direct-config-choice-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.direct-config-field { min-width:0; }
.direct-config-choice-grid .select-field { min-width:0; }
.direct-config-choice-grid .select-field select,
.direct-config-choice-grid .select-field input[type="number"] { width:100%; box-sizing:border-box; }
.config-control-explanation {
  margin-top:.3rem; padding:.25rem .42rem; border:1px solid color-mix(in srgb,var(--line),transparent 28%);
  border-radius:.55rem; background:color-mix(in srgb,var(--panel),var(--bg) 5%); color:var(--muted);
}
.config-control-explanation summary {
  width:max-content; max-width:100%; color:var(--muted); font-size:.71rem; font-weight:850; cursor:pointer;
}
.config-control-explanation small {
  display:block; padding:.35rem .08rem .08rem; font-size:.73rem; line-height:1.4;
}
.random-fixed-grid-fields {
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.58rem;
  padding:.58rem; border:1px dashed var(--line); border-radius:.68rem;
}
.random-fixed-grid-fields[hidden] { display:none !important; }
.direct-config-wide { grid-column:span 2; }
.direct-config-toggle-grid { margin-bottom:.65rem; }
.direct-config-toggle-grid > label,
.direct-config-toggle-field > label,
.direct-config-check-field {
  display:flex; align-items:flex-start; gap:.45rem; min-height:2.7rem; padding:.55rem;
  border:1px solid var(--line); border-radius:.68rem; color:var(--text); font-weight:800;
  background:var(--panel);
}
.direct-config-toggle-grid input,
.direct-config-check-field input { margin-top:.15rem; }
.direct-config-toggle-field { min-width:0; }
.direct-config-method-panel[hidden] { display:none !important; }
.direct-config-method-panel.active { display:grid; gap:.65rem; }
.direct-config-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.direct-config-actions button { min-height:2.5rem; font-weight:850; }
/* v2.0.0-rc.36: twee traditionele bomen in het eerste README-item.
   De smalle variant krijgt een staand kader zodat labels leesbaar blijven. */
.readme-tree-carousel[data-active-shape="narrow"] .readme-carousel-viewport {
  aspect-ratio: 4 / 5;
  min-height: 34rem;
}
@media (max-width: 760px) {
  .readme-tree-carousel[data-active-shape="narrow"] .readme-carousel-viewport {
    aspect-ratio: 4 / 5;
    min-height: 27rem;
  }
}

/* v2.0.0-rc.36: README layout follows the selected or automatic orientation.
   Automatic: side-by-side only on actual/forced mobile landscape; stacked elsewhere. */
body.help-screen-active .help-screen.help-tree-screen,
.help-tree-screen {
  --help-nav-size: clamp(10rem, 42dvh, 24rem);
  min-height: 0 !important;
}
body.help-screen-active .help-screen.help-tree-screen[data-help-layout="stacked"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--help-nav-size) .7rem minmax(0, 1fr) !important;
}
body.help-screen-active .help-screen.help-tree-screen[data-help-layout="side"] {
  --help-nav-size: clamp(13rem, 32vw, 24rem);
  grid-template-columns: var(--help-nav-size) .7rem minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.help-tree-nav,
.help-topic-stage {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}
.help-panel-resizer {
  position: relative;
  align-self: stretch;
  border: 0;
  border-radius: .55rem;
  touch-action: none;
  background: transparent;
  outline: none;
}
.help-tree-screen[data-help-layout="side"] .help-panel-resizer {
  min-width: .7rem;
  min-height: 2rem;
  cursor: col-resize;
}
.help-tree-screen[data-help-layout="stacked"] .help-panel-resizer {
  min-width: 2rem;
  min-height: .7rem;
  cursor: row-resize;
}
.help-panel-resizer::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line), var(--accent) 18%);
  transition: background .15s ease, box-shadow .15s ease;
}
.help-tree-screen[data-help-layout="side"] .help-panel-resizer::before { inset: .35rem .25rem; }
.help-tree-screen[data-help-layout="stacked"] .help-panel-resizer::before { inset: .25rem .35rem; }
.help-panel-resizer:hover::before,
.help-panel-resizer:focus-visible::before,
.help-panel-resizer.is-dragging::before {
  background: color-mix(in srgb, var(--accent), var(--line) 32%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.help-panel-resizer span::after {
  position: absolute;
  top: 50%; left: 50%; translate: -50% -50%;
  color: var(--muted); font-size: .9rem; font-weight: 900; line-height: 1;
}
.help-tree-screen[data-help-layout="side"] .help-panel-resizer span::after { content: "⋮"; }
.help-tree-screen[data-help-layout="stacked"] .help-panel-resizer span::after { content: "⋯"; }
body.help-layout-side.help-resizing { cursor: col-resize !important; user-select:none !important; }
body.help-layout-stacked.help-resizing { cursor: row-resize !important; user-select:none !important; }
[hidden] {
  display: none !important;
}

.config-features-card {
  max-width: 980px;
}

.config-preconfig-card {
  max-width: 980px;
}

.preconfig-capability-list {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 2px solid #2563eb;
  border-radius: 14px;
  background: #eff6ff;
}

.preconfig-intro {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.preconfig-axis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.preconfig-axis-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .85rem;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.preconfig-axis-choice input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .12rem;
}

.preconfig-axis-choice span,
.preconfig-axis-choice small {
  display: block;
}

.preconfig-axis-choice small {
  margin-top: .25rem;
  color: #475569;
}

.preconfig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.preconfig-status {
  padding: .7rem .85rem;
  border-radius: 10px;
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 850;
}

.preconfig-candidates {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
}

.preconfig-candidates h3,
.preconfig-candidates p {
  margin-top: 0;
}

.preconfig-candidates ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.feature-profile-status {
  margin: 1rem 0;
  padding: .9rem 1rem;
  border: 2px solid #0f766e;
  border-radius: 14px;
  background: #ecfdf5;
  color: #134e4a;
  font-weight: 900;
  font-size: 1.05rem;
}

.feature-extra-list {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid #94a3b8;
  border-radius: 14px;
}

.feature-extra-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .9rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.feature-extra-choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
}

.feature-extra-choice span,
.feature-extra-choice small {
  display: block;
}

.feature-extra-choice small {
  margin-top: .3rem;
  color: #475569;
  line-height: 1.45;
}

.feature-extra-choice.requirements-missing {
  border-style: dashed;
  background: #f8fafc;
  cursor: not-allowed;
  opacity: .82;
}

.feature-extra-choice .feature-requirement-status {
  color: #9a3412;
  font-weight: 800;
}

.reserved-applications {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px dashed #94a3b8;
  border-radius: 14px;
  background: #f8fafc;
}

.reserved-applications h3,
.reserved-applications p {
  margin-top: 0;
}

.reserved-application-list {
  display: grid;
  gap: .7rem;
}

.reserved-application-choice {
  border-style: dashed;
  background: #f8fafc;
  cursor: not-allowed;
  opacity: .86;
}

.reserved-application-choice input {
  cursor: not-allowed;
}

.reserved-application-choice .reserved-application-status {
  color: #475569;
  font-weight: 850;
}

.config-readme-carousel-card {
  width: min(100%, 980px);
}

.readme-carousel-topic-field {
  display: grid;
  gap: .4rem;
  margin: 1rem 0;
}

.readme-carousel-topic-field select,
.readme-topic-fields input,
.readme-topic-fields select,
.readme-topic-fields textarea,
.readme-carousel-slide-fields input,
.readme-carousel-slide-fields select,
.readme-carousel-slide-fields textarea {
  width: 100%;
  box-sizing: border-box;
}

.readme-topic-fields {
  display: grid;
  grid-template-columns: minmax(9rem, .6fr) repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.1rem;
  padding: 1rem;
  border: 1px solid #94a3b8;
  border-radius: 14px;
  background: #f8fafc;
}

.readme-topic-fields > label {
  display: grid;
  gap: .35rem;
  align-content: start;
  min-width: 0;
}

.readme-topic-html-field,
.readme-topic-html-help {
  grid-column: 1 / -1;
}

.readme-topic-fields textarea {
  min-height: 11rem;
  resize: vertical;
  font: 500 .84rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
}

.readme-topic-html-help {
  color: #475569;
  line-height: 1.45;
}

.readme-carousel-editor-heading {
  margin: 1.15rem 0 .3rem;
}

.readme-carousel-slide-fields input.is-embedded-source {
  border-style: dashed;
  background: #eef2ff;
  color: #475569;
}

.config-readme-slide-file-card {
  grid-column: 1 / -1 !important;
}

.config-project-layers-card {
  grid-column: 1 / -1 !important;
}

.project-config-precedence {
  display: grid;
  gap: .45rem;
  margin: .8rem 0;
  padding: .75rem .85rem .75rem 2.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.project-config-precedence li {
  padding-left: .25rem;
  line-height: 1.45;
}

.project-config-layer-status {
  min-height: 1.35rem;
  color: #334155;
  font-weight: 800;
}

.readme-slide-file-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(9rem, .7fr) minmax(0, 1.4fr);
  gap: .75rem;
  margin: .8rem 0;
}

.readme-slide-file-grid label {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.readme-slide-file-grid select,
.readme-slide-file-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.readme-slide-file-status {
  min-height: 1.35rem;
}

.readme-slide-file-status.is-error {
  color: #b91c1c;
  font-weight: 850;
}

.help-topic-empty-state {
  display: grid;
  min-height: 12rem;
  place-items: center;
  padding: 1rem;
  border: 1px dashed #94a3b8;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  font-weight: 800;
  text-align: center;
}

.help-topic-empty-state[hidden] {
  display: none !important;
}

.readme-carousel-editor-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: .75rem 0;
}

.readme-carousel-editor-nav button {
  min-width: 2.6rem;
}

.readme-carousel-editor-preview {
  min-height: 16rem;
  margin-bottom: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
}

.readme-carousel-editor-preview > span {
  display: block;
  padding: 2rem 1rem;
  color: #64748b;
  text-align: center;
}

.readme-carousel-editor-preview figure {
  display: grid;
  grid-template-rows: minmax(12rem, 1fr) auto;
  min-height: 16rem;
  margin: 0;
}

.readme-carousel-editor-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 28rem;
  object-fit: contain;
  background: #fff;
}

.readme-carousel-editor-preview figcaption {
  min-height: 2.8rem;
  padding: .7rem .85rem;
  border-top: 1px solid #cbd5e1;
  color: #475569;
}

.readme-carousel-image-placeholder {
  display: grid;
  min-height: 12rem;
  place-items: center;
  padding: 1rem;
  background:
    linear-gradient(135deg, transparent 47%, #cbd5e1 48%, #cbd5e1 52%, transparent 53%),
    #f8fafc;
  color: #475569;
  font-weight: 850;
  text-align: center;
}

.readme-carousel-slide-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  padding: 1rem;
  border: 1px solid #94a3b8;
  border-radius: 14px;
}

.readme-carousel-slide-fields label {
  display: grid;
  gap: .35rem;
  align-content: start;
}

.readme-carousel-slide-fields label:first-of-type,
.readme-carousel-slide-fields label:nth-last-of-type(-n + 2) {
  grid-column: 1 / -1;
}

.readme-carousel-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}

.readme-carousel-editor-status {
  min-height: 1.4rem;
  color: #475569;
  font-weight: 750;
}

@media (max-width: 700px) {
  .preconfig-axis-grid {
    grid-template-columns: 1fr;
  }

  .readme-topic-fields,
  .readme-carousel-slide-fields,
  .readme-slide-file-grid {
    grid-template-columns: 1fr;
  }

  .readme-topic-fields > *,
  .readme-carousel-slide-fields label {
    grid-column: 1 !important;
  }
}

/* v2.0.0-rc.39: de lokale staand/liggend-simulatie blijft ook na de
   MAX-render begrensd tot het gekozen telefoonframe. De latere MAX-regels
   mogen app-shell, workspace en canvas niet opnieuw naar 100vw verbreden. */
body.viewport-mobile-test.main-screen-active.main-window-max .app-shell {
  width: var(--viewport-test-width, 390px) !important;
  min-width: var(--viewport-test-width, 390px) !important;
  max-width: var(--viewport-test-width, 390px) !important;
  height: var(--viewport-test-height, 844px) !important;
  min-height: var(--viewport-test-height, 844px) !important;
  max-height: var(--viewport-test-height, 844px) !important;
}
body.viewport-mobile-test.main-screen-active.main-window-max .workspace,
body.viewport-mobile-test.main-screen-active.main-window-max .canvas-wrap {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* v2.0.0-rc.40: landscape gebruikt twee compacte, volledig leesbare
   menurijen en reserveert boven én onder echte ruimte vóór het SVG. Zo ligt
   de graph niet meer achter menu/Play en blijven rastertop plus LOG-as
   tegelijk zichtbaar. De JS-klasse geldt voor een echte handheld in
   landschap én voor de desktop-simulatie. */
body.viewport-handheld-landscape.main-screen-active .main-topbar {
  position: absolute !important;
  left: .42rem !important;
  right: .42rem !important;
  top: .42rem !important;
  width: auto !important;
  max-width: none !important;
  min-height: 3.45rem !important;
  height: 3.45rem !important;
  padding: .12rem .22rem !important;
  gap: .10rem !important;
  border-radius: .82rem !important;
  transform: none !important;
}
body.viewport-handheld-landscape.main-screen-active .main-top-menu {
  display: grid !important;
  grid-template-columns: repeat(6, max-content) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  column-gap: .10rem !important;
  row-gap: .10rem !important;
  overflow: visible !important;
}
body.viewport-handheld-landscape.main-screen-active .main-top-menu > * {
  min-width: max-content !important;
}
body.viewport-handheld-landscape.main-screen-active .top-menu-item > summary,
body.viewport-handheld-landscape.main-screen-active .top-menu-action {
  box-sizing: border-box !important;
  min-height: 1.48rem !important;
  height: 1.48rem !important;
  padding: .08rem .30rem !important;
  border-radius: .48rem !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.viewport-handheld-landscape.main-screen-active .main-top-menu > :nth-child(-n+6) .top-menu-popover {
  top: calc(200% + .28rem) !important;
}
body.viewport-handheld-landscape.main-screen-active #graphSvg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 3.90rem !important;
  bottom: 2.45rem !important;
  width: 100% !important;
  height: calc(100% - 6.35rem) !important;
  min-height: 0 !important;
  max-height: calc(100% - 6.35rem) !important;
}
body.viewport-handheld-landscape.main-screen-active.main-window-max .workspace,
body.viewport-handheld-landscape.main-screen-active.main-window-max .canvas-wrap {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}
body.viewport-handheld-landscape.main-screen-active .main-play-reset-bar {
  top: auto !important;
  bottom: 0 !important;
  min-height: 2.35rem !important;
  height: 2.35rem !important;
  padding: .10rem .24rem !important;
}
body.viewport-handheld-landscape.main-screen-active .main-play-reset-controls button {
  min-height: 1.82rem !important;
  height: 1.82rem !important;
  padding: .08rem .42rem !important;
  font-size: .72rem !important;
}

/* rc.45 source build 20260802.2: één configureerbaar lijnbeeld. Deze regels staan bewust als laatste,
   zodat oudere minimale-lijnprofielen de actuele Config niet overschrijven. */
:root {
  --og-grid-color: #94a3b8;
  --og-grid-line-width: .78;
  --og-grid-major-line-width: 1.05;
  --og-grid-line-opacity: .38;
  --og-grid-major-line-opacity: .54;
  --og-projection-line-width: 1.72;
  --og-projection-axis-width: 2.05;
  --og-box-line-width: .78;
}

.projection-color-field,
.line-style-field {
  border: 1px dashed color-mix(in srgb, var(--line), transparent 22%);
  border-radius: .9rem;
  padding: .55rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
  gap: .5rem;
  margin: .45rem 0;
}
.projection-color-field { grid-template-columns: repeat(3, minmax(7rem, 1fr)); }
.projection-color-field legend,
.line-style-field legend {
  font-weight: 950;
  color: var(--muted);
  padding-inline: .25rem;
}
.projection-color-field .top-menu-choice-help,
.line-style-field .top-menu-choice-help { grid-column: 1 / -1; }

body.main-screen-active #graphSvg .grid-line {
  stroke: var(--og-grid-color) !important;
  stroke-width: var(--og-grid-line-width) !important;
  opacity: var(--og-grid-line-opacity) !important;
}
body.main-screen-active #graphSvg .grid-line.major {
  stroke: var(--og-grid-color) !important;
  stroke-width: var(--og-grid-major-line-width) !important;
  opacity: var(--og-grid-major-line-opacity) !important;
}
body.main-screen-active #graphSvg .grid-axis {
  stroke: color-mix(in srgb, var(--og-grid-color), var(--text) 34%) !important;
  stroke-width: var(--og-grid-major-line-width) !important;
  opacity: calc(var(--og-grid-major-line-opacity) + .12) !important;
}

body.main-screen-active #graphSvg .projection-line,
body.main-screen-active #graphSvg .projection-line.horizontal,
body.main-screen-active #graphSvg .projection-line.orthogonal,
body.main-screen-active #graphSvg .logical-projection-line,
body.main-screen-active #graphSvg .logical-source-line,
body.main-screen-active #graphSvg .projected-rule-line {
  stroke-width: var(--og-projection-line-width) !important;
  opacity: .9 !important;
}
body.main-screen-active #graphSvg .projection-axis-line,
body.main-screen-active #graphSvg .logical-axis,
body.main-screen-active #graphSvg .lex-axis,
body.main-screen-active #graphSvg .lex-axis-line {
  stroke-width: var(--og-projection-axis-width) !important;
  opacity: .96 !important;
}

body.main-screen-active #graphSvg .lex-slot-box,
body.main-screen-active #graphSvg .lex-local-slot,
body.main-screen-active #graphSvg .lex-free-slot {
  stroke: var(--lex) !important;
  stroke-width: var(--og-box-line-width) !important;
}
body.main-screen-active #graphSvg .synt-box,
body.main-screen-active #graphSvg .category-box,
body.main-screen-active #graphSvg .syntax-rule-box,
body.main-screen-active #graphSvg .projected-rule-box,
body.main-screen-active #graphSvg .tree-subbox,
body.main-screen-active #graphSvg .jan-subtree-box {
  stroke: var(--synt) !important;
  stroke-width: var(--og-box-line-width) !important;
}
body.main-screen-active #graphSvg .logical-order-box,
body.main-screen-active #graphSvg .log-role-box,
body.main-screen-active #graphSvg .logical-order-badge,
body.main-screen-active #graphSvg .logical-order-badge-interactive {
  stroke: var(--log) !important;
  stroke-width: var(--og-box-line-width) !important;
}

/* Language Tree blijft de primaire toepassing; directe OGN-proeven zijn
   kleinere nevendoorgangen in hetzelfde View-menu. */
.top-menu-view-popover { width: min(25rem, calc(100vw - .6rem)); }
.placement-mode-picker,
.language-tree-view-picker { display: grid; gap: .35rem; }
.central-view-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  margin: 0 0 .28rem 0;
  padding: .24rem .38rem;
  border: 2px solid color-mix(in srgb, var(--accent), transparent 20%);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--accent), var(--panel) 92%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent), transparent 82%);
}
.central-view-toolbar h3 {
  margin: 0;
  color: var(--text);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: none;
  white-space: nowrap;
}
.central-view-toolbar .main-menu-view-options {
  display: flex !important;
  gap: .2rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.central-view-toolbar .compact-choice-option {
  min-width: 6.2rem;
  min-height: 2rem;
  padding: .3rem .62rem;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 45%);
  border-radius: .5rem;
  background: var(--panel);
  color: var(--text);
  font-size: .8rem;
  font-weight: 850;
  text-align: center;
}
.central-view-toolbar .compact-choice-option.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 72%);
}
.east-axis-label { text-anchor: start !important; }

/* rc.8: op mobiel is Syntax/Functies een kleine secundaire keuze rechts.
   De volledige testmateriaalcatalogus staat in één rustige, scrollbare lijst. */
@media (max-width: 760px), (orientation: portrait) {
  body.main-screen-active .main-topbar { position: relative !important; }
  body.main-screen-active .central-view-toolbar {
    position: absolute !important;
    z-index: 470 !important;
    top: .14rem !important;
    right: .22rem !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: .08rem !important;
    gap: .08rem !important;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--line), transparent 25%) !important;
    background: color-mix(in srgb, var(--panel), transparent 8%) !important;
    box-shadow: none !important;
    opacity: .78;
  }
  body.main-screen-active .central-view-toolbar:focus-within { opacity: 1; }
  body.main-screen-active .central-view-toolbar .main-menu-view-options { gap: .06rem !important; }
  body.main-screen-active .central-view-toolbar .compact-choice-option {
    flex: 0 0 auto !important;
    min-width: 2.95rem !important;
    min-height: 1.34rem !important;
    height: 1.34rem !important;
    padding: .04rem .22rem !important;
    font-size: .60rem !important;
    font-weight: 760 !important;
    border-radius: .34rem !important;
  }
  body.main-screen-active .central-view-toolbar .compact-choice-option.active {
    box-shadow: none !important;
    background: color-mix(in srgb, var(--accent), var(--panel) 32%) !important;
  }
  body.main-screen-active .main-top-menu { padding-right: 6.45rem !important; box-sizing: border-box !important; }
  body.main-screen-active .top-menu-sentence-popover {
    position: fixed !important;
    left: .28rem !important;
    right: .28rem !important;
    top: 3.55rem !important;
    width: auto !important;
    max-height: calc(100dvh - 6.3rem) !important;
    padding: .30rem !important;
  }
  body.main-screen-active #mainSentenceOptions {
    max-height: calc(100dvh - 7rem) !important;
    gap: .14rem !important;
  }
  body.main-screen-active #mainSentenceOptions .compact-choice-option {
    min-height: 1.72rem !important;
    padding: .22rem .38rem !important;
    font-size: .70rem !important;
    border-radius: .42rem !important;
  }
  body.main-screen-active #mainSentenceOptions .compact-choice-group {
    margin-top: .08rem !important;
    padding: .18rem .34rem .12rem !important;
    font-size: .60rem !important;
  }
}
@media (max-width: 760px), (orientation: portrait) {
  .central-view-toolbar {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .central-view-toolbar .main-menu-view-options { flex: 1; }
  .central-view-toolbar .compact-choice-option { flex: 1; min-width: 0; }
}
.placement-mode-picker { margin-bottom: .5rem; }
.placement-mode-picker h3,
.language-tree-view-picker h3 {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.placement-mode-direct-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem;
}
.placement-mode-option {
  min-height: 3rem;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: .12rem;
  text-align: left;
}
.placement-mode-option.is-primary {
  min-height: 3.5rem;
  border-width: 2px;
}
.placement-mode-option small { color: var(--muted); font-weight: 750; }
.placement-mode-option.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--panel) 88%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 45%);
}
.placement-mode-option.active small { color: var(--text); }
body.placement-direct-active .main-grid-controls,
body.placement-direct-active .main-south-control,
body.placement-direct-active .lex-ambiguity-panel {
  display: none !important;
}

#graphSvg .direct-placement-path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent), transparent 30%);
  stroke-width: 1.25;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
#graphSvg .direct-placement-node circle {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
#graphSvg .direct-placement-node.is-current circle {
  fill: color-mix(in srgb, var(--accent), var(--panel) 82%);
  stroke-width: 3;
}
#graphSvg .direct-placement-node text {
  fill: var(--text);
  font-size: calc(12px * var(--og-font-scale));
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}
#graphSvg .direct-placement-caption {
  fill: var(--muted);
  font-size: calc(13px * var(--og-font-scale));
  font-weight: 800;
}
#graphSvg .direct-axis-hit-axis {
  fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; opacity:.72;
}
#graphSvg .direct-axis-hit-axis-west { stroke:#2563eb; }
#graphSvg .direct-axis-hit-axis-south { stroke:#f97316; }
#graphSvg .direct-axis-hit-spot {
  vector-effect:non-scaling-stroke;
  transition:r .18s ease,fill-opacity .18s ease,stroke-width .18s ease;
}
#graphSvg .direct-axis-hit-west { fill:#2563eb; stroke:#1d4ed8; }
#graphSvg .direct-axis-hit-south { fill:#f97316; stroke:#c2410c; }
#graphSvg .direct-axis-pattern-label {
  fill:var(--muted); font-size:calc(10px * var(--og-font-scale)); font-weight:900; letter-spacing:.04em;
}

@media (max-width: 720px) {
  .config-scope-nav { grid-template-columns:1fr; }
  .projection-color-field,
  .line-style-field { grid-template-columns: 1fr; }
  .placement-mode-direct-options { grid-template-columns: 1fr; }
  .direct-config-choice-grid { grid-template-columns:1fr; }
  #direct-config-panel-random .direct-config-choice-grid { grid-template-columns:1fr; }
  .random-fixed-grid-fields { grid-template-columns:1fr; }
  .direct-config-wide { grid-column:auto; }
}

/* Een actieve directe methode heeft een taakscherm, geen algemene viewer- of
   Configpagina: Terug, eigen wijzigbare velden en compacte save-acties. */
body.config-screen-active.config-direct-method-only .projection-sticky-bar,
body.config-screen-active.config-direct-method-only .main-play-reset-bar,
body.config-screen-active.config-direct-method-only .toolbar,
body.config-screen-active.config-direct-method-only .status-panel,
body.config-screen-active.config-direct-method-only .intro-panel,
body.config-screen-active.config-direct-method-only .text-panel,
body.config-screen-active.config-direct-method-only .mobile-growth-nav,
body.config-screen-active.config-direct-method-only .mobile-bottom-nav,
body.config-screen-active.config-direct-method-only .mobile-sheet,
body.config-screen-active.config-direct-method-only .mobile-sheet-backdrop {
  display:none !important;
}
body.config-screen-active.config-direct-method-only .app-shell {
  width:100% !important;
  max-width:48rem !important;
  gap:.5rem !important;
  padding:.55rem !important;
}
body.config-screen-active.config-direct-method-only .config-topbar {
  position:static !important;
  width:100% !important;
  max-width:46rem !important;
  margin-inline:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.config-screen-active.config-direct-method-only .workspace,
body.config-screen-active.config-direct-method-only .side-panel {
  width:100% !important;
  max-width:46rem !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  padding:0 !important;
  gap:.5rem !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
body.config-screen-active.config-direct-method-only [data-config-tab-panel="direct"],
body.config-screen-active.config-direct-method-only .config-global-save-slot {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
body.config-screen-active.config-direct-method-only .direct-config-card {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.config-screen-active.config-direct-method-only .config-global-save-card,
body.config-screen-active.config-direct-method-only .config-global-save-card .config-save-field {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.config-screen-active.config-direct-method-only .config-save-field legend,
body.config-screen-active.config-direct-method-only #configSaveStatus {
  display:none !important;
}
body.config-screen-active.config-direct-method-only .config-save-row {
  margin:0 !important;
  justify-content:flex-start;
}

/* Calculated applications share the View menu, while each application keeps
   its own complete rendering contract. */
.placement-mode-calculated-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
}

body.placement-multi-ogn-active .main-grid-controls,
body.placement-multi-ogn-active .main-south-control,
body.placement-multi-ogn-active .mobile-growth-nav,
body.placement-multi-ogn-active .lex-ambiguity-panel {
  display:none !important;
}

#graphSvg .multi-ogn-unit-frame {
  fill:color-mix(in srgb, var(--panel,#ffffff) 86%, #dbeafe 14%);
  fill-opacity:.72;
  stroke:#94a3b8;
  stroke-width:1.25;
  stroke-dasharray:7 5;
  vector-effect:non-scaling-stroke;
}
#graphSvg .multi-ogn-unit-label {
  fill:#334155;
  font-size:calc(14px * var(--og-font-scale));
  font-weight:950;
  letter-spacing:.08em;
}
#graphSvg .multi-ogn-sentence-label {
  fill:#64748b;
  font-size:calc(13px * var(--og-font-scale));
  font-weight:750;
}
#graphSvg .multi-ogn-lex-axis {
  stroke:var(--lex-projection-color,#14b8a6) !important;
  stroke-width:2.4 !important;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
#graphSvg .multi-ogn-lex-title {
  fill:var(--lex-projection-color,#0f766e);
  font-weight:950;
}
#graphSvg .multi-ogn-lex-item {
  fill:color-mix(in srgb, var(--panel,#ffffff) 84%, #ccfbf1 16%);
  stroke:var(--lex-projection-color,#14b8a6);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
#graphSvg .multi-ogn-lex-unit-label {
  fill:#475569;
  font-size:calc(11px * var(--og-font-scale));
  font-weight:950;
  text-anchor:end;
}
#graphSvg .multi-ogn-lex-projection {
  stroke:var(--lex-projection-color,#14b8a6) !important;
  stroke-dasharray:5 4;
  opacity:.64;
}
#graphSvg .multi-ogn-coreference-line {
  fill:none !important;
  stroke:#dc2626 !important;
  stroke-width:2.65 !important;
  stroke-linecap:round;
  stroke-dasharray:none !important;
  marker-start:none !important;
  marker-mid:none !important;
  marker-end:none !important;
  vector-effect:non-scaling-stroke;
}
#graphSvg .multi-ogn-context-relation-line {
  fill:none;
  stroke:#7c3aed;
  stroke-width:1.8;
  stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke;
}
#graphSvg .multi-ogn-context-relation-arrow {
  fill:#7c3aed;
  stroke:none;
}
#graphSvg .multi-ogn-context-relation-label {
  fill:#6d28d9;
  font-size:calc(11px * var(--og-font-scale));
  font-weight:850;
}
#graphSvg [data-lex-origin="context-insertion"] {
  stroke-dasharray:4 3;
}
#graphSvg .coreference-antecedent circle,
#graphSvg .coreference-anaphor circle,
#graphSvg .coreference-antecedent rect,
#graphSvg .coreference-anaphor rect {
  stroke:#dc2626 !important;
  stroke-width:2.25 !important;
  vector-effect:non-scaling-stroke;
}
#graphSvg .utterance-connector {
  stroke-dasharray: 5 3;
}
#graphSvg [data-space-drag-enabled="true"] .kernel-space-drag-unit [data-node-id] {
  cursor: nwse-resize;
  touch-action: none;
}
#graphSvg .sentence-space-drag-view[data-space-drag-enabled="true"] [data-node-id] {
  cursor: nwse-resize;
  touch-action: none;
}

.canvas-wrap { position: relative; }
.space-zoom-controls {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 8px;
  display: grid;
  gap: 5px;
  padding: 7px;
  max-width: min(94%, 330px);
  border: 1px solid color-mix(in srgb, var(--border-color,#94a3b8) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg,#fff) 92%, transparent);
  box-shadow: 0 3px 12px rgba(15,23,42,.14);
  touch-action: none;
}
.space-zoom-panel { display:grid; gap:5px; }
.space-zoom-controls.is-collapsed .space-zoom-panel { display:none; }
.space-zoom-controls.is-disabled { display:none; }
.space-zoom-toggle { width:100%; }
.space-zoom-scope,.space-zoom-handles,.space-zoom-units,.space-zoom-resets { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.space-zoom-units > span { font-size:11px; font-weight:800; }
.space-zoom-units.is-hidden { display:none; }
.space-zoom-status {
  display:block;
  min-height:1.35em;
  padding:4px 6px;
  border-radius:7px;
  background:color-mix(in srgb, var(--accent,#0f766e) 9%, transparent);
  font-size:11px;
  font-weight:800;
}
.space-zoom-resets button { flex:1 1 auto; font-size:11px; }
.space-zoom-controls button {
  min-width: 44px;
  min-height: 36px;
  padding: 5px 9px;
  font-weight: 800;
  touch-action: none;
}
.space-zoom-controls button.is-active {
  background: var(--accent,#0f766e);
  color: #fff;
}
.space-zoom-controls small { font-size: 11px; line-height: 1.2; }
@media (max-width: 760px) {
  .space-zoom-controls { top: 5px; right: 5px; padding: 5px; }
  .space-zoom-controls button { min-height: 42px; }
  .space-zoom-controls small { max-width: 260px; }
}
#graphSvg [data-space-drag-enabled="true"] .kernel-space-drag-unit [data-node-id]:hover circle,
#graphSvg [data-space-drag-enabled="true"] .kernel-space-drag-unit [data-node-id]:hover rect {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lex-projection-color,#14b8a6) 75%, transparent));
}
#graphSvg .utterance-implicit-subject circle,
#graphSvg .utterance-implicit-subject rect {
  stroke-dasharray: 4 3;
  fill-opacity: .72;
}

#graphSvg .multi-ogn-relation-note {
  fill:#991b1b;
  font-weight:850;
}

@media (max-width:720px) {
  .placement-mode-calculated-options { grid-template-columns:1fr; }
}

/* rc.10 build .30: rustige mobiele Basisstand. Desktop en de expliciete
   mobiele stand Uitgebreid behouden het volledige presentatiemenu. */
body.mobile-menu-basic.main-screen-active #mainLexOrientationMenu,
body.mobile-menu-basic.main-screen-active #sourceAxisMenu,
body.mobile-menu-basic.main-screen-active #mainExtraMenu,
body.mobile-menu-basic.main-screen-active #mainAdverbMenu,
body.mobile-menu-basic.main-screen-active #mainViewMenu,
body.mobile-menu-basic.main-screen-active #lexAxisMobileWarning,
body.mobile-menu-basic.main-screen-active .space-zoom-controls {
  display: none !important;
}

.main-grammar-menu {
  position: relative;
  width: auto;
  margin: 0;
}
.main-grammar-menu > summary {
  min-width: 5.4rem;
  text-align: center;
}
.main-grammar-menu .grammar-popover {
  width: min(11rem, calc(100vw - .7rem));
}
.main-grammar-menu .main-menu-view-options {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .18rem !important;
}

body.mobile-menu-basic.main-screen-active #mainLexOrientationMenu,
body.mobile-menu-advanced.main-screen-active #mainLexOrientationMenu,
body.mobile-menu-basic.main-screen-active #lexAxisMobileWarning,
body.mobile-menu-advanced.main-screen-active #lexAxisMobileWarning {
  display: none !important;
}

body.mobile-menu-basic.main-screen-active .main-topbar {
  display: grid !important;
  grid-template-columns: minmax(4.85rem, 5.35rem) minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 2.32rem !important;
  height: auto !important;
  padding: .14rem .20rem !important;
  gap: .18rem !important;
}
body.mobile-menu-basic.main-screen-active .main-grammar-menu {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .06rem !important;
  border-width: 1px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
body.mobile-menu-basic.main-screen-active .main-grammar-menu > summary {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 1.62rem !important;
  height: 1.62rem !important;
  padding: .04rem .16rem !important;
  border-radius: .34rem !important;
  font-size: .60rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.mobile-menu-basic.main-screen-active .main-grammar-menu .grammar-popover {
  position: fixed !important;
  left: .28rem !important;
  right: .28rem !important;
  top: 2.72rem !important;
  width: auto !important;
}
body.mobile-menu-basic.main-screen-active .main-top-menu {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .72fr)) !important;
  grid-template-rows: auto !important;
  width: 100% !important;
  padding: 0 !important;
  gap: .12rem !important;
}
body.mobile-menu-basic.main-screen-active .main-top-menu > #mainSentenceMenu,
body.mobile-menu-basic.main-screen-active .main-top-menu > #mainLanguageMenu,
body.mobile-menu-basic.main-screen-active .main-top-menu > #openHelpButton,
body.mobile-menu-basic.main-screen-active .main-top-menu > #openConfigButton {
  display: block !important;
  grid-row: 1 !important;
  grid-column: auto !important;
}
body.mobile-menu-basic.main-screen-active .main-top-menu > #mainSentenceMenu > summary,
body.mobile-menu-basic.main-screen-active .main-top-menu > #mainLanguageMenu > summary,
body.mobile-menu-basic.main-screen-active .main-top-menu > #openHelpButton,
body.mobile-menu-basic.main-screen-active .main-top-menu > #openConfigButton {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 1.62rem !important;
  height: 1.62rem !important;
  padding: .06rem .12rem !important;
  font-size: .57rem !important;
  line-height: 1 !important;
}
body.mobile-menu-basic.main-screen-active .main-top-menu > :not(#mainSentenceMenu):not(#mainLanguageMenu):not(#openHelpButton):not(#openConfigButton) {
  display: none !important;
}
body.mobile-menu-basic.main-screen-active .top-menu-sentence-popover {
  top: 2.72rem !important;
  max-height: calc(100dvh - 5.4rem) !important;
}

/* Keep the active test utterance above the graph in every main viewer mode. */
.main-active-utterance {
  display:flex;
  align-items:baseline;
  gap:.65rem;
  min-width:0;
  padding:.48rem .78rem;
  border:1px solid color-mix(in srgb, var(--line,#cbd5e1), #2563eb 18%);
  border-radius:.7rem;
  background:color-mix(in srgb, var(--panel,#ffffff), #dbeafe 14%);
}
.main-active-utterance[hidden],
body:not(.main-screen-active) .main-active-utterance {
  display:none !important;
}
.main-active-utterance-label {
  flex:0 0 auto;
  color:#475569;
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.main-active-utterance-text {
  min-width:0;
  color:#0f172a;
  font-size:1.04rem;
  font-weight:850;
  overflow-wrap:anywhere;
}
.main-causal-anaphor-choice {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-left:auto;
  color:#475569;
  font-size:.76rem;
  font-weight:750;
  white-space:nowrap;
}
.main-causal-anaphor-choice[hidden] { display:none !important; }
.main-causal-anaphor-choice label {
  display:flex;
  align-items:center;
  gap:.3rem;
}
.main-causal-anaphor-choice select {
  max-width:9rem;
  padding:.2rem .36rem;
  border:1px solid var(--line,#cbd5e1);
  border-radius:.4rem;
  background:var(--panel,#ffffff);
  color:#0f172a;
  font:inherit;
}
.main-active-utterance { flex-wrap:wrap; }
.main-tense-choice { align-items:center; flex-wrap:wrap; }
.main-tense-label { font-weight:850; }
.main-tense-buttons {
  display:inline-flex;
  gap:.2rem;
  padding:.15rem;
  border:1px solid #bfdbfe;
  border-radius:.55rem;
  background:#eff6ff;
}
.main-tense-buttons button {
  min-width:2.6rem;
  padding:.28rem .42rem;
  border:1px solid transparent;
  border-radius:.4rem;
  background:transparent;
  color:#1e3a8a;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}
.main-tense-buttons button:hover,
.main-tense-buttons button:focus-visible {
  border-color:#60a5fa;
  outline:2px solid rgba(37,99,235,.18);
}
.main-tense-buttons button.active,
.main-tense-buttons button[aria-pressed="true"] {
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}
.main-tense-name {
  color:#475569;
  font-size:.68rem;
  white-space:normal;
}
.main-tense-popover {
  width:min(28rem, calc(100vw - 1rem));
  display:grid;
  gap:.55rem;
}
.main-tense-popover .main-tense-buttons {
  display:grid;
  grid-template-columns:repeat(4, minmax(3.2rem, 1fr));
}
.main-tense-popover .main-tense-name { display:block; }
@media (max-width:560px) {
  .main-tense-popover .main-tense-buttons { grid-template-columns:repeat(2, minmax(4rem, 1fr)); }
}

/* This final override deliberately wins against historical thin-line rules. */
body.main-screen-active #graphSvg .tree-edge,
body.main-screen-active #graphSvg .syntax-tree-edge {
  stroke:var(--og-tree-line-color,#2563eb) !important;
  stroke-width:var(--og-tree-line-width,3.55) !important;
  opacity:var(--og-tree-line-opacity,1) !important;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
#graphSvg .utterance-configurable-node {
  cursor:pointer;
  pointer-events:auto !important;
}
#graphSvg .utterance-configurable-node .node-circle,
#graphSvg .utterance-configurable-node .node-main-label,
#graphSvg .utterance-configurable-node .node-sub-label {
  cursor:pointer;
  pointer-events:auto !important;
}
#graphSvg .utterance-configurable-node:hover .node-circle,
#graphSvg .utterance-configurable-node:focus .node-circle {
  stroke:#f59e0b !important;
  stroke-width:3px !important;
}
#graphSvg .utterance-kernel-view .node-main-label {
  font-size:15px;
}
#graphSvg .utterance-kernel-view .node-sub-label {
  font-size:10px;
}
#graphSvg .utterance-kernel-view .box-label {
  font-size:15px;
}

#graphSvg .utterance-flip-reveal-layer {
  pointer-events:none;
}
#graphSvg .utterance-flip-before-edges,
#graphSvg .utterance-flip-before-nodes {
  opacity:.22;
}
#graphSvg .utterance-flip-ghost-edge {
  stroke:#ef4444 !important;
  stroke-width:2.2 !important;
  stroke-dasharray:8 6;
}
#graphSvg .utterance-flip-before-nodes .node-shape,
#graphSvg .utterance-flip-before-nodes .node-shape-layer > * {
  stroke:#ef4444 !important;
  fill:#fff7f7 !important;
}
#graphSvg .utterance-flip-motion {
  stroke:#ef4444;
  stroke-width:2.1;
  stroke-dasharray:4 5;
  opacity:.72;
}
#graphSvg .utterance-flip-badge {
  fill:#b91c1c;
  font-size:18px;
  font-weight:900;
  letter-spacing:.035em;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:5px;
  stroke-linejoin:round;
}
@keyframes utteranceFlipNodeFlash {
  0%,100% { filter:drop-shadow(0 0 0 rgba(245,158,11,0)); opacity:1; }
  22%,68% { filter:drop-shadow(0 0 13px rgba(245,158,11,.98)); opacity:1; }
  45% { filter:drop-shadow(0 0 22px rgba(239,68,68,1)); opacity:.72; }
}
#graphSvg .utterance-flip-active-node {
  animation:utteranceFlipNodeFlash .72s ease-in-out 3;
}
#graphSvg .utterance-flip-active-node .node-circle,
#graphSvg .utterance-flip-active-node .node-box,
#graphSvg .utterance-flip-active-node .node-shape {
  stroke:#f59e0b !important;
  stroke-width:4px !important;
}
@media (prefers-reduced-motion:reduce) {
  #graphSvg .utterance-flip-active-node { animation:none; }
}
#graphSvg .utterance-lex-movement-layer { pointer-events:none; }
#graphSvg .utterance-lex-movement {
  fill:none;
  stroke:#0f766e;
  stroke-width:2.8;
  stroke-dasharray:9 6;
  opacity:.92;
}
#graphSvg .utterance-lex-source-trace {
  fill:#f59e0b;
  stroke:#fff;
  stroke-width:2px;
}
#graphSvg .utterance-lex-arrowhead { fill:#0f766e; }
#graphSvg .utterance-lex-movement-label {
  fill:#0f766e;
  font-size:12px;
  font-weight:800;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:4px;
  stroke-linejoin:round;
}
.multi-ogn-tree-layout-field {
  display:grid;
  gap:.65rem;
  margin-top:.9rem;
  padding:.7rem;
  border:1px solid var(--line,#cbd5e1);
  border-radius:.65rem;
}
@media (max-width:720px) {
  .main-active-utterance { gap:.4rem; padding:.36rem .52rem; }
  .main-active-utterance-label { font-size:.66rem; }
  .main-active-utterance-text { font-size:.9rem; }
  .main-active-utterance { flex-wrap:wrap; }
  .main-causal-anaphor-choice { font-size:.68rem; }
}