/* Shared styling for the divided ATEM Config Explorer tools (Macro
   Viewer, Audio Mapping, Labels, ...). One file so the card-loading row
   and the macro-card/chip/tab pieces look identical everywhere they're
   used, instead of drifting across hand-copied <style> blocks per page.
   Loaded via a plain <link> tag from each tool page. */

.atemx { max-width: 1100px; margin: 0 auto; }
.atemx h3 { margin-top: 32px; }
.atemx-article-spacing { margin-top: 40px; }

/* --- Top row: 5 cards (drag & drop / code / 3 recent) --- */
.atemx-card-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (max-width: 820px) {
    .atemx-card-row { grid-template-columns: repeat(2, 1fr); }
}
.atemx-card {
    border: var(--border-width) solid var(--border-color);
    background: var(--surface-color);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    color: var(--text-main);
}
.atemx-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--border-color); }
.atemx-card-icon { font-size: 1.6rem; margin-bottom: 4px; }
.atemx-card-title { font-weight: bold; font-size: 0.9rem; }
.atemx-card-sub { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
.atemx-card-drop.atemx-dropzone-active { border-color: var(--primary); background: var(--surface-alt); }
.atemx-card-code.active { background: var(--primary); color: #1a1a1a; }
.atemx-card-code.active .atemx-card-sub { color: #1a1a1a; }
.atemx-card-empty { cursor: default; border-style: dashed; color: var(--text-muted); }
.atemx-card-empty:hover { transform: none; box-shadow: none; }
.atemx-card-filled .atemx-card-title { word-break: break-word; }
.atemx-card-remove {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.atemx-card-remove:hover { color: var(--text-main); }
#atemxFileInput { display: none; }
label.btn { display: inline-block; text-decoration: none; }

.atemx-tool-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}
.atemx-tool-link {
    display: inline-block;
    font-family: monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
}
.atemx-tool-link:hover { background: var(--surface-color); }
.atemx-tool-link-current {
    background: var(--primary);
    color: #1a1a1a;
    font-weight: bold;
    cursor: default;
}
.atemx-tool-link-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.atemx-tool-clear {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
}
.atemx-tool-clear:hover { color: var(--text-main); background: var(--surface-alt); }

.atemx-code-box { margin-bottom: 24px; }
.atemx-code-box textarea {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    font-family: monospace;
    resize: vertical;
}

/* --- The loader collapsed: one line naming what's loaded, in place of
   the five cards, once they've done their job. --- */
.atemx-loaded-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    border: var(--border-width) solid var(--border-color);
    background: var(--surface-alt);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.atemx-loaded-label { font-family: monospace; font-size: 0.85rem; color: var(--text-main); }
.atemx-loaded-action {
    margin-left: auto;
    background: none; border: 1px solid var(--border-color); color: var(--text-muted);
    font-family: monospace; font-size: 0.72rem; text-transform: uppercase;
    padding: 4px 10px; cursor: pointer;
}
.atemx-loaded-action:hover { background: var(--surface-color); color: var(--text-main); }

.atem-empty { color: var(--text-muted); }
.atem-warnings { margin-bottom: 20px; }
.atem-warning { font-family: monospace; color: #f59e0b; margin-bottom: 4px; }
.atem-size-warning { font-family: monospace; color: #f59e0b; margin-bottom: 12px; }
.atem-menu-filter { width: 100%; box-sizing: border-box; }

/* --- Macros: list on the left, detail on the right --- */
.atemx-macro-split { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) {
    .atemx-macro-split { grid-template-columns: 1fr; }
}
.atemx-macro-list-panel {
    border: var(--border-width) solid var(--border-color);
    background: var(--surface-color);
    padding: 10px;
}
.atemx-macro-list-panel .atem-menu-filter { margin-bottom: 8px; }
.atemx-macro-list { max-height: 60vh; overflow-y: auto; }
.atemx-macro-list-body { display: flex; flex-direction: column; gap: 2px; }
.atemx-list-actions { margin-bottom: 8px; }
.atem-copy-btn {
    background: none; border: 1px solid var(--border-color); color: var(--text-muted);
    font-family: monospace; font-size: 0.7rem; text-transform: uppercase;
    padding: 4px 10px; cursor: pointer;
}
.atem-copy-btn:hover { color: var(--text-main); border-color: var(--primary); }
.atem-macro-actions { margin-top: 14px; }

/* --- List / Pool: two ways of finding a macro. The pool map exists
   because macro indices are sparse and slot-addressed — that number is
   what a panel button fires — which a list of rows hides. --- */
.atemx-list-modes { display: flex; gap: 4px; margin-bottom: 8px; }
.atemx-list-mode {
    flex: 1 1 0; background: none; border: 1px solid var(--border-color);
    color: var(--text-muted); font-family: monospace; font-size: 0.72rem;
    text-transform: uppercase; padding: 4px 6px; cursor: pointer;
}
.atemx-list-mode:hover { color: var(--text-main); }
.atemx-list-mode.active { background: var(--primary); color: #1a1a1a; border-color: var(--primary); }
.atemx-macro-pool { max-height: 60vh; overflow-y: auto; }
.atemx-pool-grid {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
}
.atemx-pool-slot {
    aspect-ratio: 1 / 1; min-width: 0; padding: 0;
    background: var(--surface-alt); border: 1px solid var(--border-color);
    color: var(--text-muted); font-family: monospace; font-size: 0.62rem;
    cursor: pointer;
}
.atemx-pool-slot.filled { background: var(--surface-color); color: var(--text-main); border-color: var(--text-muted); }
.atemx-pool-slot.filled:hover { background: var(--primary); color: #1a1a1a; }
.atemx-pool-slot.empty { opacity: 0.35; cursor: default; }
.atemx-pool-slot.active { background: var(--primary); color: #1a1a1a; border-color: var(--primary); }
.atemx-pool-legend { margin: 8px 0 0; font-family: monospace; font-size: 0.72rem; color: var(--text-muted); }

/* --- Usage: the pool read backwards, one row per thing, expanded to the
   macros that touch it. --- */
.atemx-macro-usage { max-height: 60vh; overflow-y: auto; }
.atemx-usage-axes { display: flex; gap: 4px; margin-bottom: 8px; }
.atemx-usage-axis {
    flex: 1 1 0; background: none; border: 1px solid var(--border-color);
    color: var(--text-muted); font-family: monospace; font-size: 0.68rem;
    text-transform: uppercase; padding: 3px 6px; cursor: pointer;
}
.atemx-usage-axis.active { color: var(--text-main); border-color: var(--text-muted); }
.atemx-usage-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.atemx-usage-head {
    display: flex; justify-content: space-between; gap: 8px; width: 100%;
    background: var(--surface-alt); border: 1px solid var(--border-color);
    color: var(--text-main); font-family: monospace; font-size: 0.75rem;
    text-align: left; padding: 5px 8px; cursor: pointer;
}
.atemx-usage-head:hover, .atemx-usage-head.open { border-color: var(--primary); }
.atemx-usage-count { color: var(--text-muted); white-space: nowrap; }
.atemx-usage-macros { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 10px; }
.atemx-usage-macro {
    background: none; border: none; color: var(--text-muted);
    font-family: monospace; font-size: 0.72rem; text-align: left;
    padding: 3px 6px; cursor: pointer;
}
.atemx-usage-macro:hover { color: var(--text-main); background: var(--surface-alt); }

/* --- Diff: this config's macro pool against another export of the same
   switcher. --- */
.atemx-macro-diff { max-height: 60vh; overflow-y: auto; }
.atemx-diff-controls { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.atemx-diff-label {
    font-family: monospace; font-size: 0.68rem;
    text-transform: uppercase; color: var(--text-muted);
}
.atemx-diff-select {
    background: var(--surface-alt); color: var(--text-main);
    border: 1px solid var(--border-color); font-family: monospace;
    font-size: 0.72rem; padding: 4px 6px; max-width: 100%;
}
.atemx-diff-summary {
    font-family: monospace; font-size: 0.72rem; color: var(--text-muted); margin: 8px 0;
}
.atemx-diff-entry { margin-bottom: 2px; }
.atemx-diff-row {
    display: flex; gap: 8px; align-items: baseline; width: 100%;
    background: var(--surface-alt); border: 1px solid var(--border-color);
    color: var(--text-main); font-family: monospace; font-size: 0.72rem;
    text-align: left; padding: 5px 8px; cursor: pointer; margin-bottom: 2px;
}
.atemx-diff-row:disabled { cursor: default; opacity: 0.6; }
.atemx-diff-row:not(:disabled):hover, .atemx-diff-row.open { border-color: var(--primary); }
.atemx-diff-badge {
    text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.04em;
    padding: 1px 5px; border: 1px solid currentColor; white-space: nowrap;
}
.atemx-diff-changed .atemx-diff-badge { color: #f59e0b; }
.atemx-diff-added .atemx-diff-badge { color: #10b981; }
.atemx-diff-removed .atemx-diff-badge { color: #e11d48; }
.atemx-diff-detail { display: none; padding: 4px 8px 10px; }
.atemx-diff-detail.open { display: block; }
.atemx-diff-note {
    margin: 4px 0; font-family: monospace; font-size: 0.7rem;
    color: var(--text-muted); font-style: italic;
}
.atemx-diff-field {
    margin: 3px 0; font-family: monospace; font-size: 0.7rem;
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between;
}
.atemx-diff-field-label { color: var(--text-muted); }
.atemx-diff-field-values { color: var(--text-main); }
.atemx-diff-open {
    margin-top: 6px; background: none; border: 1px solid var(--border-color);
    color: var(--text-muted); font-family: monospace; font-size: 0.68rem;
    text-transform: uppercase; padding: 3px 8px; cursor: pointer;
}
.atemx-diff-open:hover { color: var(--text-main); border-color: var(--primary); }
.atem-macro-list-item {
    text-align: left; background: none; border: none; color: var(--text-main);
    font-family: monospace; font-size: 0.85rem; padding: 6px 8px; cursor: pointer; text-transform: none;
}
.atem-macro-list-item:hover, .atem-macro-list-item:focus-visible { background: var(--surface-alt); }
.atem-macro-list-item.active { background: var(--primary); color: #1a1a1a; font-weight: bold; }
.atemx-macro-detail { min-width: 0; }

/* --- Macro cards --- */
.atem-macro-card {
    border: var(--border-width) solid var(--border-color);
    padding: 16px 20px;
    scroll-margin-top: 12px;
}
@keyframes atem-flash-fade { from { background: var(--primary); } to { background: transparent; } }
.atem-macro-card.atem-flash { animation: atem-flash-fade 1s ease-out; }
.atem-macro-header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.atem-macro-name { font-weight: bold; font-size: 1.05rem; }
.atem-macro-meta { color: var(--text-muted); font-family: monospace; font-size: 0.8rem; margin-left: auto; }
.atem-macro-description {
    font-style: italic; color: var(--text-muted); border-left: 3px solid var(--primary);
    margin: 0 0 10px; padding: 2px 0 2px 12px;
}
.atem-macro-headline { font-weight: bold; margin: 0 0 12px; }
.atem-chip {
    display: inline-block; font-family: monospace; font-weight: bold; font-size: 0.75rem;
    background: var(--surface-alt); border: 1px solid var(--border-color); padding: 2px 8px; white-space: nowrap;
}
.atem-chip-index { background: var(--primary); color: #1a1a1a; }
.atem-chip-clickable { cursor: pointer; }
.atem-chip-clickable:hover, .atem-chip-open { background: var(--primary); color: #1a1a1a; }
/* --- Steps: the macro read down in execution order. The number column
   is fixed-width so the phrases line up into a readable column even when
   a macro runs past step 9. --- */
.atem-step-list { display: flex; flex-direction: column; gap: 2px; }
.atem-step-wrap { border-bottom: 1px dotted var(--border-color); padding: 3px 0; }
.atem-step-wrap:last-child { border-bottom: none; }
.atem-step { display: flex; gap: 10px; align-items: baseline; }
.atem-step-num {
    flex: 0 0 1.9em;
    text-align: right;
    color: var(--text-dim, #888);
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
}
.atem-step-phrase { color: var(--text-main); flex: 1 1 auto; }
.atem-step-meta {
    color: var(--text-dim, #888);
    font-size: 0.8em;
    white-space: nowrap;
}
.atem-step-ops { margin: 4px 0 2px 2.5em; }
.atem-step-hidden-note {
    margin: 8px 0 0;
    color: var(--text-dim, #888);
    font-size: 0.85em;
    font-style: italic;
}
.atem-layout-slot { margin-top: 10px; }

/* --- Op lines: coloured like a VS Code editor (Dark+ token colours),
   independent of the site's own light/dark theme, since the colours
   only read correctly against a dark background. --- */
.atem-op-list {
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 8px 10px;
    overflow-x: auto;
}
.atem-op-line { color: #d4d4d4; word-break: break-all; }
.atem-op-line-num {
    display: inline-block;
    min-width: 3.5em;
    color: #6e7681;
    user-select: none;
}
.atem-op-token-tag { color: #569cd6; font-weight: bold; }
.atem-op-token-key { color: #9cdcfe; }
.atem-op-token-value { color: #ce9178; }
.atem-layout-toggle-btn {
    margin-top: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
}
.atem-layout-toggle-btn:hover { background: var(--surface-color); }
.atem-inline-layout { margin-top: 12px; }
.atem-svg-canvas {
    width: 100%; max-width: 760px; height: auto;
    background: var(--bg-color); border: var(--border-width) solid var(--border-color);
}

/* --- Layout controls: which base scene the macro is drawn on top of.
   Named on screen rather than implied, since the same macro reads very
   differently against the switcher's state and against nothing. --- */
.atem-layout-controls {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 10px; font-family: monospace; font-size: 0.8rem;
}
.atem-layout-base-label { color: var(--text-muted); text-transform: uppercase; }
.atem-layout-base-select {
    background: var(--surface-alt); color: var(--text-main);
    border: 1px solid var(--border-color); font-family: monospace;
    font-size: 0.8rem; padding: 4px 6px; max-width: 100%;
}
.atem-layout-legend {
    display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0;
    font-family: monospace; font-size: 0.72rem; color: var(--text-muted);
}
.atem-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.atem-legend-swatch {
    width: 18px; height: 10px; display: inline-block;
    border: 2px solid var(--text-muted);
}
.atem-legend-macro { border-color: #3b82f6; background: #3b82f633; }
.atem-legend-state { border-color: #3b82f6; opacity: 0.45; }
.atem-legend-unknown { border-style: dashed; border-color: #3b82f6; }
.atem-legend-ghost { border-style: dashed; border-width: 1px; border-color: var(--text-muted); }
.atem-layout-notes p { margin: 6px 0 0; }

/* An Op that wrote a value the switcher already held: dimmed rather than
   removed, since "this Op changed nothing here" is information, not
   noise to hide. */
.atem-op-redundant { opacity: 0.45; }
.atem-macro-redundancy {
    margin: 6px 0 0;
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.atem-macro-tabs {
    font-family: monospace; font-size: 0.85rem; margin-top: 14px;
    border-top: 1px solid var(--border-color); padding-top: 10px;
}
.atem-macro-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.atem-macro-tab-btn {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); font-family: monospace; font-size: 0.8rem;
    text-transform: uppercase; padding: 6px 4px; cursor: pointer; margin-bottom: -1px;
}
.atem-macro-tab-btn:hover { color: var(--text-main); }
.atem-macro-tab-btn.active { color: var(--text-main); border-bottom-color: var(--primary); font-weight: bold; }

/* --- Audio Mapping (reuses /atemaudio's own scripts) --- */
#xmlArea { height: 160px; font-family: monospace; resize: vertical; width: 100%; box-sizing: border-box; }
.filter-container { margin-bottom: 20px; }
.output-block { margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; font-family: monospace; }

/* --- Labels: input list ---
   Newspaper-style CSS columns instead of one long flexbox column, so a
   large input count (40+, common on bigger switchers) fills the width
   with several columns of short rows instead of one tall scrolling list
   — closer to how ATEM Software Control's own input list stays dense by
   going wide rather than tall. break-inside: avoid keeps a single row
   from being split across two columns. */
.atemx-label-list {
    column-width: 230px;
    column-gap: 0;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}
.atemx-label-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-color);
    break-inside: avoid;
    font-size: 0.8rem;
}
.atemx-label-row:hover { background: var(--surface-alt); }
.atemx-label-row-nondefault {
    border-left: 3px solid var(--primary);
    padding-left: 3px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.atemx-label-row-id { font-family: monospace; font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; width: 2em; }
.atemx-label-row-short { font-family: monospace; font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
.atemx-label-row-port {
    font-family: monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    padding: 0 4px;
    flex-shrink: 0;
}
.atemx-label-row-name {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Labels: multiview layout grid --- */
.atemx-mv-grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}
@media (max-width: 700px) {
    .atemx-mv-grid-wrap { grid-template-columns: 1fr; }
}
.atemx-mv-block { min-width: 0; }
.atemx-mv-heading { font-family: monospace; font-weight: bold; font-size: 0.85rem; margin: 16px 0 6px; }
.atemx-mv-frame {
    display: grid;
    gap: 1px;
    background: #000;
    border: 2px solid var(--border-color);
    max-width: 640px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 4px;
}
.atemx-mv-tile {
    background: #1a1a1a;
    display: flex;
    align-items: flex-end;
    padding: 2px 4px;
    min-width: 0;
    overflow: hidden;
}
.atemx-mv-tile-label {
    font-family: monospace;
    font-size: 0.6rem;
    color: #e8e8e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atemx-mv-tile-empty { background: #101010; }

/* --- Audio Mapping: Dante Controller-style routing grid ---
   Devices (a physical Aux/MADI/Input bank) fold to one row or column by
   default; unfolding one reveals its individual channel-pair
   crosspoints. A folded row/column still shows a small dot wherever
   something inside it is connected, via .has-connection, so it's clear
   whether unfolding it is worth doing. */
.dante-source-filter { margin: 10px 0; }
.dante-matrix-wrap {
    overflow: auto;
    max-height: 70vh;
    border: var(--border-width) solid var(--border-color);
    margin-top: 4px;
}
.dante-matrix { border-collapse: separate; border-spacing: 0; font-family: monospace; font-size: 0.72rem; }
.dante-matrix th, .dante-matrix td { border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0; }
.dante-corner { background: var(--surface-color); position: sticky; left: 0; z-index: 3; }

.dante-col-leaf, .dante-col-group.folded {
    height: 130px;
    min-width: 22px;
    max-width: 26px;
    vertical-align: bottom;
    background: var(--surface-color);
    padding: 4px 0;
}
.dante-col-leaf-child { background: var(--surface-alt); }
.dante-col-leaf-text {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    color: var(--text-main);
}
.dante-col-group-head {
    background: var(--surface-alt);
    vertical-align: middle;
    text-align: left;
}

/* A folded device/family column (see narrowFoldButton() in
   dante-matrix.js) — deliberately as narrow as a plain leaf column, so
   one folded neighbour doesn't blow out the width of every crosspoint
   cell in the grid. */
.dante-fold-btn-narrow {
    background: none;
    border: none;
    width: 100%;
    height: 100%;
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.dante-fold-btn-narrow:hover { background: var(--surface-alt); }
.dante-fold-btn-narrow .dante-col-leaf-text { color: var(--primary); font-weight: bold; }

/* foldButton()'s horizontal style — an expanded device/family header
   (spans multiple columns, so staying horizontal is correct) and every
   row-group label (rows read left-to-right regardless of fold state). */
.dante-fold-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-main);
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: none;
    cursor: pointer;
    padding: 6px 8px;
    text-align: left;
}
.dante-fold-btn:hover { background: var(--surface-alt); }
.dante-col-group-head .dante-fold-btn { width: auto; }
.dante-fold-icon { color: var(--primary); flex-shrink: 0; }
.dante-fold-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dante-count-badge {
    margin-left: auto;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.6rem;
    padding: 0 5px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dante-row-label-leaf {
    background: var(--surface-color);
    padding: 4px 10px;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}
.dante-row-leaf.indented .dante-row-label-leaf { padding-left: 22px; color: var(--text-muted); background: var(--surface-alt); }
.dante-row-label-group { background: var(--surface-color); padding: 0; position: sticky; left: 0; z-index: 1; }
.dante-row-group.open .dante-row-label-group { background: var(--surface-alt); }

.dante-cell { text-align: center; vertical-align: middle; width: 22px; background: var(--bg-color); }
.dante-cell-summary { background: var(--surface-color); }
.dante-xpt {
    width: 16px;
    height: 16px;
    margin: 3px auto;
    display: block;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}
.dante-xpt:hover { border-color: var(--primary); }
.dante-xpt.active { background: var(--primary); border-color: var(--primary); }
.has-connection { position: relative; }
.has-connection::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.55;
}

.dante-matrix tbody tr:hover .dante-cell { background: color-mix(in srgb, var(--primary) 12%, var(--bg-color)); }
.dante-matrix tbody tr:hover .dante-row-label-leaf,
.dante-matrix tbody tr:hover .dante-row-label-group { background: color-mix(in srgb, var(--primary) 12%, var(--surface-color)); }


/* --- Print: macro documentation ends up on paper in a show binder, so
   printing gives the selected macro the page, without the loader, the
   navigation panel or the surrounding article. Steps are the point, so
   nothing inside the card is collapsed on paper. --- */
@media print {
    .atemx-card-row,
    .atemx-loaded-bar,
    .atemx-tool-links,
    .atemx-code-box,
    .atemx-macro-list-panel,
    .atem-macro-tab-nav,
    .atem-macro-actions,
    .atem-layout-toggle-btn,
    .atem-copy-btn {
        display: none !important;
    }

    .atemx-macro-split { display: block; }
    .atem-macro-card { border: none; padding: 0; }

    /* The raw Op panel stays hidden (it's the thing a summary replaces),
       but nothing that is merely collapsed should print collapsed. */
    .atem-step-ops[hidden],
    .atem-macro-tab-panel[hidden].atem-op-list {
        display: none !important;
    }
    .atem-macro-tab-panel[hidden]:not(.atem-op-list) { display: block !important; }
    .atem-inline-layout[hidden] { display: block !important; }

    .atem-op-list { background: none; color: #000; }
    .atem-svg-canvas { max-width: 100%; page-break-inside: avoid; }
}