/* レジ (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; --rest: #8a5a00; --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; gap: 16px; 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; margin-left: auto; }
.top .store { flex: none; width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 16px system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
/* tabs: the same block in core/cloudflare/public/pos/pos.css and pos/cloudflare/public/register/app.css (pos/cloudflare/test/tabs.test.mjs) */
.pos-tabs { flex: none; display: flex; gap: var(--button-gap); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.pos-tabs[hidden] { display: none; }
.pos-tab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 12px;
  border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  color: #e8edf3; background: rgba(255, 255, 255, 0.1); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pos-tab[aria-current="page"] { background: #ffffff; color: #1b2430; }
.pos-tab[aria-disabled="true"] { background: none; color: #8d97a5; font-weight: 400; cursor: default; }
/* /tabs */
.top strong { font-size: 20px; }
/* Inside the レジ (its 勤怠 tab: this page in a frame of /register/, pos.js): the レジ's band is the one band. */
.embedded .top { display: none; }
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; }
.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-paste:not([hidden]) { display: flex; gap: 8px; }
.pair-paste input { flex: 1; min-width: 0; }

/* 勤怠's head (2026-11-06 夜 中村さん, pos TASKS §1-1 3・4): as the レジ's 精算 (its .screen-head): a white band across the
   page under the tabs, 69 high (8 + 52 + 8 and its line, the same on 席・売上・精算), fixed at the top while the table
   scrolls; 「勤怠」, the 営業日 and the person the sizes of 精算's (.settle-day, .settle-person), the search at the right. */
.bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 69px;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 12px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #d1d1d6;
}
.bar > button { height: 52px; min-height: 52px; }
.bar input { height: 52px; }
.bar-title { flex: none; margin: 0; font-size: 22px; font-weight: 700; }
/* The 営業日 shown (2026-10-26 中村さん: 1 つの営業日のページ): a button with its outline while another day may be chosen,
   plain letters (the same box, nothing moves) while today is the only one. 精算's size (7.5em of 20px, bold). */
.biz-day {
  flex: none; width: 7.5em; margin: 0; padding: 0 8px; font-size: 20px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink); border-color: var(--accent);
}
.biz-day:disabled { opacity: 1; border-color: transparent; background: transparent; cursor: default; }
.bar input { max-width: 300px; margin-left: auto; }
/* Another 営業日 shown (colours 2026-10-24 中村さん): 「10/22 を表示中」 beside the 営業日 in plain letters (no colour of
   its own), its place kept while empty so nothing beside it moves (「入力する」 and the search never move). */
