/*
 * X12 Mapping Workspace component styles.
 * Targets selectors inside .mw-root only — uses tokens from mapping-tokens.css.
 * Not scoped per-component because the markup spans LoopCard / SegmentBlock / ElementRow
 * and we want one cohesive stylesheet.
 */

/* ──────────────────────────────────────────────────────────────
   Mapping inspector (right rail, 320px)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-inspector-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--c-text-3);
    font-size: .8125rem;
}

.mw-root .mw-inspector-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: .35;
}

.mw-root .mw-inspector-empty-title {
    color: var(--c-text-2);
    font-weight: 600;
    margin-bottom: 4px;
}

.mw-root .mw-inspector-empty-hint {
    font-size: .75rem;
    color: var(--c-text-3);
}

.mw-root .mw-inspector-scroll {
    /* Natural height — does NOT eat remaining vertical space. That ensures the
       LivePreview pane below in the inspector aside hugs the inspector content
       instead of getting pushed to the bottom by a flex: 1 above it. The aside
       itself scrolls if combined content overflows. */
    flex: 0 1 auto;
    min-height: 0;
}

.mw-root .mw-inspector-header {
    padding: 14px;
    border-bottom: 1px solid var(--c-border);
}

.mw-root .mw-inspector-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mw-root .mw-inspector-code {
    font-family: var(--font-mono);
    font-size: .875rem;
    font-weight: 700;
    color: var(--c-primary-strong);
}

.mw-root .mw-inspector-type {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--c-text-3);
}

.mw-root .mw-inspector-required {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-error);
}

.mw-root .mw-inspector-conditional {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--mw-tag-conditional-text);
}

.mw-root .mw-inspector-desc {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: 4px;
}

.mw-root .mw-inspector-breadcrumb {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--c-text-3);
}

.mw-root .mw-inspector-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
}

.mw-root .mw-inspector-section-label {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 8px;
}

.mw-root .mw-inspector-mapping-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mw-root .mw-inspector-mini-btn {
    background: transparent;
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-2);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: .625rem;
    font-weight: 500;
    cursor: pointer;
}

.mw-root .mw-inspector-mini-btn:hover:not([disabled]) {
    background: var(--c-surface-2);
    border-color: var(--c-text-2);
    color: var(--c-text);
}

.mw-root .mw-inspector-mini-btn-primary {
    background: var(--c-primary);
    color: #FFFFFF;
    border-color: var(--c-primary);
}

.mw-root .mw-inspector-mini-btn-primary:hover:not([disabled]) {
    background: var(--c-primary-strong);
    border-color: var(--c-primary-strong);
}

.mw-root .mw-inspector-clear {
    color: var(--c-error);
    border-color: var(--c-error);
}

.mw-root .mw-inspector-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mw-root .mw-inspector-action-hint {
    font-size: .6875rem;
    color: var(--c-text-3);
    padding: 4px 8px;
    border: 1px dashed var(--c-border-strong);
    border-radius: 3px;
}

.mw-root .mw-inspector-action-btn {
    text-align: left;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: .75rem;
    cursor: pointer;
    font-family: var(--font-ui);
}

.mw-root .mw-inspector-action-btn:hover:not([disabled]) {
    background: var(--c-surface-2);
    border-color: var(--c-primary);
}

.mw-root .mw-inspector-action-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.mw-root .mw-inspector-literal-editor {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mw-root .mw-inspector-literal-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--c-primary);
    background: var(--c-surface);
    color: var(--c-text);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: .75rem;
    min-width: 0;
}

.mw-root .mw-inspector-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: .75rem;
}

.mw-root .mw-inspector-callout-conditional {
    background: var(--mw-tag-conditional-bg);
    color: var(--mw-tag-conditional-text);
}

.mw-root .mw-inspector-callout-pointer {
    background: var(--mw-tag-pointer-bg);
    color: var(--mw-tag-pointer-text);
}

.mw-root .mw-inspector-callout-icon {
    font-weight: 700;
    flex-shrink: 0;
}

