/* レジ (pos., src/pos/): an iPad on the counter. Large targets, inputs 16px (no zoom), nothing waits on the network. */
:root {
  --ink: #1b2430; --muted: #5d6878; --line: #dde3ea; --bg: #f3f5f8; --panel: #ffffff;
  --accent: #1d5fbf; --error: #b42318; --error-bg: #fdecea; --header-bg: #1e2a3a; --header-ink: #e8edf3;
  --work: #12715b; --work-bg: #e3f4ee; --rest: #8a5a00; --rest-bg: #fff3d6; --pad: 16px; --tap: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  min-height: 100dvh; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none;
}
.top {
  height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad);
  background: var(--header-bg); color: var(--header-ink); font-size: 16px;
}
.top .day { display: flex; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.top strong { font-size: 20px; }
main { flex: 1; display: flex; flex-direction: column; padding: var(--pad); width: 100%; }
section { flex: 1; display: flex; flex-direction: column; }
section[hidden] { display: none; }
.muted { color: var(--muted); margin: 0; }
.notice { margin: 0; padding: 8px var(--pad); background: var(--error-bg); color: var(--error); font-size: 15px; }
.error { background: var(--error-bg); color: var(--error); padding: 8px 12px; border-radius: 8px; margin: 0; font-size: 15px; }
button {
  font: inherit; min-height: var(--tap); border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 0 16px; cursor: pointer; touch-action: manipulation;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button:disabled { opacity: 0.45; }
input {
  font-size: 16px; height: var(--tap); padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--ink); width: 100%;
}

.pair { max-width: 420px; width: 100%; margin: 40px auto; display: flex; flex-direction: column; gap: 12px; }
.pair h1 { font-size: 20px; margin: 0; }
.pair input { font-size: 28px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }

.bar { display: flex; gap: 8px; margin-bottom: 12px; }
.bar input { max-width: 360px; }
.people {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); align-content: start;
}
.people button {
  width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; gap: 2px; padding: 8px 12px;
}
.people .number { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.people .name { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.people .since { font-size: 13px; font-variant-numeric: tabular-nums; }
.people [data-state="working"] { background: var(--work-bg); border-color: var(--work); }
.people [data-state="break"] { background: var(--rest-bg); border-color: var(--rest); }
.people [data-pending] { opacity: 0.6; }
.people [data-refused] { border-color: var(--error); }
.people [data-refused] .since { color: var(--error); }
.people [data-unset] .name { color: var(--muted); }
.state { font-size: 14px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.state[data-state="working"] { background: var(--work-bg); color: var(--work); }
.state[data-state="break"] { background: var(--rest-bg); color: var(--rest); }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, 96vw); max-height: 96dvh; }
dialog::backdrop { background: rgba(20, 28, 40, 0.45); }
#panel-form { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h2 { margin: 0; font-size: 20px; flex: 1; }
.close { min-height: 44px; min-width: 44px; padding: 0; font-size: 22px; border: 0; background: none; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.actions button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.time { display: flex; align-items: center; justify-content: center; gap: 16px; }
.time[hidden], .nobreak[hidden], .drop[hidden] { display: none; }
.drop { align-self: flex-start; min-height: 44px; font-size: 15px; color: var(--muted); }
dialog.confirm { width: min(360px, 92vw); padding: 18px; }
dialog.confirm p { margin: 0 0 14px; font-size: 16px; }
.confirm-foot { display: flex; justify-content: flex-end; gap: 8px; }
button.danger { background: var(--error); border-color: var(--error); color: #fff; font-weight: 600; }
.time output { font-size: 34px; font-weight: 600; min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.time .step { min-width: 64px; font-size: 20px; }
.nobreak { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.nobreak input { width: 24px; height: 24px; }
.dots { display: flex; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); }
.dots span[data-on] { background: var(--ink); border-color: var(--ink); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keys button { font-size: 24px; min-height: 60px; font-variant-numeric: tabular-nums; }
.keys .soft { font-size: 16px; color: var(--muted); }