/* Ticket tests, proctor console, My Skills, Team, Tests to run, People, ticket builder.
   Built on the app's own tokens (style.css :root). Status colors only for status; blue for "you are here". */
.tt { --ok-soft:#e3f4ea; --warn-soft:#fbf0dc; --bad-soft:#fde7e8; --blue-soft:#e8effd; --mute-soft:#f0f2f6; }
.tt-wrap { max-width:1240px; margin:0 auto; padding:20px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); display:flex; flex-direction:column; gap:16px; }
.tt h1 { font:600 22px/1.25 'Archivo', -apple-system, sans-serif; margin:0; }
.tt h2 { font:600 17px/1.3 'Archivo', -apple-system, sans-serif; margin:0 0 6px; }
.tt h3 { font-size:15px; font-weight:600; margin:0 0 8px; }
.tt .small { font-size:12.5px; }
.tt .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tt .sp { flex:1; min-width:0; }
.tt .lbl { font:500 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.tt .mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
.tt textarea, .tt input:not([type=checkbox]), .tt select { font:inherit; font-size:13.5px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--text); width:100%; }
.tt textarea:focus, .tt input:focus, .tt select:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.tt textarea:disabled, .tt input:disabled { background:var(--panel2); color:var(--muted); }
.tt label { display:block; font-size:12.5px; color:var(--muted); margin:10px 0 4px; }
.tt .btn.wide { width:100%; text-align:center; display:block; }
.tt-err { background:var(--bad-soft); color:#a3242f; border-radius:8px; padding:8px 12px; font-size:13px; }
.tt-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; min-width:0; }
.tt-card.done { background:var(--panel2); }

