/* Kiosk: the manager pages' console look, arranged as a three-step workflow: ID -> confirm -> done.
   Camera on the left (always visible, so people know where to look), the current step on the right. */
:root { color-scheme:light dark;
  --bg:#f4f5f7; --card:#fff; --text:#1b1f24; --muted:#5b6470; --line:#d6dae0; --line2:#c3c8d0; --input:#8a93a0;
  --accent:#1f4fd8; --link:#1f4fd8; --ok:#0f7b4b; --warn:#9a5b00; --bad:#b3261e;
  --okbg:#e6f4ec; --warnbg:#fff4de; --badbg:#fdeceb; --oktext:#0b5c38; --warntext:#6d4100; --badtext:#8c1d17; --soft:#e9ecf1; }
@media (prefers-color-scheme: dark) { :root {
  --bg:#12141C; --card:#1E2229; --text:#f1f5f9; --muted:#94a3b8; --line:#1e293b; --line2:#334155; --input:#64748b;
  --accent:#4f46e5; --link:#818cf8; --ok:#34d399; --warn:#f59e0b; --bad:#f87171;
  --okbg:#0f2f25; --warnbg:#2a1f0a; --badbg:#3b1616; --oktext:#6ee7b7; --warntext:#fcd34d; --badtext:#fca5a5; --soft:#1e293b; } }

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:18px/1.5 system-ui,sans-serif; min-height:100vh; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sub { color:var(--muted); font-size:16px; } .sub.small { font-size:14px; }
h2 { font-size:22px; margin:0 0 12px; }

/* header */
header.top { position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px;
  padding:14px 24px; background:color-mix(in srgb, var(--card) 85%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.brandblock { display:flex; flex-direction:column; }
.brand { font-size:20px; font-weight:700; letter-spacing:-.01em; }
/* logo image has its own dark tile, so it reads the same in light and dark */
.logo-img { display:block; height:56px; width:auto; border-radius:10px; background:#202126; }
header .right { display:flex; align-items:center; gap:16px; flex:none; }
#clock { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.pill { font-size:14px; padding:4px 12px; border-radius:999px; border:1.5px solid currentColor; display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.pill::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.pill.online { color:var(--oktext); } .pill.offline { color:var(--warntext); background:var(--warnbg); }

main { max-width:1280px; margin:0 auto; padding:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.narrow { max-width:520px; margin:24px auto; }

.kgrid { display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px) { .kgrid { grid-template-columns:minmax(340px,4fr) 7fr; } }
@media (max-width:1023px) { .stage { max-height:30vh; } }

/* camera */
.stage { position:relative; background:#000; border:2px solid var(--line2); border-radius:8px; overflow:hidden; aspect-ratio:4/3; max-height:46vh; margin:0 auto; transition:box-shadow .15s, border-color .15s; }
.stage.cue { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#camera-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:#7a1a14; text-align:center; padding:16px; }
.stage-cue { position:absolute; left:0; right:0; bottom:0; padding:8px; text-align:center; font-weight:600; color:#fff; background:color-mix(in srgb, #000 62%, transparent); }
.stage-note { margin:12px 0 0; color:var(--muted); font-size:15px; text-align:center; }

/* progress: a real sequence, so it is numbered */
.steps { list-style:none; display:flex; gap:8px; margin:0 0 20px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.steps li { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--muted); flex:1; }
.steps li span { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:2px solid var(--line2); font-size:13px; font-weight:700; flex:none; }
.steps li[aria-current] { color:var(--text); } .steps li[aria-current] span { background:var(--accent); border-color:var(--accent); color:#fff; }
.steps li.done span { background:var(--ok); border-color:var(--ok); color:#06281d; }

/* step 1: the ID, shown like a phone number (3-3-4) in ten slots */
.slots { position:relative; margin:8px 0 8px; }
.slots input { position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; border:0; background:none; }
.slotrow { display:flex; flex-wrap:wrap; gap:6px 18px; }
.grp { display:flex; gap:6px; }
.slot { display:flex; align-items:center; justify-content:center; width:44px; height:62px; border:2px solid var(--input); border-radius:8px; background:var(--bg);
  font:700 32px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style:normal; font-variant-numeric:tabular-nums; }
.slot.filled { border-color:var(--muted); }
.slots:focus-within .slot.active { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.idmsg { min-height:28px; margin:8px 0 16px; color:var(--muted); font-size:16px; } .idmsg.bad { color:var(--badtext); font-weight:600; } .idmsg.warn { color:var(--warntext); font-weight:600; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:440px; }
.key { height:64px; min-height:64px; padding:0; font-size:28px; font-weight:600; color:var(--text); background:var(--soft); border:1px solid var(--line2); border-radius:10px; }
.key.func { font-size:17px; font-weight:500; color:var(--muted); }
.key:active { transform:scale(.97); }

/* step 2: confirm */
.bigname { margin:4px 0 4px; font-size:44px; font-weight:700; line-height:1.1; overflow-wrap:anywhere; }
.notice { margin:12px 0; padding:12px 14px; border:2px solid var(--warntext); border-radius:8px; background:var(--warnbg); color:var(--warntext); font-weight:600; font-size:17px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 12px; }
.actions button { flex:1 1 220px; }
#go { min-height:72px; font-size:30px; }
.below { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 0; }

button { font-size:22px; padding:12px 24px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; min-height:56px; font-weight:600; font-family:inherit; }
button:hover { filter:brightness(1.1); } .key:hover { filter:none; background:var(--line2); }
button:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--link); border:2px solid var(--accent); }
button.link { background:none; color:var(--muted); font-size:16px; font-weight:400; min-height:44px; padding:4px 8px; text-decoration:underline; }
input[type=password] { width:100%; font-size:24px; padding:10px 14px; margin:8px 0 12px; border:2px solid var(--input); border-radius:8px; background:var(--bg); color:var(--text); }

/* step 3: result */
#status { border:3px solid transparent; border-radius:12px; padding:20px 24px; min-height:150px; display:flex; align-items:center; gap:20px; }
.icon { width:64px; height:64px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#status .text { min-width:0; }
#status-title { font-size:36px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
#status-detail { font-size:24px; margin-top:6px; font-variant-numeric:tabular-nums; }
#status.ok { background:var(--okbg); border-color:var(--oktext); color:var(--oktext); }
#status.warn { background:var(--warnbg); border-color:var(--warntext); color:var(--warntext); }
#status.bad { background:var(--badbg); border-color:var(--badtext); color:var(--badtext); }
figure { margin:0; text-align:center; flex:none; font-size:13px; }
figure img { display:block; width:112px; height:84px; object-fit:cover; border-radius:8px; transform:scaleX(-1); border:2px solid currentColor; }
figcaption { margin-top:4px; }

/* timesheet */
#timesheet:focus { outline:none; }
.ts-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ts-head h2 { margin:0; font-size:24px; }
.ts-week { margin-top:18px; }
.ts-week h3 { margin:0 0 6px; font-size:18px; }
.ts-week h3 span { color:var(--muted); font-weight:400; font-size:15px; margin-left:8px; }
table.ts { width:100%; border-collapse:collapse; font-size:18px; font-variant-numeric:tabular-nums; }
table.ts th { text-align:left; color:var(--muted); font-size:14px; font-weight:600; padding:4px 8px; }
table.ts td { padding:8px; border-top:1px solid var(--line2); }
table.ts td.num, table.ts th.num { text-align:right; }
table.ts tr.fix td { background:var(--warnbg); color:var(--warntext); font-weight:600; }
table.ts tr.none td { color:var(--muted); }
table.ts .st { font-size:14px; font-weight:600; }
.ts-totals { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:8px; font-size:18px; }
.ts-totals b { font-size:22px; }

footer { display:flex; justify-content:space-between; margin-top:20px; color:var(--muted); font-size:14px; }

@media (max-width:520px) {
  .slot { width:28px; height:48px; font-size:24px; } .grp { gap:4px; } .slotrow { gap:6px 10px; }
  .bigname { font-size:34px; } #status { flex-wrap:wrap; } #status-title { font-size:28px; } table.ts { font-size:16px; }
  .steps li { font-size:13px; } .steps { gap:4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
@media (max-width:420px) { .slot { width:22px; height:42px; font-size:20px; border-width:1.5px; } .grp { gap:3px; } .slotrow { gap:6px 8px; flex-wrap:nowrap; } .key { height:58px; min-height:58px; } }