/* Summary: Global stylesheet for the HL7 inspection & knowledge-base SPA (offline, no external assets).
   Code style: Mobile-first CSS, kebab-case selectors/variables, heavy use of :root tokens; comments clarify UX/layout intent. */

:root {
    /* Core palette + spacing tokens keep repeated values DRY and easy to tweak. */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;

    /* Shared column widths for field/component/subcomponent tables so layouts stay aligned. */
    --col-field-label: 50%;
    --col-field-spec: 10%;
    --col-field-value: 40%;

    /* Large editor cards use an estimated block size until browser visibility makes their exact layout relevant. */
    --hl7-line-intrinsic-block-size: 1.75rem;
    --seg-card-intrinsic-block-size: 32rem;

    /* Shared sizing for clickable controls so heights stay consistent across states (desktop-first, compact). */
    --control-height: 26px;
    --control-pad-y: var(--space-4);
    --control-pad-x: var(--space-8);

    /* Interaction tokens separate intent: hover is neutral, focus is a ring, active is immediate, and selected is persistent. */
    --interactive-hover-bg: #fbedf3;
    --interactive-hover-border: var(--brand-border);
    --interactive-brand-hover-bg: #fbedf3;
    --interactive-row-hover-bg: #fbf5f8;
    --interactive-active-bg: #f3d2e1;
    --interactive-active-border: var(--brand-border-strong);
    --interactive-selected-bg: #f5d7e5;
    --interactive-selected-hover-bg: #efc3d7;
    --interactive-selected-border: var(--brand-border-strong);
    --interactive-open-bg: #f9e5ef;
    --interactive-open-hover-bg: #f3d2e1;
    --interactive-informative-hover-bg: #f8f6f8;
    --interactive-disabled-bg: #edf1f6;
    --interactive-disabled-border: var(--border);
    --interactive-focus-ring: 0 0 0 2px var(--card), 0 0 0 4px rgba(168, 16, 80, .54);
    --interactive-focus-ring-inset: inset 0 0 0 2px var(--card), inset 0 0 0 4px rgba(168, 16, 80, .58);
    --interactive-control-shadow: 0 1px 2px rgba(10, 10, 20, .1), inset 0 1px 0 rgba(255, 255, 255, .72);
    --interactive-pressed-shadow: inset 0 1px 3px rgba(87, 16, 44, .22);
    --hl7-token-hover-bg: rgba(168, 16, 80, .07);
    --hl7-selected-range-bg: rgba(0, 120, 215, .35);
    --hl7-selected-range-border: rgba(0, 93, 170, .45);
    --hl7-selected-range-soft-bg: rgba(0, 120, 215, .08);

    /* Legend sizing tuned for small/retina displays so color cues stay legible. */
    --legend-dot-size: 16px;

    --brand: #a81050;
    --brand-active: #760a37;
    --brand-hover: #8f0d43;
    --brand-soft: rgba(168, 16, 80, .12);
    --brand-ghost: rgba(168, 16, 80, .08);
    --brand-wash: rgba(168, 16, 80, .06);
    --brand-faint: rgba(168, 16, 80, .04);
    --brand-border-strong: rgba(168, 16, 80, .65);
    --brand-border: rgba(168, 16, 80, .35);
    --brand-border-soft: rgba(168, 16, 80, .25);
    --brand-border-light: rgba(168, 16, 80, .2);
    --brand-ink: #57102c;
    --component: #0f6dc8;
    --component-ink: #0a4f91;
    --component-soft: #eaf4ff;
    --component-strong: rgba(15, 109, 200, .42);
    --component-glow: #dff0ff;
    --component-hover-bg: #d8ebff;
    --component-active-bg: #c6e0ff;
    --component-focus-border: #0f6dc8;
    --component-focus-ring: 0 0 0 2px var(--card), 0 0 0 4px rgba(15, 109, 200, .48);
    --component-focus-ring-inset: inset 0 0 0 2px var(--card), inset 0 0 0 4px rgba(15, 109, 200, .48);
    --error-bg: #fdecec;
    --error-border: #c83232;
    --error-ink: #7c1717;
    --bg: #f7f8fb;
    --card: #ffffff;
    --text: #12141a;
    --text-inverse: #ffffff;
    --seg-ink: #2a2e38;
    --muted: #6b7280;
    --border: #d9dde6;
    --shadow: 0 12px 32px rgba(10, 10, 20, .08);
    --radius: 4px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --rendered-bg: #fbfbfe;
    --ok-bg: #e8f7ee;
    --ok-border: #65ad7a;
    --ok-text: #085f28;
    --ok-strong: #2e8a4f;
    --warn-base: #e08600;
    --warn-text: #7a3b00;
    --warn-ink: #5e3100;
    --warn-surface: #fff5e6;
    --warn-border: #e1a13a;
    /* Stronger hover tokens so warn states remain on-palette when focused/hovered. */
    --warn-surface-hover: #ffecbf;
    --warn-border-strong: #b86700;
    --warn-focus-ring: 0 0 0 2px var(--card), 0 0 0 4px rgba(224, 134, 0, .48);
    --warn-focus-ring-inset: inset 0 0 0 2px var(--card), inset 0 0 0 4px rgba(224, 134, 0, .48);
    --pill-bg: #eef1f6;
    --privacy-bg: #eef6ff;
    --privacy-border: rgba(15, 109, 200, .35);
    --privacy-ink: #17466d;
    --privacy-warn-bg: rgba(224, 134, 0, .08);
    --diff-bg: #f2ecff;
    --diff-border: #c7b3ff;
    --diff-ink: #4b3f7f;
    --cmp-line-right: #e9f2ff;
    --cmp-line-right-border: rgba(15, 109, 200, .35);
    --cmp-diff-mod: rgba(224, 134, 0, .14);
    --cmp-diff-added: rgba(11, 107, 42, .12);
    --cmp-diff-removed: rgba(168, 16, 80, .12);
    --ink-haze: rgba(0, 0, 0, .03);
    --ink-faint: rgba(0, 0, 0, .02);
    --ink-hairline: rgba(0, 0, 0, .05);
    --sep-muted: rgba(0, 0, 0, .28);
}

* {
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.25;
}

[hidden] {
    display: none !important;
}

/* Purpose: Keep the pre-init UI visibly blocked until app.js has bound all handlers.
   Why: Users can paste faster than the local script bundles finish loading, which would otherwise drop input events. */
body.app-loading {
    cursor: progress;
}

body.app-loading header,
body.app-loading main,
body.app-loading .skip-links {
    display: none;
}

/* Purpose: Reveal fast landmark links only while they own keyboard focus.
   Why: Keyboard users need a short route past the dense toolbar and inspector without adding permanent visual chrome. */
.skip-links {
    position: fixed;
    top: var(--space-8);
    left: var(--space-8);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    pointer-events: none;
}

.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus-visible {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--interactive-active-border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--brand-ink);
    box-shadow: var(--interactive-focus-ring);
    font-weight: 700;
    pointer-events: auto;
}

body.app-loading [data-loading-block] {
    pointer-events: none;
}

.app-loading-screen {
    display: none;
    min-height: 100vh;
    padding: var(--space-14);
    place-items: center;
}

body.app-loading .app-loading-screen {
    display: grid;
}

.app-loading-panel {
    width: min(100%, 420px);
    padding: var(--space-14);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    text-align: center;
}

.app-loading-title {
    font-weight: 700;
}

.app-loading-text {
    margin-top: var(--space-8);
    color: var(--muted);
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    /* Layer two soft gradients so the layout has depth without relying on images or external assets. */
    background: radial-gradient(1200px 600px at 20% -10%, var(--brand-soft), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, var(--brand-ghost), transparent 55%),
        var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    padding: var(--space-6) var(--space-10);
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
}

.header-card {
    /* Card container for navigation, context tools and status; keeps layout centered without external wrappers. */
    max-width: 1600px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: visible;
}

.header-top {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-6) var(--space-10);
    background: linear-gradient(90deg, var(--brand-soft), transparent 45%);
    border-radius: var(--radius) var(--radius) 0 0;
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.logo {
    width: 32px;
    height: 32px;
    display: block;
    padding: var(--space-2);
    border-radius: var(--radius);
    object-fit: contain;
    object-position: center;
}

h1 {
    margin: 0;
    letter-spacing: .2px;
}

.sub {
    margin: 0;
    color: var(--muted);
    white-space: nowrap;
}

.primary-nav {
    justify-content: flex-start;
    min-width: 0;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-10);
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.hl7-attribution {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.version-context {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: var(--space-8);
    min-width: 0;
}

.control-label {
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.version-context #validationVersion {
    min-width: 120px;
}

.context-bar {
    padding: var(--space-8) var(--space-10);
    border-top: 1px solid var(--border);
    background: var(--brand-faint);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
}

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

.toolbar .input {
    width: auto;
}

.toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    min-width: 0;
}

.toolbar-group-grow {
    flex: 1 1 420px;
    justify-content: flex-end;
}

.toolbar-group-grow #snapshotSelect {
    flex: 1 1 320px;
    min-width: 220px;
    max-width: 560px;
}

.toolbar-search-group {
    flex: 1 1 320px;
    justify-content: flex-end;
}

.toolbar-search-group .search-field {
    flex: 1 1 260px;
    max-width: 520px;
    min-width: 220px;
}

.toolbar-menu {
    position: relative;
    align-self: flex-start;
}

.toolbar-menu-trigger {
    list-style: none;
}

.toolbar-menu-trigger::marker {
    content: "";
}

.toolbar-menu-trigger::-webkit-details-marker {
    display: none;
}

.toolbar-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-4));
    right: 0;
    z-index: 20;
    display: grid;
    gap: var(--space-6);
    min-width: 180px;
    padding: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}

.toolbar-menu-panel .btn {
    justify-content: flex-start;
    width: 100%;
}

.toolbar-menu[open]>.toolbar-menu-trigger {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-open-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border-soft);
}

.toolbar-menu[open]>.toolbar-menu-trigger:not(:disabled):hover {
    background: var(--interactive-open-hover-bg);
}