.tt-pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:999px; white-space:nowrap; background:var(--mute-soft); color:var(--muted); }
.tt-pill.small { font-size:11px; padding:2px 7px; }
.tt-pill.ok { background:var(--ok-soft); color:#17733f; } .tt-pill.warn { background:var(--warn-soft); color:#8a560b; }
.tt-pill.bad { background:var(--bad-soft); color:#a3242f; } .tt-pill.blue { background:var(--blue-soft); color:var(--accent); }

.tt-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.tt-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.tt-clock { font:600 18px 'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 12px; display:flex; gap:8px; align-items:baseline; }
.tt-clock .muted { font-size:12px; font-weight:400; }
.tt-clock.low { color:#a3242f; border-color:#f3b6b8; background:var(--bad-soft); }
.tt-clock.paused { color:#8a560b; background:var(--warn-soft); }

.tt-phases { list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; }
.tt-phases li { display:flex; align-items:center; gap:6px; font-size:12.5px; padding:5px 10px; border-radius:7px; background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.tt-phases li span { font:600 11px 'IBM Plex Mono', monospace; }
.tt-phases li b { font-weight:500; }
.tt-phases li.done { color:#17733f; }
.tt-phases li.cur { background:var(--accent); border-color:var(--accent); color:#fff; }

.tt-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.tt-ticket { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; min-width:0; }
.tt-from { font-size:12.5px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.tt-src { font:500 10.5px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.06em; background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.tt-brief { font-size:14px; line-height:1.6; }
.tt-brief p { margin:.4em 0; }
.tt-hint { margin:10px 0; font-size:13px; background:var(--warn-soft); color:#6b4408; border-radius:8px; padding:8px 12px; }
.tt-account { font-size:12.5px; margin:8px 0 4px; }
.tt-prob { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.tt-prob-h { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.5; }
.tt-n { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--text); color:#fff; font:600 12px 'IBM Plex Mono', monospace; }
.tt-n.small { width:18px; height:18px; font-size:11px; } .tt-n.tiny { width:16px; height:16px; font-size:10px; border-radius:4px; }
.tt-save { font-size:11.5px; color:#17733f; min-height:16px; margin-top:4px; text-align:right; }
.tt-save.err { color:#a3242f; }
.tt-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; }
.tt-account-card { background:#0f1f26; color:#e9eeee; border-color:#0f1f26; }
.tt-account-card .muted, .tt-account-card p { color:#b8c7cc; }
.tt-account-card b { color:#fff; }
.tt-account-card .btn.acct { background:#fff; color:#0f1f26; border-color:#fff; font-weight:600; }
.tt-fact { display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; font-size:13px; padding:6px 0; border-top:1px solid var(--line); }
.tt-fact:first-of-type { border-top:0; }
.tt-result { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; max-width:720px; }
.tt-result-h { display:flex; gap:10px; align-items:center; }

/* proctor console */
.tp-link { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.tp-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px; align-items:start; }
.tp-left, .tp-right { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0; }
.tp-tabs { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
.tp-tabs button { font:inherit; font-size:12.5px; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:7px; padding:5px 10px; cursor:pointer; }
.tp-tabs button.on { background:var(--text); color:#fff; border-color:var(--text); }
.tp-feed { max-height:320px; overflow:auto; font:12.5px/1.45 'IBM Plex Mono', monospace; border:1px solid var(--line); border-radius:8px; padding:4px 10px; }
.tp-feed > .ev-row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; padding:5px 0; border-bottom:1px solid var(--line); }
.tp-feed > .ev-row:last-child { border-bottom:0; }
.tp-feed > .muted { padding:8px 0; font-family:inherit; }
.tp-feed .t { color:var(--muted); }
.tp-feed .hint { color:#8a560b; } .tp-feed .write { color:#17733f; } .tp-feed .verdict { font-weight:600; }
.tp-src { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-right:4px; }
.tp-note { display:flex; gap:6px; align-items:center; margin-top:8px; }
.tp-note input:not([type=checkbox]) { flex:1; }
.tp-note label { margin:0; white-space:nowrap; }
.tp-ans { padding:10px 0; border-bottom:1px solid var(--line); }
.tp-ans .lbl { margin-top:6px; }
.tp-a { white-space:pre-wrap; font-size:13px; background:var(--panel2); border-radius:6px; padding:6px 8px; }
.tp-key .tp-a { margin:6px 0; }
.tp-h { margin-top:16px; }
.tp-fact { display:flex; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.tp-fact .ord { font:500 11px 'IBM Plex Mono', monospace; width:18px; color:var(--muted); }
.tp-fact.rel .ord { color:#17733f; }
.tp-rub-h { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px; }
.tp-rub-h h3 { margin:0; }
.tp-group-h { font:500 11px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:12px 0 2px; }
.tp-ri { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.tp-ri .ic { font:600 13px 'IBM Plex Mono', monospace; text-align:center; border-radius:5px; padding:1px 0; background:var(--warn-soft); color:#8a560b; }
.tp-ri.v-y .ic { background:var(--ok-soft); color:#17733f; } .tp-ri.v-n .ic { background:var(--bad-soft); color:#a3242f; }
.tp-ri .ev { font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.tp-ri .ev.hint { color:#8a560b; }
.tp-ri .acts { display:flex; gap:4px; }
.mk { font:600 12px 'IBM Plex Mono', monospace; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:6px; padding:4px 8px; cursor:pointer; }
.mk.on { background:var(--text); color:#fff; border-color:var(--text); }
.mk.hintb { font-family:inherit; font-weight:500; color:#8a560b; }
.mk:focus-visible, .tp-tabs button:focus-visible, .ms-sk:focus-visible, .cell:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.tp-reason, .tp-hintbox { display:flex; gap:6px; margin-top:6px; }
.tp-verdict { margin-top:14px; border-radius:10px; padding:12px; background:var(--panel2); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.tp-verdict.pass, .tp-verdict.strong { background:var(--ok-soft); border-color:#bfe3cc; }
.tp-verdict.fail { background:var(--bad-soft); border-color:#f3b6b8; }
.tp-verdict ul { margin:0; padding-left:18px; }
.tp-final label { margin-top:8px; }
.tp-final .btn { margin-top:10px; }

/* my skills */
.ms-next { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; background:var(--panel); border:1px solid var(--accent); box-shadow:inset 3px 0 0 var(--accent); border-radius:10px; padding:14px 16px; }
.ms-next b { font-size:15px; }
.ms-ladder { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.ms-sk { text-align:left; font:inherit; border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:10px; display:flex; flex-direction:column; gap:4px; cursor:pointer; color:var(--text); min-width:0; }
.ms-sk .c { font:600 14px 'Archivo', sans-serif; } .ms-sk .nm { font-size:12px; color:var(--muted); line-height:1.3; }
.ms-sk.ok { border-color:#bfe3cc; background:#f6fbf8; } .ms-sk.bad { border-color:#f3b6b8; background:#fff8f8; }
.ms-sk.warn { border-color:#f0d7a9; } .ms-sk.mute { opacity:.6; }
.ms-sk.sel { box-shadow:0 0 0 2px var(--accent); }
.ms-detail { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.ms-c { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) auto 150px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.ms-c:last-child { border-bottom:0; }
.ms-c select { width:150px; padding:4px 6px; font-size:12.5px; }
.meter { height:8px; background:var(--mute-soft); border-radius:4px; overflow:hidden; display:flex; }
.meter i { display:block; height:100%; } .meter .t { background:#1f9d55; } .meter .p { background:#7fc79e; } .meter .r { background:#c6e6d3; }
.ms-book { display:grid; grid-template-columns:auto 220px minmax(0,1fr) auto; gap:8px; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
.ms-book label { margin:0; }
.ms-recent, .ms-connect { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.ms-r { padding:8px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.ms-r:last-child { border-bottom:0; }
.ms-mcp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ms-mcp > div { background:var(--panel2); border-radius:8px; padding:10px; min-width:0; }
.ms-mcp .mono { font-size:12.5px; overflow-wrap:anywhere; }
.ms-token { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.ms-token code { display:block; background:#0f1f26; color:#e9eeee; border-radius:6px; padding:6px 8px; overflow-x:auto; white-space:nowrap; font-size:12px; }

/* team */
.team-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.team-tiles .tt-card { display:flex; flex-direction:column; gap:2px; }
.team-tiles .big { font:700 26px 'Archivo', sans-serif; } .big.bad { color:#a3242f; } .big.warn { color:#8a560b; } .big.ok { color:#17733f; }
.team-weak { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 12px; }
.team-scroll { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.team-mx, .ppl-t { width:100%; border-collapse:collapse; font-size:13px; }
.team-mx th, .ppl-t th { font:500 11px 'IBM Plex Mono', monospace; color:var(--muted); text-align:center; padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.team-mx th:first-child, .team-mx td:first-child, .ppl-t th, .ppl-t td { text-align:left; }
.team-mx td, .ppl-t td { padding:7px 6px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle; }
.team-mx td:first-child { padding-left:12px; min-width:140px; }
.cell { font:inherit; font-size:11.5px; font-weight:500; border:0; border-radius:6px; padding:4px 7px; cursor:pointer; white-space:nowrap; background:var(--mute-soft); color:var(--muted); }
.cell.ok { background:var(--ok-soft); color:#17733f; } .cell.warn { background:var(--warn-soft); color:#8a560b; }
.cell.bad { background:var(--bad-soft); color:#a3242f; } .cell.blue { background:var(--blue-soft); color:var(--accent); }
.cell.mute { background:transparent; }
.team-sel { display:flex; flex-direction:column; gap:6px; max-width:560px; }

/* queue, people, builder */
.pq section, .ppl section { display:flex; flex-direction:column; gap:6px; }
.pq-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
.pq-row input[type=datetime-local] { width:210px; }
.pq-cal { display:flex; gap:6px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line); }
.ppl-t input, .ppl-t select { padding:5px 7px; font-size:12.5px; }
.ppl-rec { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; align-items:center; }
.ppl-rec label { margin:0; }
.tb-parts { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.tb-gate { background:var(--warn-soft); color:#6b4408; border-radius:8px; padding:8px 12px; font-size:13px; }
.tb-conf { background:var(--warn-soft); border:1px solid #f0d7a9; border-radius:8px; padding:10px 12px; font-size:13px; display:flex; flex-direction:column; gap:6px; }
.tb-conf.done { background:var(--panel); border-color:var(--line); }
.tb-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.tb-grid textarea.mono { font-size:12px; }
.tb-acts { margin-top:4px; }
.tb-preview { max-width:760px; }

@media (max-width: 980px) {
  .tt-grid, .tp-grid, .tb-grid { grid-template-columns:minmax(0,1fr); }
  .tt-side { position:static; }
  .tb-parts { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ms-c { grid-template-columns:minmax(0,1fr) auto; }
  .ms-c .meter { grid-column:1 / -1; }
  .ms-book, .ms-mcp, .ppl-rec { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 560px) { .team-tiles, .tb-parts { grid-template-columns:minmax(0,1fr); } }
.ms-r .tt-pill { align-self:flex-start; }
.tt-head .row select { width:auto; min-width:140px; }