/* ---------------------------------------------------------------------------
   Veridica — MacroData design system
   ---------------------------------------------------------------------------
   Navy and gold, hard corners, paper-white surfaces, Roboto + Roboto Mono.
   Loaded after styles.css and template-flow.css so it governs the app's look.

   Design tokens are the single source of truth: screens reference var(--vd-*),
   never literal hex values.
   --------------------------------------------------------------------------- */

:root {
    /* Core palette */
    --vd-navy: #04142b;
    --vd-gold: #c8bba1;
    --vd-gold-dark: #8a6d3b;
    --vd-gold-rule: #a5966d;

    /* Surfaces */
    --vd-paper: #ffffff;
    --vd-canvas: #e8ecf1;
    --vd-page-bg: #f2f4f7;
    --vd-surface-muted: #f4f6f8;
    --vd-surface-subtle: #f9fafb;

    /* Borders */
    --vd-border-strong: #dde3ea;
    --vd-border-subtle: #eef1f4;
    --vd-border-hairline: #e5e7eb;

    /* Text */
    --vd-text-body: #4b5563;
    --vd-text-muted: #6b7280;
    --vd-text-faint: #9ca3af;

    /* Status */
    /* Navy tint marks state (selected filter, status), never an interactive surface. */
    --vd-navy-tint: #e7ecf2;
    --vd-info-tint: #e4f0f3;
    --vd-info-text: #0f3d68;
    --vd-error: #9c2f2f;
    --vd-error-tint: #fdeceb;
    --vd-warning-tint: #fbf6e8;
    --vd-warning-counter: #c2410c;

    /* Editor node colours */
    --vd-variable-bg: #eef1f6;
    --vd-variable-border: #b6c0d1;
    --vd-inline-condition-bg: #f2edff;
    --vd-inline-condition-rule: #7b65d6;
    --vd-locked-bg: #f4f5f7;
    --vd-locked-border: #cfd5df;
    --vd-locked-text: #687386;
    --vd-highlight-band: #fff9e0;
    --vd-highlight-mark: #fff29f;

    /* Geometry */
    --vd-control-h: 38px;
    --vd-screen-pad: 34px;
    --vd-header-h: 64px;
    --vd-sidebar-w: 288px;

    /* Elevation */
    --vd-shadow-screen: 0 18px 36px rgba(4, 20, 43, .08);
    --vd-shadow-page: 0 1px 2px rgba(4, 20, 43, .1), 0 14px 34px rgba(4, 20, 43, .14);
    --vd-shadow-card: 0 10px 22px rgba(4, 20, 43, .1);

    /* Type stacks */
    --vd-font: "Roboto", Arial, Helvetica, sans-serif;
    --vd-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --vd-font-document: "Times New Roman", Times, serif;
}

/* ---------------------------------------------------------------------------
   Global — hard corners are the strongest signature of the system.
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
    border-radius: 0;
}

html,
body {
    font-family: var(--vd-font);
    color: var(--vd-text-body);
    background: var(--vd-page-bg);
}

body {
    font: 400 15px/26px var(--vd-font);
}

a {
    color: var(--vd-gold-rule);
    text-decoration: none;
}

a:hover {
    color: var(--vd-navy);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

.vf-eyebrow,
.vd-eyebrow {
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
}

.vd-screen-title {
    font: 500 30px/40px var(--vd-font);
    color: var(--vd-navy);
    letter-spacing: -.01em;
    margin: 0;
}

.vf-auth-title,
.vd-section-title {
    font: 500 34px/44px var(--vd-font);
    color: var(--vd-navy);
    letter-spacing: -.01em;
    margin: 0;
}

.vd-panel-title {
    font: 500 22px/30px var(--vd-font);
    color: var(--vd-navy);
    margin: 0;
}

.vd-panel-title--sm {
    font: 500 17px/24px var(--vd-font);
}

.vf-auth-lead,
.vd-lead {
    font: 400 15px/26px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
    margin: 0;
}

.vd-body-sm {
    font: 400 14px/22px var(--vd-font);
    color: var(--vd-text-body);
}

.vd-meta {
    font: 400 13px/20px var(--vd-font);
    color: var(--vd-text-muted);
}

.vd-mono {
    font-family: var(--vd-font-mono);
    font-weight: 400;
}

.vd-rail-heading {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vd-gold-dark);
}

/* ---------------------------------------------------------------------------
   Controls — every button and input is exactly 38px tall.
   --------------------------------------------------------------------------- */

.vd-btn {
    height: var(--vd-control-h);
    /* Neutralise any `min-height` from template-flow.css/styles.css: a larger
       min-height silently beats `height`, and two buttons in one row then
       disagree. veridica.css loads last, so this rule is the final word. */
    min-height: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 1px solid transparent;
    background: none;
    font: 700 12px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.vd-btn:hover {
    text-decoration: none;
}

.vd-btn--primary {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: var(--vd-paper);
}

.vd-btn--primary:hover {
    background: #020c1b;
    border-color: #020c1b;
    color: var(--vd-paper);
}

/* Primary CTA when it sits on navy chrome. */
.vd-btn--gold {
    background: var(--vd-gold);
    border-color: var(--vd-gold);
    color: var(--vd-navy);
}

.vd-btn--gold:hover {
    background: #d6cbb5;
    border-color: #d6cbb5;
    color: var(--vd-navy);
}

/* The border carries the button's height: --vd-border-strong sits at 1.22:1
   against the page, so the edges vanish and an outline button reads shorter
   than a filled one beside it. --vd-text-faint (2.39:1) makes the 38px box
   legible without turning the secondary action into a heavy box. */
.vd-btn--outline {
    background: var(--vd-paper);
    border-color: var(--vd-text-faint);
    color: var(--vd-navy);
}

.vd-btn--outline:hover {
    border-color: var(--vd-navy);
    color: var(--vd-navy);
}

/* Outline button on navy chrome. */
.vd-btn--outline-invert {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: var(--vd-paper);
}

.vd-btn--outline-invert:hover {
    border-color: rgba(255, 255, 255, .6);
    color: var(--vd-paper);
}

.vd-btn--block {
    width: 100%;
}

.vd-btn:disabled,
.vd-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

/* The label is 12px uppercase; an icon at that size reads as a speck, so the
   glyph is set independently and never inherits the label's tracking.
   Which buttons get one is a vocabulary, not a decoration — one icon per verb,
   the same everywhere: file-added = create a document, file-up = import,
   file-down = download, check = save, check-circle = validate, verify =
   release, update-file = apply changes, trash = discard, left = leave for the
   list behind this screen. Plain "Abbrechen" and the dense .vd-action row verbs
   stay text-only: an icon there competes with the action it sits beside. */
.vd-btn > .ki-filled {
    flex: none;
    font-size: 15px;
    letter-spacing: 0;
}

/* Gold uppercase text action — the table/row-level verb. Gold-dark is
   exclusive to clickable actions; static eyebrows are muted gray. */
.vd-action {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-gold-dark);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.vd-action:hover {
    color: var(--vd-navy);
    text-decoration: underline;
}

.vd-action--muted,
.vd-action:disabled {
    color: var(--vd-text-faint);
    opacity: .55;
    cursor: not-allowed;
    text-decoration: none;
}

.vd-action--danger {
    color: var(--vd-error);
}

/* Inputs */
.vd-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vd-label {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-navy);
}

