/* Layout: black control rail + working queue; each ticket opens as a job card sliding in from the right. */
:root {
  --bg:#F6F4F3; --surface:#FFFFFF; --surface-2:#EFECEA; --ink:#191514; --muted:#665F5C; --line:#DDD8D5;
  --red:#D71920; --red-ink:#B5131A; --red-soft:#FBE9E9; --btn:#D71920; --btn-ink:#FFFFFF;
  --side:#141010; --side-ink:#F5F1F0; --side-muted:#A89F9C; --side-line:#2C2624;
  --gwar:#1A7446; --gamc:#2F6FC4; --cmc:#C98A0B; --ok:#1A7446; --ok-soft:#E3F3EA; --warn:#8F5A00; --warn-soft:#FBF0DA; --info:#27578F; --info-soft:#E5EEF8;
  --scrim:rgba(20,16,16,.45); --shadow:0 12px 40px rgba(20,16,16,.18);
  --display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,Menlo,monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#131010; --surface:#1C1817; --surface-2:#282322; --ink:#F3EFEE; --muted:#A99F9C; --line:#362F2D;
  --red:#E5383F; --red-ink:#FF787C; --red-soft:#3A1517; --btn:#D71920; --btn-ink:#FFFFFF;
  --side:#0C0A0A; --side-ink:#F5F1F0; --side-muted:#A89F9C; --side-line:#2C2624;
  --gwar:#35A06C; --gamc:#4E8FDE; --cmc:#C08C22; --ok:#62CC94; --ok-soft:#15301F; --warn:#E5B451; --warn-soft:#33270F; --info:#86B5EF; --info-soft:#172A40;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 40px rgba(0,0,0,.5); color-scheme:dark;
} }
:root[data-theme="dark"] {
  --bg:#131010; --surface:#1C1817; --surface-2:#282322; --ink:#F3EFEE; --muted:#A99F9C; --line:#362F2D;
  --red:#E5383F; --red-ink:#FF787C; --red-soft:#3A1517; --btn:#D71920; --btn-ink:#FFFFFF;
  --side:#0C0A0A; --side-ink:#F5F1F0; --side-muted:#A89F9C; --side-line:#2C2624;
  --gwar:#35A06C; --gamc:#4E8FDE; --cmc:#C08C22; --ok:#62CC94; --ok-soft:#15301F; --warn:#E5B451; --warn-soft:#33270F; --info:#86B5EF; --info-soft:#172A40;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 40px rgba(0,0,0,.5); color-scheme:dark;
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { background:var(--bg); color:var(--ink); font:15px/1.45 var(--body); }
h1,h2,h3 { font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:.005em; }
h1 { font-size:30px; font-weight:700; line-height:1.1; }
h2 { font-size:19px; font-weight:600; }
button,input,select,textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.mono { font-family:var(--mono); font-size:13px; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.small { font-size:13px; }

.app { display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100vh; }
.rail { background:var(--side); color:var(--side-ink); position:sticky; top:env(safe-area-inset-top,0px); height:100vh; display:flex; flex-direction:column; gap:24px;
  padding-block:22px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:16px; }
.brand { display:grid; gap:2px; }
.brand b { font:700 22px/1 var(--display); letter-spacing:.01em; }
.brand b i { color:#FF3B41; font-style:normal; }
.brand span { font-size:13px; color:var(--side-muted); }
.nav { display:flex; flex-direction:column; gap:4px; }
.nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; color:var(--side-muted); text-decoration:none; font-weight:500; }
.nav a svg { width:18px; height:18px; flex:none; }
.nav a:hover { color:var(--side-ink); background:var(--side-line); }
.nav a[aria-current="page"] { color:#fff; background:var(--btn); }
.nav .count { margin-left:auto; font:500 12px var(--mono); }
.rail-foot { margin-top:auto; display:grid; gap:8px; font-size:12.5px; color:var(--side-muted); }
.linkish { background:none; border:0; padding:0; text-align:left; color:inherit; text-decoration:underline; cursor:pointer; font-size:12.5px; }

main { min-width:0; padding-block:26px 48px; padding-left:28px; padding-right:max(28px,env(safe-area-inset-right,0px)); display:flex; flex-direction:column; gap:20px; }
.head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; }
.head p { margin:4px 0 0; color:var(--muted); }
.notice { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; padding:8px 12px; background:var(--warn-soft); color:var(--warn); border-radius:6px; font-size:13.5px; }
.notice b { font-weight:600; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--surface); padding:8px 14px; border-radius:6px; font-weight:600; cursor:pointer; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--btn); border-color:var(--btn); color:var(--btn-ink); }
.btn.primary:hover { filter:brightness(.92); }
.btn svg { width:16px; height:16px; }

.kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.kpi { padding:14px 16px; border-left:1px solid var(--line); display:grid; gap:2px; text-align:left; background:none; border-top:0; border-right:0; border-bottom:0; cursor:pointer; color:inherit; }
.kpi:first-child { border-left:0; }
.kpi:hover { background:var(--surface-2); }
.kpi span { font-size:13px; color:var(--muted); }
.kpi b { font:700 30px/1.1 var(--display); font-variant-numeric:tabular-nums; }
.kpi.alert b { color:var(--red-ink); }
.kpi small { font-size:12px; color:var(--muted); }

.grid2 { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:20px; align-items:start; }
.col { display:grid; gap:20px; min-width:0; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; gap:12px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.attn { display:grid; }
.attn button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 0; border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer; color:inherit; }
.attn button:first-child { border-top:0; padding-top:0; }
.attn button:hover .t { text-decoration:underline; }
.attn .t { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.attn .s { font-size:13px; color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.attn .why { grid-column:2; grid-row:1 / span 2; align-self:center; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }

.bars { display:grid; gap:9px; }
.bar { display:grid; grid-template-columns:128px minmax(0,1fr) 28px; align-items:center; gap:10px; border:0; background:none; padding:0; text-align:left; cursor:pointer; color:inherit; font-size:14px; }
.bar.static { cursor:default; }
.bar:not(.static):hover .lbl { text-decoration:underline; }
.bar .track { height:10px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.bar .fill { height:100%; background:var(--ink); }
.bar .val { text-align:right; font-family:var(--mono); font-size:13px; }

table { border-collapse:collapse; width:100%; }
.mini th { font-weight:500; font-size:12.5px; color:var(--muted); text-align:left; padding:0 0 6px; }
.mini td { padding:7px 0; border-top:1px solid var(--line); font-size:14px; vertical-align:top; }
.mini .r { text-align:right; font-variant-numeric:tabular-nums; }
.mini th,.mini td { padding-right:14px; }
.mini th:last-child,.mini td:last-child { padding-right:0; }

.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tabs { display:flex; flex-wrap:wrap; gap:4px; }
.tab { border:1px solid transparent; background:none; padding:6px 11px; border-radius:6px; cursor:pointer; font-weight:500; color:var(--muted); display:inline-flex; gap:7px; align-items:baseline; }
.tab:hover { color:var(--ink); background:var(--surface-2); }
.tab[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.tab .mono { font-size:12px; }
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],input[type=tel],select,textarea {
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:7px 10px; min-width:0; max-width:100%; }
textarea { width:100%; resize:vertical; min-height:72px; }
input:hover,select:hover,textarea:hover { border-color:var(--muted); }
.search { flex:1 1 220px; }

.tablewrap { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow-x:auto; }
.q { min-width:880px; }
.q th { text-align:left; font-weight:500; font-size:12.5px; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.q td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.q tr:last-child td { border-bottom:0; }
.q tbody tr { cursor:pointer; }
.q tbody tr:hover td { background:var(--surface-2); }
.q .idbtn { background:none; border:0; padding:0; font:500 13px var(--mono); cursor:pointer; color:inherit; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.q .cust { font-weight:600; }
.prio { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.prio.crit { color:var(--red-ink); font-weight:600; }
.empty { padding:36px 16px; text-align:center; color:var(--muted); }

.chip { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:4px; font-size:12.5px; font-weight:500; white-space:nowrap; background:var(--surface-2); color:var(--ink); }
.chip svg { width:14px; height:14px; }
.chip .code { font:500 11.5px var(--mono); color:var(--muted); }
.chip.plain { background:none; padding:0; }
.st-new { background:var(--info-soft); color:var(--info); }
.st-work { background:var(--surface-2); color:var(--ink); }
.st-wait { background:var(--warn-soft); color:var(--warn); }
.st-done { background:var(--ok-soft); color:var(--ok); }
.st-crit { background:var(--red-soft); color:var(--red-ink); }
.due-over { color:var(--red-ink); font-weight:600; }
.due-today { color:var(--warn); font-weight:600; }

.scrim { position:fixed; inset:0; background:var(--scrim); z-index:20; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); background:var(--bg); z-index:21; box-shadow:var(--shadow); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
.modal { position:fixed; z-index:21; top:max(24px,env(safe-area-inset-top,0px)); bottom:max(24px,env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 32px)); background:var(--bg); border-radius:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.sheet-head { background:var(--side); color:var(--side-ink); padding:14px max(18px,env(safe-area-inset-right,0px)) 14px max(18px,env(safe-area-inset-left,0px)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
.sheet-head .no { font:500 13px var(--mono); color:var(--side-muted); }
.sheet-head h2 { font-size:22px; overflow-wrap:anywhere; }
.sheet-head .x { grid-column:2; grid-row:1 / span 2; background:none; border:1px solid var(--side-line); color:inherit; width:34px; height:34px; border-radius:6px; cursor:pointer; font-size:18px; line-height:1; }
.sheet-head .x:hover { background:var(--side-line); }
.sheet-body { flex:1; overflow-y:auto; padding:16px max(18px,env(safe-area-inset-right,0px)) 20px max(18px,env(safe-area-inset-left,0px)); display:grid; gap:16px; align-content:start; }
.sheet-foot { padding:12px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; background:var(--surface); }
.sec { display:grid; gap:10px; }
.sec + .sec { border-top:1px solid var(--line); padding-top:16px; }
.sec h3 { font-size:16px; font-weight:600; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.fields .wide { grid-column:1 / -1; }
.field { display:grid; gap:4px; min-width:0; }
.field > label,.field > .lab { font-size:13px; color:var(--muted); font-weight:500; }
.field input,.field select { width:100%; }
.req { color:var(--red-ink); }
.err { color:var(--red-ink); font-size:13px; }
.invalid { border-color:var(--red) !important; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin:0; }
.facts div { min-width:0; }
.facts dt { font-size:13px; color:var(--muted); }
.facts dd { margin:0; overflow-wrap:anywhere; }
.facts .wide { grid-column:1 / -1; }
.picks { display:grid; gap:6px; }
.picks.c5 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.picks.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pick { position:relative; display:block; }
.pick input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.pick > span { display:grid; gap:1px; height:100%; padding:8px 9px; border:1px solid var(--line); background:var(--surface); border-radius:6px; font-size:13.5px; font-weight:500; line-height:1.2; }
.pick > span svg { width:17px; height:17px; margin-bottom:3px; }
.pick > span .code { font:500 11.5px var(--mono); color:var(--muted); }
.pick input:hover + span { border-color:var(--muted); }
.pick input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--bg); }
.pick input:checked + span .code { color:inherit; }
.pick input:focus-visible + span { outline:2px solid var(--red); outline-offset:2px; }
.vbox { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px; display:grid; gap:10px; }
.toggle { display:flex; gap:8px; align-items:center; font-weight:500; cursor:pointer; }
.toggle input { width:17px; height:17px; accent-color:var(--red); }
.costline { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding-top:8px; border-top:1px solid var(--line); font-size:14px; }
.costline b { font-family:var(--mono); font-weight:500; }
.hint { font-size:13px; padding:7px 10px; border-radius:6px; }
.hint.warn { background:var(--warn-soft); color:var(--warn); }
.hint.crit { background:var(--red-soft); color:var(--red-ink); }
.hint.ok { background:var(--ok-soft); color:var(--ok); }
.log { display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.log li { display:grid; gap:1px; font-size:14px; }
.log time { font-size:12px; color:var(--muted); font-family:var(--mono); }
.note { display:flex; gap:8px; align-items:flex-end; }
.note textarea { min-height:44px; flex:1; }
.rt { table-layout:fixed; }
.rt th:nth-child(1) { width:24%; } .rt th:nth-child(2) { width:23%; } .rt th:nth-child(3) { width:12%; } .rt th:nth-child(4) { width:26%; } .rt th:nth-child(5) { width:15%; }
.rt td { overflow-wrap:anywhere; }
.wt { table-layout:fixed; }
.wt th:nth-child(1) { width:22%; } .wt th:nth-child(2) { width:21%; } .wt th:nth-child(3) { width:17%; } .wt th:nth-child(4) { width:13%; } .wt th:nth-child(5) { width:14%; } .wt th:nth-child(6) { width:13%; }
.wt td { overflow-wrap:anywhere; }
.wt .chip { white-space:normal; }
.status-box { display:grid; gap:6px; padding-block:48px; }
.status-box p { margin:0; }
.kpi.static { cursor:default; }
.kpi.static:hover { background:none; }
.back { color:var(--muted); font-size:14px; }
.linkish.danger { color:var(--red-ink); }
.flat { border:0; border-radius:0; background:none; }
.flat table { min-width:520px; }
.clicky { cursor:pointer; }
.clicky:hover td { background:var(--surface-2); }
.tip { position:fixed; z-index:50; background:var(--ink); color:var(--bg); padding:6px 9px; border-radius:6px; font-size:13px; max-width:280px; pointer-events:none; }
.g-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); }
.g-legend span { display:inline-flex; align-items:center; gap:6px; }
.g-legend i { display:inline-block; width:14px; height:10px; border-radius:2px; }
.g-legend i.pin-key { width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--ink); }
.g-scroll { overflow-x:auto; }
.g-inner { min-width:640px; position:relative; }
.g-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; align-items:center; padding-block:7px; border-top:1px solid var(--line); }
.g-axis { border-top:0; padding-block:0 6px; }
.g-name { display:grid; gap:1px; min-width:0; overflow-wrap:anywhere; }
.g-name b { font-weight:600; font-size:14px; }
.g-track { position:relative; height:20px; }
.g-axis .g-track { height:18px; }
.tick { position:absolute; top:0; transform:translateX(-50%); font:12px var(--mono); color:var(--muted); white-space:nowrap; }
.seg { position:absolute; top:3px; height:14px; border-radius:2px; box-shadow:0 0 0 1px var(--surface); }
.s-war { background:var(--gwar); }
.s-amc { background:var(--gamc); }
.s-cmc { background:var(--cmc); }
.s-gap { background:repeating-linear-gradient(135deg,var(--red) 0 3px,var(--red-soft) 3px 6px); }
.pin { position:absolute; top:5px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--surface); border:2px solid var(--ink); }
.g-today-wrap { padding:0; border:0; position:absolute; inset:0; pointer-events:none; }
.g-track-today { position:relative; height:100%; }
.g-today { position:absolute; top:18px; bottom:0; border-left:1.5px dashed var(--ink); }
.g-today em { position:absolute; bottom:0; font:normal 12px var(--body); color:var(--ink); }
.g-inner { padding-bottom:20px; }
.sec-block { display:grid; gap:10px; min-width:0; }
.month { display:grid; gap:8px; min-width:0; }
.month + .month { margin-top:8px; }
.month h3 { font-size:16px; font-weight:600; }
.small-btn { padding:5px 10px; font-size:13.5px; white-space:nowrap; }
.lines { display:grid; gap:10px; }
.line { display:grid; grid-template-columns:minmax(0,2fr) 68px minmax(0,2fr) 68px 34px; gap:8px; align-items:end; }
.line .rm { width:34px; height:36px; padding:0; }
.addnew { display:flex; gap:6px; margin-top:4px; }
.addnew input { flex:1; min-width:0; }
.toast { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:max(20px,env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:6px; font-weight:500; box-shadow:var(--shadow); max-width:calc(100% - 32px); }

@media (max-width:1040px) { .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .kpi:nth-child(4) { border-left:0; } .kpi:nth-child(n+4) { border-top:1px solid var(--line); } .grid2 { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .rail { position:static; height:auto; padding-block:14px; padding-right:max(16px,env(safe-area-inset-right,0px)); gap:12px; }
  .nav { flex-direction:row; flex-wrap:wrap; }
  .nav a { flex:1 1 30%; min-width:0; justify-content:center; padding:8px 4px; font-size:13.5px; gap:4px; }
  .nav a svg { display:none; }
  .line { grid-template-columns:minmax(0,1fr) 68px; }
  .line .rm { grid-column:1 / -1; width:100%; }
  .nav .count { margin-left:0; }
  .rail-foot { margin-top:0; display:flex; flex-wrap:wrap; justify-content:space-between; }
  main { padding-block:18px 36px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
  h1 { font-size:26px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi { border-left:0; border-top:1px solid var(--line); }
  .kpi:nth-child(-n+2) { border-top:0; }
  .kpi:nth-child(even) { border-left:1px solid var(--line); }
  .kpi:last-child { grid-column:1 / -1; border-left:0; }
  .q { min-width:0; }
  .q thead { display:none; }
  .q,.q tbody { display:block; }
  .q tr { display:flex; flex-wrap:wrap; gap:6px 8px; padding:12px; border-bottom:1px solid var(--line); align-items:center; }
  .q tr:last-child { border-bottom:0; }
  .q td { display:block; padding:0; border:0; }
  .q td.c-id { flex:1 1 auto; }
  .q td.c-cust { order:1; flex:1 1 100%; }
  .q td:not(.c-id):not(.c-cust):not(.c-due) { order:2; }
  .q td.c-eng { flex:1 1 100%; font-size:13px; color:var(--muted); order:3 !important; }
  .q .vendor-cell { font-size:13px; }
  .picks.c5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fields,.facts { grid-template-columns:minmax(0,1fr); }
  .modal { top:0; bottom:0; left:0; transform:none; width:100%; border-radius:0; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
  .bar { grid-template-columns:112px minmax(0,1fr) 26px; }
}
@media (prefers-reduced-motion:no-preference) {
  .drawer.enter { animation:slide .16s ease-out; }
  @keyframes slide { from { transform:translateX(24px); opacity:.6; } to { transform:none; opacity:1; } }
}

/* ===================================================================
   Added for the hosted app: signing in, the account menu and the
   connection banner. Everything above is the original support desk.
   =================================================================== */

.signin-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); }
.signin { width:min(400px,100%); background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; }
.signin-head { background:var(--side); color:var(--side-ink); padding:20px 22px; display:grid; gap:4px; }
.signin-head b { font:700 24px/1 var(--display); letter-spacing:.01em; }
.signin-head b i { color:#FF3B41; font-style:normal; }
.signin-head span { font-size:13px; color:var(--side-muted); }
.signin form { padding:20px 22px 22px; display:grid; gap:14px; }
.signin h1 { font-size:21px; }
.signin .field input { width:100%; }
.signin .btn { width:100%; padding:10px 14px; }
.signin .err { min-height:0; }
.signin-note { font-size:13px; color:var(--muted); margin:0; }

.whoami { display:grid; gap:2px; padding-top:10px; border-top:1px solid var(--side-line); }
.whoami b { font-size:13px; font-weight:600; color:var(--side-ink); overflow-wrap:anywhere; }
.whoami span { font-size:12px; color:var(--side-muted); }
.whoami .row { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }

.conn { display:flex; gap:8px; align-items:baseline; padding:8px 12px; border-radius:6px;
  background:var(--red-soft); color:var(--red-ink); font-size:13.5px; }
.conn.ok { background:var(--ok-soft); color:var(--ok); }

.ro-banner { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; padding:8px 12px;
  background:var(--info-soft); color:var(--info); border-radius:6px; font-size:13.5px; }

.sheet-foot .spacer { margin-right:auto; }
.sheet-foot .muted { font-size:13px; }

.pw-rules { font-size:13px; color:var(--muted); margin:0; }

@media (max-width:760px) {
  .whoami { border-top:0; padding-top:0; }
}

/* ===================================================================
   Status timing: the elapsed clocks and the "who is taking the time"
   bars on the ticket drawer and the overview.
   =================================================================== */

.elapsed { font-variant-numeric:tabular-nums; white-space:nowrap; }
b.age { font:600 15px var(--body); font-variant-numeric:tabular-nums; }
b.age.due-today { color:var(--warn); }
b.age.due-over { color:var(--red-ink); }

/* One bar, one colour per party, widths in proportion to the time held. */
.tbar { display:flex; height:12px; border-radius:3px; overflow:hidden; background:var(--surface-2); }
.tseg { display:block; height:100%; }
.tkey { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:7px; vertical-align:baseline; }

.tb-us       { background:var(--ink); }
.tb-vendor   { background:var(--gamc); }
.tb-customer { background:var(--cmc); }
.tb-rma      { background:var(--red); }

.thist { margin-top:2px; }
.thist summary { cursor:pointer; font-size:13.5px; color:var(--muted); font-weight:500; }
.thist summary:hover { color:var(--ink); }
.thist .log { margin-top:10px; }

/* The status cell in the queue carries its own small clock under the chip. */
.q td .prio { margin-top:3px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tb-us { background:#CFC7C4; }
}
:root[data-theme="dark"] .tb-us { background:#CFC7C4; }