/* Qualifier value-set picker (sits above Mapping section when element has a value set) */
.mw-root .mw-qualifier-search {
    width: 100%;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: .75rem;
    font-family: var(--font-ui);
    margin-bottom: 6px;
    outline: none;
}

.mw-root .mw-qualifier-search:focus {
    border-color: var(--c-primary);
    background: var(--c-surface);
}

.mw-root .mw-qualifier-list {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: 3px;
}

.mw-root .mw-qualifier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--c-text);
    user-select: none;
}

.mw-root .mw-qualifier-row:hover:not([disabled]) {
    background: var(--c-surface-2);
}

.mw-root .mw-qualifier-row[disabled] {
    cursor: not-allowed;
    opacity: .6;
}

.mw-root .mw-qualifier-row-active {
    background: var(--c-primary-soft);
    border-left-color: var(--c-primary);
}

.mw-root .mw-qualifier-row-active:hover:not([disabled]) {
    background: var(--c-primary-soft);
}

.mw-root .mw-qualifier-code {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-primary-strong);
    min-width: 36px;
    flex-shrink: 0;
}

.mw-root .mw-qualifier-row-active .mw-qualifier-code {
    color: var(--c-primary-strong);
}

.mw-root .mw-qualifier-label {
    flex: 1;
    color: var(--c-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-root .mw-qualifier-check {
    color: var(--c-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.mw-root .mw-inspector-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mw-root .mw-inspector-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--c-text);
}

.mw-root .mw-inspector-check-label {
    flex: 1;
}

.mw-root .mw-status-dot-bad { background: var(--c-error); }

/* ──────────────────────────────────────────────────────────────
   Source sidebar (middle-left column, 260px)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-source-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mw-root .mw-source-tree {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.mw-root .mw-source-group {
    border-bottom: 1px solid var(--c-border);
}

.mw-root .mw-source-group-header {
    width: 100%;
    background: var(--c-surface-2);
    border: 0;
    text-align: left;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--c-text-2);
    user-select: none;
}

.mw-root .mw-source-group-header:hover {
    background: var(--c-surface);
}

.mw-root .mw-source-group-name {
    color: var(--c-text);
}

.mw-root .mw-source-group-count {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: var(--c-text-3);
}

.mw-root .mw-source-fields {
    display: flex;
    flex-direction: column;
}

.mw-root .mw-source-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    cursor: grab;
    font-size: .8125rem;
    color: var(--c-text);
    border-left: 2px solid transparent;
    user-select: none;
}

.mw-root .mw-source-field:hover {
    background: var(--c-primary-soft);
    border-left-color: var(--c-primary);
}

.mw-root .mw-source-field:active {
    cursor: grabbing;
}

.mw-root .mw-source-field-icon {
    color: var(--c-text-3);
    flex-shrink: 0;
}

.mw-root .mw-source-field-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mw-root .mw-source-usage {
    font-family: var(--font-mono);
    font-size: .625rem;
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid var(--c-success);
    border-radius: 999px;
    padding: 0 6px;
    flex-shrink: 0;
    font-weight: 600;
}

.mw-root .mw-source-footer {
    border-top: 1px solid var(--c-border);
    padding: 6px 12px;
    font-size: .6875rem;
    color: var(--c-text-3);
    background: var(--c-surface);
}

/* ──────────────────────────────────────────────────────────────
   Workspace toolbar (above loop stack)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: .75rem;
    flex-wrap: wrap;
}

.mw-root .mw-toolbar-coverage {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mw-root .mw-toolbar-label {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--c-text-3);
    text-transform: uppercase;
}

.mw-root .mw-coverage-bar {
    width: 140px;
    height: 4px;
    background: var(--c-border);
    border-radius: 2px;
    overflow: hidden;
}

.mw-root .mw-coverage-fill {
    height: 100%;
    background: var(--c-success);
    transition: width 200ms ease;
}

.mw-root .mw-coverage-fill.mw-coverage-partial { background: var(--c-primary); }
.mw-root .mw-coverage-fill.mw-coverage-empty { background: var(--c-border-strong); }

.mw-root .mw-coverage-count {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--c-text-2);
}

.mw-root .mw-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--c-border);
    flex-shrink: 0;
}

.mw-root .mw-filter-group {
    display: inline-flex;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.mw-root .mw-filter-chip {
    background: transparent;
    border: 0;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    font-family: var(--font-ui);
}

.mw-root .mw-filter-chip:hover {
    color: var(--c-text);
}

.mw-root .mw-filter-chip-active {
    background: var(--c-surface);
    color: var(--c-primary-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    font-weight: 600;
}

.mw-root .mw-filter-chip-count {
    font-family: var(--font-mono);
    font-size: .5625rem;
    background: var(--c-border);
    color: var(--c-text-2);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
}

.mw-root .mw-filter-chip-active .mw-filter-chip-count {
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
}

.mw-root .mw-toolbar-ghost-btn {
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: .6875rem;
    cursor: pointer;
    font-family: var(--font-ui);
    flex-shrink: 0;
}

.mw-root .mw-toolbar-ghost-btn:hover:not([disabled]) {
    background: var(--c-surface-2);
    border-color: var(--c-text-2);
    color: var(--c-text);
}

.mw-root .mw-toolbar-ghost-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────
   Validation badge state nudges + inline Fix-next button
   (sits inside .mw-appbar)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-validation-badge.mw-validation-badge-error {
    border-color: var(--c-error);
    background: var(--c-error-soft);
    color: var(--c-error);
}

.mw-root .mw-validation-badge.mw-validation-badge-warn {
    border-color: var(--c-warning);
}

.mw-root .mw-validation-badge.mw-validation-badge-error .mw-validation-caption {
    color: var(--c-error);
    opacity: .9;
}

.mw-root .mw-validation-fix-btn {
    margin-left: 6px;
    background: var(--c-error);
    color: #FFFFFF;
    border: 1px solid var(--c-error);
    border-radius: 3px;
    padding: 1px 8px;
    font-size: .625rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
    line-height: 1.5;
}

.mw-root .mw-validation-fix-btn:hover {
    filter: brightness(.95);
}

/* ──────────────────────────────────────────────────────────────
   Loop nav rail (left column)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-rail-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mw-root .mw-rail-search {
    position: relative;
    padding: 8px 10px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--c-surface);
}

.mw-root .mw-rail-search-icon {
    color: var(--c-text-3);
    font-size: .8125rem;
    flex-shrink: 0;
}

.mw-root .mw-rail-search-input {
    flex: 1;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: .75rem;
    font-family: var(--font-ui);
    outline: none;
    min-width: 0;
}

.mw-root .mw-rail-search-input:focus {
    border-color: var(--c-primary);
    background: var(--c-surface);
}

.mw-root .mw-rail-search-clear {
    position: absolute;
    right: 16px;
    background: transparent;
    border: 0;
    color: var(--c-text-3);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
}

.mw-root .mw-rail-search-clear:hover {
    color: var(--c-text);
}

.mw-root .mw-rail-section-label {
    padding: 10px 12px 4px;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-3);
}

.mw-root .mw-rail-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 8px;
}

.mw-root .mw-rail-row {
    width: 100%;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: .75rem;
    user-select: none;
}

.mw-root .mw-rail-row:hover {
    background: var(--c-surface);
}

.mw-root .mw-rail-row-active {
    background: var(--c-primary-soft);
    border-left-color: var(--c-primary);
}

.mw-root .mw-rail-row-active .mw-rail-id {
    color: var(--c-primary-strong);
}

.mw-root .mw-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-border-strong);
    flex-shrink: 0;
}

.mw-root .mw-status-dot-good { background: var(--c-success); }
.mw-root .mw-status-dot-warn { background: var(--c-warning); }
.mw-root .mw-status-dot-empty { background: var(--c-border-strong); }

.mw-root .mw-rail-id {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-text);
    flex-shrink: 0;
}

.mw-root .mw-rail-name {
    font-size: .6875rem;
    color: var(--c-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mw-root .mw-rail-spacer {
    flex: 1;
}

.mw-root .mw-rail-count {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: var(--c-text-3);
    flex-shrink: 0;
}

.mw-root .mw-rail-empty {
    padding: 12px;
    text-align: center;
    color: var(--c-text-3);
    font-size: .6875rem;
    font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   Active loop card highlight (driven by state.ActiveLoopId)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-loop-card.mw-active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 172, 193, .12), var(--shadow-1);
}

/* ──────────────────────────────────────────────────────────────
   Workspace canvas — stack of loop cards
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-loop-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ──────────────────────────────────────────────────────────────
   Table section (X12 TR3 Table 1/2/3 grouping)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-table-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-root .mw-table-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    font-size: .75rem;
}

.mw-root .mw-table-header:hover {
    filter: brightness(0.98);
}

.mw-root .mw-table-num {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-primary-strong);
    font-size: .75rem;
    letter-spacing: .04em;
}

.mw-root .mw-table-label {
    color: var(--c-text);
    font-weight: 500;
}

.mw-root .mw-table-count {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: var(--c-text-3);
    flex-shrink: 0;
}

.mw-root .mw-table-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ──────────────────────────────────────────────────────────────
   Loop card
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-loop-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-warning);
    border-radius: 4px;
    box-shadow: var(--shadow-1);
    scroll-margin-top: 70px;
    overflow: hidden;
}

.mw-root .mw-loop-card.mw-complete {
    border-left-color: var(--c-success);
}

.mw-root .mw-loop-card.mw-empty {
    border-left-color: var(--c-border-strong);
}

.mw-root .mw-loop-card.mw-active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 172, 193, .1), var(--shadow-1);
}

.mw-root .mw-loop-card .mw-loop-card {
    /* Nested child loop indent + softer shadow */
    margin-left: 16px;
    box-shadow: none;
}

.mw-root .mw-nested-loop {
    /* Wrapper around child LoopCards inside an interleaved body — adds vertical breathing room */
    padding: 6px 0;
}

/* Card header */
.mw-root .mw-loop-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    background: var(--c-surface);
}

.mw-root .mw-loop-header:hover {
    background: var(--c-surface-2);
}

.mw-root .mw-twist {
    font-size: .625rem;
    color: var(--c-text-3);
    width: 12px;
    flex-shrink: 0;
}

.mw-root .mw-loop-id {
    font-family: var(--font-mono);
    font-size: .875rem;
    font-weight: 700;
    color: var(--c-primary-strong);
    flex-shrink: 0;
}

.mw-root .mw-loop-name {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mw-root .mw-cardinality {
    font-family: var(--font-mono);
    font-size: .625rem;
    padding: 1px 6px;
    border-radius: 2px;
    background: var(--c-surface-2);
    color: var(--c-text-3);
    flex-shrink: 0;
}

.mw-root .mw-spacer {
    flex: 1;
}

.mw-root .mw-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mw-root .mw-progress-bar {
    width: 80px;
    height: 4px;
    background: var(--c-border);
    border-radius: 2px;
    overflow: hidden;
}

.mw-root .mw-progress-fill {
    height: 100%;
    background: var(--c-success);
    transition: width 200ms ease;
}

.mw-root .mw-progress-fill.mw-progress-partial {
    background: var(--c-primary);
}

.mw-root .mw-progress-fill.mw-progress-empty {
    background: var(--c-border-strong);
}

.mw-root .mw-progress-count {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 600;
    color: var(--c-text-2);
    min-width: 36px;
    text-align: right;
}

.mw-root .mw-completion-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mw-root .mw-completion-chip.mw-good {
    background: var(--c-success);
    color: #FFFFFF;
}

.mw-root .mw-completion-chip.mw-bad {
    background: var(--c-error);
    color: #FFFFFF;
}

.mw-root .mw-issue-pill {
    background: var(--c-error-soft);
    color: var(--c-error);
    border: 1px solid var(--c-error);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .625rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Card body */
.mw-root .mw-loop-body {
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.mw-root .mw-loop-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .6875rem;
    color: var(--c-text-3);
    background: var(--c-surface);
}

/* ──────────────────────────────────────────────────────────────
   Segment block
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-segment {
    border-top: 1px solid var(--c-border);
}

.mw-root .mw-segment:first-child {
    border-top: none;
}

.mw-root .mw-segment-header {
    padding: 6px 14px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    cursor: pointer;
    user-select: none;
}

.mw-root .mw-segment-header:hover {
    filter: brightness(0.98);
}

.mw-root .mw-segment-count {
    font-size: .625rem;
    color: var(--c-text-3);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Repeating segment instance picker — sits at the right of the segment header */
.mw-root .mw-instance-picker {
    display: inline-flex;
    align-items: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 2px;
    gap: 2px;
}

.mw-root .mw-instance-chip {
    background: transparent;
    border: 0;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 600;
    color: var(--c-text-2);
    cursor: pointer;
    user-select: none;
}

.mw-root .mw-instance-chip:hover {
    color: var(--c-text);
}

.mw-root .mw-instance-chip-active {
    background: var(--c-primary);
    color: #FFFFFF;
}

.mw-root .mw-instance-chip-active:hover {
    color: #FFFFFF;
    filter: brightness(.96);
}

.mw-root .mw-instance-chip-add {
    color: var(--c-primary-strong);
    font-weight: 500;
}

.mw-root .mw-instance-chip-add:hover {
    background: var(--c-surface);
    color: var(--c-primary-strong);
}

.mw-root .mw-segment-code {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-text);
    flex-shrink: 0;
}

.mw-root .mw-segment-name {
    color: var(--c-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mw-root .mw-req-pill {
    font-size: .5625rem;
    padding: 1px 5px;
    border: 1px solid var(--c-error);
    color: var(--c-error);
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.mw-root .mw-repeating-pill {
    font-size: .5625rem;
    padding: 1px 6px;
    background: var(--mw-tag-repeating-bg);
    color: var(--mw-tag-repeating-text);
    border-radius: 2px;
    font-weight: 600;
    flex-shrink: 0;
}

.mw-root .mw-overflow-btn {
    background: transparent;
    border: 0;
    color: var(--c-text-3);
    cursor: pointer;
    padding: 0 4px;
    font-size: .875rem;
}

.mw-root .mw-overflow-btn:hover {
    color: var(--c-text);
}

/* ──────────────────────────────────────────────────────────────
   Element table
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-element-table {
    display: flex;
    flex-direction: column;
}

.mw-root .mw-element-row {
    display: grid;
    grid-template-columns: 56px 1fr 36px 28px 340px 44px;
    align-items: start;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: .75rem;
    column-gap: 6px;
}

.mw-root .mw-element-row:last-child {
    border-bottom: none;
}

.mw-root .mw-element-row.mw-element-th {
    background: var(--c-surface-2);
    color: var(--c-text-3);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 0;
}

.mw-root .mw-element-row.mw-row-missing {
    background: var(--c-error-soft);
}

.mw-root .mw-element-row.mw-row-composite-incomplete {
    background: var(--c-warning-soft);
}

.mw-root .mw-element-row.mw-row-drop-target {
    background: var(--c-primary-soft);
    box-shadow: inset 3px 0 0 var(--c-primary);
}

/* Composite expand toggle in the position cell */
.mw-root .mw-col-pos-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding-left: 14px;
    color: var(--c-text-3);
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-align: left;
}

.mw-root .mw-col-pos-toggle:hover {
    color: var(--c-text);
}

.mw-root .mw-col-pos-toggle .mw-twist {
    color: var(--mw-sub-row-pos);
    font-size: .5625rem;
    width: 10px;
}

/* Composite sub-row */
.mw-root .mw-element-row.mw-row-sub {
    background: var(--mw-sub-row-bg);
}

.mw-root .mw-element-row.mw-row-sub.mw-row-sub-missing {
    background: var(--c-error-soft);
}

.mw-root .mw-col-pos-sub {
    color: var(--mw-sub-row-pos);
    font-weight: 700;
    padding-left: 22px;
}

.mw-root .mw-elem-desc-sub {
    padding-left: 8px;
    color: var(--c-text-2);
    font-style: italic;
}

.mw-root .mw-element-row.mw-row-focused {
    background: var(--c-primary-soft);
    box-shadow: inset 3px 0 0 var(--c-primary);
    cursor: pointer;
}

.mw-root .mw-element-row {
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease;
}

/* Header row of the element table is read-only — no hover affordance. */
.mw-root .mw-element-row:not(.mw-element-th):hover {
    background: rgba(0, 172, 193, .04);
}

.mw-root .mw-element-row.mw-row-focused:hover,
.mw-root .mw-element-row.mw-row-drop-target:hover {
    /* Don't override stronger states. */
    background: var(--c-primary-soft);
}

.mw-root .mw-col-pos {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--c-text-3);
    padding-left: 14px;
}

.mw-root .mw-col-element {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mw-root .mw-col-element-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mw-root .mw-elem-desc {
    color: var(--c-text);
    font-size: .75rem;
}

.mw-root .mw-elem-sub {
    font-size: .5625rem;
    color: var(--mw-tag-conditional-text);
    padding-left: 14px;
}

.mw-root .mw-elem-sub.mw-elem-sub-pointer {
    color: var(--mw-tag-pointer-text);
}

.mw-root .mw-elem-sub .mw-mono {
    color: var(--c-primary-strong);
}

.mw-root .mw-col-type {
    font-family: var(--font-mono);
    font-size: .5625rem;
    color: var(--c-text-3);
    text-align: center;
}

.mw-root .mw-col-req {
    text-align: center;
    font-size: .75rem;
}

.mw-root .mw-col-req.mw-req-required { color: var(--c-error); }
.mw-root .mw-col-req.mw-req-conditional { color: var(--mw-tag-conditional-text); }
.mw-root .mw-col-req.mw-req-optional { color: var(--c-text-3); }

.mw-root .mw-col-value {
    padding-right: 8px;
}

.mw-root .mw-col-actions {
    text-align: center;
    color: var(--c-text-3);
}

/* ──────────────────────────────────────────────────────────────
   Element tags (composite / conditional / pointer / qualifier)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .5625rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid;
    font-weight: 600;
    white-space: nowrap;
}

.mw-root .mw-tag-composite {
    background: var(--mw-tag-composite-bg);
    color: var(--mw-tag-composite-text);
    border-color: var(--mw-tag-composite-border);
}

.mw-root .mw-tag-conditional {
    background: var(--mw-tag-conditional-bg);
    color: var(--mw-tag-conditional-text);
    border-color: var(--mw-tag-conditional-border);
}

.mw-root .mw-tag-pointer {
    background: var(--mw-tag-pointer-bg);
    color: var(--mw-tag-pointer-text);
    border-color: var(--mw-tag-pointer-border);
}

.mw-root .mw-tag-qualifier {
    background: var(--mw-tag-qualifier-bg);
    color: var(--mw-tag-qualifier-text);
    border-color: var(--mw-tag-qualifier-border);
}

/* ──────────────────────────────────────────────────────────────
   Mapping pill (Step 3 polish; basic version here)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: .6875rem;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-root .mw-pill-field {
    background: var(--mw-pill-field-bg);
    color: var(--mw-pill-field-text);
    border-color: var(--mw-pill-field-border);
}

.mw-root .mw-pill-literal {
    background: var(--mw-pill-literal-bg);
    color: var(--mw-pill-literal-text);
    border-color: var(--mw-pill-literal-border);
}

.mw-root .mw-pill-expr {
    background: var(--mw-pill-expr-bg);
    color: var(--mw-pill-expr-text);
    border-color: var(--mw-pill-expr-border);
}

.mw-root .mw-pill-group {
    background: var(--mw-pill-group-bg);
    color: var(--mw-pill-group-text);
    border-color: var(--mw-pill-group-border);
}

.mw-root .mw-pill-unmapped {
    background: transparent;
    border: 1px dashed var(--c-border-strong);
    color: var(--c-text-3);
}

.mw-root .mw-pill-unmapped.mw-pill-required {
    border-color: var(--c-error);
    color: var(--c-error);
}

.mw-root .mw-pill-icon {
    font-weight: 700;
    opacity: .8;
}

/* ──────────────────────────────────────────────────────────────
   Composite heatmap summary (in value cell when element is composite)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-composite-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .625rem;
    color: var(--c-text-2);
}

.mw-root .mw-composite-prefix {
    font-family: var(--font-mono);
    color: var(--c-text-3);
}

.mw-root .mw-heatmap {
    display: inline-flex;
    gap: 2px;
}

.mw-root .mw-heat-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--c-border-strong);
}

.mw-root .mw-heat-cell.mw-heat-mapped { background: var(--c-success); }
.mw-root .mw-heat-cell.mw-heat-missing { background: var(--c-error); }

.mw-root .mw-composite-count {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--c-text-2);
}

.mw-root .mw-composite-expand {
    color: var(--c-text-3);
    font-size: .5625rem;
}

/* ──────────────────────────────────────────────────────────────
   Loop body decorations (grouping bar etc.)
   ────────────────────────────────────────────────────────────── */

.mw-root .mw-grouping-bar {
    padding: 6px 14px;
    background: var(--mw-pill-group-bg);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .6875rem;
    color: var(--mw-pill-group-text);
}

.mw-root .mw-grouping-bar-empty {
    background: var(--c-surface-2);
    color: var(--c-text-3);
    border-left: 2px dashed var(--c-border-strong);
}

.mw-root .mw-grouping-empty-hint {
    font-style: italic;
    color: var(--c-text-3);
}

.mw-root .mw-grouping-change-btn {
    background: transparent;
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-2);
    border-radius: 3px;
    padding: 2px 10px;
    font-size: .625rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-ui);
}

.mw-root .mw-grouping-change-btn:hover {
    background: var(--c-surface);
    border-color: var(--c-primary);
    color: var(--c-primary-strong);
}

/* Expression editor dialog */
.mw-expr-section-label {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin: 8px 0 4px;
}

.mw-expr-params {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-expr-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    min-height: 40px;
}

.mw-expr-preview-label {
    color: var(--mud-palette-text-disabled);
    font-weight: 700;
}

.mw-expr-preview-value {
    color: var(--mud-palette-primary);
    font-weight: 600;
    word-break: break-all;
}

/* Shortcuts dialog */
.mw-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-shortcuts-group {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

.mw-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
}

.mw-shortcuts-table tr {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-shortcuts-table tr:last-child {
    border-bottom: none;
}

.mw-shortcuts-key {
    padding: 6px 0;
    white-space: nowrap;
    width: 1%;
    padding-right: 16px;
}

.mw-shortcuts-desc {
    padding: 6px 0;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.mw-shortcuts-kbd {
    display: inline-block;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

.mw-shortcuts-plus {
    margin: 0 4px;
    color: var(--mud-palette-text-disabled);
    font-size: .6875rem;
}

/* Grouping dialog body */
.mw-grouping-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 6px 0;
}

.mw-grouping-group-label {
    display: block;
    padding: 6px 12px 2px;
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.mw-grouping-row {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    user-select: none;
}

.mw-grouping-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.mw-grouping-row-active {
    background: rgba(0, 172, 193, .08);
    font-weight: 500;
}

.mw-grouping-row-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-grouping-row-type {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: var(--mud-palette-text-disabled);
}

.mw-root .mw-one-per {
    font-size: .5625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}