.vd-input,
.vd-select {
    height: var(--vd-control-h);
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    font: 400 15px/1 var(--vd-font);
    color: var(--vd-navy);
}

.vd-input::placeholder {
    color: var(--vd-text-faint);
}

.vd-input:focus,
.vd-select:focus,
.vd-textarea:focus {
    outline: none;
    border-color: var(--vd-navy);
}

.vd-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    font: 400 15px/24px var(--vd-font);
    color: var(--vd-navy);
    min-height: 96px;
}

.vd-input[aria-invalid="true"],
.vd-textarea[aria-invalid="true"] {
    border-color: var(--vd-error);
    background: var(--vd-error-tint);
}

/* Template source, YAML, expressions — anything the author edits as code. */
.vd-textarea--code {
    font: 400 13px/21px var(--vd-font-mono);
}

/* File pickers keep the control height but need room for the browser button. */
.vd-input[type="file"] {
    padding: 7px 12px;
    font: 400 13px/22px var(--vd-font);
    color: var(--vd-text-muted);
}

.vd-input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 4px 12px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-surface-muted);
    font: 700 10px/1.6 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-navy);
    cursor: pointer;
}

.vd-help {
    font: 400 13px/20px var(--vd-font);
    color: var(--vd-text-muted);
}

.vd-required {
    color: var(--vd-gold-dark);
}

.vd-field-error {
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-error);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Form layout (S2)
   --------------------------------------------------------------------------- */

.vd-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vd-field--wide {
    grid-column: 1 / -1;
}

.vf-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vf-form-sections {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.vf-form-section--collapsible {
    display: block;
    overflow: clip;
}

.vf-form-section__summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    list-style: none;
    padding: 20px;
}

.vf-form-section__summary::-webkit-details-marker {
    display: none;
}

.vf-form-section__body {
    border-top: 1px solid var(--vd-border);
    padding: 20px;
}

.vd-repeat-group {
    min-width: 0;
}

.vd-draft-status {
    align-items: center;
    background: var(--vd-surface-muted);
    border: 1px solid var(--vd-border);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 10px 14px;
}

.vd-draft-status[data-draft-status="unsaved"] [data-draft-status-label],
.vd-draft-status[data-draft-status="saving"] [data-draft-status-label] {
    color: var(--vd-text-muted);
}

.vd-draft-status[data-draft-status="offline"] [data-draft-status-label],
.vd-draft-status[data-draft-status="error"] [data-draft-status-label],
.vd-draft-status[data-draft-status="conflict"] [data-draft-status-label] {
    color: var(--vd-error);
    font-weight: 600;
}

.vd-draft-rail-item {
    align-items: center;
    display: flex;
    gap: 8px;
}

.vd-draft-rail-item__link {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.vd-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

/* Leading-edge variant for screens where the primary action opens a flow
   rather than closing a form (import, legacy assistant). */
.vd-form-actions--start {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* A grouped set of checkboxes with its own legend. */
.vd-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A first-child legend is not a flex item, so the fieldset gap never reaches it. */
.vd-fieldset > legend {
    margin-bottom: 10px;
}

/* Sections in the right-hand rail stack their heading and form; the rail
   itself only spaces the sections apart. */
.vd-split__aside > section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vd-split__aside form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vd-repeat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.vd-repeat-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vd-repeat-entry {
    border: 1px solid var(--vd-border-strong);
    border-left: 3px solid var(--vd-navy);
    background: var(--vd-surface-muted);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vd-repeat-entry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vd-repeat-entry__title {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-navy);
    margin: 0;
}

/* Test-data disclosure */
.vd-testdata {
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    padding: 16px 20px;
}

.vd-testdata summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vd-testdata__label {
    font: 500 15px/22px var(--vd-font);
    color: var(--vd-navy);
}

.vd-testdata__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
}

.vd-testdata__body .vd-callout {
    flex-basis: 100%;
}

/* `.hidden` is declared at the foot of this file, after the component classes
   it has to outrank. See the note there. */

/* ---------------------------------------------------------------------------
   Badges — not controls, so they keep their intrinsic padding.
   --------------------------------------------------------------------------- */

.vd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid transparent;
    flex: none;
    white-space: nowrap;
}

.vd-badge--released {
    background: var(--vd-navy-tint);
    color: var(--vd-navy);
}

.vd-badge--draft {
    background: var(--vd-surface-muted);
    border-color: var(--vd-border-strong);
    color: var(--vd-text-muted);
}

.vd-badge--checked {
    background: var(--vd-info-tint);
    color: var(--vd-info-text);
}

.vd-badge--outline {
    background: var(--vd-paper);
    border-color: var(--vd-border-strong);
    color: var(--vd-text-muted);
}

.vd-badge--archived {
    background: var(--vd-paper);
    border-color: var(--vd-border-strong);
    color: var(--vd-text-faint);
}

.vd-badge--error {
    background: var(--vd-error-tint);
    color: var(--vd-error);
}

.vd-badge--warning {
    background: var(--vd-warning-tint);
    color: var(--vd-gold-dark);
}

/* ---------------------------------------------------------------------------
   Callout — gold rule on muted surface.
   --------------------------------------------------------------------------- */

.vd-callout,
.vf-context-note {
    border-left: 3px solid var(--vd-gold-rule);
    background: var(--vd-surface-muted);
    padding: 13px 20px;
    font: 400 13px/21px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
}

.vd-callout--roomy {
    border-left-width: 4px;
    padding: 16px 20px;
}

.vd-callout strong {
    color: var(--vd-navy);
    font-weight: 500;
}

.vf-form-error,
.vd-error-banner {
    border-left: 3px solid var(--vd-error);
    background: var(--vd-error-tint);
    color: var(--vd-error);
    padding: 13px 20px;
    font: 400 14px/22px var(--vd-font);
}

/* ---------------------------------------------------------------------------
   Cards and surfaces
   --------------------------------------------------------------------------- */

.vd-card {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
}

.vd-card--pad {
    padding: 24px;
}

.vd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--vd-border-strong);
    background: var(--vd-surface-muted);
}

.vd-card__body {
    padding: 6px 0;
}

/* ---------------------------------------------------------------------------
   Member rows (Kanzlei-Administration) — a stacked block rather than a table,
   because each member carries a variable-length set of role checkboxes.
   --------------------------------------------------------------------------- */

