/* 「呼び出し番号の表示」の画面。共通の部品(入力・注意・ボタン)と色・大きさの変数は、src/style.css。ここは、この道具だけの物。
   番号の大きさは、CSS の変数で決める(--chars=番号の字数は app.js が入れる。--cols・--rows は窓口の数のクラスで決める)。インラインの style 属性は書かない。 */
.options { --opt-min: 15rem; }
.group { border: 0; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.group legend { padding: 0; font-size: var(--fs-s); }
.field-msg { margin: 0; color: var(--error-text); font-size: var(--fs-s); font-weight: 700; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error-text); box-shadow: 0 0 0 1px var(--error-text); }
.field input[type="text"], .field select { width: 100%; max-width: 22rem; }
#sample { margin-top: var(--sp-2); }
details.opt { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 0.9rem 0.6rem; margin-top: 0.8rem; }
details.opt > summary { cursor: pointer; font-weight: 700; min-height: var(--tap); padding: 0.45rem 0; }
details.opt .options { margin-top: 0.2rem; }
.ns-ask { margin: 1.2rem 0 0; color: var(--text); font-size: var(--fs-m); font-weight: 700; }
.incoming { margin: 1rem 0 0; color: var(--text); font-weight: 700; }
#restore-note { margin: 1rem 0 0; }
#actions { margin-top: 0.6rem; }
.confirm { margin-top: 1.2rem; border: 1px solid var(--line); border-left: 0.25rem solid var(--warn-text); border-radius: var(--r-m); padding: 0.4rem 0.9rem 0.8rem; }
.confirm .ns-ask { margin-top: 0.4rem; }
.confirm[hidden], #actions[hidden] { display: none; }

/* 表示の画面: ページ全体を覆う(全画面にできない端末でも、ページの中で大きく出る)。色は明・暗の2通りで、端末の明暗の設定とは別に決める */
.ns-display {
  --ns-bg: #ffffff; --ns-fg: #111111; --ns-sub: #3b4450; --ns-line: #aeb6c0; --ns-accent: #1f5f8b;
  --cols: 1; --rows: 1; --chars: 3; --stage-over: 5rem; --over: 2rem;
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--ns-bg); color: var(--ns-fg); overflow: hidden;
}
.ns-display.theme-dark { --ns-bg: #0b0f14; --ns-fg: #ffffff; --ns-sub: #cfd8e3; --ns-line: #4a5562; --ns-accent: #8fc7ee; }
.ns-display[hidden], .ns-panel[hidden], .ns-display [hidden] { display: none; }
/* 表示中は、ページの残りを隠す(後ろの文字が読み上げ・Tab に出ないように) */
html.ns-on { overflow: hidden; }
html.ns-on .skip, html.ns-on header.site, html.ns-on footer.site, html.ns-on main .wrap > :not(.ns-display) { display: none; }

.ns-display.win-2 { --cols: 2; }
.ns-display.win-3 { --cols: 3; }
.ns-display.win-4 { --cols: 2; --rows: 2; }
/* 窓口が複数のとき、各行は「窓口の名前+次へ」の行の分だけ高さを使う(その分を番号の高さから引く) */
.ns-display:not(.win-1) { --over: 5.4rem; }
.ns-display.win-4 { --over: 4.8rem; }
/* 縦長の画面(タブレットを縦に置く・スマホ)では、窓口を縦に積んで、幅いっぱいを使う */
@media (orientation: portrait) {
  .ns-display.win-2 { --cols: 1; --rows: 2; }
  .ns-display.win-3 { --cols: 1; --rows: 3; }
  .ns-display.win-4 { --cols: 1; --rows: 4; }
}

.ns-stage { container-type: size; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.4rem, 2vh, 1.5rem); padding: 1rem clamp(0.5rem, 2vw, 2rem); text-align: center; }
.ns-label { margin: 0; font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 2.4rem); line-height: 1.3; color: var(--ns-sub); max-width: 100%; overflow-wrap: anywhere; }
.ns-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1.5rem); width: 100%; max-width: 100%; }
.ns-display.win-4 .ns-panel { padding: 0.2rem 0.4rem; }
.ns-display.win-4 .ns-win { font-size: clamp(0.9rem, 1.6vw, 1.4rem); }
.ns-panel { position: relative; box-sizing: border-box; min-width: 0; padding: 0.4rem 0.5rem; border: 0.25rem solid transparent; border-radius: var(--r-l); text-align: center; }
.ns-display:not(.win-1) .ns-panel { border-color: var(--ns-line); }
.ns-panel.latest { border-color: var(--ns-accent); }
.ns-head { position: relative; z-index: 1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.6rem; } /* 番号の字の枠が上に重なっても、次へが押せる */
.ns-win { font-weight: 700; font-size: clamp(1rem, 2.2vw, 2rem); color: var(--ns-sub); }
/* 番号: 画面の列の幅(vw)に収まる大きさ。字数(--chars)が多いほど小さく、高さでも頭打ち(高さは、操作の列を除いた表示の領域 cqh から、言葉の行の分(--stage-over)を引き、行の数で割って、1 行ぶんの余白(--over)を引く)。最も小さい字でも 2.5rem */
.ns-num {
  --colw: calc(100vw / var(--cols));
  margin: 0; pointer-events: none; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow-wrap: normal;
  font-size: clamp(2.5rem, min(calc(var(--colw) * 0.84 / (var(--chars) * 0.66)), calc(((100cqh - var(--stage-over)) / var(--rows) - var(--over)) / 1.1)), 60rem);
}
/* 「直前」の印は、枠の右上に置く(出たり消えたりしても、窓口の名前と次への位置が動かない) */
.ns-new { position: absolute; top: 0.45rem; right: 0.6rem; display: inline-block; padding: 0 0.7rem; border-radius: var(--r-m); background: var(--ns-accent); color: var(--ns-bg); font-weight: 700; font-size: var(--fs-s); }

