/* The slice map: chip cards on a topology grid, a brush bar, arcs. */

.sm { padding: 4px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; overflow: auto; max-height: 32vh; }
.sm-planes { display: flex; gap: 20px; flex-wrap: wrap; position: relative; align-items: flex-start; }
.sm-plane { position: relative; }
.sm-plane-title { font-size: 11px; margin-bottom: 2px; }
.sm-grid { display: grid; gap: 6px 12px; position: relative; }
.sm-matrix { font-size: 11px; }
.sm-matrix-title { color: var(--dim); margin-bottom: 3px; white-space: nowrap; }
.sm-mx { border-collapse: collapse; }
.sm-mx th, .sm-mx td { border: 1px solid var(--line-soft); text-align: center; min-width: 46px; height: 24px; padding: 0 4px; font-size: 11px; }
.sm-mx th { color: var(--dim); font-weight: 600; }
.sm-mx th.corner { font-weight: 400; font-size: 10px; white-space: nowrap; }
.sm-mx td.self { background: var(--panel-2); }
.sm-mx td.click { cursor: pointer; }
.sm-mx td.click:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.sm-mx td .n { display: block; color: var(--fg-strong); line-height: 1.1; }
.sm-mx td .b { display: block; color: var(--dim); font-size: 10px; line-height: 1.1; }
.sm-label.in, .sm-label.out { color: var(--dim); }
.sm-card { border: 1px solid var(--line); border-radius: 4px; background: var(--bg); padding: 3px 6px 4px; }
.sm-card.hl { border-color: var(--accent); }
.sm-title { font-size: 11px; color: var(--fg-strong); cursor: pointer; margin-bottom: 3px; display: flex; align-items: center; }
.sm-title:hover { color: var(--accent); }
.sm-body { display: flex; gap: 4px; position: relative; }
.sm-labels { position: relative; width: 30px; }
.sm-label { position: absolute; left: 0; font-size: 9px; line-height: 1; color: var(--dim); display: flex; align-items: center; }
.sm-label.tc { color: var(--fg); }
.sm-body canvas { display: block; cursor: pointer; }
.sm-legend { margin-top: 6px; }
.sm-legend > span { display: inline-flex; align-items: center; }
.sm-brush { position: relative; height: 18px; margin: 8px 30px 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); cursor: crosshair; user-select: none; }
.sm-brush-bar { position: absolute; left: 0; top: 0; }
.sm-window { position: absolute; top: 0; height: 100%; background: var(--accent); opacity: 0.18; pointer-events: none; }
.sm-handle { position: absolute; top: -3px; width: 2px; height: 24px; margin-left: -1px; background: var(--sel); pointer-events: none; }
.sm-brush-info { font-size: 11px; margin: 2px 30px 0; }