.vd-member {
    padding: 20px 22px;
    border-top: 1px solid var(--vd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vd-member:first-of-type {
    border-top: 0;
}

.vd-member__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vd-member__name {
    font: 400 15px/22px var(--vd-font);
    color: var(--vd-navy);
    margin: 0 0 2px;
}

.vd-member__roles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

/* S7 — validation report beside the test renders. */
.vd-release {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.vd-testrender {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--vd-border-subtle);
}

.vd-testrender__label {
    font: 400 14px/20px var(--vd-font);
    color: var(--vd-navy);
}

.vd-testrender__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.vd-preview {
    border-top: 1px solid var(--vd-border-subtle);
}

.vd-preview summary {
    cursor: pointer;
    padding: 14px 22px;
    font: 400 13px/20px var(--vd-font);
    color: var(--vd-text-muted);
}

.vd-preview__frame {
    width: 100%;
    border: 0;
    min-height: 70vh;
}

.vd-screen {
    padding: var(--vd-screen-pad);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.vd-screen-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* The title column absorbs the squeeze: its lead paragraph can wrap, the action
   buttons cannot (uppercase, nowrap, icon). Without this the actions overflow
   the head and slide under the sticky document preview on the entry screen. */
.vd-screen-head__titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vd-screen-head__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Joined filter chips — borders collapse into one rule. */
.vd-chips {
    display: flex;
    align-items: stretch;
}

.vd-chip {
    height: var(--vd-control-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    color: var(--vd-text-muted);
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vd-chip + .vd-chip {
    border-left: 0;
}

.vd-chip:hover {
    color: var(--vd-navy);
    text-decoration: none;
}

.vd-chip.is-active {
    background: var(--vd-navy-tint);
    border-color: var(--vd-border-strong);
    color: var(--vd-navy);
}

.vd-chip__count {
    font-family: var(--vd-font-mono);
    letter-spacing: 0;
    opacity: .7;
}

/* Listing — a filter toolbar and the table it filters read as one unit, so the
   gap between them is tighter than the 26px rhythm `.vd-screen` sets between
   unrelated blocks. */
.vd-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vd-listing__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vd-listing__toolbar .vd-search {
    flex: 1 1 220px;
}

/* ---------------------------------------------------------------------------
   Tables — the library grid. Column tracks must use minmax(0, ·): a bare `fr`
   resolves to minmax(auto, 1fr), so the row carrying two status badges gets a
   wider min-content track and falls out of alignment with every other row.
   --------------------------------------------------------------------------- */

.vd-table {
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
}

.vd-table__head,
.vd-table__row {
    display: grid;
    grid-template-columns: var(--vd-table-cols, minmax(0, 2.6fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr));
    gap: 16px;
    align-items: center;
}

.vd-table__head {
    padding: 13px 22px;
    background: var(--vd-surface-muted);
    border-bottom: 1px solid var(--vd-border-strong);
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
}

.vd-table__row {
    padding: 16px 22px;
    border-top: 1px solid var(--vd-border-subtle);
    font: 400 13px/21px var(--vd-font);
    color: var(--vd-text-muted);
}

/* Rows are wrapped in a group (row + collapsible history), so the zebra and
   divider rules key off the group rather than the row's sibling index. */
.vd-table__group:first-of-type .vd-table__row {
    border-top: 0;
}

.vd-table__group:nth-of-type(even) {
    background: var(--vd-surface-subtle);
}

.vd-table__toggle {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-text-faint);
}

.vd-table__toggle:hover {
    color: var(--vd-gold-dark);
}

.vd-table__toggle::before {
    content: "▸ ";
}

.vd-table__toggle[aria-expanded="true"]::before {
    content: "▾ ";
}

.vd-table__cell--end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.vd-table__cell--badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vd-table__primary {
    font: 400 15px/22px var(--vd-font);
    color: var(--vd-navy);
}

.vd-table__sub {
    font: 400 13px/20px var(--vd-font);
    color: var(--vd-text-faint);
}

/* Expandable version history */
.vd-history {
    background: var(--vd-surface-subtle);
    padding: 0 22px 20px;
}

.vd-history__inner {
    border-left: 2px solid var(--vd-border-strong);
    padding-left: 20px;
}

.vd-history__row {
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--vd-border-subtle);
    font: 400 13px/20px var(--vd-font);
}

.vd-history__row--archived {
    color: var(--vd-text-faint);
}

/* ---------------------------------------------------------------------------
   App shell — navy sidebar and paper content header.
   --------------------------------------------------------------------------- */

.vd-shell {
    display: flex;
    min-height: 100vh;
    background: var(--vd-page-bg);
}

.vd-sidebar {
    width: var(--vd-sidebar-w);
    flex: none;
    background: var(--vd-navy);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.vd-sidebar__brand {
    height: var(--vd-header-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.vd-sidebar__brand:hover {
    text-decoration: none;
}

.vd-wordmark {
    font: 500 15px/1 var(--vd-font);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vd-paper);
}

.vd-wordmark--lg {
    font-size: 18px;
}

.vd-wordmark--login {
    font-size: 26px;
}

.vd-wordmark--dark {
    color: var(--vd-navy);
}

.vd-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 28px 14px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.vd-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vd-nav-group__label {
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-gold-dark);
    padding: 0 10px 10px;
}

.vd-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font: 400 14px/18px var(--vd-font);
    color: rgba(255, 255, 255, .72);
}

.vd-nav-item:hover {
    color: var(--vd-paper);
    background: rgba(255, 255, 255, .06);
    text-decoration: none;
}

.vd-nav-item.is-active {
    background: var(--vd-gold);
    color: var(--vd-navy);
}

.vd-nav-item.is-active:hover {
    background: var(--vd-gold);
    color: var(--vd-navy);
}

/* Icons carry less weight than the label: dimmer at rest, brightening with the
   label on hover so the row still reads as one target. */
.vd-nav-item__icon {
    flex: none;
    width: 18px;
    justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, .45);
}

.vd-nav-item:hover .vd-nav-item__icon {
    color: var(--vd-gold);
}

.vd-nav-item.is-active .vd-nav-item__icon {
    color: rgba(4, 20, 43, .75);
}

.vd-nav-item__count {
    margin-left: auto;
    font: 400 12px/1 var(--vd-font-mono);
    color: rgba(255, 255, 255, .4);
}

.vd-nav-item.is-active .vd-nav-item__count {
    color: rgba(4, 20, 43, .55);
}

.vd-sidebar__foot {
    flex: none;
    padding: 18px 24px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font: 400 12px/19px var(--vd-font);
    color: rgba(255, 255, 255, .42);
}

.vd-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Narrow viewports: the shell is designed desktop-first, so below this width
   the navy sidebar is dropped rather than reflowed and the content takes the
   full page. Keeping it would leave ~150px for the content column, which the
   topbar and screen padding overflow. Navigation on small screens is still
   open design work — this only keeps the app usable and free of horizontal
   scroll. */
@media (max-width: 900px) {
    .vd-sidebar {
        display: none;
    }

    :root {
        --vd-screen-pad: 20px;
    }

    .vd-topbar {
        gap: 12px;
    }

    /* The joined chip strip cannot wrap without breaking its collapsed
       borders, so it scrolls inside the toolbar instead of widening the page. */
    .vd-listing__toolbar .vd-chips {
        max-width: 100%;
        overflow-x: auto;
    }
}

.vd-main__content {
    flex: 1;
    min-height: 0;
}

.vd-footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px var(--vd-screen-pad);
    border-top: 1px solid var(--vd-border-hairline);
    font: 400 12px/1 var(--vd-font);
    color: var(--vd-text-faint);
}

.vd-topbar {
    height: var(--vd-header-h);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--vd-screen-pad);
    background: var(--vd-paper);
    border-bottom: 1px solid var(--vd-border-hairline);
}

.vd-topbar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 400 14px/1 var(--vd-font);
    color: var(--vd-text-body);
}

.vd-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vd-info-tint);
    color: var(--vd-info-text);
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .06em;
}

/* Workbench pages carry a position:fixed header, so the flow content below it
   reserves that height explicitly (the old KTUI layout classes did this). */
.vf-editor-workspace-page {
    --header-height: 64px;
}

.vf-editor-workspace-page .vd-main {
    padding-top: var(--header-height, 72px);
}

/* S6 — the editor's own header is navy chrome, not a paper bar. It fills the
   reserved --header-height so the 38px controls get breathing room. */