/* 操作の列: 表示の下に低く(次へ・戻す・「その他」の1行。説明・キーボードの案内・音・全画面・CSV・設定にもどるは「その他」の中)。受付の人だけが押す */
.ns-bar { flex: 0 0 auto; padding: 0.4rem clamp(0.5rem, 2vw, 2rem) 0.5rem; border-top: 1px solid var(--ns-line); font-size: var(--fs-s); color: var(--ns-sub); max-height: 45vh; overflow-y: auto; }
.ns-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.ns-undo { order: 1; }
.ns-slot { order: 2; flex: 1 1 auto; display: flex; justify-content: center; gap: 0.75rem; }
.ns-status { order: 3; flex: 0 1 auto; max-width: 30%; margin: 0; }
.ns-more { order: 4; }
.ns-more[open] { flex-basis: 100%; }
.ns-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.9rem; border: 1px solid var(--ns-fg); border-radius: var(--r-m); color: var(--ns-fg); font-size: var(--fs-s); list-style: none; }
.ns-more > summary::-webkit-details-marker { display: none; }
.ns-more[open] > summary { margin-bottom: 0.4rem; }
.ns-more-body { display: flex; flex-direction: column; gap: 0.4rem; }
.ns-display .button.secondary { color: var(--ns-fg); border-color: var(--ns-fg); }
/* 次へ: 大きな主ボタン(押し間違いを減らすため、戻すは小さく左に離す)。窓口が複数のときは、窓口の名前の行の中 */
.ns-display .button.ns-next { min-height: 4rem; min-width: 10rem; font-size: 1.4rem; font-weight: 700; background: var(--ns-fg); color: var(--ns-bg); border-color: var(--ns-fg); }
.ns-display .button.ns-next:active { background: var(--ns-accent); border-color: var(--ns-accent); }
.ns-display .ns-head .button.ns-next { min-height: 3rem; min-width: 6.5rem; font-size: 1.15rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.ns-display .check { color: var(--ns-fg); }
.ns-note { margin: 0; font-size: var(--fs-xs); }
/* 画面を消さない機能の知らせは、表示の色に従わせる(暗い表示で白く光らない) */
.ns-display .warn { margin: 0; background: transparent; color: var(--ns-sub); border: 1px solid var(--ns-line); }
.ns-display button:focus-visible, .ns-display input:focus-visible, .ns-display summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }