/* Chart-drum timeline. Ruled paper, sticky gauge plates, one scrolling strip. */

.drum {
  --paper: #e9e7de;
  --paper2: #dfdcd1;
  --plate: #d6d2c5;
  --ink: #1e2a32;
  --muted: #6e7a80;
  --rule: #c9c3b4;
}

.drum-wrap { display: flex; min-height: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--paper); }
.drum-plates { flex: 0 0 132px; background: var(--plate); border-right: 1px solid var(--rule); overflow: hidden; }
.drum-deck { flex: 1; overflow-x: auto; overflow-y: hidden; }
.drum-strip { position: relative; }
.drum-row { border-bottom: 1px solid var(--rule); }

.drum-plate {
  border-bottom: 1px solid var(--rule);
  padding: 9px 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
}
.drum-plate .lab {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); line-height: 1.45;
}
.drum-plate .val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums;
}
.drum-plate .sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--muted);
}
.drum-plate .swatch { display: inline-block; width: 9px; height: 2px; vertical-align: middle; margin-right: 5px; }

.drum-chip {
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.drum-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drum-chip:focus-visible { outline: 2px solid #2c5f7c; outline-offset: 2px; }

.drum-seg { display: flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }
.drum-seg button {
  border: 0; border-right: 1px solid var(--rule); background: transparent;
  padding: 6px 11px; cursor: pointer; color: var(--muted);
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em;
}
.drum-seg button:last-child { border-right: 0; }
.drum-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.u-legend { display: none; }