/* fonts are served locally (no third-party requests); licenses next to the files in /fonts */
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --border: #dfe3e8;
  --text: #111827; --text-2: #4b5563; --text-3: #5f6774; --border-strong: #7c8794;
  --accent: #0f766e; --accent-hover: #115e59; --accent-contrast: #ffffff;
  --ok: #15803d; --warn: #b45309; --error: #b91c1c; --info: #1d4ed8;
  --added-bg: #e7f6ec; --removed-bg: #fde8e8;
  /* one scale for spacing and sizes: controls in a row share a height, padding is horizontal only */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px;
  --control-h-sm: 24px; --control-h-md: 28px; --control-h-lg: 32px;
  --row-h: 24px; --bar-h: 40px; --panel-pad-x: 12px;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px;
  --font-ui: "Inter", system-ui, sans-serif; --font-code: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1419; --surface: #161b22; --surface-2: #1f262e; --border: #2d3640;
    --text: #e6edf3; --text-2: #9ba7b4; --text-3: #8a94a0; --border-strong: #6b7682;
    --accent: #2dd4bf; --accent-hover: #5eead4; --accent-contrast: #062a26;
    --ok: #4ade80; --warn: #fbbf24; --error: #f87171; --info: #60a5fa;
    --added-bg: #12351f; --removed-bg: #3d1717;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1419; --surface: #161b22; --surface-2: #1f262e; --border: #2d3640;
  --text: #e6edf3; --text-2: #9ba7b4; --text-3: #8a94a0; --border-strong: #6b7682;
  --accent: #2dd4bf; --accent-hover: #5eead4; --accent-contrast: #062a26;
  --ok: #4ade80; --warn: #fbbf24; --error: #f87171; --info: #60a5fa;
  --added-bg: #12351f; --removed-bg: #3d1717;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.45 var(--font-ui); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn { font: inherit; height: var(--control-h-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 0 var(--space-5); cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* the main action of a section is a step larger */