.past-banner { flex: none; width: 9.5em; margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past-banner[hidden] { display: block; visibility: hidden; }
/* The 勤怠 table (勤怠の画面は表にそのまま入れる, 2026-10-20 中村さん): one person per row, both lists on the same columns
   (subgrid): name, 出勤, 退勤, 日払い, 休憩の始め, 休憩の終わり (the 休憩 rightmost, 2026-10-20 夜), the state words. One
   休憩 fits on one line on an iPad in landscape (1024 and 1180 wide); a second 休憩 is a second line of the two 休憩 cells. */
.people {
  display: grid; align-content: start; column-gap: 6px;
  grid-template-columns: minmax(7em, 1fr) repeat(4, 6.4em) 6.4em minmax(6em, 8em);
}
.people .head {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; position: sticky; top: 69px; z-index: 1;
  padding: 0 8px 4px 12px; background: var(--bg); font-size: 12px; color: var(--muted); text-align: center;
}
.rows { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; }
.rows:empty { display: none; }
/* The two blocks apart (2026-10-20 夜 中村さん): today's people on top on the page; the store's own people not in yet
   under the title 「所属スタッフ」, with no background of their own (2026-10-24: the title parts them). */
.block-title {
  grid-column: 1 / -1; margin: 22px 0 6px; padding: 0 4px; font-size: 17px; font-weight: 700; color: var(--ink);
}
.block-title[hidden] { display: none; }
#on-day:empty + .block-title { margin-top: 4px; }
.rows > li {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 4px; min-height: 56px;
  padding: 4px 8px 4px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
/* 出勤中・休憩中 (2026-10-24 中村さん): the row white, its outline in the state's colour (the same width: nothing moves). */
.rows > li[data-state="working"] { border-color: var(--work); }
.rows > li[data-state="break"] { border-color: var(--rest); }
.rows > li[data-refused] { border-color: var(--error); }
.rows .person-who { grid-column: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.rows .number { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rows .name { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.rows .home { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rows .cell {
  min-height: 46px; min-width: 0; padding: 0 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.rows .cell.in { font-size: 16px; }
.rows .cell .none { color: var(--muted); }
.rows .cell:disabled { opacity: 1; background: transparent; border-color: transparent; }
.rows .cell:disabled .none { opacity: 0.5; }
/* 休憩なしの退勤 (2026-10-23 中村さん): a 勤務 over 休憩が必須の長さ with neither a 休憩 nor 未取得: its 休憩 cell red (the
   締め waits on it). The colour only: no words, the cell's size unchanged. */
.rows .cell[data-missing] { background: var(--error-bg); border-color: var(--error); color: var(--error); }
/* Entered here, not answered yet. */
.rows .cell[data-pending] { color: var(--muted); font-style: italic; border-style: dashed; }
.rows .status { grid-column: 7; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.rows .status .words { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rows > li[data-refused] .status .words { color: var(--error); }
.rows .status button { min-height: 40px; padding: 0 8px; font-size: 14px; }
.rows .status button.words { color: var(--error); border-color: var(--error); }
/* Who has the page (2026-10-24 中村さん, as 精算's head in the レジ): 「入力する」 or 「12 名前 入力中」 in one box of one
   width (a long name ends in …, nothing beside it moves); no band of its own colour. */
.gate-who { flex: none; width: 20em; max-width: 34vw; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Its place kept while it is not shown (the day before's words after it never move). */
.gate-who[hidden] { display: block; visibility: hidden; }
.gate-who[data-nobody] { color: var(--accent); border-color: var(--accent); }
/* 見るだけ (決まり 2): nobody has the page (the window closed without a pick): every cell grey; a tap asks first. The colour
   only: no size changes. */
[data-view="people"][data-viewing] .rows .cell:not(:disabled) { background: var(--bg); color: var(--muted); border-color: var(--line); }
.state { font-size: 14px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, 96vw); max-height: 96dvh; }
/* A window opened takes the focus (its keys on a PC), never with a ring round it (2026-11-06 夜 中村さん: the blue frame
   of the person window was not meant). The keys and fields inside keep theirs. */
dialog:focus, dialog:focus-visible { outline: none; }dialog::backdrop { background: rgba(20, 28, 40, 0.45); }
/* The person window (who-window.js and parts.css, the レジ's own: the same size as the レジ's window, 640 wide with its
   閉じる at the top right). The dialog has no padding of its own: a tap on it is a tap outside the window's content. */
dialog.opener { position: fixed; width: 640px; max-width: 94vw; max-height: 94dvh; padding: 0; overflow: hidden; }
dialog.opener #opener { padding: 16px 20px; }
/* A phone lower than the person window (parts.css .who: 682 px at least on a phone): it scrolls inside the window. */
@media (max-width: 599px) { dialog.opener { overflow-y: auto; overscroll-behavior: contain; } }
.opener-x { position: absolute; top: 10px; right: 12px; min-height: 44px; z-index: 1; }
/* The window's keypad says 「閉じる」 itself (keypad.js, 2026-11-05 中村さん): no second 閉じる (its place kept). */
dialog.opener:has(.num-keys .key.next.last:not(:disabled)) .opener-x { visibility: hidden; }
.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; }
.go { min-height: 60px; font-size: 18px; }
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: var(--button-gap); }
button.danger { background: var(--error); border-color: var(--error); color: #fff; font-weight: 600; }
.pair-store { margin: 0; font-size: 18px; font-weight: 600; min-height: 1.5em; }
/* The choices beside a cell (not modal: another cell tapped opens its own). */
.chooser {
  position: fixed; inset: auto; margin: 0; width: 15em; max-height: min(72dvh, 560px); padding: 10px;
  flex-direction: column; gap: 8px; box-shadow: 0 8px 28px rgba(20, 28, 40, 0.28); border: 1px solid var(--line); z-index: 10;
}
.chooser[open] { display: flex; }
/* 指の端末 (a phone or an iPad, pos.js showTimes): a time's choices as a sheet from the bottom, at most 480 px in the
   middle (the table above it in view, its row pressed scrolled above it; 2026-11-06 中村さん), the drums' own sheet. */
.chooser.as-sheet {
  top: auto; right: 0; bottom: 0; left: 0; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 480px; max-height: min(86dvh, 640px);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; overflow-y: auto;
  box-shadow: 0 -8px 28px rgba(20, 28, 40, 0.24);
}
.chooser:focus { outline: none; }
.chooser-head { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.chooser-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chooser-head .close { min-height: 36px; min-width: 36px; font-size: 20px; }
.chooser-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chooser-quick:empty { display: none; }
.chooser-quick button { flex: 1 1 auto; min-height: 48px; padding: 0 10px; font-weight: 600; }
.chooser-quick .now { background: var(--accent); border-color: var(--accent); color: #fff; }
.chooser-quick .clear { color: var(--error); }
/* The 営業日 shown among the days (pos.js biz-day). */
.chooser-quick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* 時刻のドラム: the common part's look, time-wheels.css (the マイページ's 店 > 勤怠 reads it too). 「今」 is the coloured
   button here (one a window), so 「確定」 is a plain one. */
.chooser-wheels[hidden] { display: none; }
.chooser .drum-ok { background: var(--panel); border-color: var(--line); color: var(--ink); }
/* The choices' line (2026-11-06 夜: 押せない時はその場で理由): the 閉店 note, or a refusal in red where it was pressed; its
   place kept while empty (2 lines), so nothing in the window moves when a reason comes. */
.chooser-note { margin: 0; min-height: 2.6em; font-size: 14px; line-height: 1.3; }
.chooser-note[hidden] { display: block; visibility: hidden; }
.chooser-note[data-tone="error"] { color: var(--error); font-weight: 600; }
/* 休憩 (2026-10-26 問 7): the rule over its choices, and beside each time the length it makes, red short of 休憩の長さ. */
.chooser-rule { margin: 0; font-size: 14px; font-weight: 600; }
.chooser-rule[hidden] { display: none; }
/* A 休憩 short of 休憩の長さ on a 勤務 that needs one: its 戻り in red letters (the size unchanged; taken all the same). */
.rows .cell[data-short] { color: var(--error); }
#pay-form { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
/* 日払い's 額の塊 (amount-block.js, parts.css .amount-block: every part the keypad's width), in the middle of the window;
   the refusal's line keeps its place (登録 never moves). */
.pay-block { display: flex; justify-content: center; }
.pay-block .error.quiet { visibility: hidden; }
.pay-block .error { min-height: 2.6em; }
.pay-block .amount-head strong { font-size: 20px; }
/* まだ作っていない機能 (UI_SPEC §6, src/shared/planned.ts; the same rule as public/shell/shell.css): grey with nothing to
   press where <html data-show-planned> (staging), gone elsewhere. */
[data-planned] { color: #b3bbc6 !important; pointer-events: none; cursor: default; }
html:not([data-show-planned]) [data-planned] { display: none !important; }