@media (max-width: 1023px) {
    body {
        overflow: auto;
    }

    main {
        overflow: auto;
    }

    .header-top {
        grid-template-columns: 1fr;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-10);
    }

    .primary-nav,
    .header-main,
    .header-actions,
    .version-context {
        justify-content: flex-start;
        width: 100%;
    }

    .header-actions {
        flex-wrap: wrap;
        max-width: none;
    }

    .header-actions .status {
        max-width: none;
        min-width: 0;
    }

    .toolbar {
        gap: var(--space-8);
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
    }

    .toolbar>*,
    .toolbar-group {
        width: 100%;
        flex: 1 1 auto;
    }

    .toolbar-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .toolbar .input {
        width: 100%;
    }

    .toolbar-group-grow #snapshotSelect,
    .toolbar-search-group .search-field {
        min-width: 0;
        max-width: none;
    }

    .version-context #validationVersion {
        min-width: 0;
    }

    .toolbar-menu,
    .toolbar-menu-trigger {
        width: 100%;
    }

    .toolbar-menu-panel {
        left: 0;
        right: auto;
        width: min(100%, 220px);
    }

    .grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        height: auto;
    }

    .kb-grid {
        grid-template-columns: 1fr;
    }

    .kb-list {
        overflow-x: hidden;
    }

}

main {
    padding: 0 var(--space-12) var(--space-12);
    flex: 1 1 auto;
    overflow: auto;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.grid {
    /* Primary split view: left = raw HL7, right = validation UI. */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.mode-pane {
    flex: 1 1 auto;
    min-height: 0;
}

.mode-switch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-10);
}

/* Shared wrap rows so control clusters keep the same spacing in mode and compare toolbars. */
.compare-controls {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.mode-btn,
.kb-tab {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: var(--radius);
}

.kb-tab {
    appearance: none;
}

.kb-grid {
    grid-template-columns: 1fr;
    align-items: start;
}

.kb-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kb-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    display: grid;
    gap: var(--space-8);
    padding-right: var(--space-2);
    align-content: start;
    align-items: start;
    min-width: 0;
}

/* Shared full-width controls so list items and inputs align across panes. */
.kb-item,
.comp-input,
.subcomp-input {
    width: 100%;
}

.kb-item {
    appearance: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-10);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    text-align: left;
    font: inherit;
    min-width: 0;
}

.kb-item:hover {
    border-color: var(--interactive-hover-border);
    background: var(--interactive-hover-bg);
}

.kb-item.is-active {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-selected-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border-soft);
}

.kb-item.is-active:hover {
    background: var(--interactive-selected-hover-bg);
}

/* Purpose: Show the knowledge-base detail destination when Tab enters a detail view without native controls.
   Why: The programmatic destination needs the same visible keyboard location cue as interactive controls. */
.kb-detail:focus-visible {
    outline: none;
    box-shadow: var(--interactive-focus-ring-inset);
}

.kb-item-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.kb-item-main .kb-item-code,
.seg-code {
    font-size: var(--space-16);
}

/* Shared mono styling for HL7 codes, links and spec metadata. */
.kb-item-code,
.seg-code,
.kb-comp-code,
.kb-chip .kb-chip-code,
.field-label .field-key,
.spec-dt,
.spec-status,
.kb-link,
.seg-idx-pill,
.mono,
.rendered,
.spec-len,
.comp-k {
    font-family: var(--mono);
}

.kb-item-code,
.seg-code,
.kb-comp-code,
.kb-chip .kb-chip-code,
.field-label .field-key,
.spec-dt,
.spec-status,
.kb-link,
.seg-idx-pill,
.comp-k,
.hl7-seg,
.mode-btn,
.kb-tab,
.kb-table th,
.fields thead th,
.warn-item-key,
.diff-pill,
.pill.diff-pill {
    font-weight: 800;
}

/* Shared flex baselines so repeated row layouts stay aligned. */
.title-row,
.seg-sum-left {
    display: flex;
    align-items: baseline;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.seg-chevron {
    display: inline-flex;
    align-items: center;
    min-width: 12px;
}

.kb-item-meta,
.comp-control,
.rep-control,
.subcomp-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.field-top,
.comp-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    min-width: 0;
}

.field-top {
    align-items: baseline;
}

/* NOTE: Component keys now stack the absolute HL7 path above the datatype code, so the name should align to the lower code line. */
.comp-top {
    align-items: flex-end;
}

/* Shared column stacks for content panes so scroll/height behavior stays consistent. */
.knowledge-body,
.left-body,
#rightBody {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-height: 0;
}

/* Shared min-width reset so flex/grid children can shrink without clipping. */
.brand-text,
.field-val,
.fields td {
    min-width: 0;
}

.kb-item-title {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-structure-syntax {
    margin-top: var(--space-4);
}

.kb-tag {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    border-radius: var(--radius);
    padding: 3px var(--space-8);
}

.kb-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Purpose: Keep generated HL7 documentation readable as safe plain text.
   Why: Paragraph and list newlines come from the offline bundles and must remain visible without interpreting HTML. */
.kb-documentation {
    flex: 0 0 auto;
    color: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.kb-documentation.is-compact {
    margin-top: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-10) var(--space-12);
    background: var(--card);
    color: var(--text);
}

.kb-documentation-heading {
    margin-bottom: var(--space-6);
    color: var(--muted);
    font-weight: 800;
}

.kb-documentation-cell {
    min-width: 210px;
}

.kb-documentation-cell-layout {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
}

.kb-comp-toggle.kb-documentation-toggle {
    flex: 0 0 auto;
    margin-left: 0;
}

.kb-subcomponent-row>td {
    background: var(--ink-faint);
}

.kb-table td.kb-subcomponent-name {
    padding-left: var(--space-14);
}

.kb-subcomponent-name::before {
    content: '↳';
    margin-right: var(--space-6);
    color: var(--muted);
}

.kb-detail-sub,
.spec-len {
    color: var(--muted);
    margin-top: var(--space-2);
}

.kb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0;
}

.kb-table th {
    text-align: left;
    padding: var(--space-10) var(--space-10);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.kb-table td {
    padding: var(--space-10) var(--space-10);
    border-bottom: 1px solid var(--ink-hairline);
    vertical-align: top;
}

.kb-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    max-height: none;
    height: 100%;
    min-height: 0;
    background: var(--card);
    box-shadow: inset 0 1px 0 var(--ink-faint);
}

/* Shared hover tint for KB tables; editor rows use scoped rules near the editor styles. */
.kb-table>tbody>tr:hover,
.kb-comp-table>tbody>tr:hover,
.kb-table>tbody>tr:hover>td,
.kb-comp-table>tbody>tr:hover>td {
    background: var(--interactive-informative-hover-bg);
}

/* Deep-linked KB rows remain selected after their owned definition/value rows are inserted. */
.kb-table>tbody>tr.is-kb-deep-link-target>td {
    background: var(--interactive-selected-bg);
}

.kb-table>tbody>tr.is-kb-deep-link-target:hover>td {
    background: var(--interactive-selected-hover-bg);
}

.kb-table>tbody>tr.is-kb-deep-link-target:focus-visible>td {
    box-shadow: var(--interactive-focus-ring-inset);
}

.kb-table>tbody>tr.kb-deep-link-scroll-spacer>td,
.kb-table>tbody>tr.kb-deep-link-scroll-spacer:hover>td {
    padding: 0;
    border: 0;
    background: transparent;
}

.kb-comp-rowwrap td {
    padding: 0 var(--space-6) var(--space-8);
    background: var(--card);
}

.kb-comp-panel {
    margin-top: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-8);
    background: var(--card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 var(--ink-haze);
}

.kb-comp-head {
    color: var(--muted);
    margin-bottom: var(--space-6);
}

.kb-opt-legend {
    color: var(--muted);
    white-space: normal;
}

.legend-inline {
    margin: var(--space-6) 0 var(--space-4);
}

.kb-format-notes {
    margin: var(--space-4) 0 0 16px;
    padding-left: var(--space-14);
}

.kb-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--card);
}

.kb-comp-table thead th {
    position: static;
    box-shadow: none;
}

.kb-comp-table tr td {
    background: var(--card);
}


.kb-comp-table th,
.kb-comp-table td {
    padding: 9px var(--space-12);
}

.kb-comp-toggle {
    margin-left: var(--space-6);
    border: 1px solid var(--brand-border);
    background: var(--brand-wash);
    color: var(--brand-ink);
    border-radius: var(--radius);
}

.kb-link {
    color: var(--brand-ink);
    background: var(--brand-ghost);
    border: 1px solid var(--brand-border-soft);
    border-radius: var(--radius);
    text-decoration: none;
}

.kb-comp-toggle:not(:disabled):hover,
.kb-link:hover,
.btn:not(.primary):not(:disabled):hover {
    border-color: var(--interactive-hover-border);
    background: var(--interactive-hover-bg);
}

.kb-comp-toggle.is-open:not(.editor-action-btn) {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-open-bg);
    color: var(--brand-ink);
    box-shadow: none;
}

.kb-comp-toggle.is-open:not(.editor-action-btn):not(:disabled):hover {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-open-hover-bg);
}

.hl7-rep-chunk.is-repetition-selected {
    background: var(--interactive-selected-bg);
}

/* Purpose: Keep knowledge-base table cells on one line where horizontal scanning is preferable. */
.kb-dt-cell,
.kb-table-cell {
    white-space: nowrap;
}

/* Purpose: Keep field and nested inspector specification text inside their narrow table column.
   Why: Datatype codes and lengths have no natural break point, so compact screens need an explicit emergency wrap. */
.field-spec,
.field-spec .spec-dt,
.field-spec .spec-status,
.field-spec .spec-len,
.comp-spec,
.comp-spec .spec-dt,
.comp-spec .spec-status,
.comp-spec .spec-len {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Purpose: Present inspector specs as compact native buttons without changing their code/length content hierarchy.
   Why: A bordered, tinted rest state plus the shared transition/press language makes the KB action recognizable before hover. */
button.field-spec,
button.comp-spec,
button.inspector-datatype-link {
    appearance: none;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--brand-ghost);
    color: var(--brand-ink);
    font: inherit;
    font-weight: 600;
    margin: 0;
    outline: var(--space-2) solid transparent;
    padding: var(--space-4) var(--space-6);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--interactive-control-shadow);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, filter .12s ease;
}

button.field-spec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: var(--control-height);
}

button.field-spec,
button.comp-spec {
    width: 100%;
}

button.comp-spec {
    align-items: flex-start;
    justify-content: center;
    min-height: var(--control-height);
}

button.field-spec:not(:disabled):hover {
    border-color: var(--interactive-hover-border);
    background: var(--interactive-hover-bg);
    color: var(--brand-ink);
}