.vf-editor-header {
    height: var(--header-height, 64px);
    background: var(--vd-navy);
    border-bottom: 0;
    padding: 0 26px;
    color: var(--vd-paper);
}

/* Title, version, state and save badge sit on a single line. */
.vf-editor-header__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.vf-editor-header__title-row h1 {
    color: var(--vd-paper);
    font: 500 17px/24px var(--vd-font);
    letter-spacing: 0;
}

.vf-editor-header__back {
    color: rgba(255, 255, 255, .72);
}

/* Inverted on hover: light pill, navy chevron. */
.vf-editor-header__back:hover {
    border-color: transparent;
    background: var(--vd-paper);
    color: var(--vd-navy);
}

.vf-editor-header__version {
    font-family: var(--vd-font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.vf-editor-header__save,
.vf-editor-header__organization {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

/* Compound selector: editable-word.css loads later and its .vew-status
   (added at runtime) would otherwise win these. */
.vf-editor-header .vf-editor-header__save {
    margin-top: 0;
    padding: 0;
    min-height: 0;
}

/* Nothing to report yet — the badge appears on the first save. */
.vf-editor-header .vf-editor-header__save[data-state="idle"] {
    display: none;
}

.vf-editor-header__state {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--vd-paper);
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 8px;
}

.vf-editor-header__state--validated {
    background: var(--vd-info-tint);
    border-color: transparent;
    color: var(--vd-info-text);
}

/* Prüfen & freigeben is the gold CTA on navy. */
.vf-editor-header__release,
.vf-editor-header .kt-btn-primary {
    background: var(--vd-gold);
    border-color: var(--vd-gold);
    color: var(--vd-navy);
}

.vf-editor-header__release:hover,
.vf-editor-header .kt-btn-primary:hover {
    background: #d6cbb5;
    border-color: #d6cbb5;
    color: var(--vd-navy);
}

.vf-editor-header .kt-btn:not(.kt-btn-primary) {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: var(--vd-paper);
}

.vf-editor-header .kt-btn:not(.kt-btn-primary):hover {
    border-color: rgba(255, 255, 255, .6);
    color: var(--vd-paper);
}

.vf-editor-header form button {
    color: rgba(255, 255, 255, .72);
}

/* Full-screen workbench chrome (editor, import wizard). */
.vd-workbench-header {
    height: 68px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 26px;
    background: var(--vd-navy);
    color: var(--vd-paper);
}

.vd-workbench-header--wizard {
    height: 72px;
}

.vd-workbench-header__group {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.vd-workbench-divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .16);
    flex: none;
}

.vd-back-link,
.vf-back-link {
    font: 400 13px/1 var(--vd-font);
    color: rgba(255, 255, 255, .72);
}

.vd-back-link:hover {
    color: var(--vd-paper);
}

/* ---------------------------------------------------------------------------
   Login (S0) — restyles the existing vf-login-* markup and its vf_bar_columns
   Jinja data; only the colours, gradients and control heights change.
   --------------------------------------------------------------------------- */

.vf-login-shell {
    display: flex;
    min-height: 100vh;
    background: var(--vd-paper);
}

.vf-login-panel {
    width: 760px;
    max-width: 55%;
    flex: none;
    background: var(--vd-navy);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 64px;
}

.vf-login-bars {
    position: absolute;
    inset: -40px 64px 180px;
    display: flex;
    gap: 56px;
    opacity: .9;
}

.vf-login-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.vf-login-bar {
    height: 9px;
    background: rgba(255, 255, 255, .1);
    animation-name: vfbar;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.vf-login-bar--a { background: rgba(255, 255, 255, .1); }
.vf-login-bar--b { background: rgba(255, 255, 255, .055); }
.vf-login-bar--c { background: var(--vd-gold); }
.vf-login-bar--d { background: rgba(200, 187, 161, .35); }

.vf-login-bar-break {
    height: 20px;
}

@keyframes vfbar {
    from { opacity: .35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vf-login-bar {
        animation: none;
        opacity: .7;
    }
}

/* Gradient scrims over the bar field. */
.vf-login-topfade {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 260px;
    background: linear-gradient(var(--vd-navy), rgba(4, 20, 43, 0));
}

.vf-login-wash {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 460px;
    background: linear-gradient(rgba(4, 20, 43, 0), var(--vd-navy) 62%);
}

.vf-login-sweep {
    display: none;
}

.vf-login-panel-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.vf-login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vf-login-claim {
    font: 500 40px/50px var(--vd-font);
    color: var(--vd-paper);
    letter-spacing: -.01em;
    margin: 0;
    max-width: 520px;
}

.vf-login-claim-sub {
    font: 400 17px/29px var(--vd-font);
    color: rgba(255, 255, 255, .62);
    text-wrap: pretty;
    margin: 0;
    max-width: 520px;
}

.vf-login-panel-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-gold);
}

.vf-login-form-col {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
}

/* Narrow viewports: the two-column shell stacks and the navy panel keeps only
   its brand. Side by side, the panel's 55% plus the form column's 64px padding
   leave the form almost no width — at 390px the password input collapses to
   zero and the field cannot be typed into at all. */
@media (max-width: 900px) {
    .vf-login-shell {
        flex-direction: column;
    }

    /* The panel becomes a compact brand band above the form. template-flow.css
       pins it to a fixed 220px at this width for its own grid layout, which
       leaves most of the band empty once the claim is gone; the inner content
       already carries the padding there. */
    .vf-login-panel {
        width: 100%;
        max-width: none;
        height: auto;
        padding: 0;
        justify-content: flex-start;
    }

    .vf-login-bars,
    .vf-login-topfade,
    .vf-login-wash {
        display: none;
    }

    /* The claim and the footnote are written for a full-height navy column;
       stacked, they only push the form below the fold. */
    .vf-login-panel-content > *:not(.vf-login-brand) {
        display: none;
    }

    .vf-login-form-col {
        align-items: flex-start;
        padding: 36px 24px 56px;
    }
}

.vf-login-form {
    width: 396px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vf-login-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 26px;
}

.vf-login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vf-login-note {
    border-left: 3px solid var(--vd-gold-rule);
    background: var(--vd-surface-muted);
    padding: 13px 16px;
    margin: 22px 0 0;
    font: 400 13px/21px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
}

/* Password field with the gold Zeigen/Verbergen toggle. */
.vd-password {
    height: var(--vd-control-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
}

.vd-password:focus-within {
    border-color: var(--vd-navy);
}

.vd-password input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font: 400 15px/1 var(--vd-font);
    color: var(--vd-navy);
}

.vd-password input[type="password"] {
    font-family: var(--vd-font-mono);
    letter-spacing: .16em;
}

/* The mask is monospaced; the placeholder is not. */
.vd-password input::placeholder {
    font-family: var(--vd-font);
    letter-spacing: normal;
    color: var(--vd-text-faint);
}

.vd-password__toggle {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-gold-dark);
}

.vd-password__toggle:hover {
    color: var(--vd-navy);
}

/* Checkbox — 16px navy square with a gold tick. */
.vd-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 14px/22px var(--vd-font);
    color: var(--vd-text-body);
    cursor: pointer;
}

/* Multi-line consent checkboxes: the box aligns to the first line rather than
   to the centre of the whole block. */
.vd-check--stacked {
    align-items: flex-start;
}

