/* Ticket Triage. Builds on ../theme.css (Inter, neutral surfaces, shapes). One column, sized for a phone first;
   wider screens just get margins. The section accent is the brick red from sites.js; game states keep their own
   colours (green right, amber partly right, red wrong, blue escalated). */
:root {
  --accent: #c2351f; --accent-soft: #fbe9e5; --on-accent: #ffffff;
  --green: #1b774a; --amber: #8f5c00; --red: #c2351f; --blue: #2f5bc4;
  --good-bg: #e3f3ea; --bad-bg: #fbe5e1; --warn-bg: #faf0d9; --esc-bg: #e4ebfa;
  --card: var(--wl-bg); --well: var(--wl-surface); --well-2: var(--wl-surface-2);
}
:root:not([data-theme="light"]) {
  --accent: #ff7d68; --accent-soft: #3a211d; --on-accent: #101114;
  --green: #56cb8e; --amber: #e8b250; --red: #ff7d68; --blue: #93acf4;
  --good-bg: #16302a; --bad-bg: #3a1f1c; --warn-bg: #362c17; --esc-bg: #222c45;
  --card: var(--wl-surface); --well: var(--wl-surface-2); --well-2: #2c3038;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wl-bg); color: var(--wl-ink); font: 16px/1.5 var(--wl-font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--wl-focus); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, p, dl, dd, ul, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }

.app { max-width: 720px; margin: 0 auto; padding-inline: 16px; padding-block: 12px 40px; display: flex; flex-direction: column; gap: 16px; }
.screen { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.home { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--wl-radius-sm); background: var(--wl-surface); color: var(--wl-ink-2); flex: none; transition: background .15s, color .15s; }
.home:hover { background: var(--wl-surface-2); color: var(--wl-ink); }
.home svg { width: 18px; height: 18px; }
h1 { font: 750 20px/1.1 var(--wl-font); letter-spacing: -.03em; margin-right: auto; }
.bar-tools { display: flex; gap: 8px; }

.btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--wl-pill); background: var(--well); color: var(--wl-ink); font: 600 15px/1 var(--wl-font); letter-spacing: -.01em; transition: background .15s, transform .1s, box-shadow .15s; }
.btn:hover { background: var(--well-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--wl-ink)); }
.btn.big { min-height: 56px; font-size: 18px; font-weight: 700; width: 100%; }
.btn b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wl-ink-3); margin-left: 2px; }
.linkish { border: 0; background: none; padding: 4px 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: 14px; }
.hint { font-size: 14px; color: var(--wl-ink-3); }