button.field-spec:not(:disabled):active,
button.field-spec:not(:disabled).is-interaction-pressed {
    border-color: var(--interactive-active-border);
    background: var(--interactive-active-bg);
    color: var(--brand-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

button.field-spec:focus-visible {
    border-color: var(--interactive-active-border);
    background: var(--interactive-open-bg);
    color: var(--brand-ink);
    box-shadow: var(--interactive-focus-ring);
}

/* Component/subcomponent specs use the same blue depth language as their editor inputs and local action buttons. */
button.comp-spec,
button.inspector-datatype-link {
    border-color: var(--component-strong);
    background: var(--component-soft);
    color: var(--component-ink);
}

button.comp-spec:not(:disabled):hover,
button.inspector-datatype-link:not(:disabled):hover {
    border-color: var(--component-focus-border);
    background: var(--component-hover-bg);
    color: var(--component-ink);
}

button.comp-spec:not(:disabled):active,
button.comp-spec:not(:disabled).is-interaction-pressed,
button.inspector-datatype-link:not(:disabled):active,
button.inspector-datatype-link:not(:disabled).is-interaction-pressed {
    border-color: var(--component-focus-border);
    background: var(--component-active-bg);
    color: var(--component-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

button.comp-spec:focus-visible {
    border-color: var(--component-focus-border);
    background: var(--component-soft);
    color: var(--component-ink);
    box-shadow: var(--component-focus-ring);
}

/* NOTE: Datatype links live in overflow-clipped headings, so their component focus ring stays inside the control. */
button.inspector-datatype-link:focus-visible {
    border-color: var(--component-focus-border);
    background: var(--component-soft);
    color: var(--component-ink);
    box-shadow: var(--component-focus-ring-inset);
}

/* Warning context keeps semantic orange across every button state, regardless of editor depth. */
.fields>tbody>tr.has-warn button.field-spec,
.comp-row.has-warn button.comp-spec,
.subcomp-row.has-warn button.comp-spec {
    border-color: var(--warn-border);
    background: var(--warn-surface);
    color: var(--warn-ink);
}

.fields>tbody>tr.has-warn button.field-spec:not(:disabled):hover,
.comp-row.has-warn button.comp-spec:not(:disabled):hover,
.subcomp-row.has-warn button.comp-spec:not(:disabled):hover {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
}

.fields>tbody>tr.has-warn button.field-spec:not(:disabled):active,
.fields>tbody>tr.has-warn button.field-spec:not(:disabled).is-interaction-pressed,
.comp-row.has-warn button.comp-spec:not(:disabled):active,
.comp-row.has-warn button.comp-spec:not(:disabled).is-interaction-pressed,
.subcomp-row.has-warn button.comp-spec:not(:disabled):active,
.subcomp-row.has-warn button.comp-spec:not(:disabled).is-interaction-pressed {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

.fields>tbody>tr.has-warn button.field-spec:focus-visible,
.comp-row.has-warn button.comp-spec:focus-visible,
.subcomp-row.has-warn button.comp-spec:focus-visible {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface);
    color: var(--warn-ink);
    box-shadow: var(--warn-focus-ring);
}

button.field-spec:disabled,
button.comp-spec:disabled,
button.inspector-datatype-link:disabled,
.fields>tbody>tr.has-warn button.field-spec:disabled,
.comp-row.has-warn button.comp-spec:disabled,
.subcomp-row.has-warn button.comp-spec:disabled {
    opacity: .55;
    border-color: var(--interactive-disabled-border);
    background: var(--interactive-disabled-bg);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

button.field-spec:disabled .spec-dt,
button.field-spec:disabled .spec-len,
button.comp-spec:disabled .spec-dt,
button.comp-spec:disabled .spec-len,
.comp-row.has-warn button.comp-spec:disabled .spec-dt,
.comp-row.has-warn button.comp-spec:disabled .spec-len,
.subcomp-row.has-warn button.comp-spec:disabled .spec-dt,
.subcomp-row.has-warn button.comp-spec:disabled .spec-len {
    color: var(--muted);
}

/* Shared left margin reset so inline toggles and leading pills sit flush with labels. */
.kb-dt-cell .kb-comp-toggle,
.kb-table-cell .kb-comp-toggle,
.field-actions .mini,
.field-actions .kb-comp-toggle,
.comp-actions .kb-comp-toggle,
.seg-idx-pill.is-leading {
    margin-left: 0;
}

.kb-chip {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--ink-faint);
    margin: var(--space-2);
}

.kb-chip:hover {
    border-color: var(--interactive-hover-border);
    background: var(--interactive-hover-bg);
}

.kb-chip .kb-chip-flags,
.seg-title {
    color: var(--muted);
}

.kb-flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.kb-block {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--space-8);
    margin-top: var(--space-8);
    background: var(--ink-faint);
}

.kb-empty {
    color: var(--muted);
    padding: var(--space-8) 0;
}

.kb-pill-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
}

.grid>.card,
.kb-grid>.card {
    height: auto;
}

@media (min-width: 1024px) {

    body,
    main {
        overflow: hidden;
    }

    .grid {
        grid-template-columns: 1.20fr .80fr;
        gap: var(--space-14);
        height: 100%;
    }

    .kb-grid {
        grid-template-columns: 1fr 1.05fr;
    }

    .container,
    .grid>.card,
    .kb-grid>.card,
    .card {
        height: 100%;
    }
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-10);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 1));
    flex-wrap: wrap;
}

.card-head>div:first-child {
    display: flex;
    align-items: baseline;
    gap: var(--space-10);
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 320px;
}

.card-head-fill {
    width: 100%;
}

.card-title {
    margin: 0;
}

.source-card-head {
    flex-wrap: nowrap;
}

.source-card-head .card-title {
    flex: 0 0 auto;
}

.source-card-head .meta {
    flex: 1 1 auto;
    margin-left: 0;
}

.source-copy-action {
    flex: 0 0 auto;
}

/* Shared heading sizing for primary titles. */
h1,
.card-title {
    font-size: var(--space-14);
}

.meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-left: auto;
}

.pill {
    display: inline-flex;
    gap: var(--space-6);
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--control-pad-x);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
}

/* Purpose: Distinguish withdrawn status text without replacing the shared specification-button styling.
   Why: Option W must remain recognizable while the owning button keeps normal field-spec geometry and interaction states. */
.spec-status--withdrawn {
    color: var(--warn-ink);
}

.spec-status--missing {
    color: var(--muted);
}

/* Purpose: Make known message structures visibly actionable without changing the compact metadata layout.
   Why: The control opens the exact structure in the knowledge base and therefore needs full pointer and keyboard states. */
button.message-structure-link {
    appearance: none;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

button.message-structure-link:hover {
    border-color: var(--interactive-hover-border);
    background: var(--interactive-hover-bg);
}

button.message-structure-link:active,
button.message-structure-link.is-interaction-pressed {
    border-color: var(--interactive-active-border);
    background: var(--interactive-active-bg);
    box-shadow: var(--interactive-pressed-shadow);
}

button.message-structure-link:focus-visible {
    outline: none;
    border-color: var(--interactive-active-border);
    box-shadow: var(--interactive-focus-ring);
}

.pill b,
.components-head b,
.subcomponents-head b,
.components-dtcode {
    color: var(--text)
}

.components-dtcode {
    font-weight: 700;
}

.warnbar {
    margin: var(--space-10) var(--space-14) 0;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius);
    border: 1px solid var(--brand-border);
    background: var(--brand-ghost);
    color: var(--brand-ink);
}

.card-body {
    padding: var(--space-10) var(--space-12);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Keep the knowledge-base detail pane scrollable for long definitions without clipping other card bodies. */
.card-body.kb-detail {
    overflow: auto;
}

.left-body textarea.input {
    flex: 0 0 180px;
}

@media (min-width: 1024px) {
    .left-body textarea.input {
        flex: 0 0 220px;
    }
}

/* Right pane scrolls internally */
#rightPane {
    overflow-y: auto;
    overflow-x: hidden;
}

.right-pane {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.right-pane.is-scrollable.has-visible-scrollbar-space,
.warn-list.is-scrollable.has-visible-scrollbar-space {
    padding-right: var(--scrollbar-padding-right);
}

/* Purpose: Keep the first rendered inspector item flush with the pane top.
   Why: Notes and segment cards use top margins for spacing between siblings, but the first item should not waste vertical space. */
.right-pane> :first-child {
    margin-top: 0;
}

.compare-card {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    min-height: calc(var(--control-height) + var(--space-10));
    flex: 0 0 auto;
}

.compare-card.is-active,
.compare-card:has(> .compare-toggle:focus-visible) {
    border-color: var(--interactive-selected-border);
    box-shadow: inset 0 0 0 1px var(--brand-border-soft);
}

.compare-card.is-active .compare-toggle,
.compare-card:has(> .compare-toggle:focus-visible) .compare-toggle {
    background: var(--interactive-open-bg);
}

.compare-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    background: linear-gradient(180deg, var(--brand-wash), transparent);
    color: var(--text);
    border: 0;
    padding: var(--space-8) var(--space-10);
    min-height: var(--control-height);
    cursor: pointer;
    text-align: left;
}

.compare-chevron {
    color: var(--muted);
    min-width: 12px;
}

.compare-title {
    font-weight: 700;
}

.compare-status {
    color: var(--muted);
    white-space: nowrap;
}

.compare-status.is-active {
    color: var(--ok-text);
}

.compare-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-10);
    background: var(--card);
}

.compare-body textarea {
    min-height: 120px;
}

.cmp-pill {
    margin-left: var(--space-6);
    padding: 0 var(--space-6);
    border-radius: var(--radius);
    background: var(--cmp-line-right);
    color: var(--component);
    font-size: 11px;
}

.input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 var(--control-pad-x);
    height: var(--control-height);
    outline: none;
    background: var(--card);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

/* Purpose: Present an input and its trailing native action as one bordered control.
   Why: Search clearing and editor copying share stable geometry and focus styling while retaining separate Tab stops. */
