/* 時刻のドラム (2026-11-06 中村さん): the look of the common part public/pos/time-wheels.js, for core's 勤怠 page (pos.css
   around it) and the マイページ's 店 > 勤怠. 時 and 分 each a column scrolled so that the number in the band across the middle
   is the value; the band's numbers dark, the others muted; 「確定」 under them. Its own window (openTimeDrum): a sheet from
   the bottom on a phone or an iPad (at most 480 px in the middle, the page above it in view), beside the field on a PC. The colours are the page's own (--ink, --panel, --accent,
   --accent-bg, --muted, --line, --error). */
.drum { --drum-row: 44px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.drum-labels, .drum-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.drum[data-length] .drum-labels, .drum[data-length] .drum-body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 3.6em; }
.drum-labels { font-size: 12px; color: var(--muted); text-align: center; }
.drum-body { position: relative; isolation: isolate; }
.drum-band {
  position: absolute; left: 0; right: 0; top: calc(var(--drum-row) * 2); height: var(--drum-row); z-index: -1;
  background: var(--accent-bg, #e3edfb); border-radius: 8px; pointer-events: none;
}
.drum-col {
  height: calc(var(--drum-row) * 5); overflow-y: scroll; overscroll-behavior: contain; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; border-radius: 8px; touch-action: pan-y;
}
.drum-col::-webkit-scrollbar { display: none; }
/* The drum the keys turn: outlined only once a key is used (a finger never sees it). */
.drum[data-keys] .drum-col:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.drum-pad { height: calc(var(--drum-row) * 2); }
.drum-item {
  height: var(--drum-row); line-height: var(--drum-row); text-align: center; scroll-snap-align: center; font-size: 22px;
  font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.drum-item.on { color: var(--ink); font-weight: 700; }
.drum-colon { align-self: center; padding: 0 4px; font-size: 22px; font-weight: 700; }
/* 休憩 (2026-10-26 問 7): the length the band's time makes, beside it; red short of 休憩の長さ. */
.drum-span { align-self: center; font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.drum-span[data-short] { color: var(--error); font-weight: 600; }
.drum-fade { position: absolute; left: 0; right: 0; height: calc(var(--drum-row) * 1.5); z-index: 1; pointer-events: none; }
.drum-fade.top { top: 0; background: linear-gradient(var(--panel, #fff), transparent); }
.drum-fade.bottom { bottom: 0; background: linear-gradient(transparent, var(--panel, #fff)); }
.drum-ok { min-height: 48px; font-size: 16px; font-weight: 700; background: var(--accent); border-color: var(--accent); color: #fff; }
.drum[data-pair] .drum-item { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drum[data-pair] .drum-item[data-none] { color: var(--muted); font-size: 18px; }
.drum[data-pair] .drum-item[data-none].on { color: var(--ink); }
.drum-note { margin: 8px 0 0; font-size: 13px; color: var(--warn, var(--muted)); }
.drum-ok:disabled { background: var(--bg); border-color: var(--line); color: #9aa4b2; }

/* Its own window. Above the page's own (a <dialog>'s too: it is put inside the open one). */
.drum-window.as-sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.drum-shade { position: absolute; inset: 0; background: rgba(27, 36, 48, 0.45); }
.drum-panel { background: var(--panel, #fff); color: var(--ink); outline: none; }
.drum-window.as-sheet .drum-panel {
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
}
.drum-window.as-pop .drum-panel {
  position: fixed; z-index: 40; width: 248px; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(27, 36, 48, 0.18);
}
.drum-window.as-pop .drum-panel[data-wide] { width: 296px; }
.drum-window.as-pop .drum { --drum-row: 36px; }
.drum-window.as-pop .drum-item, .drum-window.as-pop .drum-colon { font-size: 19px; }
.drum-window.as-pop .drum-ok { min-height: 40px; font-size: 15px; }
.drum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drum-head b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drum-x { flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 22px; color: var(--muted); }