/* Phase 3: two-step sign-in, line labels and requests, per-line debugging, wallboard, help. Same tokens, same rules:
   hairlines, 3–5px radii, one accent for "live", state never by colour alone. */

/* ---------- small shared pieces ---------- */
.banner[data-kind="ok"] { border-left-color: var(--live); }
.banner[data-kind="ok"] > .ic { color: var(--live); }
.chip.sm { height: 24px; padding: 0 8px; font-size: var(--fs-xs); border-radius: 12px; }
.presence[data-p="oncall"] .ic { color: var(--live); }
.presence[data-p="oncall"] { color: var(--ink); font-weight: 550; }
.presence[data-p="wrap"] .ic { color: var(--info); }
.badge[data-k="requests"], .badge[data-k="missed"] { background: var(--ring); color: #1a1202; }
:root[data-theme="light"] .badge[data-k="requests"], :root[data-theme="light"] .badge[data-k="missed"] { color: #fff; }
.who-l { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bare-outlet { height: 100dvh; overflow: auto; display: block; }
.seg-n { margin-left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ring); color: #1a1202; font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; }
:root[data-theme="light"] .seg-n { color: #fff; }

/* ---------- line labels ---------- */
.ltags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; vertical-align: middle; min-width: 0; }
.ltag { --tc: var(--ink-2); display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--tc) 42%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--tc) 9%, transparent); color: var(--tc); font: 600 10.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; max-width: 22ch; }
.ltag > span { overflow: hidden; text-overflow: ellipsis; }
.ltag[data-tone="info"] { --tc: var(--info); }
.ltag[data-tone="warn"] { --tc: var(--ring); }
.ltag[data-tone="ok"] { --tc: var(--live); }
.ltag.more { --tc: var(--ink-3); }
.linekey-m .ltags { margin-top: 3px; }
.detail-t .ltags { flex: none; }
.ltag-chip { gap: 5px; }
.ltag-chip[data-tone="info"][aria-pressed="false"] { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.ltag-chip[data-tone="warn"][aria-pressed="false"] { color: var(--ring); border-color: color-mix(in srgb, var(--ring) 45%, transparent); }
.ltag-chip[data-tone="ok"][aria-pressed="false"] { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.tagpick { display: flex; flex-direction: column; gap: 8px; }
.tagpick-l { display: flex; flex-wrap: wrap; gap: 6px; }
.tagpick-l:empty { display: none; }
.tagpick-in { max-width: 220px; }
.tagfilter { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lines-filter { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lines-filter:has(.tagfilter[hidden]) { display: none; }
.panel-h .tagfilter { margin-left: auto; justify-content: flex-end; }

/* ---------- one-time code, QR, enrolment, recovery codes ---------- */
.otp { display: flex; align-items: center; gap: 6px; }
.otp-gap { width: 8px; height: 1px; background: var(--line-2); flex: none; }
.otp-b { width: 44px; height: 52px; min-width: 0; padding: 0; text-align: center; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sunken); color: var(--ink); font: 500 24px/1 var(--mono); font-variant-numeric: tabular-nums; caret-color: var(--live); transition: border-color var(--t); }
.otp-b:hover { border-color: var(--ink-3); }
.otp-b:focus-visible { outline-offset: 0; border-color: var(--focus); }
.otp-b:disabled { opacity: .55; }
.otp.bad .otp-b { border-color: var(--err); }
.auth-body .otp-b { height: 56px; font-size: 26px; }
.auth-form.wide { }
.auth-body.wide { max-width: 420px; }
.auth:has(.auth-body.wide) { grid-template-columns: minmax(340px, 540px) 1fr; }
.qr { width: 184px; padding: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); flex: none; }
.qr-svg { display: block; width: 100%; height: auto; }
.qr-fg { fill: #000; }
.qr-bg { fill: #fff; }
.qr-none { width: auto; background: var(--sunken); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.tf-steps { display: flex; flex-direction: column; gap: 18px; }
.tf-steps > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.tf-n { width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--ink-2); }
.tf-b { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tf-b > p { font-size: var(--fs-sm); line-height: 1.5; }
.tf-qr { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.tf-manual { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
.tf-key { font-size: 14px; letter-spacing: .06em; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sunken); user-select: all; overflow-wrap: anywhere; }
.tf .btn.lg, .rc .btn.lg { align-self: flex-start; }
.rc { display: flex; flex-direction: column; gap: 14px; }
.rc-lead { margin-top: 0; }
.rc-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sunken); counter-reset: rc; }
.rc-codes li { padding: 8px 12px; font-size: 15px; letter-spacing: .04em; border-bottom: 1px solid var(--line); user-select: all; }
.rc-codes li:nth-child(odd) { border-right: 1px solid var(--line); }
.rc-codes li:nth-last-child(-n+2) { border-bottom: 0; }
.pw-rules { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.pw-rule { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.pw-rule[data-s="ok"] { color: var(--live); }
.pw-rule[data-s="bad"] { color: var(--ink-2); }
.pw-rule[data-s="bad"] .ic { color: var(--err); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.reason { height: 44px; justify-content: flex-start; padding: 0 14px; font-size: var(--fs); }

/* ---------- security page ---------- */
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1080px; }
.sec-wide { grid-column: 1 / -1; }
.sec-state { display: flex; align-items: flex-start; gap: 12px; }
.sec-ic { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-lg); display: grid; place-items: center; color: var(--ink-3); flex: none; }
.sec-state[data-on="1"] .sec-ic { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, transparent); background: color-mix(in srgb, var(--live) 9%, transparent); }
.sec-state-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sec-state-t p { font-size: var(--fs-sm); line-height: 1.5; max-width: 52ch; }
.sec-actions { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.sec-pw { max-width: 380px; }
.set-s .tbl-wrap { margin: 0 -18px; }
.set-s .tbl th:first-child, .set-s .tbl td:first-child { padding-left: 18px; }
.set-s .tbl th:last-child, .set-s .tbl td:last-child { padding-right: 18px; }
.sess-foot { flex-wrap: wrap; gap: 8px 14px; padding-top: 4px; }
.lockrow { display: flex; align-items: center; gap: 4px 6px; margin-top: 3px; flex-wrap: wrap; }
.lockrow > * { white-space: nowrap; }
.lockrow .muted { font-size: var(--fs-xs); }
.who-l.nowrap { flex-wrap: nowrap; white-space: nowrap; }
.tab-dot[data-k="missed"], .tab-dot[data-k="requests"] { background: var(--ring); }

/* ---------- option list (reasons, lines to give) ---------- */
.optlist { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.opt { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background var(--t); }
.opt:last-child { border-bottom: 0; }
.opt:hover { background: var(--raised); }
.opt input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; left: 12px; }
.opt-dot { width: 16px; height: 16px; border: 1px solid var(--ink-3); border-radius: 50%; background: var(--sunken); display: grid; place-items: center; }
.opt-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.opt input:checked + .opt-dot { border-color: var(--ink); }
.opt input:checked + .opt-dot::after { background: var(--ink); }
.opt input:focus-visible + .opt-dot { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt:has(input:checked) { background: var(--raised); box-shadow: inset 3px 0 0 var(--ink); }
.opt-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 550; }
.opt-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- request a new line ---------- */
.mynum { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.mynum-m { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 8px 14px; }
.mynum-l { display: flex; align-items: center; gap: 0 5px; flex-wrap: wrap; overflow: visible; white-space: normal; }
.mynum-l .ltags { margin-left: 3px; }
.mynum-t { flex: 1 1 auto; }
.mynum-n { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mynum-lim { font-size: var(--fs-xs); white-space: nowrap; }
.auth-body h1:focus { outline: none; }
.lr-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: 38px; padding: 5px 8px 5px 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.lr-q { flex: 1 1 140px; min-width: 0; }
.lr-row[data-state="waiting"] { background: color-mix(in srgb, var(--ring) 9%, transparent); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.lr-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ring); flex: none; animation: blink 1.2s steps(2) infinite; }
.lr-wait { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.lr-wait .muted { font-size: var(--fs-xs); }
.lr-sum { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--ring); border-radius: var(--r); background: var(--sunken); }
.lr-sum-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lr-sum-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-reason { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.lr-reason .ic { color: var(--ring); }
.lr-cur { color: var(--ink); font-weight: 550; }
.lr-msg { margin: 2px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.lr-match { display: inline-flex; align-items: center; gap: 4px; color: var(--live); font-weight: 550; }
.modal-f .lr-decline { margin-right: auto; color: var(--err); }
.rp-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: var(--fs-sm); }

.board-grid { grid-template-columns: minmax(0, 2.5fr) minmax(280px, 1fr); }
.board-main, .board-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.board-main { grid-column: 1; }
.board-side { grid-column: 2; }
.board-main .panel, .board-side .panel { grid-column: auto; grid-row: auto; }
.tbl td .errclip { max-width: 19ch; }
.board-lines .who-l { flex-wrap: nowrap; }
.board-requests { border-color: color-mix(in srgb, var(--ring) 55%, var(--line)); }
.reqs { display: flex; flex-direction: column; }
.req { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 12px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--ring); }
.req:last-child { border-bottom: 0; }
.req-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.req-t { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.req-r { color: var(--ink-2); font-size: var(--fs-sm); }
.req-msg { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.req-a { display: flex; gap: 6px; }

/* ---------- dialer additions ---------- */
.ms-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; min-height: 50px; border-bottom: 1px solid var(--line); }
.ms-row .rc-dir { color: var(--err); display: grid; }
.ms-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ms-who .num { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrapbar-host:empty { display: none; }
.wrapbar { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px 12px; border: 1px solid var(--line-2); border-left: 3px solid var(--info); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.wrapbar > .ic { color: var(--info); }
.wrapbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; font-size: var(--fs-sm); }
.wrapbar-t .muted { font-size: var(--fs-xs); }
.wrapbar-n { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.wrapbar-p { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.wrapbar-p i { display: block; height: 100%; background: var(--info); transition: width .5s linear; }
.conn-lv { display: flex; flex-direction: column; gap: 5px; }
.lvls { display: flex; flex-direction: column; gap: 5px; }
.lvl { display: grid; grid-template-columns: 88px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.lvl-l { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 9px; }
.lvl-bar i { background: var(--line); border-radius: 1px; }
.lvl-bar i.on { background: var(--live); }
.lvl-bar i.on:nth-last-child(-n+4) { background: var(--ring); }
.lvl-bar i.on:nth-last-child(-n+1) { background: var(--err); }
.lvl-t { font-size: var(--fs-xs); color: var(--ink-3); text-align: right; white-space: nowrap; }
.lvl[data-quiet="1"] .lvl-t { color: var(--ring); font-family: var(--sans); font-weight: 600; }
.lv-s .lvl { grid-template-columns: 170px minmax(0, 420px) 60px; }

/* ---------- line detail: tabs, blocked state ---------- */
.dtabs { display: flex; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtab { display: inline-flex; align-items: center; height: 38px; padding: 0 10px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 550; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dtab:hover { color: var(--ink); }
.dtab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.dtab:focus-visible { outline-offset: -3px; }
.detail-body { display: flex; flex-direction: column; min-width: 0; }
.detail-body > div:empty { display: none; }
.detail-body .detail-s:last-child { border-bottom: 0; }
.blocked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line-2)); border-left-width: 3px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.blocked[data-kind="account_disabled"], .blocked[data-kind="error"], .blocked[data-kind="launch_failed"], .blocked[data-kind="restart_exhausted"] { border-color: color-mix(in srgb, var(--err) 55%, var(--line-2)); background: color-mix(in srgb, var(--err) 7%, var(--panel)); }
.blocked-ic { color: var(--warn); margin-top: 1px; }
.blocked[data-kind="account_disabled"] .blocked-ic, .blocked[data-kind="error"] .blocked-ic, .blocked[data-kind="launch_failed"] .blocked-ic, .blocked[data-kind="restart_exhausted"] .blocked-ic { color: var(--err); }
.blocked-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blocked-t { font-size: var(--fs-md); }
.blocked-b p { font-size: var(--fs-sm); line-height: 1.5; max-width: 68ch; }
.blocked-q { color: var(--ink-2); font-style: normal; overflow-wrap: anywhere; }
.blocked-a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- connection check ---------- */
.pf-head { display: flex; flex-direction: column; gap: 4px; }
.pf-head p { font-size: var(--fs-sm); max-width: 78ch; line-height: 1.5; }
.pf-form { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; }
.pf-num { flex: none; }
.pf-last { padding-bottom: 7px; }
.pf-sum:empty { display: none; }
.pf-intro { font-size: var(--fs-sm); }
.pf { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pf-step { --sc: var(--ink-3); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 transparent; }
.pf-step:last-child { border-bottom: 0; }
.pf-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 50%, transparent); background: color-mix(in srgb, var(--sc) 10%, transparent); }
.pf-step[data-s="pass"] { --sc: var(--live); }
.pf-step[data-s="fail"] { --sc: var(--err); background: color-mix(in srgb, var(--err) 5%, transparent); box-shadow: inset 3px 0 0 var(--err); }
.pf-step[data-s="fail"] .pf-ic { background: var(--err); color: var(--on-err); border-color: var(--err); }
.pf-step[data-s="warn"] { --sc: var(--ring); box-shadow: inset 3px 0 0 var(--ring); }
.pf-step[data-s="run"] { --sc: var(--info); background: color-mix(in srgb, var(--info) 6%, transparent); }
.pf-step[data-s="skip"] .pf-ic, .pf-step[data-s="wait"] .pf-ic { border-style: dashed; background: transparent; }
.pf-step[data-s="skip"] .pf-l, .pf-step[data-s="wait"] .pf-l { color: var(--ink-3); font-weight: 500; }
.pf-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.pf-h { display: flex; align-items: baseline; gap: 8px; }
.pf-n { font-size: var(--fs-xs); color: var(--ink-3); min-width: 2ch; text-align: right; }
.pf-d { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; padding-left: calc(2ch + 8px); }
.pf-fix { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 4px 0 2px calc(2ch + 8px); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); font-size: var(--fs-sm); line-height: 1.5; }
.pf-fix-t { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-fix-k { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.pf-ms { font-size: var(--fs-xs); color: var(--ink-3); padding-top: 3px; white-space: nowrap; }

/* ---------- teach ---------- */
.teach-grid { display: flex; flex-direction: column; gap: 12px; }
.teach-side { display: flex; flex-direction: column; gap: 6px; }
.teach-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.teach-act { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px; padding: 5px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-size: var(--fs-sm); transition: background var(--t); min-width: 0; }
.teach-act:nth-child(4n) { border-right: 0; }
.teach-act:nth-last-child(-n+4) { border-bottom: 0; }
.teach-act:hover:not(:disabled) { background: var(--raised); }
.teach-act:disabled { opacity: .5; }
.teach-act:focus-visible { outline-offset: -2px; }
.teach-act[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.teach-act-l { font-weight: 550; }
.teach-act-s { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.teach-act-s[data-s="taught"] { color: var(--info); font-weight: 600; }
.teach-act-s[data-s="heuristic"] { color: var(--ink-2); }
.teach-act[aria-pressed="true"] .teach-act-s { color: inherit; opacity: .75; }
.teach-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.teach-top { justify-content: space-between; }
.teach-bar { display: flex; align-items: flex-start; gap: 10px; min-height: 52px; padding: 9px 12px; border: 1px solid var(--line-2); border-left-width: 3px; border-radius: var(--r); background: var(--panel); font-size: var(--fs-sm); line-height: 1.45; }
.teach-bar > .ic { margin-top: 2px; color: var(--ink-3); flex: none; }
.teach-bar[data-s="teach"] { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 7%, var(--panel)); }
.teach-bar[data-s="teach"] > .ic { color: var(--info); }
.teach-bar[data-s="done"] { border-left-color: var(--live); }
.teach-bar[data-s="done"] > .ic { color: var(--live); }
.teach-bar[data-s="bad"] { border-left-color: var(--err); }
.teach-bar[data-s="bad"] > .ic { color: var(--err); }
.teach-bar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.teach-bar-t .mono { overflow-wrap: anywhere; }
.teach-sel { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); font-size: 12px; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; }
.rv-frame { position: relative; width: 100%; max-width: max(320px, calc((100dvh - 400px) * 1.6)); margin: 0 auto; }
.rv-frame .rv-canvas { max-width: none; }
.teach .rv-frame { max-width: none; }
.rv.teaching .rv-canvas { cursor: crosshair; }
.rv.teaching .rv-stage { outline: 2px solid var(--info); outline-offset: -2px; }
.rv.teaching .rv-keys, .rv.teaching .rv-hint { display: none; }
.rv-mark { position: absolute; pointer-events: none; border: 2px solid #4da3ff; background: rgba(77, 163, 255, .16); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.rv-mark[data-kind="ok"] { border-color: #42c483; background: rgba(66, 196, 131, .18); }
.rv-mark[data-kind="bad"] { border-color: #f0626f; background: rgba(240, 98, 111, .18); }
.rv-mark-l { position: absolute; left: -2px; bottom: calc(100% + 3px); padding: 2px 6px; border-radius: 2px; background: #0b0d10; color: #e7eaed; font: 600 11px/1.3 var(--sans); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.rv-mark[data-below="1"] .rv-mark-l { bottom: auto; top: calc(100% + 3px); }
.lrn { display: flex; flex-direction: column; gap: 8px; }
.lrn .tbl-wrap { border: 1px solid var(--line); border-radius: var(--r); }
.lrn-sel { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 5px; margin-left: -5px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink); font-size: 12px; text-align: left; }
.lrn-sel:hover { border-color: var(--line-2); background: var(--sunken); }

/* ---------- timeline ---------- */
.tl-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-ctl .search { flex: 1 1 200px; max-width: 280px; }
.tl-ctl .select { height: var(--ctl-sm); font-size: var(--fs-sm); width: auto; }
.tl-ctl .search .input { height: var(--ctl-sm); font-size: var(--fs-sm); }
.tl-kinds { display: flex; flex-wrap: wrap; gap: 5px; }
.tl { height: min(56dvh, 560px); min-height: 240px; overflow: auto; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); font: 12px/1.6 var(--mono); }
.tl-r { display: grid; grid-template-columns: 12ch 11ch minmax(0, 1fr); column-gap: 10px; padding: 0 10px; }
.tl-r:hover { background: var(--panel); }
.tl-t { color: var(--ink-3); white-space: nowrap; }
.tl-k { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 19px; }
.tl-m { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-x { color: var(--ink-3); }
.tl-r[data-lv="warn"] .tl-m, .tl-r[data-lv="warn"] .tl-k { color: var(--ring); }
.tl-r[data-lv="error"] .tl-m, .tl-r[data-lv="error"] .tl-k { color: var(--err); }
.tl-r[data-lv="debug"] .tl-m { color: var(--ink-3); }
.tl-r[data-k="call"] .tl-k, .tl-r[data-k="state"] .tl-k { color: var(--ink); }
.tl .pad { font-family: var(--sans); font-size: var(--fs-sm); }

/* ---------- cookie report, launch options, row lists ---------- */
.ck { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); }
.ck-sum { font-size: var(--fs); }
.ck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; }
.ck-i { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.ck-i .ic { color: var(--live); }
.ck-i[data-s="bad"] .ic { color: var(--err); }
.ck-i[data-s="warn"] .ic { color: var(--ring); }
.ck-s { color: var(--ink-3); font-size: var(--fs-xs); margin-left: auto; white-space: nowrap; }
.ck-i[data-s="bad"] .ck-s { color: var(--err); font-weight: 600; }
.ck-i[data-s="warn"] .ck-s { color: var(--ring); font-weight: 600; }
.ck-warn { color: var(--ink-2); }
.lo-proxy { padding: 12px; border: 1px solid var(--line); border-radius: var(--r); gap: 12px; }
.lo-proxy legend { padding: 0 6px; margin: 0 0 0 -6px; }
.rowlist { display: flex; flex-direction: column; gap: 10px; }
.rowlist-r { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto auto; gap: 10px; align-items: end; }
.rowlist-r:has(.rowlist-prev) { grid-template-columns: minmax(140px, 1.4fr) minmax(140px, 1fr) minmax(70px, auto) auto; }
.rowlist-r .grow2 { grid-column: span 1; }
.rowlist-prev { display: flex; align-items: center; min-height: var(--ctl); }
.rowlist-x { align-self: end; }
.ip-me { font-size: var(--fs); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ip-me .num { font-weight: 600; }
.report-pre { max-height: 60dvh; }

/* ---------- call list additions ---------- */
.cl-clock { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.cl-clock .ic { color: var(--ink-3); }
.cl-clock-t { color: var(--ink); font-weight: 500; }
.cl-log { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; border-left: 2px solid var(--line-2); background: color-mix(in srgb, var(--sunken) 60%, transparent); }
.cl-log-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nl { display: flex; flex-direction: column; gap: 8px; }
.nl-i { display: flex; flex-direction: column; gap: 2px; }
.nl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.nl-t { color: var(--ink-3); font-size: var(--fs-xs); }
.nl-x { color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.nl-full { gap: 12px; }
.nl-full .nl-i { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.nl-full .nl-i:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-notes-f { position: relative; }
.cl-notes-f .field-l { align-items: center; min-height: var(--ctl-sm); }
.snip-btn { margin: -2px 0; }
.snip { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 244px; overflow: auto; padding: 4px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.snip-i { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 6px 9px; border: 0; border-radius: 2px; background: transparent; text-align: left; font-size: var(--fs-sm); line-height: 1.35; color: var(--ink); }
.snip-i .muted { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snip-i[aria-selected="true"], .snip-i:hover { background: var(--line); }
.cl-waiting { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; color: var(--ink-2); line-height: 1.45; }
.cl-waiting .ic { margin-top: 2px; color: var(--ring); flex: none; }
.cl-band[data-mode="cooldown"] { --edge: var(--info); }
.cl-band[data-mode="cooldown"] .cl-band-l { color: var(--info); }
.cl-cool { font-weight: 600; color: var(--ink); }

/* ---------- help ---------- */
.help-page { max-width: 1120px; }
.hw-fig { display: flex; flex-direction: column; gap: 12px; }
.hw { width: 100%; height: auto; display: block; }
.hw-tall { display: none; max-width: 340px; margin: 0 auto; }
.hw-box { fill: var(--sunken); stroke: var(--line-2); stroke-width: 1; }
.hw-edge { fill: var(--ink-3); }
.hw-agent .hw-edge, .hw-gv .hw-edge { fill: var(--ink-3); }
.hw-server .hw-edge, .hw-chrome .hw-edge { fill: var(--live); }
.hw-t { fill: var(--ink); font: 600 14px var(--sans); }
.hw-d { fill: var(--ink-2); font: 400 12px var(--sans); }
.hw-l { font: 600 10.5px var(--sans); letter-spacing: .02em; }
.hw-l-cmd { fill: var(--info); }
.hw-l-audio { fill: var(--live); }
.hw-cmd { fill: none; stroke: var(--info); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; }
path.hw-cmd[d*="L"] { stroke-dasharray: none; }
.hw-audio { fill: none; stroke: var(--live); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-brace { fill: none; stroke: var(--line-2); stroke-width: 1; }
.hw-w { fill: var(--ink-3); font: 500 11.5px var(--sans); }
.hw-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-sm); color: var(--ink-2); }
.hw-key { display: inline-flex; align-items: center; gap: 8px; }
.hw-sw { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--live); }
.hw-sw.cmd { border-top: 2px dashed var(--info); }
.hw-steps { counter-reset: hw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r); }
.hw-steps li { counter-increment: hw; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; border-right: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.hw-steps li:last-child { border-right: 0; }
.hw-steps li strong { color: var(--ink); }
.hw-steps li::before { content: counter(hw); font: 500 11px var(--mono); color: var(--ink-3); }
.help-setup { display: flex; flex-direction: column; }
.help-setup li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.help-setup li:first-child { border-top: 0; padding-top: 0; }
.help-setup li:last-child { padding-bottom: 0; }
.help-n { width: 24px; height: 24px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--ink-2); }
.help-setup-b p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; max-width: 80ch; }
.help-tbl td { vertical-align: top; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.help-tbl td.fit { padding-top: 9px; }
.help-faq { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 10px 20px; font-size: var(--fs-sm); line-height: 1.5; }
.help-faq dt { font-weight: 600; display: flex; align-items: flex-start; gap: 6px; }
.help-faq dt .ic { margin-top: 4px; color: var(--ink-3); }
.help-faq dd { color: var(--ink-2); max-width: 78ch; }
.help-foot { max-width: 80ch; }

/* ---------- wallboard ---------- */
.wb { min-height: 100dvh; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 22px); padding: clamp(12px, 1.8vw, 30px); background: var(--bg); }
.wb-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wb-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: clamp(15px, 1.4vw, 22px); }
.wb-stale { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--ring) 55%, transparent); border-radius: var(--r); color: var(--ring); font-size: var(--fs-sm); font-weight: 600; }
.wb-clock { font-size: clamp(22px, 3vw, 46px); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.wb-tools { display: flex; align-items: center; gap: 4px; opacity: .55; transition: opacity var(--t); }
.wb-tools:hover, .wb-tools:focus-within { opacity: 1; }
.wb-grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: clamp(10px, 1.2vw, 20px); min-height: 0; }
.wb-wait { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--fs-lg); }
.wb-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding: clamp(12px, 1.5vw, 26px) clamp(14px, 1.8vw, 30px); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.wb-l { font-size: clamp(12px, 1.15vw, 19px); font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.wb-v { font-size: clamp(44px, 8.6vw, 150px); font-weight: 400; line-height: .95; letter-spacing: -.05em; white-space: nowrap; }
.wb-tile[data-k="talk"] .wb-v { font-size: clamp(34px, 6.2vw, 108px); letter-spacing: -.07em; padding-bottom: .12em; }
.wb-tile[data-k="connects"] .wb-v { color: var(--live); }
.wb-s { font-size: clamp(12px, 1.2vw, 20px); color: var(--ink-2); min-height: 1.3em; }
.wb-agents { grid-column: 1; justify-content: flex-start; gap: clamp(8px, 1vw, 16px); }
.wb-states { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1vw, 16px) clamp(10px, 1.6vw, 28px); margin: auto 0; }
.wb-states li { display: flex; align-items: baseline; gap: clamp(6px, .8vw, 12px); font-size: clamp(13px, 1.3vw, 22px); color: var(--ink-2); border-left: 3px solid var(--line-2); padding-left: clamp(8px, .9vw, 14px); }
.wb-states li[data-p="oncall"] { border-left-color: var(--live); }
.wb-states li[data-p="available"] { border-left-color: var(--ink-2); }
.wb-states li[data-p="wrap"] { border-left-color: var(--info); }
.wb-states li[data-p="away"] { border-left-color: var(--ring); }
.wb-n { font-size: clamp(28px, 4.2vw, 74px); font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--ink); min-width: 1.2ch; }
.wb-board { grid-column: 2 / -1; justify-content: flex-start; gap: clamp(8px, 1vw, 16px); }
.wb-lb { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 4px; }
.wb-lb li { display: grid; grid-template-columns: 2ch minmax(8ch, 1fr) minmax(0, 2fr) 4ch 7ch; align-items: center; gap: clamp(8px, 1.2vw, 20px); font-size: clamp(15px, 1.9vw, 32px); }
.wb-rank { color: var(--ink-3); font-size: .8em; }
.wb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-bar { height: clamp(6px, .8vw, 12px); background: var(--line); border-radius: 2px; overflow: hidden; }
.wb-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 2px; }
.wb-lb li:first-child .wb-bar i { background: var(--live); }
.wb-c { text-align: right; font-weight: 500; }
.wb-t { text-align: right; color: var(--ink-3); font-size: .62em; white-space: nowrap; }
.wb-none { color: var(--ink-3); font-size: clamp(14px, 1.4vw, 22px); margin: auto 0; }
.wb-foot { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 0; padding: 0; }
.wb-f { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: clamp(10px, 1.1vw, 18px) clamp(14px, 1.8vw, 30px); border-right: 1px solid var(--line); min-width: 0; }
.wb-f:last-child { border-right: 0; }
.wb-fv { font-size: clamp(18px, 2.2vw, 38px); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.wb-f[data-k="warn"] .wb-fv { color: var(--ring); }
.wb-f[data-k="ok"] .wb-fv { color: var(--live); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .board-main, .board-side { grid-column: 1; }
  .board-side { order: -1; }
  /* Requests first, then alerts: views.css lifts the alerts panel to the top of a single column, which inside this
     column would put it above the requests that are waiting for an answer. */
  .board-side .board-alerts { order: 0; }
  .hw-steps { grid-template-columns: 1fr 1fr; }
  .hw-steps li { border-bottom: 1px solid var(--line); }
  .hw-steps li:nth-child(2n) { border-right: 0; }
  .hw-steps li:last-child { border-bottom: 0; grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .sec-grid { grid-template-columns: 1fr; }
  .lv-s .lvl { grid-template-columns: 150px minmax(0, 1fr) 56px; }
}
@media (max-width: 860px) {
  .auth:has(.auth-body.wide) { grid-template-columns: 1fr; }
  .banner { flex-wrap: wrap; }
  .banner-b { flex: 1 1 60%; min-width: 180px; }
  .banner > .btn { margin-left: 26px; }
  .teach-bar { flex-wrap: wrap; }
  .teach-bar-t { flex: 1 1 60%; min-width: 180px; }
  .teach-bar > .row, .teach-bar > .btn { margin-left: 24px; }
  .detail-t { flex-wrap: wrap; flex: 1 1 100%; order: 1; }
  .detail-t h2 { white-space: normal; overflow: visible; }
  .detail-h .detail-a { order: 2; flex-wrap: wrap; }
  /* width: 100% (not auto): a text field's own default width would otherwise count towards the narrowest the form
     can get, which pushed the sixth box off a 360px phone. */
  .otp-b { flex: 1 1 0; width: 100%; max-width: 52px; }
  .tf-qr { flex-direction: column; }
  .rowlist-r, .rowlist-r:has(.rowlist-prev) { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .rowlist-r > .field { grid-column: 1; }
  .rowlist-r > .rowlist-prev { grid-column: 1; min-height: 0; }
  .rowlist-r > .rowlist-x { grid-column: 2; grid-row: 1; }
  .blocked { grid-template-columns: auto minmax(0, 1fr); }
  .blocked-a { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .teach-acts { grid-template-columns: 1fr 1fr; }
  .teach-act:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .teach-act:nth-child(2n) { border-right: 0; }
  .teach-act:nth-last-child(-n+2) { border-bottom: 0; }
  .pf-step { padding-right: 10px; grid-template-columns: 22px minmax(0, 1fr); }
  .pf-ms { grid-column: 2; padding: 0 0 0 calc(2ch + 8px); }
  .pf-ms:empty { display: none; }
  .pf-form .btn { height: 44px; }
  .tl-r { grid-template-columns: 9ch minmax(0, 1fr); }
  .tl-k { display: none; }
  .tl-t { overflow: hidden; }
  .lv-s .lvl, .lvl { grid-template-columns: 1fr 52px; }
  .lvl-l { grid-column: 1 / -1; }
  .hw-wide { display: none; }
  .hw-tall { display: block; }
  .hw-steps { grid-template-columns: 1fr; }
  .hw-steps li { border-right: 0; }
  .help-setup li { grid-template-columns: 24px minmax(0, 1fr); }
  .help-setup li .btn { grid-column: 2; justify-self: start; }
  .help-faq { grid-template-columns: 1fr; gap: 4px; }
  .help-faq dd { margin-bottom: 10px; }
  .page-t .help-h1 { display: block; }
  .ms-row { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
  .reasons { grid-template-columns: 1fr; }
  .cl-notes-h { display: none; }
  .wb-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .wb-tile[data-k="talk"] { grid-column: 1 / -1; }
  .wb-agents, .wb-board { grid-column: 1 / -1; }
  .wb-lb li { grid-template-columns: 2ch minmax(0, 1fr) 4ch 6ch; }
  .wb-bar { display: none; }
  .wb-foot { flex-direction: column; }
  .wb-f { border-right: 0; border-bottom: 1px solid var(--line); }
  .wb-f:last-child { border-bottom: 0; }
  .wb-tools .btn span { display: none; }
  .wb-clock { margin-left: auto; }
  .dtabs { padding: 0 4px; }
  .dtab { height: 44px; }
  .rc-codes li { font-size: 14px; padding: 8px 10px; }
  .lr-row { padding-left: 12px; }
  .mynum-m { padding: 5px 6px 6px 12px; }
}
@media (pointer: coarse) {
  .chip.sm { height: 32px; }
  .chip.sm { min-width: 44px; justify-content: center; }
  .chip.sm::before { inset: -6px 0; }                 /* 32px face, 44px target */
  .tl-kinds, .tagfilter { row-gap: 10px; }
  /* Large buttons and the fields of the sign-in screens were fixed at 38–40px: smaller than a plain button here. */
  .btn.lg, .auth-body .btn.lg { height: 46px; }
  .auth-body .input { height: 44px; }
  .tl-ctl .select, .tl-ctl .search .input { height: var(--ctl); }
  .lr-row button.link::before { inset: -15px -12px; }
  .wb-tools .btn { min-width: 44px; }
  .opt { min-height: 48px; }
  .teach-act { min-height: 44px; }
  .snip-i { min-height: 44px; justify-content: center; }
  .lrn-sel { min-height: 32px; }
}

/* Agents table: a name is one unit; the wide status column gives way first. */
.tbl td.lead .who-l { flex-wrap: nowrap; }
.tbl td.lead .who-l strong { white-space: nowrap; }
@media (max-width: 760px) { .tbl td.lead .who-l { flex-wrap: wrap; } .tbl td.lead .who-l strong { white-space: normal; } }
.row.tightrow { gap: 6px; flex-wrap: nowrap; align-items: center; }

/* Agents table on narrower desktops: the Assign button keeps its icon only and the list of allowed lines gives way,
   so the actions at the end of each row stay in view (they were pushed out when the Two-step column was added). */
@media (min-width: 721px) and (max-width: 1280px) {
  .agents-tbl .as-btn { width: var(--ctl-sm); padding: 0; justify-content: center; }
  .agents-tbl .as-btn span { display: none; }
  .agents-tbl .wide { min-width: 96px; }
  .agents-tbl th, .agents-tbl td { padding-left: 9px; padding-right: 9px; }
}