.input-action-field {
    display: flex;
    align-items: stretch;
    height: var(--control-height);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.input-action-field .input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.search-field:has(.input:not(:disabled):hover) {
    border-color: var(--interactive-hover-border);
}

.search-field:focus-within,
.editor-copy-field:has(.input:focus) {
    border-color: var(--interactive-active-border);
    background: var(--rendered-bg);
    box-shadow: none;
}

.input-action-button {
    appearance: none;
    position: relative;
    display: inline-grid;
    flex: 0 0 var(--control-height);
    place-items: center;
    width: var(--control-height);
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    box-shadow: inset 1px 0 0 var(--border);
    transition: background .12s ease, color .12s ease;
}

.input-action-button:hover,
.input-action-button:focus-visible {
    background: var(--interactive-hover-bg);
    color: var(--brand-ink);
    box-shadow: inset 1px 0 0 var(--interactive-active-border), inset 0 -1px 0 var(--interactive-active-border);
}

.input-action-button:active {
    background: var(--interactive-active-bg);
}

.search-clear-button {
    font-size: 18px;
}

/* Purpose: Keep the default field-level editor copy divider neutral unless its input owns focus.
   Why: Nested component controls override this below, while ordinary field actions must not create a detached pink partial frame. */
.editor-copy-button:hover,
.editor-copy-button:focus-visible {
    box-shadow: inset 1px 0 0 var(--border);
}

.editor-copy-field:has(.input:focus) .editor-copy-button {
    box-shadow: inset 1px 0 0 var(--interactive-active-border);
}

/* Purpose: Keep nested editor copy actions in the blue component interaction family.
   Why: Component and subcomponent copy buttons must not inherit the pink field-action hover while their input border remains independently selection-driven. */
.editor-copy-field:has(.comp-input) .editor-copy-button:hover,
.editor-copy-field:has(.comp-input) .editor-copy-button:focus-visible,
.editor-copy-field:has(.subcomp-input) .editor-copy-button:hover,
.editor-copy-field:has(.subcomp-input) .editor-copy-button:focus-visible {
    background: var(--component-hover-bg);
    color: var(--component);
    box-shadow: inset 1px 0 0 var(--border);
}

.editor-copy-field:has(.comp-input) .editor-copy-button:active,
.editor-copy-field:has(.subcomp-input) .editor-copy-button:active {
    background: var(--component-active-bg);
}

/* Purpose: Keep exact-value copy feedback inside the fixed action slot.
   Why: Icon swaps and assistive status updates must not resize an editor or expose a detached button frame. */
.editor-copy-icon {
    display: inline-grid;
    width: 15px;
    height: 15px;
    place-items: center;
}

.editor-copy-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.editor-copy-button.is-copy-success,
.editor-copy-field:has(.comp-input) .editor-copy-button.is-copy-success,
.editor-copy-field:has(.subcomp-input) .editor-copy-button.is-copy-success {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.editor-copy-button.is-copy-error {
    color: var(--error-ink);
}

.editor-copy-button.is-empty:not(:focus-visible):not(:hover) {
    color: var(--interactive-disabled-border);
    cursor: default;
}

.editor-copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.input:not(:disabled):hover,
.input.hl7-detail-hover:not(:disabled) {
    border-color: var(--interactive-hover-border);
}

.input:not(:disabled):focus,
.input:not(:disabled):focus-visible {
    border-color: var(--interactive-active-border);
    box-shadow: none;
    background: var(--rendered-bg);
}

/* Purpose: Keep generic input interaction styles on the shared input-action wrapper.
   Why: Its internal input must never redraw a separate border or background during hover or focus. */
.input-action-field .input:not(:disabled):hover,
.input-action-field .input:not(:disabled):focus,
.input-action-field .input:not(:disabled):focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.input.hl7-detail-selected:not(:disabled),
.input.hl7-detail-selected:not(:disabled):focus,
.input.hl7-detail-selected:not(:disabled):focus-visible,
.right-pane.hl7-full-raw-selection-fallback .input.hl7-full-raw-selection-target:not(:disabled),
.right-pane.hl7-full-raw-selection-fallback .input.hl7-full-raw-selection-target:not(:disabled):focus,
.right-pane.hl7-full-raw-selection-fallback .input.hl7-full-raw-selection-target:not(:disabled):focus-visible,
.seg-card.hl7-full-raw-selection-visible .input.hl7-full-raw-selection-target:not(:disabled),
.seg-card.hl7-full-raw-selection-visible .input.hl7-full-raw-selection-target:not(:disabled):focus,
.seg-card.hl7-full-raw-selection-visible .input.hl7-full-raw-selection-target:not(:disabled):focus-visible {
    border-color: var(--hl7-selected-range-border);
    box-shadow: 0 0 0 1px var(--hl7-selected-range-bg);
}

.editor-copy-field:has(.input.hl7-detail-selected),
.right-pane.hl7-full-raw-selection-fallback .editor-copy-field:has(.input.hl7-full-raw-selection-target),
.seg-card.hl7-full-raw-selection-visible .editor-copy-field:has(.input.hl7-full-raw-selection-target) {
    border-color: var(--hl7-selected-range-border);
    box-shadow: 0 0 0 1px var(--hl7-selected-range-bg);
}

.editor-copy-field:has(.comp-input.is-component-selected),
.editor-copy-field:has(.subcomp-input.is-subcomponent-selected) {
    border-color: var(--component-focus-border);
}

/* Purpose: Match the copy divider to the active component or subcomponent border.
   Why: Nested editor selection intentionally stays blue, so its one-pixel divider must not retain the generic pink input-focus color. */
.editor-copy-field:has(.comp-input.is-component-selected) .editor-copy-button,
.editor-copy-field:has(.subcomp-input.is-subcomponent-selected) .editor-copy-button {
    box-shadow: inset 1px 0 0 var(--component-focus-border);
}

.input:disabled {
    border-color: var(--interactive-disabled-border);
    background: var(--interactive-disabled-bg);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

select.input:not(:disabled) {
    cursor: pointer;
}

textarea.input {
    min-height: 140px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
    padding: var(--control-pad-y) var(--control-pad-x);
}

.row {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

.row>* {
    flex: 1
}

.btn {
    appearance: none;
    border: 1px solid var(--brand-border);
    background: var(--brand-ghost);
    color: var(--brand-ink);
    border-radius: var(--radius);
    font-weight: 600;
    white-space: nowrap;
}

/* Purpose: Keep all button-like controls aligned vertically regardless of icon/text mix.
   Why: Inline-flex with center alignment prevents emoji or icon glyphs from inflating height unevenly; selects reuse the same sizing. */
.btn,
.mode-btn,
.kb-tab,
.kb-comp-toggle,
.kb-link,
.kb-chip,
button.mini,
.comp-actions button,
.diff-pill,
.badge,
.compare-toggle-left,
.kb-dt-cell,
.kb-table-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

/* Purpose: Keep pointer feedback consistent across all interactive elements (buttons, toggles, rows and HL7 chunks).
   Why: Prevents drift where some click targets use text cursor while others show a hand cursor. */
.btn,
.mode-btn,
.kb-tab,
.kb-comp-toggle,
.kb-link,
.kb-chip,
button.mini,
.kb-item,
.fields>tbody>tr:not(.components-row),
.fields>tbody>tr:not(.components-row)>td,
.fields button,
.seg-sum,
.warn-item,
.note.note-clickable,
.comp-row,
.rep-row,
.subcomp-row,
.repeat-count-pill,
.rendered .hl7-line:not(.cmp-line--right) .hl7-seg,
.rendered .hl7-line:not(.cmp-line--right) .hl7-field,
.rendered .hl7-line:not(.cmp-line--right) .hl7-rep-chunk,
.rendered .hl7-line:not(.cmp-line--right) .hl7-comp-chunk,
.rendered .hl7-line:not(.cmp-line--right) .hl7-subcomp-chunk {
    cursor: pointer;
}

/* Purpose: Centralize state transitions for button-like controls and clickable rows.
   Why: Feedback should feel consistent while avoiding transforms, padding changes or border-width changes that shift layout. */
.btn,
.mode-btn,
.kb-tab,
.kb-comp-toggle,
.kb-link,
.kb-chip,
button.mini,
.comp-actions button,
.kb-item,
.warn-item,
.note.note-clickable,
.compare-toggle,
.toolbar-menu-trigger,
.repeat-count-pill,
.fields>tbody>tr:not(.components-row),
.rep-row,
.comp-row,
.subcomp-row,
.seg-sum {
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, filter .12s ease;
}

/* Purpose: Use one visible keyboard focus treatment for all interactive controls.
   Why: Focus must remain easy to find without changing box metrics or causing surrounding content to move. */
.btn:focus-visible,
.mode-btn:focus-visible,
.kb-tab:focus-visible,
.kb-comp-toggle:focus-visible,
.kb-link:focus-visible,
.kb-chip:focus-visible,
button.mini:focus-visible,
.comp-actions button:focus-visible,
.warn-item:focus-visible,
.note.note-clickable:focus-visible,
.toolbar-menu-trigger:focus-visible {
    outline: var(--space-2) solid transparent;
    border-color: var(--interactive-active-border);
    box-shadow: var(--interactive-focus-ring);
}

.warn-item:not(.is-global):focus-visible,
.note.warn.note-clickable:focus-visible {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface);
    color: var(--warn-ink);
    box-shadow: var(--warn-focus-ring);
}

.compare-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Purpose: Let composite selection be the only row-level keyboard indicator.
   Why: Arrow focus immediately selects these rows, so a second focus color would duplicate the persistent selected state. */
.kb-item:focus-visible,
.seg-sum:focus-visible,
.field-row:focus-visible,
.rep-row:focus-visible,
.comp-row:focus-visible,
.subcomp-row:focus-visible {
    outline: none;
}

.fields>tbody>tr:not(.components-row).is-interaction-pressed>td,
.rep-row.is-interaction-pressed>td {
    background: var(--interactive-active-bg);
}

.comp-row.is-interaction-pressed>td,
.subcomp-row.is-interaction-pressed>td {
    background: var(--component-active-bg);
}

.btn:disabled,
button.mini:disabled,
.kb-comp-toggle:disabled,
.mode-btn:disabled,
.kb-tab:disabled {
    opacity: .55;
    background: var(--interactive-disabled-bg);
    border-color: var(--interactive-disabled-border);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

.btn.primary {
    border-color: var(--brand-border-strong);
    background: var(--brand);
    color: white;
}

.btn.primary:not(:disabled):hover {
    border-color: var(--brand-hover);
    background: var(--brand-hover);
    filter: none;
}

.btn.primary:not(:disabled):active,
.btn.primary:not(:disabled).is-interaction-pressed {
    border-color: var(--brand-active);
    background: var(--brand-active);
    filter: none;
    box-shadow: var(--interactive-pressed-shadow);
}

.btn.primary:disabled {
    background: var(--interactive-disabled-bg);
    border-color: var(--interactive-disabled-border);
    color: var(--muted);
    filter: none;
}

.btn.ghost {
    border-color: var(--border);
    background: var(--card);
    color: var(--text);
}

.btn.is-privacy-off {
    border-color: var(--warn-border-strong);
    background: var(--privacy-warn-bg);
    color: var(--warn-ink);
}

.btn.is-privacy-off:not(:disabled):hover {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
}

.btn.is-privacy-off:not(:disabled):active,
.btn.is-privacy-off:not(:disabled).is-interaction-pressed {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

.btn.is-privacy-off:focus-visible {
    border-color: var(--warn-border-strong);
    box-shadow: var(--warn-focus-ring);
}

.btn.ghost:disabled,
.btn.is-privacy-off:disabled {
    background: var(--interactive-disabled-bg);
    border-color: var(--interactive-disabled-border);
    color: var(--muted);
    filter: none;
}

/* Shared neutral hover background for low-emphasis controls. */
.btn.ghost:not(:disabled):hover,
button.mini:not(:disabled):hover {
    background: var(--interactive-hover-bg);
}

/* Purpose: Keep navigation and compare hovers in the brand family.
   Why: These controls change app context, so blue hover reads like component-depth editing instead of navigation. */
.mode-btn:not(.is-active):hover,
.kb-tab:not(.is-active):hover,
.compare-toggle:hover,
.seg-sum:hover {
    background: var(--interactive-brand-hover-bg);
}

.mode-btn:not(.is-active):hover,
.kb-tab:not(.is-active):hover {
    border-color: var(--brand-border);
    color: var(--brand-ink);
}

.fields>tbody>tr:not(.components-row):not(.is-selected):hover>td,
.fields>tbody>tr:not(.components-row):not(.is-selected).hl7-detail-hover>td,
.fields>tbody>tr:not(.components-row):not(.is-selected).hl7-detail-hover-parent>td,
.rep-row:not(.is-repetition-selected):hover>td,
.rep-row:not(.is-repetition-selected).hl7-detail-hover>td {
    background: var(--interactive-row-hover-bg);
}

.comp-row:not(.is-component-selected):hover>td,
.comp-row:not(.is-component-selected).hl7-detail-hover>td,
.subcomp-row:not(.is-subcomponent-selected):hover>td,
.subcomp-row:not(.is-subcomponent-selected).hl7-detail-hover>td {
    background: var(--component-hover-bg);
}

.mode-btn.is-active,
.kb-tab.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--text-inverse);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.mode-btn.is-active:hover,
.kb-tab.is-active:hover {
    border-color: var(--brand-hover);
    background: var(--brand-hover);
}

.mode-btn.is-active:active,
.mode-btn.is-active.is-interaction-pressed,
.kb-tab.is-active:active,
.kb-tab.is-active.is-interaction-pressed {
    border-color: var(--brand-active);
    background: var(--brand-active);
    box-shadow: var(--interactive-pressed-shadow);
}

.mode-btn.is-active:focus-visible,
.kb-tab.is-active:focus-visible {
    box-shadow: var(--interactive-focus-ring), inset 0 0 0 1px var(--brand);
}

/* Purpose: Show pressed feedback without moving controls.
   Why: Active states should confirm a registered press while preserving stable layout. */
.btn:not(:disabled):not(.primary):active,
.btn:not(:disabled):not(.primary).is-interaction-pressed,
.mode-btn:not(.is-active):active,
.mode-btn:not(.is-active).is-interaction-pressed,
.kb-tab:not(.is-active):active,
.kb-tab:not(.is-active).is-interaction-pressed,
.kb-comp-toggle:not(:disabled):active,
.kb-comp-toggle:not(:disabled).is-interaction-pressed,
.kb-link:active,
.kb-link.is-interaction-pressed,
.kb-chip:active,
.kb-chip.is-interaction-pressed,
button.mini:not(:disabled):active,
button.mini:not(:disabled).is-interaction-pressed,
.kb-item:active,
.kb-item.is-interaction-pressed,
.note.note-clickable:active,
.note.note-clickable.is-interaction-pressed,
.compare-toggle:active,
.compare-toggle.is-interaction-pressed,
.toolbar-menu-trigger:active,
.toolbar-menu-trigger.is-interaction-pressed {
    border-color: var(--interactive-active-border);
    background: var(--interactive-active-bg);
    box-shadow: var(--interactive-pressed-shadow);
}

.warn-item:not(.is-global):active,
.warn-item:not(.is-global).is-interaction-pressed,
.note.warn.note-clickable:active,
.note.warn.note-clickable.is-interaction-pressed {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

.seg-sum:active,
.seg-sum.is-interaction-pressed {
    background: var(--interactive-active-bg);
    box-shadow: var(--interactive-pressed-shadow);
}

.status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--control-height);
    flex: 1 1 0;
    color: var(--muted);
    min-width: 0;
}

.status[data-kind="ok"],
.ok,
.badge.ok,
.hl7-line.cmp-line-status-added .hl7-line-head,
.hl7-line.cmp-line-status-added .hl7-line-body {
    color: var(--ok-text);
}

.status[data-kind="warn"] {
    color: var(--warn-text);
}

.status[data-kind="error"] {
    color: var(--error-ink);
}

.status-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rendered-frame {
    /* Keep the viewport border outside the scrolling layer so every edge remains equally visible at every scroll position. */
    margin-top: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--rendered-bg);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Purpose: Draw the renderer's native focus cue on the fixed viewport frame.
   Why: Chromium focuses scroll containers automatically, but an outline on the inner scroller can move or be clipped during horizontal scrolling. */
.rendered-frame:focus-within {
    outline: 1px solid CanvasText;
    outline-offset: 0;
}

.rendered {
    /* Parsed HL7 mirror on the left: sticky segment labels keep context while the inner layer scrolls. */
    padding: var(--space-10) 0;
    --rendered-pad: 0px;
    border: 0;
    border-radius: 0;
    background: var(--rendered-bg);
    max-height: none;
    overflow: auto;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    outline: none;
    white-space: pre;
    position: relative;
}

/* Purpose: Normalize inline layout for all HL7 chunks so separators and glyphs line up across segments, repetitions and components. */
.hl7-field,
.hl7-seg,
.hl7-rep-chunk,
.hl7-rep-val,
.hl7-comp-chunk,
.hl7-subcomp-chunk,
.hl7-comp,
.hl7-subcomp,
.hl7-val {
    display: inline-flex;
    align-items: center;
}

/* Purpose: Isolate style invalidation inside each rendered line and segment card.
   Why: Selection class changes must not trigger style work across the full large-message tree. */
.hl7-line,
.seg-card {
    contain: style;
}

/* Keep each rendered HL7 row a single bar: head and body share padding/height and separators stay legible. */
.hl7-line {
    display: grid;
    grid-template-columns: var(--hl7-head-w, auto) 1fr;
    column-gap: 0;
    align-items: stretch;
    min-width: max-content;
}

/* Purpose: Retain every renderer token for exact selection/copy while skipping off-screen row layout in large messages.
   Why: Direct navigation can reveal any row on demand without paying initial style/paint cost for the complete renderer. */
.rendered.is-large-message .hl7-line {
    content-visibility: auto;
    contain-intrinsic-block-size: auto var(--hl7-line-intrinsic-block-size);
}

/* Purpose: Mark one recognized HL7 structure block with an open bracket that follows its real row geometry.
   Why: The pseudo-element stays decorative and reuses renderer tokens without shifting rows or adding accessibility stops. */
.hl7-structure-group {
    position: relative;
    margin-block: var(--space-2);
    padding-block: var(--space-2);
}

.hl7-structure-group::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset-block: 0;
    left: var(--hl7-structure-group-scroll-left, 0px);
    width: 33.333%;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    border-left: 1px dashed var(--border);
    pointer-events: none;
}

.hl7-structure-group.is-structure-group-selected::before {
    border-color: var(--interactive-selected-border);
}

.hl7-line.cmp-line {
    border-radius: var(--radius);
}

.hl7-line.cmp-line--right {
    background: var(--cmp-line-right);
    box-shadow: inset 0 0 0 1px var(--cmp-line-right-border);
}

.hl7-line.cmp-line-status-removed .hl7-line-head,
.hl7-line.cmp-line-status-removed .hl7-line-body {
    color: var(--brand-ink);
    opacity: .9;
}

.hl7-line-head {
    position: sticky;
    left: var(--rendered-pad, 0px);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-2) 0 var(--space-4);
    width: var(--hl7-head-w, auto);
    min-width: var(--hl7-head-w, auto);
    max-width: var(--hl7-head-w, auto);
    background: var(--rendered-bg);
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    align-self: stretch;
}

.hl7-line.cmp-line--right .hl7-line-head {
    background: var(--cmp-line-right);
}

.hl7-line-body {
    min-width: max-content;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 var(--space-4) 0 0;
    align-self: stretch;
}

.hl7-seg,
.hl7-field {
    position: relative;
    border-radius: var(--radius);
    vertical-align: middle;
    padding: 2px 2px;
    box-shadow: inset 0 0 0 1px transparent;
}

.hl7-seg {
    color: var(--seg-ink);
    margin: 0;
}

.hl7-field.no-sep.is-empty {
    min-width: 0.4ch;
}

.hl7-field.is-virtual {
    box-shadow: inset 0 0 0 1px var(--warn-border);
    background: var(--warn-surface);
    outline: 1px dashed var(--warn-border);
    outline-offset: -1px;
}

/* Purpose: Keep the rendered HL7 text stable while still giving line-level orientation.
   Why: Per-token hover feedback made the dense HL7 view feel jumpy; selection remains the persistent state. */
.hl7-seg.is-line-hover {
    background: var(--interactive-brand-hover-bg);
    box-shadow: inset 0 0 0 1px transparent;
}

.hl7-seg.is-line-selected {
    background: var(--interactive-selected-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border);
}

/* Purpose: Restore stable hover feedback for selectable rendered HL7 body tokens.
   Why: Users need pointer orientation in dense HL7 lines, but the feedback must not shift separators or text. */
.rendered .hl7-line:not(.cmp-line--right) .hl7-field:hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-field.hl7-path-hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-rep-chunk:hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-rep-chunk.hl7-path-hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-comp-chunk:hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-comp-chunk.hl7-path-hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-subcomp-chunk:hover,
.rendered .hl7-line:not(.cmp-line--right) .hl7-subcomp-chunk.hl7-path-hover {
    background: var(--hl7-token-hover-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border-soft);
}

.rendered .hl7-line:not(.cmp-line--right) .hl7-seg:active,
.rendered .hl7-line:not(.cmp-line--right) .hl7-seg.is-interaction-pressed,
.rendered .hl7-line:not(.cmp-line--right) .hl7-field:active,
.rendered .hl7-line:not(.cmp-line--right) .hl7-field.is-interaction-pressed,
.rendered .hl7-line:not(.cmp-line--right) .hl7-rep-chunk:active,
.rendered .hl7-line:not(.cmp-line--right) .hl7-rep-chunk.is-interaction-pressed,
.rendered .hl7-line:not(.cmp-line--right) .hl7-comp-chunk:active,
.rendered .hl7-line:not(.cmp-line--right) .hl7-comp-chunk.is-interaction-pressed,
.rendered .hl7-line:not(.cmp-line--right) .hl7-subcomp-chunk:active,
.rendered .hl7-line:not(.cmp-line--right) .hl7-subcomp-chunk.is-interaction-pressed {
    background: var(--interactive-active-bg);
    box-shadow: inset 0 0 0 1px transparent;
}

.hl7-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--hl7-sep-pad-x);
    color: var(--sep-muted);
    height: 100%;
}