/* Compound selector: the later `.vd-check input { margin: 0 }` rule has equal
   specificity and would win. 3px centres the 16px box on the 22px first line. */
.vd-check.vd-check--stacked input {
    margin-top: 3px;
}

.vd-check--stacked .vd-help {
    display: block;
    margin-top: 2px;
}

.vd-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    border: 1px solid var(--vd-navy);
    background: var(--vd-paper);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vd-check input:checked {
    background: var(--vd-navy);
}

.vd-check input:checked::after {
    content: "✓";
    color: var(--vd-gold);
    font: 700 10px/1 var(--vd-font);
}

/* ---------------------------------------------------------------------------
   Data-entry screen with live document preview.

   Single column by default: the preview aside is a collapsed disclosure below
   the form, because a readable A4 sheet needs more width than a narrow screen
   can spare. Only from 1200px does it become a second, sticky column; the
   preview bundle opens the disclosure itself at that width, so the collapsed
   state is the narrow-screen contract, not a fallback.

   The page header (.vd-topbar) scrolls away with the document — it is a normal
   flex child of .vd-main, not fixed — so the sticky offset here is a plain
   gutter rather than a reserved header height.
   --------------------------------------------------------------------------- */

.vd-doc-preview {
    padding: 0 var(--vd-screen-pad) var(--vd-screen-pad);
}

.vd-doc-preview__disclosure {
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
}

.vd-doc-preview__disclosure > summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    font: 500 15px/22px var(--vd-font);
    color: var(--vd-navy);
}

.vd-doc-preview__body {
    padding: 0 12px 12px;
}

/* The editable-word stylesheet sizes the sheet for a full-page workbench; in
   the preview rail it must not force its 32rem floor. */
.vd-doc-preview .vew-editor {
    min-height: 0;
    padding: 12px;
}

@media (min-width: 1200px) {
    .vd-doc-entry--with-preview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(26rem, 40vw, 46rem);
        gap: 24px;
        align-items: start;
    }

    .vd-doc-entry--with-preview .vd-doc-preview {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow: auto;
        padding: var(--vd-screen-pad) var(--vd-screen-pad) var(--vd-screen-pad) 0;
    }
}

/* ---------------------------------------------------------------------------
   Document workbench — A4 pages on canvas (editor, proposal review).
   --------------------------------------------------------------------------- */

.vd-canvas {
    flex: 1;
    min-width: 0;
    background: var(--vd-canvas);
    padding: 26px 0;
    overflow-y: auto;
}

.vd-page {
    width: 660px;
    margin: 0 auto;
    background: var(--vd-paper);
    box-shadow: var(--vd-shadow-page);
    padding: 56px 72px;
    font: 400 15px/23px var(--vd-font-document);
    color: #111827;
}

.vd-page--wide {
    width: 706px;
}

/* The document canvas is rendered by the editable-word bundle, which ships its
   own stylesheet (frontend/editable-word.css) using .vew-* classes. Its node
   colours are kept in step with the --vd-variable-*, --vd-inline-condition-*
   and --vd-locked-* tokens above; there is deliberately no .vd-node-* mirror
   here, because a second copy is what let the two drift apart. */

/* ---------------------------------------------------------------------------
   Findings panel (editor right rail)
   --------------------------------------------------------------------------- */

.vd-findings {
    width: 308px;
    flex: none;
    background: var(--vd-paper);
    border-left: 1px solid var(--vd-border-hairline);
    display: flex;
    flex-direction: column;
}

.vd-findings__head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--vd-border-hairline);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vd-findings__counters {
    display: flex;
    gap: 8px;
}

.vd-findings__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.vf-finding,
.vd-finding {
    border-left: 3px solid var(--vd-gold);
    padding: 14px 20px;
    border-bottom: 1px solid var(--vd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vf-finding--error,
.vd-finding--error {
    border-left-color: var(--vd-error);
}

.vd-finding__code {
    font: 400 11px/1 var(--vd-font-mono);
    color: var(--vd-text-faint);
}

.vd-finding__label {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-gold-dark);
}

.vd-finding__label--error {
    color: var(--vd-error);
}

.vd-finding__details summary {
    cursor: pointer;
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-text-faint);
}

.vd-finding__details .vd-finding__code {
    display: inline-block;
    margin-top: 6px;
}

.vd-finding__message {
    font: 400 13px/20px var(--vd-font);
    color: var(--vd-text-body);
}

.vd-findings__foot {
    flex: none;
    padding: 16px 20px;
    border-top: 1px solid var(--vd-border-hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   Proposal cards (S5.3) — evidence, never a confidence score. Accepted cards
   collapse to a one-line strip so open work stays visually dominant.
   --------------------------------------------------------------------------- */

.vd-proposal {
    border: 1px solid var(--vd-border-strong);
    border-left: 3px solid var(--vd-gold-rule);
    background: var(--vd-paper);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vd-proposal__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vd-proposal__label {
    font: 500 14px/20px var(--vd-font);
    color: var(--vd-navy);
}

.vd-proposal__reason {
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
}

.vd-proposal[data-proposal-status="accepted"] {
    border-left-color: var(--vd-navy);
    background: var(--vd-surface-subtle);
    padding: 9px 14px;
}

.vd-proposal[data-proposal-status="accepted"] .vd-proposal__reason,
.vd-proposal[data-proposal-status="accepted"] .vd-proposal__head {
    display: none;
}

.vd-proposal[data-proposal-status="rejected"] {
    border-left-color: var(--vd-border-strong);
    opacity: .6;
}

/* Left inspector rail (editor) */
.vd-inspector {
    width: var(--vd-sidebar-w);
    flex: none;
    background: var(--vd-surface-muted);
    border-right: 1px solid var(--vd-border-hairline);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.vd-inspector__section {
    padding: 18px 16px;
    border-bottom: 1px solid var(--vd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vd-inspector__tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vd-border-subtle);
}

.vd-inspector__view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border: 1px solid var(--vd-border-subtle);
    border-radius: 7px;
    background: var(--vd-surface-muted);
}

.vd-inspector__view-switch button {
    min-height: 30px;
    padding: 4px 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--vd-text-muted);
    font: 600 11px/16px var(--vd-font);
    cursor: pointer;
}

.vd-inspector__view-switch button[aria-pressed="true"] {
    background: var(--vd-paper);
    color: var(--vd-navy);
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}

.vd-inspector__view-switch button:focus-visible {
    outline: 2px solid var(--vd-navy);
    outline-offset: 1px;
}

.vd-inspector__view-switch button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.vd-inspector__search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-subtle);
    border-radius: 6px;
}

.vd-inspector__search:focus-within {
    outline: 2px solid var(--vd-navy);
    outline-offset: 1px;
}

.vd-inspector__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 400 12px/18px var(--vd-font);
}

.vd-inspector__result-count,
.vd-inspector__technical-key {
    font: 400 10px/14px var(--vd-font-mono);
    color: var(--vd-text-faint);
}

.vd-inspector__manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid var(--vd-border-subtle);
    border-radius: 6px;
    background: var(--vd-paper);
    color: var(--vd-navy);
    font: 600 12px/16px var(--vd-font);
}

.vd-inspector__manage:hover,
.vd-inspector__manage:focus-visible {
    border-color: var(--vd-navy);
    outline: 0;
}

.vf-fields-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.vf-fields-heading h2 {
    margin: 4px 0 6px;
    color: var(--vd-navy);
    font: 600 24px/1.2 var(--vd-font-serif);
}