/* ---------- cards ---------- */
.slip { position: relative; min-width: 0; padding: 22px 20px 24px; background: var(--card); border: 1px solid var(--wl-edge); border-radius: var(--wl-radius); box-shadow: var(--wl-shadow); display: flex; flex-direction: column; gap: 16px; }
.form-no { font: 600 13px/1.2 var(--wl-font); color: var(--accent); }
.slip h2 { font: 750 26px/1.12 var(--wl-font); letter-spacing: -.035em; text-wrap: balance; }
.slip h3 { font: 700 17px/1.2 var(--wl-font); letter-spacing: -.02em; color: var(--wl-ink); display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.slip h3 span { font: 500 14px var(--wl-font); letter-spacing: 0; color: var(--wl-ink-3); font-variant-numeric: tabular-nums; }
.lede { color: var(--wl-ink-2); max-width: 60ch; }

.set { display: grid; gap: 8px; }
.set legend { font: 700 15px/1.2 var(--wl-font); letter-spacing: -.01em; color: var(--wl-ink); margin-bottom: 10px; display: flex; gap: 12px; align-items: baseline; width: 100%; }
#modes, #paces { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pick { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 0; border-radius: var(--wl-radius-md); background: var(--well); box-shadow: inset 0 0 0 1.5px transparent; cursor: pointer; min-height: 56px; transition: background .15s, box-shadow .15s; }
.pick:hover { background: var(--well-2); }
.pick:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pick:has(input:focus-visible) { outline: 2px solid var(--wl-focus); outline-offset: 2px; }
.pick input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.pick span { display: grid; gap: 3px; min-width: 0; }
.pick strong { font: 650 16px/1.2 var(--wl-font); letter-spacing: -.015em; }
.pick small { font-size: 13.5px; color: var(--wl-ink-2); line-height: 1.35; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.queues { border-radius: var(--wl-radius-md); background: var(--well); }
.queues summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 50px; padding: 14px; cursor: pointer; list-style: none; border-radius: var(--wl-radius-md); }
.queues summary::-webkit-details-marker { display: none; }
.queues summary::after { content: 'Change'; margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: 14px; }
.queues[open] summary::after { content: 'Done'; }
.sum-k { font: 700 15px/1.2 var(--wl-font); letter-spacing: -.01em; color: var(--wl-ink); }
.queues .set { padding: 0 14px 14px; justify-items: start; }
.queues fieldset:disabled { opacity: .5; }
/* the Clock in button stays in reach while you scroll the settings on a phone */
.go-wrap { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--wl-pill); background: var(--wl-bg); box-shadow: inset 0 0 0 1px var(--wl-edge); cursor: pointer; font: 550 14.5px/1 var(--wl-font); }
.chip:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chip:has(input:focus-visible) { outline: 2px solid var(--wl-focus); outline-offset: 2px; }
.chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.chip i { font: 500 12.5px var(--wl-font); font-variant-numeric: tabular-nums; color: var(--wl-ink-3); font-style: normal; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stats div { padding: 12px 14px; background: var(--well); border-radius: var(--wl-radius-md); min-width: 0; }
.stats dt { font: 500 13px/1.25 var(--wl-font); color: var(--wl-ink-3); }
.stats dd { font: 700 21px/1.25 var(--wl-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-top: 2px; }
.stats.big dd { font-size: 26px; letter-spacing: -.03em; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.badge { padding: 11px 13px; border-radius: var(--wl-radius-md); background: var(--well); display: grid; gap: 3px; color: var(--wl-ink-3); }
.badge b { font: 650 14.5px/1.2 var(--wl-font); letter-spacing: -.01em; }
.badge small { font-size: 12.5px; line-height: 1.35; }
.badge.got { background: var(--good-bg); color: var(--wl-ink-2); }
.badge.got b { color: var(--green); }

/* ---------- status strip ---------- */
.status { position: sticky; top: 0; z-index: 5; display: grid; gap: 8px; padding: 8px 0 8px; background: var(--wl-bg); }
.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hud div { padding: 8px 10px; background: var(--wl-surface); border-radius: var(--wl-radius-md); min-width: 0; display: grid; }
.hud .k { font: 500 12px/1.2 var(--wl-font); color: var(--wl-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud b { font: 700 17px/1.25 var(--wl-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sla { height: 6px; border-radius: var(--wl-pill); background: var(--wl-surface-2); overflow: hidden; }
.sla i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--wl-ink-2); transform-origin: left center; }
.sla.low i { background: var(--red); }
.sla.off { visibility: hidden; height: 0; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; }
.pips i { width: 16px; height: 8px; border-radius: var(--wl-pill); background: var(--wl-surface-2); }
.pips.large i { width: 26px; height: 12px; }
.pips i.now { background: var(--wl-ink-3); }
.pips i.s2 { background: var(--green); }
.pips i.s1 { background: var(--amber); }
.pips i.s0 { background: var(--bad-bg); box-shadow: inset 0 0 0 1.5px var(--red); }
.pips i.sx { background: var(--red); }
.pips i.se { background: var(--blue); opacity: .6; }

/* ---------- the ticket ---------- */
.ticket { gap: 14px; }
.t-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.serial { font: 600 14px/1 var(--wl-font); font-variant-numeric: tabular-nums; color: var(--wl-ink-3); }
.tag { font: 600 12.5px/1 var(--wl-font); color: var(--accent); padding: 6px 10px; background: var(--accent-soft); border-radius: var(--wl-pill); }
.clock { margin-left: auto; font: 700 16px/1 var(--wl-font); font-variant-numeric: tabular-nums; color: var(--wl-ink-2); }
.clock.low { color: var(--red); }
.t-from { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--well-2); color: var(--wl-ink-2); font: 700 14px/1 var(--wl-font); }
.who { display: grid; min-width: 0; margin-right: auto; }
.who b { font-weight: 650; overflow-wrap: anywhere; }
.who small { font-size: 13.5px; color: var(--wl-ink-3); }
.stamp { display: inline-block; padding: 5px 11px; border-radius: var(--wl-pill); background: var(--bad-bg); font: 650 13px/1.15 var(--wl-font); color: var(--red); max-width: 100%; overflow-wrap: anywhere; }
.stamp.user:empty { display: none; }
.t-subj { font: 750 25px/1.15 var(--wl-font); letter-spacing: -.03em; text-wrap: balance; }
.t-body { font-size: 17px; line-height: 1.55; white-space: pre-line; max-width: 62ch; color: var(--wl-ink); }
.t-ev { margin: 0; padding: 12px 14px; background: var(--well); border-radius: var(--wl-radius-md); font: 400 13.5px/1.55 var(--wl-mono); color: var(--wl-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-q { font: 700 16px/1.3 var(--wl-font); letter-spacing: -.015em; color: var(--wl-ink); margin-top: 6px; }
.opts { display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; min-height: 56px; padding: 10px 14px; border: 0; border-radius: var(--wl-radius-md); background: var(--well); box-shadow: inset 0 0 0 1.5px transparent; line-height: 1.4; transition: background .15s, box-shadow .15s; }
.opt:hover:not(:disabled) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.opt .key { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--wl-bg); color: var(--wl-ink-2); font: 700 14px/1 var(--wl-font); box-shadow: inset 0 0 0 1px var(--wl-edge); }
.opt:hover:not(:disabled) .key { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.opt:disabled { cursor: default; color: var(--wl-ink-3); }
.opt.gone { opacity: .35; text-decoration: line-through; }
.opt.right { background: var(--good-bg); box-shadow: inset 0 0 0 1.5px var(--green); color: var(--wl-ink); }
.opt.right .key { background: var(--green); color: var(--card); box-shadow: none; }
.opt.chosen:not(.right) { background: var(--bad-bg); box-shadow: inset 0 0 0 1.5px var(--red); color: var(--wl-ink); }
.opt.chosen:not(.right) .key { background: var(--red); color: var(--card); box-shadow: none; }
.opt.chosen.okay { background: var(--warn-bg); box-shadow: inset 0 0 0 1.5px var(--amber); }
.opt.chosen.okay .key { background: var(--amber); color: var(--card); }
.opt small { display: block; font-size: 13.5px; color: var(--wl-ink-3); }
.lifelines { display: flex; gap: 8px; flex-wrap: wrap; }

.result { display: grid; gap: 12px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--wl-edge); }
.stamp.verdict { font-size: 17px; font-weight: 700; padding: 8px 16px; letter-spacing: -.01em; margin: 2px 0 2px; }
.stamp[data-kind="good"] { color: var(--green); background: var(--good-bg); }
.stamp[data-kind="ok"] { color: var(--amber); background: var(--warn-bg); }
.stamp[data-kind="esc"] { color: var(--blue); background: var(--esc-bg); }
.stamp[data-kind="incident"] { background: var(--red); color: var(--card); }
.r-out { font-size: 17px; }
.r-best { color: var(--wl-ink-2); }
.r-best b { color: var(--green); }
.r-tip { padding: 12px 14px; background: var(--well); border-radius: var(--wl-radius-md); font-size: 15px; color: var(--wl-ink-2); justify-self: stretch; }
.r-tip::before { content: 'Tip  '; font: 700 14px var(--wl-font); color: var(--wl-ink); white-space: pre; }
.r-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; justify-self: stretch; }
.pts { font: 700 17px var(--wl-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pts.plus { color: var(--green); } .pts.minus { color: var(--red); }
@media (max-width: 520px) { .r-foot .btn { flex: 1 1 100%; min-height: 52px; } }

/* ---------- report ---------- */
.report .rank { align-self: flex-start; }
.bycat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; }
.bycat li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--wl-edge); font-size: 15px; }
.bycat b { font: 650 15px var(--wl-font); font-variant-numeric: tabular-nums; }
.e-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.e-actions .btn { flex: 1 1 160px; }
.foot { color: var(--wl-ink-3); font-size: 13.5px; text-align: center; padding-top: 4px; }

@media (min-width: 700px) { .app { padding-block: 20px 60px; } .slip { padding: 28px 32px 30px; } .t-subj, .slip h2 { font-size: 30px; } }
@media (prefers-reduced-motion: no-preference) {
  .stamp.verdict { animation: pop .24s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}