.hl7-rep-chunk {
    position: relative;
    height: 100%;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px transparent;
}

.hl7-rep-val {
    height: 100%;
}

.hl7-comp-chunk,
.hl7-subcomp-chunk {
    position: relative;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px transparent;
}

.hl7-comp-chunk.is-component-selected,
.hl7-comp-chunk.is-component-selected.has-diff,
.hl7-subcomp-chunk.is-subcomponent-selected,
.hl7-subcomp-chunk.is-subcomponent-selected.has-diff {
    background: var(--component-soft);
    box-shadow: inset 0 0 0 1px var(--component-focus-border);
}

.hl7-selected-range,
.rendered.hl7-full-raw-selection-fallback .hl7-raw-text,
.hl7-line.hl7-full-raw-selection-visible .hl7-raw-text {
    background: var(--hl7-selected-range-bg);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px var(--hl7-selected-range-border);
    color: inherit;
}

.hl7-subcomp-sep,
.hl7-comp-sep,
.hl7-rep-sep {
    color: var(--sep-muted);
    padding: 0 var(--space-2);
}

.legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--muted);
}

.legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}

.legend-row.has-tooltip {
    cursor: help;
}

.legend-dot {
    width: var(--legend-dot-size);
    height: var(--legend-dot-size);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: inline-block;
    flex-shrink: 0;
}

.legend-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

@media (max-width: 640px) {
    .legend {
        grid-template-columns: 1fr;
        gap: var(--space-8) var(--space-12);
    }
}

.legend-dot-selection,
.hl7-field.has-warn.is-selected::after {
    background: var(--brand-soft);
    border-color: var(--brand-border);
}

.legend-dot-text-selection {
    background: var(--hl7-selected-range-bg);
    border-color: var(--hl7-selected-range-border);
}

.legend-dot-component {
    background: var(--component-soft);
    border-color: var(--component-strong);
}

.legend-dot-diff {
    background: var(--diff-bg);
    border-color: var(--diff-border);
}

.legend-dot-warn {
    background: var(--warn-surface);
    border-color: var(--warn-border);
}

.legend-dot-compare-base {
    background: var(--card);
    border-color: var(--border);
}

.legend-dot-compare-right {
    background: var(--cmp-line-right);
    border-color: var(--cmp-line-right-border);
}

.legend-dot-compare-diff {
    background: var(--cmp-diff-mod);
    border-color: var(--warn-border);
}

.legend-dot-compare-added {
    background: var(--cmp-diff-added);
    border-color: var(--ok-strong);
}

.legend-dot-compare-removed {
    background: var(--cmp-diff-removed);
    border-color: var(--brand-border-strong);
}

/* Shared warning fill so toggles, notes and bulk actions stay on-palette. */
.kb-comp-toggle.has-warn,
.note.warn,
button.replace-all-btn.has-warn {
    background: var(--warn-surface);
    border-color: var(--warn-border);
    color: var(--warn-ink);
}

/* Shared warn hover states to keep contrast consistent. */
.kb-comp-toggle.has-warn:not(:disabled):hover,
.warn-item:not(.is-global):hover {
    background: var(--warn-surface-hover);
    border-color: var(--warn-border-strong);
}

button.replace-all-btn.has-warn:not(:disabled):hover,
button.replace-all-btn.has-warn:focus-visible,
.comp-actions .kb-comp-toggle.has-warn:not(:disabled):hover,
.comp-actions .kb-comp-toggle.has-warn:focus-visible {
    background: var(--warn-surface-hover);
    border-color: var(--warn-border-strong);
    color: var(--warn-ink);
}

button.replace-all-btn.has-warn:focus-visible,
.comp-actions .kb-comp-toggle.has-warn:focus-visible {
    background: var(--warn-surface);
    box-shadow: var(--warn-focus-ring);
}

/* Shared warning badge styling so all warn markers look identical. */
.hl7-field.has-warn::after,
.hl7-rep-chunk.has-warn::after,
.hl7-seg.has-warn::after,
.hl7-comp-chunk.has-warn::after,
.hl7-subcomp-chunk.has-warn::after {
    content: "⚠";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--space-4);
    font-size: var(--space-10);
    color: var(--warn-ink);
    background: var(--warn-surface);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 1px var(--space-4);
}

/* Route selected warning emphasis to the warn badge so the main chunk height stays unchanged. */
.hl7-field.has-warn.is-selected,
.hl7-rep-chunk.has-warn.is-repetition-selected,
.hl7-comp-chunk.has-warn.is-component-selected,
.hl7-subcomp-chunk.has-warn.is-subcomponent-selected {
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
}

/* Virtual warn fields must keep their dashed hint even when selected. */
.hl7-field.is-virtual.has-warn.is-selected {
    background: var(--warn-surface);
    box-shadow: inset 0 0 0 1px var(--warn-border);
    outline-color: var(--warn-border);
}

.hl7-rep-chunk.has-warn.is-repetition-selected::after {
    background: var(--ink-haze);
    border-color: var(--brand-border);
}

.hl7-comp-chunk.has-warn.is-component-selected::after,
.hl7-subcomp-chunk.has-warn.is-subcomponent-selected::after {
    background: var(--component-soft);
    border-color: var(--component-focus-border);
}

/* Pulse exact-path matches with the shared warning color, then fall back to each element's prior state. */
@keyframes rendered-path-pulse {
    0% {
        background: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }

    35% {
        background: var(--warn-surface);
        box-shadow: inset 0 0 0 1px var(--warn-border-strong), 0 0 0 2px var(--warn-surface);
    }

    100% {
        background: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.hl7-seg.is-rendered-path-highlight,
.hl7-field.is-rendered-path-highlight,
.hl7-comp-chunk.is-rendered-path-highlight,
.hl7-subcomp-chunk.is-rendered-path-highlight {
    animation: rendered-path-pulse 1.05s ease-out 1;
}

.is-selected {
    background: var(--interactive-selected-bg);
    border-radius: var(--radius);
}

/* Purpose: Keep selected editor rows visually persistent even when their inner input has focus.
   Why: The focused control and selected row communicate different states and should not overwrite each other. */
.fields>tbody>tr.is-selected>td,
.rep-row.is-repetition-selected>td {
    background: var(--interactive-selected-bg);
}

.fields>tbody>tr.hl7-detail-parent-selected:not(.is-selected)>td,
.rep-row.hl7-detail-parent-selected:not(.is-repetition-selected)>td,
.comp-row.hl7-detail-parent-selected:not(.is-component-selected)>td,
.subcomp-row.hl7-detail-parent-selected:not(.is-subcomponent-selected)>td,
.right-pane.hl7-full-raw-selection-fallback .fields>tbody>tr.hl7-full-raw-selection-target:not(.is-selected)>td,
.right-pane.hl7-full-raw-selection-fallback .rep-row.hl7-full-raw-selection-target:not(.is-repetition-selected)>td,
.right-pane.hl7-full-raw-selection-fallback .comp-row.hl7-full-raw-selection-target:not(.is-component-selected)>td,
.right-pane.hl7-full-raw-selection-fallback .subcomp-row.hl7-full-raw-selection-target:not(.is-subcomponent-selected)>td,
.seg-card.hl7-full-raw-selection-visible .fields>tbody>tr.hl7-full-raw-selection-target:not(.is-selected)>td,
.seg-card.hl7-full-raw-selection-visible .rep-row.hl7-full-raw-selection-target:not(.is-repetition-selected)>td,
.seg-card.hl7-full-raw-selection-visible .comp-row.hl7-full-raw-selection-target:not(.is-component-selected)>td,
.seg-card.hl7-full-raw-selection-visible .subcomp-row.hl7-full-raw-selection-target:not(.is-subcomponent-selected)>td {
    background: var(--hl7-selected-range-soft-bg);
}

/* Component selection overlay */
.comp-row.is-component-selected>td,
.subcomp-row.is-subcomponent-selected>td {
    background: var(--component-glow);
}

.comp-input.is-component-selected,
.comp-input.is-component-selected:focus,
.comp-input.is-component-selected:focus-visible,
.comp-input.is-component-selected:hover,
.subcomp-input.is-subcomponent-selected,
.subcomp-input.is-subcomponent-selected:focus,
.subcomp-input.is-subcomponent-selected:focus-visible,
.subcomp-input.is-subcomponent-selected:hover {
    border-color: var(--component-focus-border);
    background: var(--card);
    box-shadow: none;
}

.warnings {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    width: 100%;
}

.head-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
    width: 100%;
}

.head-search-field {
    flex: 1;
    min-width: 0;
}

.head-search {
    min-width: 0;
}

@media (min-width: 720px) {
    .head-row {
        flex-wrap: nowrap;
    }
}

.warn-head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.warn-dot {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius);
    background: var(--warn-base);
    box-shadow: 0 0 0 3px var(--warn-surface);
}

.warn-list {
    margin-top: var(--space-8);
    display: grid;
    gap: var(--space-6);
    max-height: 120px;
    overflow-y: auto;
}

.warn-item {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    min-height: var(--control-height);
    padding: var(--space-4) var(--control-pad-x);
    border-radius: var(--radius);
    border: 1px solid var(--warn-border);
    background: var(--warn-surface);
    color: var(--warn-ink);
    font-family: inherit;
    white-space: normal;
}

.warn-item.is-global,
.fields>tbody>tr.components-row {
    cursor: default;
}

.warn-item-key {
    margin-right: var(--space-6);
}

.warnings[data-kind="ok"] {
    border-color: var(--ok-border);
    background: var(--ok-bg);
}

.warnings[data-kind="ok"] .ok {
    color: var(--ok-text);
    display: block;
    font-weight: 700;
}

.warnings[data-kind="ok"] .note,
.warnings[data-kind="ok"] .note.warn {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted);
}

.seg-card {
    /* Each segment in the right pane collapses independently so large messages stay manageable. */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    margin-top: var(--space-8);
}

/* Purpose: Skip style/layout/paint work for far-off editor cards in very large messages.
   Why: All controls remain in the DOM for search, focus, and direct navigation while the browser only lays out relevant cards. */
.right-pane.is-large-message>.seg-card {
    content-visibility: auto;
    contain-intrinsic-block-size: auto var(--seg-card-intrinsic-block-size);
}

.seg-card.is-selected {
    border-color: var(--interactive-selected-border);
    box-shadow: none;
}

.seg-card.hl7-segment-row-selected,
.right-pane.hl7-full-raw-selection-fallback .seg-card.hl7-full-raw-selection-target,
.seg-card.hl7-full-raw-selection-visible {
    border-color: var(--hl7-selected-range-border);
}

.seg-card.hl7-segment-row-selected>.seg-sum,
.right-pane.hl7-full-raw-selection-fallback .seg-card.hl7-full-raw-selection-target>.seg-sum,
.seg-card.hl7-full-raw-selection-visible>.seg-sum {
    background: var(--hl7-selected-range-soft-bg);
}

/* Purpose: Keep segment selection persistent without adding a second row-focus treatment. */
.seg-card.is-selected>.seg-sum {
    background: var(--interactive-open-bg);
}

.seg-sum {
    padding: var(--space-8) var(--space-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    background: linear-gradient(180deg, var(--brand-wash), transparent);
}

.seg-idx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) 5px;
    margin-left: var(--space-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--pill-bg);
    color: var(--muted);
    white-space: nowrap;
    vertical-align: middle;
}

/* Purpose: Apply shared control sizing so buttons, selects and segment index pills stay aligned. */
.btn,
.mode-btn,
.kb-tab,
.kb-comp-toggle,
.kb-link,
.kb-chip,
button.mini,
.comp-actions button,
.diff-pill,
.badge,
.compare-status,
select.input,
.field-val select.input,
.seg-sum .seg-idx-pill {
    height: var(--control-height);
    padding: 0 var(--control-pad-x);
}

.seg-idx-pill.is-dup {
    background: var(--brand-ghost);
    border-color: var(--brand-border);
    color: var(--brand-ink);
}

.badge,
.compare-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--control-height);
    padding: 0 var(--control-pad-x);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
}

.badge.warn {
    color: var(--warn-text);
    border-color: var(--warn-border);
    background: var(--warn-surface)
}

.badge.ok {
    color: var(--ok-text);
    border-color: var(--ok-border);
    background: var(--ok-bg);
}

.seg-body {
    padding: var(--space-8) var(--space-10) var(--space-10);
    overflow-x: auto;
}

.note {
    padding: var(--space-4) var(--control-pad-x);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    margin-top: var(--space-10);
}