.vf-fields-heading p {
    max-width: 62ch;
    color: var(--vd-text-muted);
    font-size: 13px;
}

.vd-grouping-rules {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--vd-border-subtle);
    border-left: 3px solid var(--vd-accent, #c2a057);
    border-radius: 8px;
    background: var(--vd-surface-subtle);
}

.vd-grouping-rules__head,
.vd-grouping-rules__actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vd-grouping-rules__head h3 {
    color: var(--vd-navy);
    font-size: 15px;
    font-weight: 650;
}

.vd-grouping-rules__head p,
.vd-grouping-rules__preview p,
.vd-grouping-rules__empty {
    margin-top: 4px;
    color: var(--vd-text-muted);
    font-size: 12px;
}

.vd-grouping-rules code {
    color: var(--vd-navy);
    font: 600 11px/1.4 var(--vd-font-mono);
}

.vd-grouping-rules__list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.vd-grouping-rule {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}

.vd-grouping-rule__number {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--vd-navy);
    color: white;
    font: 600 11px/1 var(--vd-font-mono);
}

.vd-grouping-rule__input .kt-input {
    width: 100%;
    background: var(--vd-paper);
}

.vd-grouping-rules__actions {
    justify-content: flex-end;
    margin-top: 16px;
}

.vd-grouping-rules__preview {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #a9c6bc;
    border-radius: 6px;
    background: #edf7f3;
    color: #193d34;
    font-size: 12px;
}

.vd-grouping-rules__preview.is-error {
    border-color: #d8aaa5;
    background: #fbefed;
    color: #742d27;
}

.vd-grouping-rules__preview ul {
    margin: 6px 0 0 18px;
    list-style: disc;
}

.vd-grouping-rules__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.vd-grouping-rules__chip {
    padding: 4px 7px;
    border: 1px solid #a9c6bc;
    border-radius: 999px;
    background: var(--vd-paper);
}

.vd-inspector__technical-key {
    display: block;
    width: 100%;
    margin-top: -5px;
    padding-left: 10px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.vd-inspector__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    font: 400 13px/18px var(--vd-font);
    color: var(--vd-text-body);
    cursor: pointer;
}