.btn--primary { height: var(--control-h-lg); background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-contrast); }
.banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius); border: 1px solid; }
.banner--error { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }
.empty-layout { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 12px; }
.login-card h1 { font-size: 18px; margin: 4px 0 0; }
.login-card header p { color: var(--text-3); margin: 0; }
.login-card form { display: grid; gap: 6px; }
.login-card input { font: inherit; height: var(--control-h-lg); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.login-card .btn { margin-top: var(--space-4); }
.brand-mark { color: var(--accent); font-size: 20px; }
:root { --sources-width: 260px; --inspector-width: 320px; }
.wb-grid { height: 100vh; display: grid;
  /* the documents keep room for two usable panes; when space runs short the side panels give way first (down to
     their minimum), however wide they were dragged */
  grid-template-columns: minmax(min(180px, var(--sources-width)), var(--sources-width)) var(--sources-handle, 6px)
    minmax(min(640px, 55vw), 1fr) var(--inspector-handle, 6px) minmax(min(240px, var(--inspector-width)), var(--inspector-width));
  grid-template-rows: 44px minmax(0, 1fr) 24px;
  grid-template-areas: "h h h h h" "s sh m ih i" "f f f f f"; }
/* collapsed panels give their column and splitter back to the documents */
.wb-grid[data-sources-open="false"] { --sources-width: 0px; --sources-handle: 0px; }
.wb-grid[data-inspector-open="false"] { --inspector-width: 0px; --inspector-handle: 0px; }
.wb-sources[hidden], .wb-inspector[hidden] { display: block; visibility: hidden; overflow: hidden; border: 0; }
.wb-header { grid-area: h; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.wb-brand { font-weight: 600; white-space: nowrap; }
.wb-search-trigger { flex: 1; max-width: 520px; margin: 0 auto; display: flex; gap: 8px; align-items: center; font: inherit; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); height: var(--control-h-md); padding: 0 10px; cursor: text; }
.wb-search-trigger kbd { margin-left: auto; }
kbd { font: var(--fs-xs) var(--font-code); line-height: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-3); background: var(--surface); color: var(--text-3); }
.wb-fv select { font: inherit; height: var(--control-h-md); background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 var(--space-4); }
select:disabled { opacity: .5; cursor: not-allowed; }
.wb-user { display: flex; align-items: center; gap: 6px; color: var(--text-2); margin: 0; }
.wb-sources { grid-area: s; overflow: auto; background: var(--surface); border-right: 1px solid var(--border); }
.wb-main { grid-area: m; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.wb-inspector { grid-area: i; overflow: auto; background: var(--surface); border-left: 1px solid var(--border); }
.wb-status { grid-area: f; display: flex; gap: 16px; align-items: center; padding: 0 12px; font-size: 11px; color: var(--text-3); border-top: 1px solid var(--border); background: var(--surface); }
.wb-status__end { margin-left: auto; }
.split-handle { cursor: col-resize; background: transparent; }
.split-handle:hover, .split-handle:focus-visible { background: var(--accent); }
.btn-icon { display: inline-grid; place-items: center; width: var(--control-h-md); height: var(--control-h-md); padding: 0; font: inherit; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); cursor: pointer; }
.btn-icon:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.btn-icon:disabled { opacity: .5; cursor: not-allowed; }
.reconnect { display: none; position: fixed; inset: auto 16px 40px auto; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--warn); border-radius: var(--radius); }
/* .NET 10 adds "paused" and "resume-failed" to the classic show/failed/rejected states */
.reconnect.components-reconnect-show, .reconnect.components-reconnect-paused,
.reconnect.components-reconnect-failed, .reconnect.components-reconnect-rejected, .reconnect.components-reconnect-resume-failed { display: block; }
.reconnect__failed { display: none; }
.reconnect.components-reconnect-failed .reconnect__text, .reconnect.components-reconnect-rejected .reconnect__text, .reconnect.components-reconnect-resume-failed .reconnect__text { display: none; }
.reconnect.components-reconnect-failed .reconnect__failed, .reconnect.components-reconnect-rejected .reconnect__failed, .reconnect.components-reconnect-resume-failed .reconnect__failed { display: block; }
@media (max-width: 900px) {
  /* stacked: the page scrolls vertically, the documents keep a usable height */
  .wb-grid { height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px auto auto auto 24px;
    grid-template-areas: "h" "s" "m" "i" "f"; }
  .split-handle { display: none; }
  .wb-sources[hidden], .wb-inspector[hidden] { display: none; }
  .wb-sources, .wb-inspector { border: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .wb-search-trigger span { display: none; }
  .wb-brand__text, .wb-user__name { display: none; }
  .wb-search-trigger { flex: 0 0 auto; margin: 0 0 0 auto; }
}
.docs { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, var(--docs-first, 1fr)) 28px minmax(0, var(--docs-second, 1fr)); }
/* gutter between the panes: drag area (col/row resize) with the swap button where the headers are */
.docs__divider { display: flex; flex-direction: column; align-items: center; padding-top: 6px; cursor: col-resize; background: var(--surface-2); border-left: 1px solid var(--border); border-right: 1px solid var(--border); touch-action: none; }
.docs__divider:hover, .docs__divider:focus-visible { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); outline: none; }
.docs__swap { border-radius: 50%; color: var(--accent); cursor: pointer; }
.pane__empty { position: absolute; left: 56px; right: 16px; top: 10px; margin: 0; color: var(--text-3); pointer-events: none; z-index: 1; }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.pane__header { height: var(--bar-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
/* controls keep their size, only the origin gives way; narrow panes drop the toggle labels */
.pane { container-type: inline-size; }
.pane__header > * { flex: none; }
.pane__header > .pane__origin { flex: 0 1 auto; }
.pane__header > .pane__spacer { flex: 1 1 0; }
@container (max-width: 560px) { .toggle__label { display: none; } }
@container (max-width: 460px) { .pane__origin { display: none; } }
@container (max-width: 380px) { .pane__badge { display: none; } }
.pane__title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* one badge: format in the pane header, file type (AHB/MIG) in the rulebooks; .badge adds an outline */
.pane__badge, .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 16px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); }
.pane__badge { background: var(--surface-2); }
.badge { box-shadow: inset 0 0 0 1px var(--border); }
.pane__badge--edifact { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pane__origin { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pane__spacer { flex: 1; }
/* errors sit above the editor in the flow (never over line 1); only the short busy hint floats */
.pane__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane__message { margin: 8px; flex: none; }
.pane__message:not(.banner--error) { position: absolute; top: var(--space-3); right: var(--space-5); margin: 0; z-index: 1; padding: 2px 8px; font-size: 11px; color: var(--text-3); background: var(--surface-2); border-radius: var(--radius); pointer-events: none; }
.code-editor { position: absolute; inset: 0; }
@media (max-width: 900px) { .docs { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(320px, 45vh) auto minmax(320px, 45vh); } .docs__divider { flex-direction: row; justify-content: center; padding: 2px 0; cursor: default; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } }
.pane__editor { position: relative; flex: 1; min-height: 0; }
.pane__scroll { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.is-hidden { display: none; }
/* split view: raw text left, tree right; narrow panes put the tree below. A grid keeps an error banner above both. */
.pane__body--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.pane__body--split > .pane__message { grid-column: 1 / -1; grid-row: 1; }
.pane__body--split > .pane__editor { grid-column: 1; grid-row: 2; }
.pane__body--split > .pane__scroll { grid-column: 2; grid-row: 2; border-left: 1px solid var(--border); }
@container (max-width: 700px) {
  .pane__body--split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
  .pane__body--split > .pane__scroll { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--border); }
}
.wb-sync-highlight { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.wb-hint-inline { color: var(--text-3); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 3px; margin: 0 2px 0 4px; padding: 0 3px; }
.wb-annotation-zone { color: var(--text-3); white-space: pre; pointer-events: none; }
.toggle { display: inline-flex; height: var(--control-h-md); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.toggle button { font: inherit; font-size: var(--fs-sm); display: inline-flex; gap: var(--space-2); align-items: center; border: 0; background: var(--surface); color: var(--text-2); padding: 0 10px; cursor: pointer; }
.toggle button + button { border-left: 1px solid var(--border); }
.toggle button[aria-pressed="true"], .toggle button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent); font-weight: 600; }
.toggle button:disabled, .toggle button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* the parts (text, tree) and the text mode (plain/hints) are two controls; the mode is a choice, not a part */
.view-switch { display: inline-flex; gap: var(--space-3); }
.toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree { font-size: 12px; container-type: inline-size; }
.node__header { display: flex; gap: 6px; align-items: baseline; width: 100%; white-space: nowrap; text-align: left; font: inherit; background: none; border: 0; padding: 2px 4px; color: var(--text); border-radius: 4px; }
button.node__header { cursor: pointer; }
button.node__header:hover { background: var(--surface-2); }
.node__arrow { display: inline-grid; transition: transform .15s; color: var(--text-3); }
.node__arrow.is-down { transform: rotate(90deg); }
.node__type { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; }
.node__code { font: 600 12px var(--font-code); color: var(--accent); }
.node--group > .node__header .node__code { color: var(--text-2); }
.node__qualifier { font: 12px var(--font-code); color: var(--warn); }
.node__name { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.node__children { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--border); }
/* the label column shrinks by the indentation, so values line up across all depths */
.child { display: grid; grid-template-columns: max(8ch, calc(clamp(18ch, 45cqw, 42ch) - var(--depth, 0) * 16px)) minmax(0, max-content) minmax(0, 1fr); gap: 8px; padding: 1px 4px; font-family: var(--font-code); }
.child__label { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child__value { color: var(--ok); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child__value.numeric { color: var(--warn); }
.child__value.keyword { color: var(--accent); font-weight: 600; }
.child__value.group-code { color: var(--info); }
.child__name { font-family: var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__empty { color: var(--text-3); margin: 4px; }
.tree.is-updating { opacity: .6; transition: opacity .2s .3s; }
.tree__notice { margin: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text); }
.child--composite .child__value { color: var(--text-3); }
.child__value.is-editable { cursor: text; border-radius: var(--radius-sm); }
.child__value.is-editable:hover { background: var(--surface-2); outline: 1px dashed var(--border-strong); }
.child__value.is-editable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.child__input { font: inherit; min-width: 12ch; padding: 0 4px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.insp { padding: var(--space-4) var(--panel-pad-x) var(--space-5); display: grid; gap: var(--space-5); align-content: start; }
.insp__title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0; }
.insp__pruefi { display: flex; gap: 8px; align-items: center; color: var(--text-2); }
.insp__pruefi input { width: 10ch; height: var(--control-h-sm); font: 600 13px var(--font-code); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.insp__pruefi small { font-size: 11px; color: var(--text-3); }
.btn-icon--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.insp__empty, .insp__note { color: var(--text-3); font-size: 11px; margin: 0; }
.insp__ok { color: var(--ok); margin: 0; }
.chips { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.chip { display: flex; align-items: center; gap: 8px; }
.chip__label { flex: 1; }
.chip strong { font-size: 11px; color: var(--text-3); }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.chip--ok .chip__dot { background: var(--ok); } .chip--ok strong { color: var(--ok); }
.chip--error .chip__dot { background: var(--error); } .chip--error strong { color: var(--error); }
.chip--busy .chip__dot { background: var(--warn); }
.findings { list-style: none; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.findings:empty { display: none; }
.finding { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; }
.finding:hover:not(:disabled), .finding:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.finding:disabled { cursor: default; }
.finding__badge { font-size: 11px; font-weight: 600; color: var(--error); }
.finding--ug .finding__badge { color: var(--error); }
.finding__loc { font-size: var(--fs-xs); color: var(--text-3); }
.finding__loc code { font-family: var(--font-code); color: var(--text-2); }
.ctrl { display: grid; gap: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-5); }
/* checkbox + text, everywhere the same */
.switch { display: flex; gap: var(--space-3); align-items: center; cursor: pointer; color: var(--text-2); }
.ctrl__result header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); }
.ctrl__result pre { margin: var(--space-2) 0 0; padding: var(--space-4); max-height: 240px; overflow: auto; font: 12px var(--font-code); background: var(--surface-2); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; }
.src__heading { padding: var(--space-4) var(--panel-pad-x) var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.src { border-top: 1px solid var(--border); }
.src:last-of-type { border-bottom: 1px solid var(--border); }
.src h2 { margin: 0; }
.src__toggle { width: 100%; display: flex; align-items: center; gap: 6px; font: 600 13px var(--font-ui); color: var(--text); background: none; border: 0; padding: var(--space-4) var(--panel-pad-x); cursor: pointer; text-align: left; }
.src__body { padding: var(--space-2) var(--panel-pad-x) var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.form { display: grid; gap: var(--space-2); }
.form label { color: var(--text-3); font-size: var(--fs-xs); margin-top: var(--space-3); }
.form label:first-child { margin-top: 0; }
.form select, .form input, .td-filter { font: inherit; width: 100%; height: var(--control-h-md); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.form input:disabled { opacity: .5; }
.form__hint { font-size: 11px; color: var(--text-3); }
.form__switches { display: flex; gap: var(--space-5); }
.btn--block { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.td, .td ul { list-style: none; margin: 0; padding: 0; }
.td ul { margin-left: 10px; padding-left: 6px; border-left: 1px solid var(--border); }
.td-folder, .td-file { width: 100%; display: flex; align-items: center; gap: 4px; text-align: left; font: inherit; font-size: 12px; background: none; border: 0; border-radius: var(--radius-sm); min-height: var(--row-h); padding: 0 var(--space-3); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-file { font-family: var(--font-code); color: var(--text-2); }
.td-folder:hover, .td-file:hover { background: var(--surface-2); }
.td-file.is-selected { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.finding { min-width: 0; overflow-wrap: anywhere; }
.finding__loc code { word-break: break-all; }
.wb-main__docs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.diff { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.diff__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); min-height: var(--bar-h); padding: var(--space-3) var(--panel-pad-x); border-bottom: 1px solid var(--border); background: var(--surface); }
.diff__back { font: inherit; font-weight: 500; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.diff__back:hover { text-decoration: underline; }
.diff__crumb { font-weight: 600; }
.diff__stats { margin-left: auto; color: var(--text-2); font-size: 12px; }
.diff__nav { display: flex; align-items: center; gap: var(--space-2); }
.diff__nav-index { font: 12px var(--font-code); color: var(--text-2); min-width: 4ch; text-align: center; }
.diff__output { flex: 1; overflow: auto; margin: 0; font: 12px/20px var(--font-code); background: var(--surface); padding: 8px 0; white-space: pre; outline: none; }
.diff-line { display: block; padding: 0 12px 0 0; height: 20px; min-width: max-content; }
.diff-line__sign { display: inline-block; width: 3ch; text-align: center; color: var(--text-3); user-select: none; }
.diff-line--added .diff-line__sign, .diff-line--removed .diff-line__sign { color: var(--text); font-weight: 600; }
.diff-line--added { background: var(--added-bg); }
.diff-line--removed { background: var(--removed-bg); }
.diff-line--target { box-shadow: inset 2px 0 0 var(--accent); }
.diff__empty, .diff__hint { color: var(--text-3); padding: 0 12px; }
.rb { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rb-row { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--space-3); align-items: center; text-align: left; font: inherit; font-size: var(--fs-sm); min-height: var(--row-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); cursor: pointer; }
.rb-row:hover:not(:disabled) { background: var(--surface-2); }
.rb-row:disabled { opacity: .5; cursor: default; }
.rb-row.is-active, .rb-row.is-a, .rb-row.is-b { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.rb-row__key { font-weight: 500; }
.rb-row__range { color: var(--text-3); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-row__tag { font-weight: 700; color: var(--accent); }
.datepick { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.datepick__label { font-weight: 700; color: var(--accent); }
.datepick select { font: inherit; height: var(--control-h-md); background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 var(--space-3); }
.palette__backdrop { position: fixed; inset: 0; background: rgb(15 20 25 / .35); z-index: 20; }
.palette { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgb(0 0 0 / .25); z-index: 21; overflow: hidden; }
.palette__search { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); color: var(--text-3); }
.palette__input { flex: 1; font: 15px var(--font-ui); border: 0; background: transparent; color: var(--text); outline: none; }
.palette__list { list-style: none; margin: 0; padding: var(--space-3); max-height: 460px; overflow: auto; }
.palette__group { padding: var(--space-4) var(--space-4) var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.palette__hit { display: grid; grid-template-columns: minmax(56px, auto) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; }
.palette__hit.is-active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.palette__hit.is-active .palette__label { color: var(--accent); }
.palette__label { font-family: var(--font-code); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
/* file names differ at their end: show them whole, the folder goes below */
.palette__hit--testfile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.palette__hit--testfile .palette__label { max-width: none; white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
.palette__more { padding: var(--space-4); font-size: 11px; color: var(--text-3); }
.palette__detail { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.palette__none { padding: var(--space-4); color: var(--text-3); }
.palette__foot { display: flex; gap: var(--space-5); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); }
.tree-row { min-height: 22px; display: flex; }
.tree-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tree-row--group { background: color-mix(in srgb, var(--text) 3%, transparent); }
.tree-row--segment { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
.tree-row.is-selected { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.tree-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-row__line { flex: none; width: 6ch; padding: 4px 8px 0 0; text-align: right; font: 11px var(--font-code); color: var(--text-3); }
/* one vertical guide per nesting level, so the depth of a row can be read at a glance */
.tree-row__body {
  flex: 1; min-width: 0; padding-left: calc(var(--depth, 0) * 16px);
  background: repeating-linear-gradient(to right, transparent 0 7px, color-mix(in srgb, var(--text-3) 45%, transparent) 7px 8px, transparent 8px 16px) no-repeat;
  background-size: calc(var(--depth, 0) * 16px) 100%;
}
.node__header { overflow: hidden; }
.node__preview { flex: 1 1 0; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--font-code); color: var(--text-3); }
/* source above result */
.docs[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--docs-first, 1fr)) auto minmax(0, var(--docs-second, 1fr)); }
.docs[data-layout="stacked"] .docs__divider { flex-direction: row; justify-content: center; padding: 2px 0; cursor: row-resize; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.findings__more { margin: 0; font-size: 11px; color: var(--text-3); }
/* shown by Blazor itself on unhandled errors outside an ErrorBoundary */
#blazor-error-ui { display: none; position: fixed; inset: auto 16px 40px auto; z-index: 30; padding: var(--space-4) var(--space-5); background: var(--surface); color: var(--error); border: 1px solid var(--error); border-radius: var(--radius); }
.login-card a.btn { text-align: center; text-decoration: none; }
.tree-message { font-weight: 600; border-top: 1px solid var(--border); border-radius: 0; margin-top: 2px; }
.btn-icon[aria-pressed="true"] { color: var(--accent); }