.note.note-clickable {
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.note.note-clickable:hover,
.note.note-clickable:focus-visible {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
}

.search-options {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

table.fields,
.comp-table,
.subcomp-table,
.rep-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.fields tbody tr input,
.comp-row input {
    cursor: text;
}

.fields thead th {
    text-align: left;
    padding: var(--space-8) var(--space-8);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

/* Rebalance column widths: give the field label more room, shrink spec. */
.fields thead th:nth-child(1),
.fields>tbody>tr>td:nth-child(1),
.comp-table col.col-label,
.subcomp-table col.col-label,
.rep-table col.col-label {
    width: var(--col-field-label);
}

.fields thead th:nth-child(2),
.fields>tbody>tr>td:nth-child(2),
.comp-table col.col-spec,
.subcomp-table col.col-spec,
.rep-table col.col-spec {
    width: var(--col-field-spec);
}

.fields thead th:nth-child(3),
.fields>tbody>tr>td:nth-child(3),
.comp-table col.col-value,
.subcomp-table col.col-value,
.rep-table col.col-value {
    width: var(--col-field-value);
}

.fields>tbody>tr>td,
.comp-table tbody td,
.subcomp-table tbody td,
.rep-table tbody td {
    padding: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--ink-hairline);
    vertical-align: top;
    min-width: 0;
}

.fields>tbody>tr.has-diff {
    background: var(--diff-bg);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.field-name-inline {
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sensitive-data-badge {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    padding: 0 var(--control-pad-x);
    border: 1px solid var(--privacy-border);
    border-radius: var(--radius);
    background: var(--privacy-bg);
    color: var(--privacy-ink);
    white-space: nowrap;
    cursor: help;
}

.field-actions {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

/* Purpose: Reserve one compact action line and focus-ring gutter only for paths that can show diff/replace controls.
   Why: Matching inline padding and margins preserve action alignment inside the scroll clip without adding empty space to unique paths. */
.value-action-slot {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    height: calc(var(--control-height) + var(--space-4) + var(--space-4));
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    padding-block: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.field-actions .value-action-slot {
    flex: 1 0 100%;
}

.value-action-slot>* {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pill.diff-pill,
.diff-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--control-pad-x);
    border-radius: var(--radius);
    background: var(--diff-bg);
    color: var(--diff-ink);
    border: 1px solid var(--diff-border);
    border-style: dashed;
    height: var(--control-height);
    cursor: help;
    font-weight: 700;
    user-select: text;
}

button.repeat-count-pill {
    appearance: none;
    font: inherit;
}

.req {
    color: var(--brand);
    font-weight: 900
}

.hl7-field.has-diff,
.hl7-comp-chunk.has-diff,
.hl7-subcomp-chunk.has-diff {
    background: var(--diff-bg);
    box-shadow: inset 0 0 0 1px var(--diff-border);
    border-radius: var(--space-4);
}

.hl7-comp.has-diff,
.hl7-subcomp.has-diff {
    background: var(--diff-bg);
    box-shadow: inset 0 0 0 1px var(--diff-border);
    border-radius: var(--space-4);
    padding: 0 var(--space-2);
}

/* Selection wins over diff/warn so the active element keeps its focus styling. */
.hl7-field.is-selected.has-diff {
    background: var(--interactive-selected-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border);
}

.cmp-diff {
    box-shadow: inset 0 0 0 1px transparent;
}

.cmp-diff--modified {
    background: var(--cmp-diff-mod);
}

.cmp-diff--added {
    background: var(--cmp-diff-added);
}

.cmp-diff--removed {
    background: var(--cmp-diff-removed);
}

.cmp-line--right .cmp-diff {
    box-shadow: inset 0 0 0 1px var(--cmp-line-right-border);
}

.field-warn {
    margin-top: var(--space-6);
    color: var(--warn-text);
}

tr.has-warn,
.comp-row.has-warn>td,
.subcomp-row.has-warn>td,
.rep-row.has-warn>td {
    background: var(--warn-surface);
}

.fields>tbody>tr.has-warn:not(.is-selected):hover>td,
.fields>tbody>tr.has-warn:not(.is-selected).hl7-detail-hover>td,
.fields>tbody>tr.has-warn:not(.is-selected).hl7-detail-hover-parent>td,
.rep-row.has-warn:not(.is-repetition-selected):hover>td,
.rep-row.has-warn:not(.is-repetition-selected).hl7-detail-hover>td,
.comp-row.has-warn:not(.is-component-selected):hover>td,
.comp-row.has-warn:not(.is-component-selected).hl7-detail-hover>td,
.subcomp-row.has-warn:not(.is-subcomponent-selected):hover>td,
.subcomp-row.has-warn:not(.is-subcomponent-selected).hl7-detail-hover>td {
    background: var(--warn-surface-hover);
}

.fields>tbody>tr.has-warn.is-interaction-pressed>td,
.rep-row.has-warn.is-interaction-pressed>td,
.comp-row.has-warn.is-interaction-pressed>td,
.subcomp-row.has-warn.is-interaction-pressed>td {
    background: var(--warn-surface-hover);
}

.components-row td {
    padding: 0 var(--space-8) var(--space-10);
    border-bottom: 1px solid var(--ink-hairline);
}

.fields>tbody>tr.components-row:hover {
    background: transparent;
}

button.mini {
    margin-left: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
}

/* Purpose: Keep editor action buttons legible in component/subcomponent rows.
   Why: Hover state previously blended with the row background, making labels hard to read. */
button.replace-all-btn,
button.editor-action-btn {
    border-color: var(--component-strong);
    background: var(--component-soft);
    color: var(--component);
}

button.replace-all-btn:not(:disabled):hover,
button.replace-all-btn:focus-visible,
button.editor-action-btn:not(:disabled):hover,
button.editor-action-btn:focus-visible,
.comp-actions button:not(:disabled):hover,
.comp-actions button:focus-visible {
    background: var(--component);
    border-color: var(--component);
    color: var(--text-inverse);
}

button.editor-action-btn:not(:disabled):active,
button.editor-action-btn:not(:disabled).is-interaction-pressed,
.comp-actions button:not(:disabled):active,
.comp-actions button:not(:disabled).is-interaction-pressed {
    border-color: var(--component-focus-border);
    background: var(--component-glow);
    color: var(--component);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.editor-action-btn:focus-visible,
.comp-actions button:focus-visible {
    border-color: var(--component-focus-border);
    background: var(--component-soft);
    color: var(--component);
    box-shadow: var(--component-focus-ring);
}

/* Purpose: Keep local edit actions in the same component-state family as nested disclosures.
   Why: Add/remove/replacement buttons sit next to component controls, so their pressed feedback should acknowledge the click without changing color meaning. */
button.replace-all-btn:not(.has-warn):not(:disabled):hover,
button.editor-action-btn.rep-add-btn:not(.has-warn):not(:disabled):hover,
button.editor-action-btn.rep-remove-btn:not(.has-warn):not(:disabled):hover {
    background: var(--component-hover-bg);
    border-color: var(--component-focus-border);
    color: var(--component);
    box-shadow: none;
    filter: none;
}

button.replace-all-btn:not(.has-warn):not(:disabled):active,
button.replace-all-btn:not(.has-warn):not(:disabled).is-interaction-pressed,
button.editor-action-btn.rep-add-btn:not(.has-warn):not(:disabled):active,
button.editor-action-btn.rep-add-btn:not(.has-warn):not(:disabled).is-interaction-pressed,
button.editor-action-btn.rep-remove-btn:not(.has-warn):not(:disabled):active,
button.editor-action-btn.rep-remove-btn:not(.has-warn):not(:disabled).is-interaction-pressed {
    background: var(--component-hover-bg);
    border-color: var(--component-focus-border);
    color: var(--component);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.replace-all-btn:not(.has-warn):focus-visible,
button.editor-action-btn.rep-add-btn:not(.has-warn):focus-visible,
button.editor-action-btn.rep-remove-btn:not(.has-warn):focus-visible {
    background: var(--component-soft);
    border-color: var(--component-focus-border);
    color: var(--component);
    box-shadow: var(--component-focus-ring);
}

button.replace-all-btn:disabled,
button.editor-action-btn:disabled,
.comp-actions button:disabled {
    background: var(--interactive-disabled-bg);
    border-color: var(--interactive-disabled-border);
    color: var(--muted);
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

/* Purpose: Keep nested editor disclosures in the component family while separating hover from pressed feedback.
   Why: These controls update in place; hover should show affordance, while pressed confirms the toggle action. */
button.kb-comp-toggle.editor-action-btn.subcomp-toggle,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill {
    border-color: var(--component-strong);
    background: var(--component-soft);
    color: var(--component);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle:not(.repeat-count-pill):not(.has-warn):not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle:not(.repeat-count-pill):not(.has-warn):not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill:not(:disabled):hover {
    border-color: var(--component-focus-border);
    background: var(--component-hover-bg);
    color: var(--component);
    box-shadow: none;
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle:not(.repeat-count-pill):not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.subcomp-toggle:not(.repeat-count-pill):not(.has-warn).is-interaction-pressed,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle:not(.repeat-count-pill):not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle:not(.repeat-count-pill):not(.has-warn).is-interaction-pressed,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill.is-interaction-pressed {
    border-color: var(--component-focus-border);
    background: var(--component-hover-bg);
    color: var(--component);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.is-open,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.is-open {
    border-color: var(--component-focus-border);
    background: var(--component-glow);
    color: var(--component);
    box-shadow: none;
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.is-open:not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.is-open:not(:disabled):hover {
    border-color: var(--component-focus-border);
    background: var(--component-hover-bg);
    color: var(--component);
    box-shadow: none;
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.is-open:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.subcomp-toggle.is-open.is-interaction-pressed,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.is-open:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.is-open.is-interaction-pressed {
    border-color: var(--component-focus-border);
    background: var(--component-hover-bg);
    color: var(--component);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill.has-warn {
    border-color: var(--warn-border);
    background: var(--warn-surface);
    color: var(--warn-ink);
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn:not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn:not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill.has-warn:not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill.has-warn:not(:disabled):active {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn.is-open,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn.is-open {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface);
    color: var(--warn-ink);
    box-shadow: none;
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn.is-open:not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn.is-open:not(:disabled):hover {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: none;
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn.is-open:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn.is-open.is-interaction-pressed,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn.is-open:not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn.is-open.is-interaction-pressed {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface-hover);
    color: var(--warn-ink);
    box-shadow: var(--interactive-pressed-shadow);
    filter: none;
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle:focus-visible,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle:focus-visible {
    border-color: var(--component-focus-border);
    background: var(--component-soft);
    color: var(--component);
    box-shadow: var(--component-focus-ring-inset);
}

button.kb-comp-toggle.editor-action-btn.subcomp-toggle.has-warn:focus-visible,
button.kb-comp-toggle.editor-action-btn.rep-comp-toggle.has-warn:focus-visible {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface);
    color: var(--warn-ink);
    box-shadow: var(--warn-focus-ring-inset);
}

/* Purpose: Give exact-path occurrence counters their own action feedback.
   Why: They pulse rendered HL7 matches; hover should invite discovery, while pressed must clearly confirm the click. */
button.repeat-count-pill:not(.has-warn):not(:disabled):hover,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled):hover,
button.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled):hover {
    background: var(--component-hover-bg);
    border-color: var(--component-focus-border);
    color: var(--component);
    box-shadow: none;
}

button.repeat-count-pill:not(.has-warn):not(:disabled):active,
button.repeat-count-pill:not(.has-warn):not(:disabled).is-interaction-pressed,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled).is-interaction-pressed,
button.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled):active,
button.editor-action-btn.repeat-count-pill:not(.has-warn):not(:disabled).is-interaction-pressed {
    background: var(--component-hover-bg);
    border-color: var(--component-focus-border);
    color: var(--component);
    box-shadow: var(--interactive-pressed-shadow);
}

button.repeat-count-pill.has-warn:focus-visible,
button.kb-comp-toggle.editor-action-btn.repeat-count-pill.has-warn:focus-visible,
button.editor-action-btn.repeat-count-pill.has-warn:focus-visible {
    border-color: var(--warn-border-strong);
    background: var(--warn-surface);
    color: var(--warn-ink);
    box-shadow: var(--warn-focus-ring);
}

/* Purpose: Keep field-level repetition/count controls in the brand family.
   Why: Field counters and repetition toggles act at field scope; blue is reserved for component/subcomponent depth. */
button.kb-comp-toggle.rep-toggle:not(.has-warn),
button.kb-comp-toggle.repeat-count-pill:not(.editor-action-btn):not(.has-warn) {
    border-color: var(--brand-border);
    background: var(--brand-wash);
    color: var(--brand-ink);
}

button.kb-comp-toggle.rep-toggle.is-open:not(.has-warn) {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-open-bg);
    color: var(--brand-ink);
}

button.kb-comp-toggle.rep-toggle:not(.has-warn):not(:disabled):hover,
button.kb-comp-toggle.repeat-count-pill:not(.editor-action-btn):not(.has-warn):not(:disabled):hover,
button.kb-comp-toggle.rep-toggle.is-open:not(.has-warn):not(:disabled):hover {
    border-color: var(--brand-border);
    background: var(--interactive-brand-hover-bg);
    color: var(--brand-ink);
    box-shadow: none;
}

button.kb-comp-toggle.rep-toggle:not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.rep-toggle:not(.has-warn).is-interaction-pressed,
button.kb-comp-toggle.repeat-count-pill:not(.editor-action-btn):not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.repeat-count-pill:not(.editor-action-btn):not(.has-warn).is-interaction-pressed,
button.kb-comp-toggle.rep-toggle.is-open:not(.has-warn):not(:disabled):active,
button.kb-comp-toggle.rep-toggle.is-open:not(.has-warn).is-interaction-pressed {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-active-bg);
    color: var(--brand-ink);
    box-shadow: var(--interactive-pressed-shadow);
}

button.kb-comp-toggle.rep-toggle:not(.has-warn):focus-visible {
    border-color: var(--interactive-selected-border);
    background: var(--interactive-open-bg);
    color: var(--brand-ink);
    box-shadow: var(--interactive-focus-ring);
}

.comp-k {
    color: var(--brand-ink);
    flex: 0 0 auto;
    min-width: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    white-space: nowrap;
}

.comp-k-path {
    color: var(--muted);
}

.comp-k-code {
    color: inherit;
}

/* Chapter 2A datatype component panel (named components) */
.components-panel {
    margin-top: var(--space-8);
    padding: var(--space-10);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, .08);
    background: var(--ink-faint);
}

.components-row .components-panel {
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px;
}

.components-head,
.subcomponents-head {
    color: var(--muted);
    margin-bottom: var(--space-8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.components-grid,
.subcomponents-grid {
    display: grid;
    gap: var(--space-6);
}

.comp-label {
    /* Keep the combined code+name column flexible without forcing overflow. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.comp-row.has-warn .comp-name,
.comp-row.has-warn .comp-spec .spec-dt,
.comp-row.has-warn .comp-spec .spec-len,
.subcomp-row.has-warn .comp-name,
.subcomp-row.has-warn .comp-spec .spec-dt,
.subcomp-row.has-warn .comp-spec .spec-len {
    color: var(--warn-ink);
}

.comp-row.has-diff>td,
.subcomp-row.has-diff>td {
    background: var(--diff-bg);
}

/* Purpose: Let persistent selection win over warning/diff row fills.
   Why: Warnings and diffs are status context, while selection tells users where they are actively working. */
.fields>tbody>tr.is-selected.has-warn>td,
.rep-row.is-repetition-selected.has-warn>td {
    background: var(--interactive-selected-bg);
}

.comp-row.is-component-selected.has-warn>td,
.comp-row.is-component-selected.has-diff>td,
.subcomp-row.is-subcomponent-selected.has-warn>td,
.subcomp-row.is-subcomponent-selected.has-diff>td {
    background: var(--component-glow);
}

/* Purpose: Keep mirrored hover visible even when it lands on the currently selected editor row.
   Why: Paths such as MSH-9.3 can fall back to the selected field row when the component panel is closed. */
.fields>tbody>tr.is-selected.hl7-detail-hover>td,
.fields>tbody>tr.is-selected.hl7-detail-hover-parent>td,
.rep-row.is-repetition-selected.hl7-detail-hover>td {
    background: var(--interactive-selected-hover-bg);
}

.comp-row.is-component-selected.hl7-detail-hover>td,
.subcomp-row.is-subcomponent-selected.hl7-detail-hover>td {
    background: var(--component-active-bg);
}

.comp-input.is-component-selected.hl7-detail-hover,
.comp-input.is-component-selected.hl7-detail-hover:focus,
.comp-input.is-component-selected.hl7-detail-hover:focus-visible,
.subcomp-input.is-subcomponent-selected.hl7-detail-hover,
.subcomp-input.is-subcomponent-selected.hl7-detail-hover:focus,
.subcomp-input.is-subcomponent-selected.hl7-detail-hover:focus-visible {
    border-color: var(--component-focus-border);
    background: var(--card);
}

.comp-actions,
.rep-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.comp-actions button {
    padding: 0 var(--control-pad-x);
}

.comp-warn {
    margin-top: var(--space-4);
    color: var(--warn-text);
}

/* Purpose: Keep action hovers high-contrast on tinted component/subcomponent rows.
   Why: Previous hover colors blended into the grey diff panels, making labels unreadable. */
.comp-name {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text)
}

.comp-spec {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.subcomponents-row .subcomponents-panel {
    margin-top: 0;
}

.subcomponents-row td {
    padding: var(--space-4) 0 0;
    border-bottom: 0;
}

.subcomponents-panel {
    margin-top: var(--space-6);
    padding: var(--space-10);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, .08);
    background: var(--ink-faint);
}

.footer-note {
    color: var(--muted);
    margin-top: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 780px;
}