.app-layout {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
#editor-column {
    flex: 0 0 380px;
    min-width: 280px;
    max-width: 55%;
    overflow-y: auto;
    padding: 20px 12px 40px 24px;
}
#display-column {
    flex: 1 1 auto;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 24px;
    overflow-y: auto;
}
@media (max-width: 900px) {
    .app-layout { flex-direction: column; }
    #editor-column, #display-column { flex: 1 1 auto; max-width: 100%; padding: 16px; }
}

/* Segmented control, 5-way here (compression/hamming's version is a 2-3
   button single seamless row — with 5 algorithm names that layout let text
   overflow each button and get clipped by its neighbour/the container's
   rounded corner instead of wrapping. Individual wrapping chips instead:
   robust to any item count and never truncates. */
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented button {
    flex: 1 1 auto;
    min-width: 88px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text);
}
.segmented button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.stat-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-row .stat-value { font-weight: 700; }

/* Step nav */
#step-nav { text-align: center; max-width: 720px; }
#step-position { font-weight: 700; font-size: 14px; }
#step-description { margin: 4px 0 0 0; min-height: 20px; }

/* Legend: what each highlight color on the bars means */
#legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 12px; color: var(--muted); max-width: 720px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--border-strong); background: var(--surface-2); }
.legend-swatch.cmp { background: color-mix(in srgb, var(--warn-text) 18%, var(--surface-2)); border-color: #d8a437; }
.legend-swatch.swap { background: color-mix(in srgb, var(--danger) 20%, var(--surface-2)); border-color: var(--danger); }
.legend-swatch.pivot { background: color-mix(in srgb, var(--primary) 22%, var(--surface-2)); border-color: var(--primary); }
.legend-swatch.range { background: var(--surface-2); border-color: var(--primary); border-style: dashed; }
.legend-swatch.sorted { background: color-mix(in srgb, var(--success) 22%, var(--surface-2)); border-color: var(--success); }

#speed-control { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
#speed-control input { width: 90px; }

/* Bars */
#bars-stage { width: 100%; max-width: 860px; flex: 1 1 auto; min-height: 280px; display: flex; align-items: center; justify-content: center; }
#bars-track {
    width: 100%;
    height: 100%;
    max-height: 52vh;
    min-height: 240px;
    display: flex;
    /* stretch (not flex-end) so each .bar gets a definite height to
       resolve its .bar-fill's percentage height against — with flex-end
       each .bar shrinks to its own content height and the percentage
       height silently resolves to nothing, collapsing every bar. */
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    padding: 0 4px 30px 4px;
    position: relative;
}
.bar {
    flex: 1 1 0;
    max-width: 56px;
    min-width: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: order 0.2s;
}
.bar-fill {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 4px 4px 0 0;
    transition: background 0.15s, border-color 0.15s, transform 0.25s ease;
}
.bar-index { font-size: 9.5px; color: var(--muted); margin-bottom: 3px; opacity: 0.7; }
.bar-value { font-size: 10.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.bar.cmp .bar-fill { background: color-mix(in srgb, var(--warn-text) 18%, var(--surface-2)); border-color: #d8a437; }
.bar.swap .bar-fill { background: color-mix(in srgb, var(--danger) 20%, var(--surface-2)); border-color: var(--danger); transform: translateY(-6px); }
.bar.pivot .bar-fill { background: color-mix(in srgb, var(--primary) 22%, var(--surface-2)); border-color: var(--primary); }
.bar.in-range .bar-fill { border-color: var(--primary); border-style: dashed; }
.bar.sorted .bar-fill { background: color-mix(in srgb, var(--success) 22%, var(--surface-2)); border-color: var(--success); }
.bar.sorted .bar-value { color: var(--success); font-weight: 600; }

#step-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#empty-hint { text-align: center; }