.vd-inspector__row-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.vd-inspector__row-wrap[data-group-tone="1"] { --vd-group-tone: #91a9c3; }
.vd-inspector__row-wrap[data-group-tone="2"] { --vd-group-tone: #c4a568; }
.vd-inspector__row-wrap[data-group-tone="3"] { --vd-group-tone: #78a8a3; }
.vd-inspector__row-wrap[data-group-tone="4"] { --vd-group-tone: #c18e99; }
.vd-inspector__row-wrap[data-group-tone="5"] { --vd-group-tone: #bd9475; }
.vd-inspector__row-wrap[data-group-tone="6"] { --vd-group-tone: #929eaf; }

.vd-inspector__row-wrap[data-group-tone] .vd-inspector__row {
    border-left-color: var(--vd-group-tone);
}

.vd-inspector__row-wrap .vd-inspector__technical-key {
    grid-column: 1 / -1;
}

.vd-inspector__occurrence-nav {
    display: inline-flex;
    padding-right: 6px;
}

.vd-inspector__occurrence-nav button {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--vd-navy);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.vd-inspector__occurrence-nav button:hover,
.vd-inspector__occurrence-nav button:focus-visible {
    background: var(--vd-paper);
    outline: 2px solid var(--vd-navy);
}

.vd-inspector__row.is-active {
    background: var(--vd-paper);
    border-left-color: var(--vd-navy);
}

.vd-inspector__key {
    font-family: var(--vd-font);
    font-size: 13px;
    line-height: 17px;
    color: var(--vd-navy);
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.vd-inspector__full-label {
    color: var(--vf-text-muted);
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vd-inspector__meta {
    flex: none;
}

.vd-inspector__meta {
    font: 400 11px/1 var(--vd-font);
    color: var(--vd-text-faint);
}

.vd-inspector__row--unused .vd-inspector__meta {
    color: var(--vd-warning-counter);
}

.vd-inspector__row {
    width: 100%;
    text-align: left;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    font-family: var(--vd-font);
}

.vd-inspector__row:hover {
    background: var(--vd-paper);
}

.vd-proposal__members {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--vd-border-subtle);
    border-radius: 7px;
}

.vd-proposal__members legend {
    padding-inline: 4px;
    color: var(--vd-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.vd-proposal__member {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    align-items: start;
}

.vd-proposal__member > input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.vd-proposal__member > span {
    display: grid;
    min-width: 0;
}

.vd-proposal__member code {
    overflow-wrap: anywhere;
    color: var(--vd-text-faint);
    font-size: 10px;
}

.vd-proposal__member > input[data-proposal-short-label] {
    grid-column: 2;
}

.vd-proposal__member-order {
    display: flex;
    grid-column: 2;
    gap: 4px;
}

.vd-fieldset-reset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.vd-inspector__row:focus-visible {
    outline: 2px solid var(--vd-navy);
    outline-offset: -2px;
}

.vd-inspector__empty {
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-text-faint);
    padding: 4px 10px;
}

.vd-inspector__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    font: 400 11px/16px var(--vd-font);
    color: var(--vd-text-muted);
    border-top: 1px solid var(--vd-border-subtle);
}

.vd-inspector__legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.vd-legend {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
    border: 1px solid var(--vd-border-strong);
}

.vd-legend--field { background: var(--vd-variable-bg); }
.vd-legend--condition { background: #7666b5; }
.vd-legend--repeat { background: #dff1e9; }

.vd-inspector__foot {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--vd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vd-inspector__foot > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--vd-navy);
}

/* The inspector rail is the third pane of the Word workspace. It is additive:
   the existing grid keeps placing the canvas and findings panel. */
.vf-editor-workspace .vd-inspector {
    max-height: calc(100vh - var(--header-height, 72px));
    position: sticky;
    top: var(--header-height, 72px);
}

@media (max-width: 1023px) {
    .vf-editor-workspace {
        display: flex;
        flex-direction: column;
    }

    .vf-editor-workspace .vd-inspector {
        display: flex;
        width: 100%;
        max-height: 45vh;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--vd-border-subtle);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .vf-editor-workspace {
        grid-template-columns: var(--vd-sidebar-w) minmax(0, 1fr);
    }
}

/* At desktop width the repo already parks the findings panel permanently
   beside the canvas; S6 adds the inspector as the third pane and trims the
   panel to the specified 308px. Below this breakpoint the panel falls back to
   the repo's drawer — responsive behaviour the design never covered, so it is
   deliberately left intact. */
@media (min-width: 1440px) {
    .vf-editor-workspace {
        grid-template-columns: var(--vd-sidebar-w) minmax(0, 1fr) 308px;
    }

    .vf-editor-workspace .vf-editor-review {
        width: 308px;
        background: var(--vd-paper);
        border-left: 1px solid var(--vd-border-hairline);
    }
}

/* ---------------------------------------------------------------------------
   Progress / steps (import wizard)
   --------------------------------------------------------------------------- */

.vd-steps {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vd-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 700 11px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.vd-step.is-active {
    color: var(--vd-gold);
}

.vd-step.is-done {
    color: rgba(255, 255, 255, .72);
}

.vd-step__num {
    width: 22px;
    height: 22px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    font: 700 10px/1 var(--vd-font-mono);
}

.vd-progress {
    height: 3px;
    background: rgba(255, 255, 255, .16);
}

.vd-progress__bar {
    height: 100%;
    background: var(--vd-gold);
}

/* Dropzone */
.vd-dropzone {
    border: 1px dashed var(--vd-border-strong);
    background: var(--vd-surface-muted);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.vd-dropzone.is-over {
    border-color: var(--vd-navy);
    background: var(--vd-paper);
}

/* ---------------------------------------------------------------------------
   Success panel (S3) — one gold primary action, secondary outlined.
   --------------------------------------------------------------------------- */

.vd-success {
    background: var(--vd-navy);
    color: var(--vd-paper);
    padding: 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.vd-success__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vd-success .vd-eyebrow {
    color: var(--vd-gold);
}

.vd-success .vd-section-title {
    color: var(--vd-paper);
    font-size: 26px;
    line-height: 34px;
}

.vd-success .vd-lead {
    color: rgba(255, 255, 255, .62);
    max-width: 560px;
}

.vd-success__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.vd-success .vd-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: var(--vd-paper);
}

.vd-success .vd-btn--outline:hover {
    border-color: rgba(255, 255, 255, .6);
}

/* A table title that should not read as a link until hovered. */
.vd-link-plain {
    color: var(--vd-navy);
}

.vd-link-plain:hover {
    color: var(--vd-gold-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------------- */

.vf-empty,
.vd-empty {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Card grid (S1 template picker, document lists)
   --------------------------------------------------------------------------- */

.vd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.vf-document-card,
.vd-tile {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
}

.vf-document-card:hover,
.vd-tile:hover {
    border-color: var(--vd-navy);
    text-decoration: none;
}

.vd-tile__title {
    font: 500 17px/24px var(--vd-font);
    color: var(--vd-navy);
}

.vd-tile__desc {
    font: 400 14px/22px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
}

.vd-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--vd-border-subtle);
    font: 400 12px/1 var(--vd-font-mono);
    color: var(--vd-text-faint);
}

/* ---------------------------------------------------------------------------
   Stat row — a counted summary above a detail view. Tones use the palette's
   info/error pair; the system has no green.
   --------------------------------------------------------------------------- */

.vd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
}

.vd-stat {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vd-stat__label {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
}

.vd-stat__value {
    font: 500 26px/32px var(--vd-font);
    color: var(--vd-navy);
}

.vd-stat__value--ok {
    color: var(--vd-info-text);
}

.vd-stat__value--alert {
    color: var(--vd-error);
}

.vd-stat__note {
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-text-faint);
}

/* ---------------------------------------------------------------------------
   Diff lists — added / removed / retained sets when a carrier is re-analysed.
   --------------------------------------------------------------------------- */

.vd-diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.vd-diff {
    border: 1px solid var(--vd-border-strong);
    border-left: 3px solid var(--vd-border-strong);
    background: var(--vd-surface-subtle);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vd-diff--added {
    border-left-color: var(--vd-info-text);
}

.vd-diff--removed {
    border-left-color: var(--vd-error);
}

.vd-diff--retained {
    border-left-color: var(--vd-gold-rule);
}

.vd-diff__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vd-diff__title {
    font: 700 10px/1.4 var(--vd-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vd-navy);
}

.vd-diff__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vd-diff__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-hairline);
    padding: 3px 7px;
    font: 400 12px/18px var(--vd-font);
    color: var(--vd-navy);
}

.vd-diff__item code {
    font: 400 11px/18px var(--vd-font-mono);
    color: var(--vd-text-faint);
}

/* ---------------------------------------------------------------------------
   Split layout — main column plus a "Weiterarbeiten" rail (S1).
   --------------------------------------------------------------------------- */

.vd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 26px;
    align-items: start;
}

.vd-split--single {
    grid-template-columns: minmax(0, 1fr);
}

.vd-split__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.vd-split__aside {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vd-rail-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vd-rail-group__label {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
    padding-bottom: 8px;
}

.vd-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vd-border-subtle);
    font: 400 14px/20px var(--vd-font);
    color: var(--vd-navy);
}

.vd-rail-item:hover {
    color: var(--vd-gold-dark);
    text-decoration: none;
}

.vd-rail-item__meta {
    font-size: 12px;
    color: var(--vd-text-faint);
    flex: none;
}

/* Search control */
.vd-search {
    height: var(--vd-control-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    max-width: 420px;
}

.vd-search:focus-within {
    border-color: var(--vd-navy);
}

.vd-search__icon {
    color: var(--vd-text-faint);
    font-size: 13px;
    display: inline-flex;
}

.vd-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font: 400 15px/1 var(--vd-font);
    color: var(--vd-navy);
}

.vd-empty-filter {
    font: 400 14px/22px var(--vd-font);
    color: var(--vd-text-muted);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Bridge — legacy vf-* components that screens still use before they are
   individually rebuilt. Restyling them here keeps the whole app inside the
   MacroData system instead of leaving half the screens on the old look.
   --------------------------------------------------------------------------- */

/* Only the import-guidance page uses this header; the top padding keeps
   "Checkliste drucken" off the very top of the page. */
.vf-page-header {
    padding: 24px 0 20px;
}

.vf-page-title {
    font: 500 30px/40px var(--vd-font);
    color: var(--vd-navy);
    letter-spacing: -.01em;
}

.vf-page-lead {
    font: 400 15px/26px var(--vd-font);
    color: var(--vd-text-muted);
    text-wrap: pretty;
}

/* The old system set Georgia on every heading-ish element. MacroData is
   Roboto only — the sole serif is the Word document body itself, which is
   scoped to .vd-page / the editor canvas. */
.vf-page-title,
.vf-summary-value,
.vf-template-title,
.vf-empty strong,
.vf-paper-card,
.vf-paper-card__header h2,
.vf-section-heading,
.vf-document-card__copy strong,
.vf-generated-main a,
.vf-editor-review__header h2,
.vf-editor-review__summary strong,
.vf-editor-header__title-row h1 {
    font-family: var(--vd-font);
}

.vf-paper-card {
    border-color: var(--vd-border-strong);
}

.vf-paper-card__header h2 {
    font: 500 17px/24px var(--vd-font);
    color: var(--vd-navy);
}

.vf-section-heading {
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
}

/* Legacy call-to-action links adopt the 38px control geometry. */
.vf-primary-link,
.vf-secondary-link {
    height: var(--vd-control-h);
    /* template-flow.css sets min-height: 2.55rem, which otherwise beats the 38px. */
    min-height: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    font: 700 12px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vf-primary-link {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: var(--vd-paper);
}

.vf-primary-link:hover {
    background: #020c1b;
    color: var(--vd-paper);
    text-decoration: none;
}

.vf-secondary-link {
    border-color: var(--vd-border-strong);
    background: var(--vd-paper);
    color: var(--vd-navy);
}

.vf-secondary-link:hover {
    border-color: var(--vd-navy);
    background: var(--vd-paper);
    color: var(--vd-navy);
    text-decoration: none;
}

/* The import form itself carries the vertical rhythm between upload zone,
   AI checkbox, attestation and submit row. */
#import-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}

/* template-flow.css gives .vf-form-error a 1rem top margin, which would stack
   with the gap once the error becomes visible. */
#import-form .vf-form-error {
    margin-top: 0;
}

/* Import upload zone (S5 step 1). */
.vf-upload-zone {
    border: 1px dashed var(--vd-border-strong);
    background: var(--vd-surface-muted);
    padding: 36px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.vf-upload-zone:hover,
.vf-upload-zone.is-dragging {
    border-color: var(--vd-navy);
    background: var(--vd-paper);
}

.vf-upload-title {
    display: block;
    font: 500 17px/24px var(--vd-font);
    color: var(--vd-navy);
}

.vf-upload-copy {
    display: block;
    font: 400 14px/22px var(--vd-font);
    color: var(--vd-text-muted);
    margin-top: 4px;
}

.vf-selected-file {
    display: block;
    font: 400 13px/20px var(--vd-font-mono);
    color: var(--vd-gold-dark);
    margin-top: 8px;
}

.vf-upload-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    color: var(--vd-gold-dark);
}

/* Journey steps shared by the template screens. */
.vf-journey {
    border-color: var(--vd-border-strong);
    background: var(--vd-paper);
}

.vf-journey-step {
    font-family: var(--vd-font);
}

.vf-journey-step.is-active,
.vf-journey-step[aria-current="step"] {
    color: var(--vd-navy);
}

/* ---------------------------------------------------------------------------
   KTUI control bridge — the editor's markup is wired to KTUI behaviour
   (drawers, dismissers, toggles), so its classes stay; only the appearance is
   pulled onto the Veridica scale. Everything below mirrors the .vd- rules
   above, including the three-step control height scale.
   --------------------------------------------------------------------------- */

.kt-btn {
    height: var(--vd-control-h);
    /* See the note on .vd-btn — min-height would otherwise outrank height. */
    min-height: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 1px solid transparent;
    background: none;
    font: 700 12px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.kt-btn-sm {
    height: 32px;
    padding: 0 14px;
    font-size: 11px;
}

.kt-btn-xs {
    height: 28px;
    padding: 0 11px;
    font-size: 10px;
}

/* Icon-only buttons stay square and keep the glyph at readable size. */
.kt-btn-icon {
    width: var(--vd-control-h);
    padding: 0;
    letter-spacing: 0;
}

.kt-btn-icon.kt-btn-sm {
    width: 32px;
}

.kt-btn-icon.kt-btn-xs {
    width: 28px;
}

.kt-btn-icon i {
    font-size: 15px;
}

.kt-btn-primary,
.kt-btn-mono {
    background: var(--vd-navy);
    border-color: var(--vd-navy);
    color: var(--vd-paper);
}

.kt-btn-primary:hover,
.kt-btn-mono:hover {
    background: #020c1b;
    border-color: #020c1b;
    color: var(--vd-paper);
}

/* Mirrors .vd-btn--outline — see the contrast note there. */
.kt-btn-outline,
.kt-btn-secondary,
.kt-btn-light {
    background: var(--vd-paper);
    border-color: var(--vd-text-faint);
    color: var(--vd-navy);
}

.kt-btn-outline:hover,
.kt-btn-secondary:hover,
.kt-btn-light:hover {
    border-color: var(--vd-navy);
    color: var(--vd-navy);
}

.kt-btn-ghost,
.kt-btn-dim {
    background: none;
    border-color: transparent;
    color: var(--vd-text-muted);
}

.kt-btn-ghost:hover,
.kt-btn-dim:hover {
    background: var(--vd-surface-muted);
    color: var(--vd-navy);
}

.kt-btn-destructive {
    background: var(--vd-error);
    border-color: var(--vd-error);
    color: var(--vd-paper);
}

.kt-btn-warning {
    background: var(--vd-gold);
    border-color: var(--vd-gold);
    color: var(--vd-navy);
}

.kt-btn:disabled,
.kt-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* KTUI uses .kt-input both directly on an input and as a wrapping label. */
.kt-input,
.kt-select {
    height: var(--vd-control-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    font: 400 15px/1 var(--vd-font);
    color: var(--vd-navy);
}

.kt-input:focus,
.kt-input:focus-within,
.kt-select:focus {
    outline: none;
    border-color: var(--vd-navy);
}

.kt-input > input,
.kt-input > select {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
}

.kt-input > input:focus {
    outline: none;
}

.kt-input-xs {
    height: 30px;
    padding: 0 9px;
    font-size: 13px;
}

.kt-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--vd-border-strong);
    background: var(--vd-paper);
    font: 400 15px/24px var(--vd-font);
    color: var(--vd-navy);
}

.kt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid transparent;
    flex: none;
    white-space: nowrap;
    background: var(--vd-surface-muted);
    border-color: var(--vd-border-strong);
    color: var(--vd-text-muted);
}

.kt-badge-outline {
    background: var(--vd-paper);
}

.kt-badge-info,
.kt-badge-success {
    background: var(--vd-info-tint);
    border-color: transparent;
    color: var(--vd-info-text);
}

.kt-badge-destructive {
    background: var(--vd-error-tint);
    border-color: transparent;
    color: var(--vd-error);
}

.kt-card {
    background: var(--vd-paper);
    border: 1px solid var(--vd-border-strong);
    box-shadow: none;
}

.kt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--vd-border-strong);
    background: var(--vd-surface-muted);
}

.kt-card-title {
    font: 500 17px/24px var(--vd-font);
    color: var(--vd-navy);
    margin: 0;
}

.kt-table thead th {
    padding: 13px 22px;
    background: var(--vd-surface-muted);
    border-bottom: 1px solid var(--vd-border-strong);
    font: 700 10px/1 var(--vd-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vd-text-muted);
    text-align: left;
}

.kt-table tbody td {
    padding: 14px 22px;
    border-top: 1px solid var(--vd-border-subtle);
    font: 400 13px/21px var(--vd-font);
    color: var(--vd-text-muted);
}

/* ---------------------------------------------------------------------------
   Definition list (document detail)
   --------------------------------------------------------------------------- */

.vd-dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
    border-top: 1px solid var(--vd-border-subtle);
}

.vd-dl__key,
.vd-dl__val {
    padding: 12px 0;
    border-bottom: 1px solid var(--vd-border-subtle);
    font: 400 14px/22px var(--vd-font);
}

.vd-dl__key {
    color: var(--vd-text-muted);
}

.vd-dl__val {
    color: var(--vd-navy);
    /* <dd> carries a UA margin that would break the grid column. */
    margin: 0;
}

.vd-dl + .vd-panel-title,
.vd-panel-title + .vd-dl {
    margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   Small text utilities used by detail screens
   --------------------------------------------------------------------------- */

.vd-text-faint {
    color: var(--vd-text-faint);
    font-style: italic;
}

/* Raw generated output — a document artefact, so it keeps the document face. */
.vd-pre {
    margin: 0;
    padding: 20px 22px;
    max-height: 420px;
    overflow: auto;
    background: var(--vd-surface-subtle);
    border-top: 1px solid var(--vd-border-subtle);
    font: 400 12px/20px var(--vd-font-mono);
    color: var(--vd-text-body);
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   Utilities — declared last on purpose.
   --------------------------------------------------------------------------- */

/* This file loads after styles.css and sets `display` on bare component classes
   (.kt-btn, .vd-btn, .vd-check). Those carry the same specificity as `.hidden`,
   so whichever comes last wins: declared earlier, every `kt-btn ... hidden`
   control stayed on screen. Kept free of !important so a genuinely more
   specific rule can still override it. */
.hidden {
    display: none;
}