/* Nerdster Control — design system. Refined operational calm: precise, quiet,
   confident. Nerdster brand (navy + fire-blue), Outfit typeface, flat surfaces,
   generous breathing room. Two surfaces share these tokens; the customer view
   leans calmer and more spacious. */

@font-face{font-family:Outfit;src:url(/assets/fonts/outfit-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(/assets/fonts/outfit-latin-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#0a2540; --navy-2:#0e2c4d; --ink:#16233b; --quiet:#5b6678; --faint:#8b95a7;
  --blue:#635bff; --blue-ink:#4f46e5; --teal:#107a76; --teal-ic:#2ec8c3;
  --bg:#f5f7fb; --card:#ffffff; --line:#e7ebf3; --line-2:#eef1f7;
  --ai-bg:#f2f6ff; --ai-line:#d8e5ff;
  --ok-bg:#e7f6ed; --ok-ink:#0a7c43; --warn-bg:#fdecea; --warn-ink:#b42318; --amber-bg:#fef4e6; --amber-ink:#b25e09;
  --r:14px; --r-sm:9px; --shadow:0 1px 2px rgba(16,35,66,.04),0 6px 24px -12px rgba(16,35,66,.14);
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* secondary palette, so dark mode can swap every surface and ink in one place */
  --text:#1b1f23; --muted:#57606a; --line-in:#d7dde6; --line-3:#e5e9ef; --chip-bg:#eef1f5; --surface-2:#f6f8fa; --row-hover:#fbfcfe;
  --ok2-bg:#e8f6ee; --ok2-ink:#14532d; --ok2-line:#bfe6cf; --warn2-bg:#fde2e2; --warn2-ink:#7f1d1d; --warn2-line:#f5c2c2;
  --amber2-bg:#fff4e0; --amber2-ink:#7c4a03; --amber2-line:#f5d08a; --wait-bg:#fffbe6; --wait-line:#f5c542; --late-bg:#fff7f7;
  --info-bg:#e8effd; --info-ink:#1e3a8a; --info-line:#c6d3ea; --ai2-bg:#f3f0ff; --ai2-line:#e4defa; --ai2-ink:#4c2fd6; --violet:#7c5cff;
  --aimsg-bg:#fbfaff; --note-bg:#fffdf2; --line-dim:#8b949e; --red:#dc2626; --green:#10b981; --amber:#f59e0b; --amber-deep:#b45309;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Outfit,system-ui,sans-serif;color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0}
.mono{font-family:var(--mono)}

/* ---- top bar ---- */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.topbar .in{max-width:74rem;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;gap:.9rem}
.brand{display:flex;align-items:baseline;gap:.55rem;font-weight:600;font-size:1.02rem}
.brand small{font-weight:400;color:#9fb2d6;font-size:.72rem;letter-spacing:.01em}
.topbar nav{margin-left:auto;display:flex;gap:.3rem}
.topbar nav a{padding:.35rem .7rem;border-radius:999px;font-size:.85rem;color:var(--info-line)}
.topbar nav a.on{background:rgba(255,255,255,.12);color:#fff}
.topbar nav a:hover{color:#fff}

.wrap{max-width:74rem;margin:1.6rem auto;padding:0 1.5rem}
.ey{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);font-weight:600}
.sec-h{display:flex;align-items:baseline;gap:.6rem;margin:2rem 0 .8rem}
.sec-h h2{font-size:1.05rem}.sec-h .n{color:var(--faint);font-size:.85rem}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.tile b{display:block;font-size:1.9rem;line-height:1;letter-spacing:-.03em;font-weight:600}
.tile span{display:block;margin-top:.4rem;color:var(--quiet);font-size:.82rem}
.tile .accent{color:var(--blue)}

/* ---- tables (clients) ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;background:var(--row-hover);color:var(--quiet);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}
th,td{padding:.7rem 1rem;border-bottom:1px solid var(--line-2)}tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;color:var(--quiet)}
tbody tr:hover{background:var(--row-hover)}
.clientname{font-weight:600}

/* ---- ticket cards (staff) ---- */
.queue{display:grid;gap:1rem}
.tk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:1.1rem 1.2rem;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.tk-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.tk-h .ref{font-family:var(--mono);font-size:.8rem;color:var(--faint)}
.tk-h .ti{font-weight:600;font-size:1.02rem}
.tk-m{color:var(--quiet);font-size:.82rem;margin-top:.3rem}
.chip{font-size:.7rem;padding:.14rem .5rem;border-radius:999px;background:var(--line-2);color:var(--quiet);font-weight:500}
.chip.open{background:var(--warn-bg);color:var(--warn-ink)}
.chip.resolved,.chip.closed{background:var(--ok-bg);color:var(--ok-ink)}
.chip.pri-high{background:var(--warn-bg);color:var(--warn-ink)}
.chip.pri-low{background:var(--line-2);color:var(--quiet)}

.ai{margin-top:.85rem;background:var(--ai-bg);border:1px solid var(--ai-line);border-radius:var(--r-sm);padding:.9rem 1rem}
.ai-h{display:flex;align-items:center;gap:.5rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-ink);font-weight:600;margin-bottom:.5rem}
.qa{font-family:var(--mono);font-size:.62rem;text-transform:none;letter-spacing:0;padding:.08rem .4rem;border-radius:999px;font-weight:600}
.qa-pass{background:var(--ok-bg);color:var(--ok-ink)} .qa-concerns{background:var(--amber-bg);color:var(--amber-ink)} .qa-fail{background:var(--warn-bg);color:var(--warn-ink)}
.ai-h .brain{margin-left:auto;font-family:var(--mono);font-size:.66rem;background:var(--card);border:1px solid var(--ai-line);color:var(--blue-ink);padding:.08rem .45rem;border-radius:999px;text-transform:none;letter-spacing:0}
.ai .sum{margin:0 0 .3rem;font-weight:500}
.ai .cls{margin:0 0 .5rem;color:var(--quiet);font-size:.83rem}
.ai .cls .sens{color:var(--warn-ink);font-weight:600}
.hyps{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}
.hyps li{display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem;align-items:baseline;font-size:.88rem}
.conf{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--blue-ink);text-align:right}
.ev{font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.ai.none{background:var(--row-hover);border-color:var(--line);color:var(--faint);font-style:italic}
.shadow-note{margin-top:.6rem;font-size:.74rem;color:var(--faint)}

.foot{max-width:74rem;margin:2rem auto 3rem;padding:0 1.5rem;color:var(--faint);font-size:.8rem}

/* ---- customer portal ---- */
.cust{background:linear-gradient(180deg,var(--row-hover), var(--bg) 240px);min-height:100vh}
.cust-hero{max-width:52rem;margin:0 auto;padding:3rem 1.5rem 1rem}
.cust-hero .ey{color:var(--blue)}
.cust-hero h1{font-size:2rem;margin:.5rem 0 .4rem;letter-spacing:-.028em}
.cust-hero p{color:var(--quiet);margin:0;font-size:1.02rem}
.status-line{max-width:52rem;margin:1.2rem auto 0;padding:0 1.5rem;display:flex;align-items:center;gap:.55rem;color:var(--ok-ink);font-size:.9rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--teal-ic);box-shadow:0 0 0 4px rgba(46,200,195,.18)}
.cust-list{max-width:52rem;margin:1.6rem auto 4rem;padding:0 1.5rem;display:grid;gap:1rem}
.ct{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.3rem 1.4rem;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.ct-h{display:flex;align-items:center;gap:.6rem}
.ct-h .ti{font-weight:600;font-size:1.08rem}
.ct-update{margin:.7rem 0 0;font-size:1rem;line-height:1.55}
.ct-next{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:.5rem;color:var(--quiet);font-size:.85rem}
.ct-empty{text-align:center;color:var(--quiet);padding:3rem 1rem}
.cust-foot{max-width:52rem;margin:0 auto;padding:2rem 1.5rem 4rem;color:var(--faint);font-size:.82rem;border-top:1px solid var(--line);text-align:center}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tk:nth-child(2),.ct:nth-child(2){animation-delay:.06s}
.tk:nth-child(3),.ct:nth-child(3){animation-delay:.12s}
.tk:nth-child(4),.ct:nth-child(4){animation-delay:.18s}

@media (max-width:720px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cust-hero h1{font-size:1.7rem}
}
@media (max-width:480px){
  .brand small{display:none}
  .topbar nav a{padding:.3rem .5rem;font-size:.8rem}
}

/* ---- sign-in pages (both doors) ---- */
.signin{min-height:100vh;display:grid;place-items:center;padding:2rem 1.25rem;
  background:radial-gradient(120% 90% at 50% -10%, var(--ai-bg) 0%, var(--bg) 55%)}
.signin .card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  width:100%;max-width:26rem;padding:2.4rem 2rem;text-align:center}
.signin .logo{width:56px;height:56px;border-radius:14px;box-shadow:var(--shadow);margin-bottom:1rem}
.signin h1{font-size:1.5rem;letter-spacing:-.028em}
.signin .lede{color:var(--quiet);margin:.5rem 0 1.5rem;font-size:.96rem;line-height:1.5}
.signin .fine{color:var(--faint);font-size:.78rem;margin-top:1.2rem}
.pbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:.7rem 1rem;margin-top:.6rem;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font-weight:600;font-size:.94rem;
  box-shadow:0 1px 2px rgba(16,35,66,.05);transition:border-color .15s,box-shadow .15s}
.pbtn:hover{border-color:var(--blue);box-shadow:0 2px 10px -4px rgba(99,91,255,.4)}
.pbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pmark{width:18px;height:18px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center}
.pmark-google{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.1 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h11.8c-.5 2.7-2 5-4.4 6.6v5.5h7.1c4.1-3.8 6.6-9.4 6.6-16.1z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-2 14.5-5.3l-7.1-5.5c-2 1.3-4.5 2.1-7.4 2.1-5.7 0-10.5-3.8-12.2-9h-7.3v5.7C8.1 41.1 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.8 28.3c-.4-1.3-.7-2.7-.7-4.3s.3-2.9.7-4.3v-5.7H4.5C3 17.2 2 20.5 2 24s1 6.8 2.5 9.7l7.3-5.4z'/%3E%3Cpath fill='%23EA4335' d='M24 10.7c3.2 0 6.1 1.1 8.4 3.3l6.3-6.3C34.9 4.1 29.9 2 24 2 15.4 2 8.1 6.9 4.5 14.3l7.3 5.7c1.7-5.2 6.5-9.3 12.2-9.3z'/%3E%3C/svg%3E")}
.pmark-microsoft{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath fill='%23F25022' d='M1 1h10v10H1z'/%3E%3Cpath fill='%237FBA00' d='M12 1h10v10H12z'/%3E%3Cpath fill='%2300A4EF' d='M1 12h10v10H1z'/%3E%3Cpath fill='%23FFB900' d='M12 12h10v10H12z'/%3E%3C/svg%3E")}
.signin .card.cust{min-height:0}
.signin .cust h1{color:var(--navy)}
/* customer topbar logo + sign-out */
.brand-logo{width:22px;height:22px;border-radius:6px;vertical-align:-5px;margin-right:.1rem}
.brand-signout{margin-left:auto;color:var(--info-line);font-size:.85rem;padding:.35rem .7rem;border-radius:999px}
.brand-signout:hover{color:#fff;background:rgba(255,255,255,.12)}
.topbar .in .brand{display:inline-flex;align-items:center;gap:.4rem}

/* ---- CRM detail views (case + client 360) ---- */
.rolechip{font-family:var(--mono);font-size:.62rem;font-weight:600;padding:.12rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;letter-spacing:.03em}
.rolechip.eng{background:rgba(255,255,255,.08);color:var(--info-line)}
.tk-h{cursor:pointer;text-decoration:none;color:inherit}
.tk-h .open-case{margin-left:auto;color:var(--blue);font-size:.8rem;font-weight:600;opacity:0;transition:opacity .15s}
.tk:hover .open-case{opacity:1}
.detail .back{display:inline-block;color:var(--quiet);font-size:.85rem;margin-bottom:1rem}
.detail .back:hover{color:var(--blue)}
.case-h{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.case-h .ref{font-family:var(--mono);color:var(--faint);font-size:.9rem}
.case-h h1{font-size:1.5rem;letter-spacing:-.025em}
.case-m{color:var(--quiet);font-size:.9rem;margin:.3rem 0 1.3rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:1.1rem 1.2rem;margin-bottom:1rem}
.panel h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--quiet);display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.panel h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:.9rem 0 .35rem}
.panel .brain{margin-left:.2rem;font-family:var(--mono);font-size:.66rem;background:var(--ai-bg);border:1px solid var(--ai-line);color:var(--blue-ink);padding:.06rem .4rem;border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600}
.panel.none{color:var(--faint)}
.dom-list{list-style:none;margin:.5rem 0;padding:0}
.dom-list li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.navn[hidden]{display:none}
.navn{display:inline-block;min-width:1.15rem;margin-left:.35rem;padding:0 .3rem;border-radius:999px;background:#f59e0b;color:#1f1300;font-size:.68rem;font-weight:700;line-height:1.15rem;text-align:center}
.acc .lede{margin:.25rem 0 1rem}
.acc section{margin:0 0 2rem}
.acc-h{font-size:1.05rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem}
.chip.acc-n{background:#f59e0b;color:#1f1300}.chip.acc-ok{background:var(--ok2-bg);color:var(--ok2-ink)}
.acc-card{margin:.75rem 0 0;padding:1rem 1.2rem;border-radius:var(--r);background:var(--card);border:1px solid var(--amber2-line);box-shadow:var(--shadow)}
.acc-card h3{margin:0;font-size:1rem;overflow-wrap:anywhere}
.acc-people{list-style:none;margin:.4rem 0 0;padding:0}
.acc-people li{padding:.35rem 0;border-top:1px solid var(--line-2);overflow-wrap:anywhere}
.acc-people li:first-child{border-top:0}
.acc-people small{display:block;color:var(--quiet);font-size:.82rem;line-height:1.5}
.acc-hint{margin:.5rem 0 0;font-size:.88rem;color:var(--ai2-ink)}
.acc-form{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;margin-top:.8rem}
.acc-form label,.acc-add label{display:inline-flex;gap:.45rem;align-items:center;font-size:.9rem}
.acc-form select,.acc-form input[type=text],.acc-add select,.acc-add input[type=text]{font:inherit;font-size:.92rem;padding:.48rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);min-width:13rem;max-width:100%}
.acc-scope{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;min-width:0}
.acc-scope label.off{opacity:.55}
.acc-btns{display:flex;gap:.5rem;margin-left:auto}
.acc-add{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:flex-end;margin:.75rem 0}
.acc-add label:not(.chk){flex-direction:column;align-items:flex-start;gap:.25rem;max-width:100%}
.acc-add input[type=text]{min-width:min(22rem,100%);width:22rem;max-width:100%}
.acc-t td.acc-act{text-align:right}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.conv{display:grid;gap:.6rem}
.msg{border:1px solid var(--line-2);border-radius:9px;padding:.6rem .8rem;background:var(--row-hover)}
.msg-customer{border-left:3px solid var(--blue)}
.msg-technician,.msg-system{border-left:3px solid var(--teal)}
.msg-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);display:flex;justify-content:space-between}
.msg-b{margin-top:.3rem;font-size:.92rem;white-space:pre-wrap}
.sum{font-weight:500;margin:.1rem 0 .3rem}
.cls{color:var(--quiet);font-size:.85rem;margin:.1rem 0 .3rem}.cls .sens{color:var(--warn-ink);font-weight:600}
.hyps{margin:.2rem 0;padding:0;list-style:none;display:grid;gap:.35rem}
.hyps li{display:grid;grid-template-columns:2.6rem 1fr;gap:.5rem;align-items:baseline;font-size:.9rem}
.conf{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--blue-ink);text-align:right}
.evlist{margin:.2rem 0;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.85rem}
.evlist .ev{font-family:var(--mono);font-size:.72rem;color:var(--blue-ink);margin-right:.2rem}
.ev{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.plain{margin:.2rem 0;padding-left:1.1rem;font-size:.88rem}.plain li{margin:.15rem 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.draft{background:var(--ai-bg);border:1px solid var(--ai-line);border-radius:8px;padding:.7rem .85rem;font-size:.92rem}
.mini{font-family:inherit;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--blue-ink);cursor:pointer}
.mini:hover{border-color:var(--blue)}
.mini-t{width:100%;border-collapse:collapse;font-size:.86rem}
.mini-t th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;padding:.3rem .4rem;border-bottom:1px solid var(--line-2)}
.mini-t td{padding:.4rem .4rem;border-bottom:1px solid var(--line-2)}.mini-t tr:last-child td{border-bottom:0}
.quiet{color:var(--quiet)}.bad{color:var(--warn-ink);font-weight:600}
.vip{font-size:.6rem;background:var(--amber-bg);color:var(--amber-ink);padding:.05rem .3rem;border-radius:4px;vertical-align:1px}
.intel{background:linear-gradient(180deg,var(--ai-bg),var(--card));border-color:var(--ai-line)}
.intel h3{color:var(--blue-ink)}
@media (max-width:760px){.cols{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- desk v2 (help desk Phase 3) */
.flash{margin:0 0 1rem;padding:.6rem .9rem;border-radius:8px;font-size:.92rem}
.flash.ok{background:var(--ok2-bg);color:var(--ok2-ink);border:1px solid var(--ok2-line)}
.flash.err{background:var(--warn-bg);color:var(--warn2-ink);border:1px solid var(--warn2-line)}
.desk-h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.desk-h h1{margin:0;font-size:1.3rem}
.desk-h form.search{margin-left:auto;display:flex;gap:.4rem}
.desk-h input[type=search]{padding:.45rem .7rem;border:1px solid var(--line-in);border-radius:8px;min-width:220px;font:inherit}
.btn{display:inline-block;padding:.45rem .8rem;border-radius:8px;border:1px solid var(--line-in);background:var(--card);color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-ink)}
.btn.danger{color:var(--warn2-ink)}
.btn.sm{padding:.25rem .55rem;font-size:.8rem}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin:0 0 .8rem;border-bottom:1px solid var(--line-3)}
.tabs a{padding:.5rem .8rem;border-radius:8px 8px 0 0;color:var(--muted);text-decoration:none;font-size:.9rem}
.tabs a b{margin-left:.35rem;font-weight:600;color:var(--text);background:var(--chip-bg);border-radius:10px;padding:0 .45rem;font-size:.78rem}
.tabs a.on{color:var(--text);background:var(--card);border:1px solid var(--line-3);border-bottom-color:var(--card);margin-bottom:-1px}
.qtable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line-3);border-radius:10px;overflow:hidden}
.qtable th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:.55rem .7rem;background:var(--surface-2);border-bottom:1px solid var(--line-3)}
.qtable td{padding:.6rem .7rem;border-bottom:1px solid var(--chip-bg);vertical-align:top;font-size:.92rem}
.qtable tr.row:hover,.qtable tr.row.sel{background:var(--ai-bg)}
.qtable td.ref{white-space:nowrap}
.qtable td.ref a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--blue);text-decoration:none}
.qtable td.ti a{color:var(--text);text-decoration:none;font-weight:500}
.qtable td.ti small{display:block;color:var(--muted);font-size:.8rem;margin-top:.1rem}
.qtable td.num,.qtable td.age{color:var(--muted);white-space:nowrap}
.qtable .empty{text-align:center;color:var(--muted);padding:2rem}
.chip.new{background:var(--chip-bg);color:var(--text)}.chip.triaged,.chip.assigned{background:var(--info-bg);color:var(--info-ink)}
.chip.in_progress{background:var(--ok2-bg);color:var(--ok2-ink)}.chip.waiting_on_customer{background:var(--amber2-bg);color:var(--amber2-ink)}
.chip.resolved,.chip.closed{background:var(--surface-2);color:var(--muted)}
.chip.pri-urgent{background:var(--warn2-bg);color:var(--warn2-ink)}.chip.pri-normal{background:var(--chip-bg);color:var(--muted)}
.sla{font-size:.8rem;white-space:nowrap;padding:.15rem .45rem;border-radius:6px}
.sla.ok{background:var(--ok2-bg);color:var(--ok2-ink)}.sla.warn{background:var(--amber2-bg);color:var(--amber2-ink)}.sla.bad{background:var(--warn2-bg);color:var(--warn2-ink)}.sla.none{color:var(--line-dim)}
.pager{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;margin:.8rem 0;color:var(--muted);font-size:.85rem}
.ticket-h{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 .3rem}
.ticket-h .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.ticket-h h1{margin:0;font-size:1.25rem;flex:1 1 300px}
.ticket-m{color:var(--muted);font-size:.9rem;margin:0 0 1rem;display:flex;gap:.9rem;flex-wrap:wrap}
.clocks{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.clock{background:var(--card);border:1px solid var(--line-3);border-radius:10px;padding:.5rem .8rem;font-size:.85rem;min-width:150px}
.clock b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.clock.paused{border-style:dashed}
.timeline .msg{position:relative}
.msg-note{background:var(--wait-bg);border-left:3px solid var(--wait-line)}
.msg-ai{background:var(--ai2-bg);border-left:3px solid var(--violet)}
.msg-system{background:var(--surface-2);border-left:3px solid var(--line-in)}
.msg-technician{border-left:3px solid var(--blue)}
.msg-customer{border-left:3px solid var(--green)}
.msg-h .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .4rem;border-radius:5px;background:var(--chip-bg);color:var(--muted);margin-right:.4rem}
.deliv{font-size:.72rem;margin-left:.5rem;padding:.1rem .4rem;border-radius:5px;background:var(--chip-bg);color:var(--muted)}
.deliv.sent{background:var(--ok2-bg);color:var(--ok2-ink)}.deliv.failed,.deliv.no_recipient,.deliv.not_configured{background:var(--warn2-bg);color:var(--warn2-ink)}
.msg .atts{margin:.4rem 0 0;padding:0;list-style:none;display:flex;gap:.4rem;flex-wrap:wrap}
.msg .atts a{font-size:.8rem;padding:.2rem .5rem;border:1px solid var(--line-in);border-radius:6px;text-decoration:none;color:var(--text);background:var(--card)}
.msg .atts a.flagged{border-color:var(--warn2-line);color:var(--warn2-ink)}
.msg details{margin-top:.4rem;font-size:.85rem;color:var(--muted)}
.msg details pre{white-space:pre-wrap;font:inherit;margin:.3rem 0 0}
.composer{background:var(--card);border:1px solid var(--line-3);border-radius:10px;padding:.8rem;margin-top:1rem;position:sticky;bottom:0;box-shadow:0 -4px 16px rgba(27,31,35,.04)}
.composer .ctabs{display:flex;gap:.4rem;margin-bottom:.5rem}
.composer .ctabs label{padding:.3rem .7rem;border-radius:8px;border:1px solid var(--line-in);cursor:pointer;font-size:.88rem}
.composer .ctabs input{margin-right:.35rem}
.composer.note-mode{background:var(--wait-bg)}
.composer textarea{width:100%;box-sizing:border-box;padding:.6rem;border:1px solid var(--line-in);border-radius:8px;font:inherit;min-height:120px;resize:vertical}
.composer .crow{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.composer .crow .btn{margin-left:auto}
.composer select{font:inherit;font-size:.85rem;padding:.3rem;border:1px solid var(--line-in);border-radius:8px;margin-bottom:.5rem;max-width:100%}
.composer .hint{font-size:.8rem;color:var(--amber2-ink);margin:.2rem 0 .4rem}
.side .panel form{display:flex;gap:.4rem;align-items:center;margin:.35rem 0;flex-wrap:wrap}
.side .panel select,.side .panel input[type=text]{font:inherit;font-size:.88rem;padding:.35rem .5rem;border:1px solid var(--line-in);border-radius:8px;flex:1 1 120px;min-width:0}
.side .panel label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);flex:0 0 100%}
.dev{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--chip-bg);font-size:.86rem;align-items:center}
.dev:last-child{border-bottom:0}
.dev .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev.linked .nm{font-weight:600}
.dev .st{color:var(--muted);font-size:.78rem;white-space:nowrap}
.dev .st .bad{color:var(--warn2-ink)}
.alert-row{font-size:.84rem;padding:.3rem 0;border-bottom:1px solid var(--chip-bg)}
.alert-row:last-child{border-bottom:0}
.alert-row .sev{font-size:.7rem;text-transform:uppercase;padding:.05rem .35rem;border-radius:5px;background:var(--amber2-bg);color:var(--amber2-ink);margin-right:.3rem}
.events{font-size:.84rem;color:var(--muted)}
.events summary{cursor:pointer;padding:.4rem 0}
.events li{padding:.15rem 0;list-style:none}
.events li time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;margin-right:.4rem}
.newform{background:var(--card);border:1px solid var(--line-3);border-radius:10px;padding:1rem;max-width:720px}
.newform label{display:block;font-size:.8rem;color:var(--muted);margin:.6rem 0 .2rem}
.newform input,.newform select,.newform textarea{width:100%;box-sizing:border-box;font:inherit;padding:.5rem;border:1px solid var(--line-in);border-radius:8px}
.newform .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.kbd{font-size:.78rem;color:var(--line-dim);margin:.6rem 0}
.kbd kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip-bg);border-radius:4px;padding:0 .3rem}
.team-t td,.team-t th{padding:.5rem .7rem;border-bottom:1px solid var(--chip-bg);text-align:left;font-size:.9rem}
@media (max-width:760px){
  .qtable thead{display:none}
  .qtable tr.row{display:grid;grid-template-columns:auto 1fr auto;gap:.1rem .6rem;padding:.6rem .7rem;border-bottom:1px solid var(--chip-bg)}
  .qtable td{display:block;padding:0;border:0}
  .qtable td.ref{grid-column:1}.qtable td.cl{grid-column:2;color:var(--muted);font-size:.8rem}.qtable td.ti{grid-column:1/4}
  .qtable td.st,.qtable td.pr,.qtable td.as,.qtable td.age,.qtable td.sla{display:inline-block;margin-right:.5rem;grid-column:1/4}
  .desk-h form.search{margin-left:0;width:100%}
  .desk-h input[type=search]{flex:1;min-width:0}
  .newform .row{grid-template-columns:1fr}
  .cols{display:block}
  .composer{position:static}
}

/* ---------------------------------------------------------------- customer portal (help desk Phase 4) */
.cust .flash{margin:1rem auto 0;max-width:720px}
.cust .cust-hero .pbtn{display:inline-block;margin-top:.6rem}
.cust .chip.waiting{background:var(--amber2-bg);color:var(--amber2-ink)}
.cust .cust-list a.ct-h{display:flex;justify-content:space-between;gap:.8rem;align-items:center;text-decoration:none;color:inherit}
.cust-form{background:var(--card);border:1px solid var(--line-3);border-radius:14px;padding:1rem 1.1rem;margin:1rem 0}
.cust-form label{display:block;font-size:.85rem;color:var(--muted);margin:.8rem 0 .3rem}
.cust-form label:first-child{margin-top:0}
.cust-form input,.cust-form textarea{width:100%;box-sizing:border-box;font:inherit;padding:.6rem .7rem;border:1px solid var(--line-in);border-radius:9px}
.cust-form .opts{display:grid;gap:.4rem}
.cust-form .opt{display:block;padding:.5rem .7rem;border:1px solid var(--line-3);border-radius:9px;font-size:.92rem;cursor:pointer;margin:0}
.cust-form .opt input{margin-right:.5rem}
.cust-form .pbtn{margin-top:1rem}
.cust-form .fine{font-size:.8rem;color:var(--muted);margin:.8rem 0 0}
.cmsg{background:var(--card);border:1px solid var(--line-3);border-radius:14px;padding:.8rem 1rem;margin:.6rem 0}
.cmsg-you{border-left:4px solid var(--green)}
.cmsg-us{border-left:4px solid var(--blue)}
.cmsg-h{font-size:.8rem;color:var(--muted);margin-bottom:.35rem;display:flex;justify-content:space-between;gap:.6rem}
.cmsg-b{font-size:.95rem;line-height:1.5;white-space:normal}
.cmsg .atts{list-style:none;padding:0;margin:.5rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap}
.cmsg .atts a{font-size:.8rem;padding:.2rem .55rem;border:1px solid var(--line-in);border-radius:6px;text-decoration:none;color:var(--text)}
/* AI proposals (help desk Phase 5) */
.proposals{border-left:4px solid var(--violet)}
.prop{padding:.5rem 0;border-bottom:1px solid var(--chip-bg)}.prop:last-child{border-bottom:0}
.prop b{display:block;margin-bottom:.2rem}.prop .draft{background:var(--surface-2);border-radius:8px;padding:.5rem .6rem;margin:.3rem 0;font-size:.9rem}
.prop form{margin-right:.3rem}
/* dual-run metrics (help desk Phase 6) */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.8rem;margin:.8rem 0}
.metrics-grid .card{margin:0}.metrics-grid h3,.ready+p{margin-top:0}.metrics-grid p{margin:.35rem 0}
.ready{list-style:none;padding:0;margin:.4rem 0}.ready li{padding:.25rem 0}.ready li.ok{color:var(--ok-ink)}.ready li.no{color:var(--warn-ink)}

/* ---------------------------------------------------------------- UX pass (2026-11-03): one reading order per page */
/* shared */
.pg-h{font-size:1.3rem;margin:.2rem 0 .3rem}
.lede{color:var(--quiet);margin:0 0 1rem;font-size:.95rem}
.inl{display:inline}
.grow{flex:1}
.fine{font-size:.8rem;color:var(--faint)}
.btn.ok{background:var(--ok2-bg);border-color:var(--ok2-line);color:var(--ok2-ink)}
.btn.ok:hover{background:var(--ok2-line)}
.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.newform .help{display:block;color:var(--line-dim);font-size:.78rem;margin-top:.2rem}
.newform .actions{display:flex;gap:.5rem;margin:1rem 0 0}

/* queue: six columns, a cue line that says whose move it is */
.tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none}
.tabs a{flex:none}
.qtable tr.row.late td.ref,.qtable tr.row.urgent td.ref{box-shadow:inset 3px 0 0 var(--red)}
.cues{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.3rem}
.cue{font-size:.72rem;padding:.1rem .45rem;border-radius:999px;background:var(--chip-bg);color:var(--muted);font-weight:500}
.cue.act{background:var(--info-bg);color:var(--info-ink)}
.cue.warn{background:var(--amber2-bg);color:var(--amber2-ink)}
.cue.cue-ai{background:var(--ai2-bg);color:var(--ai2-ink)}
.qtable td.as{white-space:nowrap}

/* ticket: where it stands + what to do next */
.stand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;background:var(--card);border:1px solid var(--line-3);border-left:4px solid var(--blue);border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1rem}
.stand.warn{border-left-color:var(--red);background:var(--late-bg)}.stand.ok{border-left-color:var(--green)}.stand.quiet{border-left-color:var(--line-in)}
.stand-t p{margin:.15rem 0 .6rem;font-size:1.02rem;font-weight:500}
.quick{display:flex;gap:.4rem;flex-wrap:wrap}
.stand .clocks{margin:0;flex-direction:column;gap:.4rem}
.clock.late{border-color:var(--warn2-line);background:var(--late-bg)}
.clock.met{border-color:var(--ok2-line);background:var(--ok2-bg)}

/* ticket: the AI assessment is one block, suggestions inside it */
.ai-box{background:var(--aimsg-bg);border:1px solid var(--ai2-line);border-left:4px solid var(--violet);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem}
.ai-box.none{background:var(--row-hover);border-color:var(--line-3);border-left-color:var(--line-in)}
.ai-box .ai-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .5rem;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}
.ai-box h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ai2-ink);margin:0}
.ai-box .brain{font-family:var(--mono);font-size:.66rem;background:var(--card);border:1px solid var(--ai2-line);color:var(--ai2-ink);padding:.06rem .4rem;border-radius:999px}
.ai-box .verdict{font-size:1.05rem;font-weight:500;margin:.2rem 0 .3rem}
.ai-box .cls{margin:.3rem 0 .6rem;display:flex;gap:.3rem;flex-wrap:wrap}
.ai-box h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.7rem 0 .35rem}
.ai-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.causes{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.causes li{display:grid;grid-template-columns:3.2rem 2.4rem 1fr;gap:.5rem;align-items:start;font-size:.9rem}
.causes .bar{display:block;height:.45rem;margin-top:.45rem;background:var(--ai2-line);border-radius:999px;overflow:hidden}
.causes .bar i{display:block;height:100%;background:var(--violet);border-radius:999px}
.causes .pct{font-family:var(--mono);font-size:.78rem;color:var(--ai2-ink);font-weight:600}
.steps{margin:0;padding-left:1.3rem;font-size:.9rem;display:grid;gap:.3rem}
.ai-box .ev{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.suggest{margin-top:.8rem;border-top:1px dashed var(--ai2-line);padding-top:.5rem}
.prop{padding:.55rem 0;border-bottom:1px solid var(--ai2-line)}.prop:last-child{border-bottom:0}
.prop-h{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.prop-h b{font-weight:600}
.prop .draft{background:var(--card);border:1px solid var(--ai2-line);border-radius:8px;padding:.6rem .75rem;margin:.4rem 0;font-size:.92rem}
.prop-a{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.35rem}
.ai-box .fine{margin:.7rem 0 0}

/* ticket: conversation and the reply box under it (no longer floating) */
.msg-h{align-items:center;gap:.4rem;justify-content:flex-start}
.msg-h time{margin-left:auto}
.msg-h .deliv{margin-left:0}
details.msg-ai summary{cursor:pointer;list-style:none}
details.msg-ai summary::-webkit-details-marker{display:none}
details.msg-ai .msg-b{margin-top:.5rem;font-size:.86rem}
.composer{position:static;box-shadow:none}
.composer .ctabs label{border-color:var(--line-in);color:var(--muted);position:relative}
.composer .ctabs label.on{background:var(--blue);border-color:var(--blue);color:#fff}
.composer .ctabs input{position:absolute;opacity:0;width:0;height:0;margin:0}
.composer.note-mode .ctabs label.on{background:var(--amber-deep);border-color:var(--amber-deep)}
.composer.note-mode{background:var(--card)}
.composer.note-mode textarea{background:var(--note-bg)}

/* ticket: side column details save on change */
.props{margin:0;display:grid;gap:.55rem}
.props>div{display:grid;grid-template-columns:5.4rem 1fr;gap:.5rem;align-items:center}
.props dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.props dd{margin:0;min-width:0}
.props dd.ro{font-size:.86rem;color:var(--muted)}
.side .panel .props form{display:flex;gap:.35rem;margin:0;flex-wrap:nowrap}
.side .panel .props select,.side .panel .props input{flex:1 1 auto;min-width:0;width:100%;font:inherit;font-size:.88rem;padding:.35rem .5rem;border:1px solid var(--line-in);border-radius:8px}
.who{margin:.1rem 0 .5rem}
.dev{flex-direction:column;align-items:flex-start;gap:.1rem}
.dev .nm{white-space:normal;overflow:visible}

@media (max-width:760px){
  .stand{grid-template-columns:1fr}
  .stand .clocks{flex-direction:row}
  .ai-cols{grid-template-columns:1fr}
  .causes li{grid-template-columns:2.6rem 2.2rem 1fr}
  .props>div{grid-template-columns:1fr;gap:.15rem}
  .qtable tr.row{grid-template-columns:auto 1fr}
  .qtable td.ref{grid-column:1}.qtable td.ti{grid-column:1/3}
  .qtable td.st,.qtable td.pr,.qtable td.as,.qtable td.sla{display:inline-block;margin-right:.5rem;grid-column:1/3}
}

/* portal: say what we are doing, what we need, how to ask */
.cust .brand-phone{margin-left:auto;color:var(--info-line);font-size:.85rem;padding:.35rem .7rem}
.cust .brand-signout{margin-left:0}
.cust-hero p b{color:var(--amber2-ink)}
.cust-hero .ey a{color:var(--blue);letter-spacing:0;text-transform:none;font-size:.85rem;font-weight:500}
.hero-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.cust .hero-cta .pbtn{width:auto;display:inline-flex;margin:0;padding:.75rem 1.4rem}
.hero-cta .fine a{text-decoration:underline}
.pbtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.pbtn.primary:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
.pbtn.sm{width:auto;display:inline-flex;padding:.4rem .8rem;font-size:.85rem;margin:0}
.cust .chip{font-size:.74rem;padding:.2rem .6rem;white-space:nowrap}
.cust .chip.logged,.cust .chip.working{background:var(--info-bg);color:var(--info-ink)}
.cust .chip.waiting{background:var(--amber2-bg);color:var(--amber2-ink)}
.cust .chip.resolved{background:var(--ok2-bg);color:var(--ok2-ink)}
.cust .chip.closed{background:var(--chip-bg);color:var(--muted)}
.sec{display:grid;gap:.8rem}
.sec h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:.6rem 0 0}
.sec.need h2{color:var(--amber-ink)}
.ct.ct-wait{border-color:var(--amber2-line);box-shadow:0 0 0 3px var(--amber2-bg)}
.ct-ask{margin:.6rem 0 0;color:var(--amber2-ink);font-weight:600}
.ct-next{justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.ct-open{color:var(--blue);font-weight:600;font-size:.88rem}
.quiet-sec .ct{opacity:.85}
.prog{list-style:none;margin:0 0 .4rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.prog li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--faint);padding:.55rem .6rem;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.prog .n{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;background:var(--chip-bg);color:var(--muted);flex:none}
.prog .done{color:var(--ok2-ink)}.prog .done .n{background:var(--green);color:#fff}
.prog .cur{color:var(--info-ink);border-color:var(--blue);font-weight:600}.prog .cur .n{background:var(--blue);color:#fff}
.prog .cur.wait{color:var(--amber2-ink);border-color:var(--wait-line);background:var(--wait-bg)}.prog .cur.wait .n{background:var(--amber);color:#fff}
.cust-list .status-line{margin:0;padding:.7rem .9rem;max-width:none;border-radius:10px;background:var(--ai-bg);color:var(--info-ink)}
.status-line.info .dot{background:var(--blue);box-shadow:0 0 0 4px rgba(99,91,255,.18)}
.status-line.wait{background:var(--amber2-bg);color:var(--amber2-ink)}.status-line.wait .dot{background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.status-line.ok{background:var(--ok2-bg);color:var(--ok2-ink)}.status-line.ok .dot{background:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.status-line a{text-decoration:underline;margin-left:.3rem}
.cmsg-h b{color:var(--ink)}
.cust-form .step{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;margin:0 0 1.1rem}
.cust-form .step .n{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;margin-top:.2rem}
.cust-form .step label{margin-top:0;font-weight:600;color:var(--ink);font-size:.95rem}
.cust-form .opt{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem}
.cust-form .opt input{margin:.25rem 0 0}
.cust-form .opt span{display:grid}
.cust-form .opt b{font-weight:600}
.cust-form .opt small{color:var(--quiet);font-size:.82rem}
.cust-form .opt:has(input:checked){border-color:var(--blue);background:var(--ai-bg)}
.urgent-box{background:var(--amber2-bg);border:1px solid var(--amber2-line);color:var(--amber2-ink);border-radius:10px;padding:.7rem .9rem;margin:.6rem 0;font-size:.92rem}
.urgent-box a{text-decoration:underline}
.cust-form.reply label{font-weight:600;color:var(--ink)}
.cust-foot a{color:inherit;text-decoration:underline}
@media (max-width:720px){.prog{grid-template-columns:1fr 1fr}.cust .brand-phone{display:none}.cust .hero-cta .pbtn{width:100%;justify-content:center}}
/* fixes from the phone and form review */
.cust-form .opt input{width:auto;flex:none}
.msg-h{flex-wrap:wrap}.msg-h time{white-space:nowrap}
@media (max-width:760px){.stand .clocks .clock{flex:1 1 120px;min-width:0}}
@media (max-width:600px){
  .topbar .in{gap:.5rem}.brand{white-space:nowrap}.rolechip{display:none}
  .topbar nav{flex:1;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}.topbar nav a{white-space:nowrap}
  .cust .brand-signout{margin-left:auto}
}
/* brand: the real Nerdster mark and wordmark, site primary indigo */
.brand-logo{height:30px;width:auto;border-radius:0;margin:0;vertical-align:middle}
.brand{align-items:center;gap:.7rem}
.brand small{font-weight:600;color:var(--info-line);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding-left:.7rem;border-left:1px solid rgba(255,255,255,.28);line-height:1}
.signin .logo{width:auto;height:118px;border-radius:0;box-shadow:none;margin-bottom:.6rem}
.signin h1{color:var(--navy)}
@media (max-width:480px){.brand small{display:inline}.brand-logo{height:26px}}
/* file pickers */
.file-l{display:block;margin:.8rem 0 .3rem;font-size:.85rem;color:var(--muted)}
.file-l small{color:var(--faint);margin-left:.3rem}
.cust-form input[type=file],.composer input[type=file]{width:100%;font:inherit;font-size:.85rem;padding:.45rem;border:1px dashed var(--line-in);border-radius:9px;background:var(--row-hover);color:var(--muted)}
.composer .filepick{flex:1 1 220px;min-width:0}
.composer .filepick input[type=file]{padding:.3rem;font-size:.8rem}

/* ---------------------------------------------------------------- mobile pass (2026-11-03): every page works one-handed on a phone */
/* notched phones: keep content out of the rounded corners */
.topbar .in,.wrap,.foot,.cust-hero,.cust-list,.cust-foot{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right))}
.lede .ln{color:var(--blue);font-weight:500}
/* staff bar: sign-out sits outside the nav so the phone layout can keep it on the first row */
.topbar .signout{padding:.35rem .7rem;border-radius:999px;font-size:.85rem;color:var(--info-line);white-space:nowrap}
.topbar .signout:hover{color:#fff}
/* nicer native file pickers everywhere */
input[type=file]::file-selector-button{font:inherit;font-size:.85rem;padding:.4rem .8rem;margin-right:.6rem;border:1px solid var(--line-in);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--blue)}
/* touch: nothing smaller than a fingertip, no hover-only affordances */
@media (pointer:coarse){
  .btn,.mini,.pbtn.sm,.ct-open,.composer .ctabs label,.tabs a{min-height:2.5rem;display:inline-flex;align-items:center;justify-content:center}
  .btn.sm{min-height:2.25rem}
  .topbar nav a,.topbar .signout,.brand-signout{min-height:2.25rem;display:inline-flex;align-items:center}
  .props select,.props input,.composer select,.newform select{min-height:2.5rem}
  .tk .open-case{opacity:1}
}
@media (hover:none),(max-width:760px){.kbd{display:none}}
@media (prefers-reduced-motion:reduce){.tk,.ct{animation:none}.pbtn,.mini,.btn{transition:none}}
/* tablets and phones: tables keep their columns and scroll sideways inside the card */
@media (max-width:760px){
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:34rem}
  .metrics-grid .card{overflow:hidden}
  /* queue rows become cards: ref and due on the first line, title, then status · priority · owner */
  .qtable,.qtable tbody{display:block}
  .qtable tr.row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;padding:.75rem .85rem;border-bottom:1px solid var(--chip-bg)}
  .qtable td{display:block;padding:0;border:0}
  .qtable td.ref{order:0;flex:0 0 auto}
  .qtable td.sla{order:1;margin-left:auto;flex:0 0 auto}
  .qtable td.ti{order:2;flex:0 0 100%}
  .qtable td.ti small{margin-top:.15rem}
  .qtable td.st,.qtable td.pr,.qtable td.as{order:3;flex:0 0 auto;margin:0}
  .qtable td.as{font-size:.84rem;color:var(--muted)}
  .qtable td.as::before{content:'·';margin-right:.5rem;color:var(--line-in)}
  .qtable tr.row.late td.ref,.qtable tr.row.urgent td.ref{box-shadow:none}
  .qtable tr.row.late,.qtable tr.row.urgent{box-shadow:inset 3px 0 0 var(--red)}
}
/* phones */
@media (max-width:600px){
  input,select,textarea{font-size:16px!important}       /* iOS zooms into anything smaller */
  .topbar .in{flex-wrap:wrap;gap:.35rem .5rem;padding-top:.55rem;padding-bottom:.45rem}
  .topbar .signout{margin-left:auto}
  .topbar nav{order:3;flex:0 0 100%;justify-content:flex-start;margin:0 -.25rem;gap:.15rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{padding:.4rem .6rem;font-size:.84rem}
  .cust .topbar .in{flex-wrap:nowrap}
  .wrap{margin-top:1rem}
  .detail .back{margin-bottom:.6rem}
  .ticket-h h1{font-size:1.15rem;flex-basis:100%}
  .stand{padding:.8rem .9rem}
  .stand .quick .btn{flex:1 1 auto}
  .composer .crow{gap:.5rem .8rem}
  .composer .crow .btn{flex:1 1 100%;margin-left:0}
  .dev{flex-direction:column}.dev .st{white-space:normal}
  .newform .actions .btn{flex:1 1 auto}
  /* portal */
  .cust-hero{padding-top:1.6rem}
  .cust-hero h1{font-size:1.6rem}
  .cust-list{margin-top:1.2rem}
  .cust .cust-list a.ct-h{flex-direction:column-reverse;align-items:flex-start;gap:.45rem}
  .ct{padding:1.1rem 1.1rem}
  .prog li{padding:.5rem .55rem;font-size:.8rem}
  .cust-form{padding:1rem .9rem}
  .cust-form .step{grid-template-columns:1.7rem 1fr;gap:.55rem}
  .signin{padding:1.25rem 1rem}
  .signin .card{padding:1.8rem 1.25rem}
  .signin .logo{height:96px}
}
/* activity payloads are raw JSON: let them break anywhere rather than push the page sideways */
.events li,.events li .quiet{overflow-wrap:anywhere;word-break:break-word}
.msg-b,.cmsg-b,.ct-update,.draft{overflow-wrap:anywhere}
@media (max-width:600px){.file-l small{display:block;margin:.1rem 0 0}}

/* ---- queue: search, filters, live stamp, hit snippets ---- */
.qform{margin:0;flex:1 1 100%}
.desk-h .search{display:flex;gap:.4rem;flex:1 1 16rem;min-width:0;margin-left:auto}
.desk-h .search input{flex:1;min-width:0}
.desk-h input[type=search]{background:var(--card);color:var(--ink)}
.filters{margin:-.2rem 0 .8rem;font-size:.85rem}
.filters summary{cursor:pointer;color:var(--quiet);user-select:none;width:max-content}
.filters summary b{display:inline-block;min-width:1.2rem;padding:0 .35rem;margin-left:.3rem;border-radius:999px;background:var(--blue);color:#fff;font-size:.72rem;text-align:center}
.frow{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:end;padding:.6rem .8rem;margin-top:.4rem;background:var(--card);border:1px solid var(--line-3);border-radius:10px}
.frow label{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--quiet);text-transform:uppercase;letter-spacing:.04em}
.frow select,.frow input{font:inherit;font-size:.85rem;text-transform:none;letter-spacing:0;padding:.35rem .5rem;border:1px solid var(--line-in);border-radius:7px;background:var(--card);color:var(--ink);min-width:8rem}
.frow .fbtns{display:flex;gap:.4rem;margin-left:auto;align-self:end}
.stamp{font-size:.72rem;color:var(--faint);border:1px solid var(--line-3);border-radius:999px;padding:.1rem .55rem;white-space:nowrap}
.stamp::before{content:'';display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--green);margin-right:.35rem;vertical-align:middle}
.ti .hit{display:block;color:var(--quiet);font-size:.78rem;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}
mark{background:var(--amber2-bg);color:var(--amber2-ink);padding:0 .15em;border-radius:3px}
.livebar{background:var(--amber2-bg);border:1px solid var(--amber2-line);color:var(--amber2-ink);border-radius:10px;padding:.5rem .8rem;margin:0 0 .8rem;font-size:.88rem}
.livebar a{text-decoration:underline;font-weight:600}
.cue.ok{background:var(--ok2-bg);color:var(--ok2-ink)}
/* ---- attachment previews ---- */
.atts .att-pic{display:flex;flex-direction:column;gap:.2rem;max-width:12rem}
.atts .att-img img{display:block;max-width:12rem;max-height:9rem;border:1px solid var(--line-3);border-radius:8px;background:var(--surface-2);object-fit:cover}
.msg .atts a.att-img,.cmsg .atts a.att-img{padding:0;border:0;background:none}
.atts .att-cap{font-size:.72rem;color:var(--quiet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,10,20,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem}
.lb img{max-width:96vw;max-height:84vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:zoom-out}
.lb-b{display:flex;gap:.6rem;align-items:center;color:#fff;font-size:.85rem}
.lb-b .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.ocr{margin:.4rem 0 0;font-size:.82rem}
.ocr summary{cursor:pointer;color:var(--quiet)}
.ocr summary small{color:var(--faint);margin-left:.3rem}
.ocr pre{white-space:pre-wrap;font-family:var(--mono);font-size:.76rem;background:var(--surface-2);border:1px solid var(--line-3);border-radius:8px;padding:.5rem .7rem;max-height:16rem;overflow:auto;margin:.3rem 0 0}
/* ---- client feedback: "was it sorted?" ---- */
.fb{margin:.3rem 0 0;font-size:.88rem}
.fb.up{color:var(--ok2-ink)}.fb.down{color:var(--warn2-ink)}.fb.none{color:var(--quiet)}
.fb q{font-style:italic}
.fb-ask{background:var(--card);border:1px solid var(--line-3);border-radius:14px;padding:1rem 1.1rem;margin:1rem 0;text-align:center}
.fb-ask p{margin:0 0 .6rem}
.fb-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:0}
.fb-btns button,.fb-btns a{font:inherit;font-size:1rem;font-weight:600;padding:.7rem 1.3rem;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;color:#fff}
.fb-up{background:var(--ok-ink)}.fb-down{background:var(--warn-ink)}
.fb-done{background:var(--ok2-bg);color:var(--ok2-ink);border:1px solid var(--ok2-line);border-radius:12px;padding:.7rem 1rem;margin:1rem 0;font-size:.95rem}
.fb-done.down{background:var(--warn2-bg);color:var(--warn2-ink);border-color:var(--warn2-line)}
.fb-page{max-width:34rem;margin:2.5rem auto;padding:0 1rem;text-align:center}
.fb-page h1{font-size:1.5rem;margin:0 0 .5rem}
.fb-page p{color:var(--quiet)}
.fb-form{margin:1rem 0;text-align:left}
.fb-form textarea{width:100%;font:inherit;padding:.6rem;border:1px solid var(--line-in);border-radius:8px;min-height:5rem;background:var(--card);color:var(--ink)}
.fb-form label{display:flex;gap:.4rem;align-items:center;font-size:.9rem;margin:.5rem 0}
.fb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;margin:0 0 1rem}
.fb-tiles .tile,.cl-tiles .tile{padding:.7rem .9rem;box-shadow:none;border-color:var(--line-3);border-radius:10px}
.fb-tiles .tile b,.cl-tiles .tile b{font-size:1.5rem}
.tile b.bad{color:var(--warn-ink)}.tile b.ok-ink{color:var(--ok-ink)}.tile b.quiet{color:var(--faint)}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.8rem;margin:0 0 1rem}
.fb-card{background:var(--card);border:1px solid var(--line-3);border-radius:10px;padding:.8rem 1rem;min-width:0}
.fb-card h3{font-size:.95rem;margin:0 0 .5rem}
.fb-t{width:100%;border-collapse:collapse;font-size:.85rem}
.fb-t th{text-align:left;font-weight:600;color:var(--quiet);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .4rem;border-bottom:1px solid var(--line-3)}
.fb-t td{padding:.35rem .4rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.fb-t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fb-t .bar{display:inline-block;width:4.5rem;height:.45rem;background:var(--chip-bg);border-radius:999px;overflow:hidden;vertical-align:middle;margin-right:.4rem}
.fb-t .bar i{display:block;height:100%;background:var(--ok-ink)}
.fb-list{list-style:none;margin:0;padding:0}
.fb-c{display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line-2);font-size:.9rem}
.fb-c .v{font-size:1.1rem}
.fb-c small{display:block;color:var(--faint);font-size:.75rem;margin-top:.15rem}
.fb-c q{font-style:italic}
/* ---- clients in the desk ---- */
.ctable{width:100%;border-collapse:collapse;font-size:.88rem}
.ctable th{text-align:left;font-weight:600;color:var(--quiet);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.5rem .6rem;border-bottom:1px solid var(--line-3);white-space:nowrap}
.ctable td{padding:.55rem .6rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.ctable td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ctable .cl small{display:block;color:var(--faint);font-size:.75rem}
.ctable tr.row{cursor:pointer}.ctable tr.row:hover{background:var(--row-hover)}
.cl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;margin:.6rem 0 1rem}
.qtable.in-panel{border:0;border-radius:0;background:none}
.mini-t{width:100%;border-collapse:collapse;font-size:.83rem}
.mini-t th{text-align:left;font-weight:600;color:var(--quiet);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .4rem;border-bottom:1px solid var(--line-3)}
.mini-t td{padding:.4rem .4rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.mini-t td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}
.vip{font-size:.65rem;font-weight:600;background:var(--amber2-bg);color:var(--amber2-ink);border-radius:4px;padding:.05rem .3rem;vertical-align:middle;margin-left:.3rem}
/* ---- theme toggle ---- */
.topbar .theme{font:inherit;font-size:1rem;line-height:1;background:none;border:0;color:#c6d3ea;cursor:pointer;padding:.25rem .45rem;border-radius:999px}
.topbar .theme:hover{color:#fff;background:rgba(255,255,255,.12)}
@media (max-width:640px){
  .desk-h .search{flex-basis:100%;margin-left:0}
  .frow label,.frow select,.frow input{width:100%;min-width:0}
  .frow .fbtns{margin-left:0;width:100%}
  .ctable th:nth-child(n+5),.ctable td:nth-child(n+5){display:none}
  .fb-grid{grid-template-columns:1fr}
}

/* ---- dark mode: desk pages only, auto by OS or forced by the ◐ toggle; the customer portal stays light ---- */
@media (prefers-color-scheme:dark){html[data-app="desk"]:not([data-theme="light"]){
  --navy:#07192e; --navy-2:#0b2342; --ink:#e6ebf4; --quiet:#a3adbf; --faint:#7d879a;
  --blue:#7b74ff; --blue-ink:#aaa5ff; --teal:#2ec8c3;
  --bg:#0f1420; --card:#171d2b; --line:#273043; --line-2:#222a3b;
  --ai-bg:#171c33; --ai-line:#2c3a66;
  --ok-bg:#10281c; --ok-ink:#5fd38a; --warn-bg:#2f1715; --warn-ink:#ff8577; --amber-bg:#2c200e; --amber-ink:#f0a64a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px -12px rgba(0,0,0,.6);
  --text:#e6ebf4; --muted:#a3adbf; --line-in:#3a4458; --line-3:#273043; --chip-bg:#232b3b; --surface-2:#1c2434; --row-hover:#1b2232;
  --ok2-bg:#10281c; --ok2-ink:#7fe0a2; --ok2-line:#1f4a33; --warn2-bg:#2f1715; --warn2-ink:#ff9b8f; --warn2-line:#5a2a26;
  --amber2-bg:#2c200e; --amber2-ink:#f5c070; --amber2-line:#5a4315; --wait-bg:#2a2410; --wait-line:#8a6d1a; --late-bg:#2a1718;
  --info-bg:#15213d; --info-ink:#9db4ff; --info-line:#2c3f6e; --ai2-bg:#1d1a33; --ai2-line:#3a3160; --ai2-ink:#b7aaff; --violet:#9d8cff;
  --aimsg-bg:#191a2a; --note-bg:#262312; --line-dim:#6c7689; --red:#ff6b6b; --green:#34d399; --amber:#fbbf24; --amber-deep:#f59e0b;
  color-scheme:dark;
}}
html[data-theme="dark"]{
  --navy:#07192e; --navy-2:#0b2342; --ink:#e6ebf4; --quiet:#a3adbf; --faint:#7d879a;
  --blue:#7b74ff; --blue-ink:#aaa5ff; --teal:#2ec8c3;
  --bg:#0f1420; --card:#171d2b; --line:#273043; --line-2:#222a3b;
  --ai-bg:#171c33; --ai-line:#2c3a66;
  --ok-bg:#10281c; --ok-ink:#5fd38a; --warn-bg:#2f1715; --warn-ink:#ff8577; --amber-bg:#2c200e; --amber-ink:#f0a64a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px -12px rgba(0,0,0,.6);
  --text:#e6ebf4; --muted:#a3adbf; --line-in:#3a4458; --line-3:#273043; --chip-bg:#232b3b; --surface-2:#1c2434; --row-hover:#1b2232;
  --ok2-bg:#10281c; --ok2-ink:#7fe0a2; --ok2-line:#1f4a33; --warn2-bg:#2f1715; --warn2-ink:#ff9b8f; --warn2-line:#5a2a26;
  --amber2-bg:#2c200e; --amber2-ink:#f5c070; --amber2-line:#5a4315; --wait-bg:#2a2410; --wait-line:#8a6d1a; --late-bg:#2a1718;
  --info-bg:#15213d; --info-ink:#9db4ff; --info-line:#2c3f6e; --ai2-bg:#1d1a33; --ai2-line:#3a3160; --ai2-ink:#b7aaff; --violet:#9d8cff;
  --aimsg-bg:#191a2a; --note-bg:#262312; --line-dim:#6c7689; --red:#ff6b6b; --green:#34d399; --amber:#fbbf24; --amber-deep:#f59e0b;
  color-scheme:dark;
}
html[data-theme="dark"] .topbar,.topbar{color:#fff}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--card);color:var(--ink);border-color:var(--line-in)}
@media (prefers-color-scheme:dark){html[data-app="desk"]:not([data-theme="light"]) input,html[data-app="desk"]:not([data-theme="light"]) select,html[data-app="desk"]:not([data-theme="light"]) textarea{background:var(--card);color:var(--ink);border-color:var(--line-in)}}
/* feedback tables: never clip the bar column, keep the week label on one line */
.fb-card{overflow-x:auto}
.fb-t td:first-child,.fb-t th:first-child{white-space:nowrap}
.fb-t .bar{width:3.5rem}
.fb-grid{grid-template-columns:repeat(auto-fit,minmax(24rem,1fr))}

/* ======================================================================
   2026-11-03: customer portal v3 (one ask box, compact lists, chat) and
   the desk's tabs (section tabs + account menu, underline queue tabs,
   segmented reply/note switch, filter pill, which-client card)
   ====================================================================== */

/* ---- portal: the hero runs on from the top bar; the ask box sits over its edge */
body.cust{background:var(--bg)}
.p-hero{color:#fff;position:relative;overflow:hidden;background-color:var(--navy);
  background-image:radial-gradient(60rem 26rem at 88% -30%,rgba(99,91,255,.5),transparent 60%),radial-gradient(40rem 20rem at -5% 130%,rgba(46,200,195,.2),transparent 60%),radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px);
  background-size:auto,auto,22px 22px}
.p-hero-in{max-width:46rem;margin:0 auto;padding:2.4rem 1.5rem 6.4rem}
.p-hero-slim .p-hero-in{padding-bottom:5.8rem}
.p-ey{margin:0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#bdb8ff;font-weight:600}
.p-ey a{color:inherit;text-decoration:none}
.p-hero h1{margin:.45rem 0 .4rem;font-size:clamp(1.9rem,4.6vw,2.65rem);letter-spacing:-.032em;line-height:1.04;font-weight:600}
.p-sub{margin:0;color:#c9d3e3;font-size:1.02rem;max-width:36rem;line-height:1.5}
.p-sub b{color:#ffd58a;font-weight:600}
.p-preview{display:inline-block;margin:0 0 1rem;padding:.25rem .75rem;border-radius:999px;background:rgba(255,255,255,.12);font-size:.78rem}
.p-wrap{max-width:46rem;margin:-4.8rem auto 4rem;padding:0 1.5rem;position:relative;display:grid;gap:1.4rem}
.p-wrap>.flash{margin:0;box-shadow:var(--shadow)}

/* the ask box */
.p-ask{background:var(--card);border-radius:20px;padding:1.35rem 1.45rem 1.1rem;position:relative;
  box-shadow:0 0 0 1px rgba(10,37,64,.06),0 26px 60px -26px rgba(10,37,64,.5);transition:box-shadow .2s,transform .2s;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.p-ask:focus-within{box-shadow:0 0 0 2px var(--blue),0 30px 70px -26px rgba(10,37,64,.55)}
.p-ask.drop{box-shadow:0 0 0 3px var(--blue),0 30px 70px -24px rgba(99,91,255,.6);transform:scale(1.006)}
.p-ask.drop::after{content:'Drop it here';position:absolute;inset:0;border-radius:20px;display:grid;place-items:center;background:rgba(242,246,255,.92);color:var(--blue-ink);font-weight:600;font-size:1.05rem}
.p-ask-l{display:block;font-size:1.28rem;font-weight:600;letter-spacing:-.018em;color:var(--ink);margin:0 0 .55rem}
.p-ask textarea{display:block;width:100%;border:0;outline:0;resize:none;font:inherit;font-size:1.06rem;line-height:1.58;color:var(--ink);background:transparent;min-height:5.4rem;padding:0}
.p-ask textarea::placeholder{color:#9aa4b5}
.p-files{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.p-files:empty{display:none}
.p-files li{display:inline-flex;align-items:center;gap:.2rem;max-width:100%;padding:.22rem .25rem .22rem .7rem;border-radius:999px;background:var(--ai-bg);color:var(--blue-ink);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-files button{border:0;background:transparent;color:inherit;font:inherit;font-size:1rem;line-height:1;cursor:pointer;width:1.5rem;height:1.5rem;border-radius:50%}
.p-files button:hover{background:rgba(99,91,255,.15)}
.p-impacts{border:0;margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.p-impacts legend{float:left;width:100%;padding:0;margin:0 0 .5rem;font-size:.86rem;color:var(--quiet)}
.p-impacts legend small{color:var(--faint)}
.p-imp{position:relative;cursor:pointer;margin:0}
.p-imp input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.p-imp span{display:inline-block;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--line-in);font-size:.88rem;color:var(--ink);background:var(--card);transition:background .15s,border-color .15s,color .15s}
.p-imp:hover span{border-color:var(--blue)}
.p-imp input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.p-imp-down input:checked+span{background:var(--warn-ink);border-color:var(--warn-ink)}
.p-imp input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.p-down{margin:.7rem 0 0;padding:.6rem .85rem;border-radius:10px;background:var(--warn-bg);color:var(--warn2-ink);font-size:.9rem}
.p-down a{color:inherit;font-weight:600}
.p-ask-bar{display:flex;align-items:center;gap:.7rem;margin-top:1.05rem;flex-wrap:wrap}
.p-attach{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;border-radius:11px;border:1px dashed var(--line-in);color:var(--quiet);font-size:.88rem;cursor:pointer;transition:all .15s;margin:0}
.p-attach:hover{border-color:var(--blue);color:var(--blue-ink);background:var(--ai-bg)}
.p-attach svg{width:1.05rem;height:1.05rem;flex:none}
.p-file-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.p-file-in:focus-visible+*,.p-attach:focus-within{outline:2px solid var(--blue)}
.p-hint{font-size:.8rem;color:var(--faint)}
.p-send{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:12px;padding:.78rem 1.2rem;background:var(--blue);color:#fff;font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(99,91,255,.8);transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.p-send:hover{background:var(--blue-ink);transform:translateY(-1px)}
.p-send:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.p-send:disabled{opacity:.72;cursor:progress;transform:none}
.p-send svg{width:1.1rem;height:1.1rem;transition:transform .15s}
.p-send:hover svg{transform:translateX(2px)}
.p-ask-fine{margin:.9rem 0 0;font-size:.8rem;color:var(--faint);line-height:1.5}
.p-ask-page{margin-top:0}

/* we need a reply from you */
.p-need{background:var(--wait-bg);border:1px solid var(--wait-line);border-radius:16px;padding:1rem 1.05rem;display:grid;gap:.6rem;animation:rise .5s .05s both}
.p-need h2{margin:0 .1rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep)}
.p-need-row{display:flex;align-items:center;gap:1rem;background:var(--card);border-radius:12px;padding:.85rem 1rem;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(124,74,3,.1);transition:box-shadow .15s}
.p-need-row:hover{box-shadow:0 0 0 1px var(--wait-line),0 8px 20px -12px rgba(124,74,3,.4)}
.p-reply-now{flex:none;padding:.48rem .9rem;border-radius:10px;background:var(--amber);color:#3b2400;font-weight:600;font-size:.86rem}

/* the list: two tabs, a search when it gets long, compact rows */
.p-list{display:grid;gap:.7rem}
.p-list-h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.p-tabs{display:flex;gap:1.5rem}
.p-tabs a{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 0 .7rem;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--quiet);text-decoration:none;font-weight:600;font-size:.96rem}
.p-tabs a:hover{color:var(--ink)}
.p-tabs a b{font-size:.74rem;padding:.06rem .5rem;border-radius:999px;background:var(--chip-bg);color:var(--quiet)}
.p-tabs a.on{color:var(--ink);border-bottom-color:var(--blue)}
.p-tabs a.on b{background:var(--blue);color:#fff}
.p-search{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.p-search input{font:inherit;font-size:.88rem;padding:.42rem .8rem;border:1px solid var(--line-in);border-radius:999px;width:13rem;background:var(--card)}
.p-search input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.p-clear{font-size:.82rem;color:var(--quiet)}
.p-rows{display:grid;gap:.5rem}
.p-row{display:flex;align-items:center;gap:.95rem;padding:.92rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;animation:rise .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
a.p-row:hover{border-color:#c9cff9;box-shadow:0 12px 28px -18px rgba(16,35,66,.4);transform:translateY(-1px)}
a.p-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.p-dot{flex:none;width:.62rem;height:.62rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--ai-bg)}
.p-row.logged .p-dot{background:#9d97ff}
.p-row.waiting .p-dot{background:var(--amber);box-shadow:0 0 0 4px var(--wait-bg)}
.p-row.resolved .p-dot,.p-row.closed .p-dot{background:var(--green);box-shadow:0 0 0 4px var(--ok-bg)}
.p-row.resolved,.p-row.closed{background:var(--row-hover)}
.p-row-main{min-width:0;flex:1;display:grid;gap:.16rem}
.p-row-t{font-weight:600;font-size:1rem;color:var(--ink);line-height:1.3}
.p-row-u{font-size:.9rem;color:var(--quiet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-row-m{font-size:.78rem;color:var(--faint)}
.p-row-s{flex:none;display:flex;align-items:center;gap:.5rem}
.p-chev{width:1.1rem;height:1.1rem;color:var(--faint);transition:transform .15s}
a.p-row:hover .p-chev{transform:translateX(2px);color:var(--blue)}
.p-chip{display:inline-block;padding:.2rem .62rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap;background:var(--ai-bg);color:var(--blue-ink)}
.p-chip.logged{background:var(--chip-bg);color:var(--quiet)}
.p-chip.waiting{background:var(--amber2-bg);color:var(--amber2-ink)}
.p-chip.resolved,.p-chip.closed{background:var(--ok-bg);color:var(--ok-ink)}
.p-empty{padding:1.6rem 1rem;text-align:center;color:var(--quiet);font-size:.95rem;background:var(--card);border:1px dashed var(--line-in);border-radius:14px}
.p-empty-big{padding:2.4rem 1.2rem}

/* the request page: header, path, then the conversation as a chat */
.p-tk{max-width:46rem;margin:0 auto;padding:1.6rem 1.5rem 2rem;display:grid;gap:1rem}
.p-tk>.flash{margin:0}
.p-back{margin:0;font-size:.88rem}
.p-back a{color:var(--blue-ink);text-decoration:none}
.p-tk-h h1{margin:0 0 .55rem;font-size:clamp(1.45rem,3.6vw,1.95rem);letter-spacing:-.025em;line-height:1.15}
.p-tk-m{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--quiet);font-size:.86rem}
.p-cat{padding:.18rem .62rem;border-radius:999px;font-size:.75rem;border:1px solid var(--line-in);color:var(--quiet);background:var(--card)}
.p-reading{display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem;border-radius:12px;background:var(--ai2-bg);color:var(--ai2-ink);font-size:.92rem;border:1px solid var(--ai2-line)}
.p-spin{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid var(--ai2-line);border-top-color:var(--violet);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-tk .prog{margin:0}
.p-tk .status-line{margin:0;padding:.72rem .95rem;max-width:none;border-radius:10px;background:var(--ai-bg);color:var(--info-ink)}
.p-tk .status-line.wait{background:var(--amber2-bg);color:var(--amber2-ink)}
.p-tk .status-line.ok{background:var(--ok2-bg);color:var(--ok2-ink)}
.p-tk .livebar,.p-tk .fb-ask,.p-tk .fb-done{margin:0}
.p-chat{display:grid;gap:.85rem;margin-top:.3rem}
.p-chat h2{margin:0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.p-msg{display:flex;gap:.6rem;align-items:flex-end;animation:rise .4s both}
.p-msg.you{justify-content:flex-end}
.p-bub{max-width:min(36rem,86%);padding:.78rem 1rem;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,35,66,.05)}
.p-msg.us .p-bub{border-bottom-left-radius:6px}
.p-msg.you .p-bub{background:#eef0ff;border-color:#dedcff;border-bottom-right-radius:6px}
.p-bub-h{display:flex;justify-content:space-between;gap:1rem;font-size:.76rem;color:var(--faint);margin-bottom:.3rem}
.p-bub-h b{color:var(--ink);font-weight:600}
.p-bub-h small{color:var(--faint);font-weight:400}
.p-bub-b{font-size:.96rem;line-height:1.56;overflow-wrap:anywhere}
.p-bub .atts{margin-top:.55rem}
.p-av{flex:none;width:2.05rem;height:2.05rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:600;font-size:.84rem;box-shadow:0 0 0 3px var(--bg)}
.p-msg.sys{flex-direction:column;align-items:center;text-align:center;color:var(--faint);font-size:.83rem;gap:.15rem;padding:0 1.5rem}
.p-msg.sys time{font-size:.72rem}

/* the reply bar stays at the bottom of the screen while the conversation scrolls */
.p-reply{position:sticky;bottom:0;z-index:5;margin:.2rem -1.5rem 0;padding:.9rem 1.5rem calc(.9rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(245,247,251,0),var(--bg) 26%)}
.p-reply>label{display:block;font-size:.8rem;color:var(--quiet);margin:0 0 .35rem .25rem;font-weight:600}
.p-reply>label small{font-weight:400;color:var(--faint)}
.p-reply-box{display:flex;align-items:flex-end;gap:.45rem;background:var(--card);border:1px solid var(--line-in);border-radius:16px;padding:.45rem .45rem .45rem .95rem;box-shadow:0 14px 32px -20px rgba(16,35,66,.5)}
.p-reply-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(99,91,255,.16),0 14px 32px -20px rgba(16,35,66,.5)}
.p-reply textarea{flex:1;min-width:0;border:0;outline:0;resize:none;font:inherit;font-size:.98rem;line-height:1.5;padding:.5rem 0;min-height:2.7rem;max-height:14rem;background:transparent;field-sizing:content}
.p-attach.icon{border:0;padding:.6rem;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p-reply .p-send{margin:0;padding:.62rem 1rem;font-size:.92rem;box-shadow:none}

@media (max-width:600px){
  .p-hero-in{padding:1.8rem 1rem 5.6rem}
  .p-wrap{padding:0 1rem;margin-top:-4.2rem;gap:1.15rem}
  .p-ask{padding:1.1rem 1rem 1rem;border-radius:18px}
  .p-ask-l{font-size:1.16rem}
  .p-hint{display:none}
  .p-ask-bar .p-attach{flex:1;justify-content:center}
  .p-ask-bar .p-send{flex:1 1 100%;justify-content:center;margin-left:0}
  .p-ask textarea{min-height:7.4rem}
  .p-row{padding:.82rem .85rem;gap:.35rem .7rem;align-items:flex-start;flex-wrap:wrap}
  .p-row .p-dot{margin-top:.42rem}
  .p-row-main{flex:1 1 calc(100% - 1.4rem)}
  .p-row-s{order:3;flex:1 1 100%;padding-left:1.32rem}
  .p-chev{display:none}
  .p-search{margin-left:0;width:100%;padding-bottom:.7rem}
  .p-search input{flex:1;width:auto}
  .p-need-row{flex-wrap:wrap;gap:.6rem}
  .p-reply-now{width:100%;text-align:center}
  .p-tk{padding:1.1rem 1rem 1.5rem}
  .p-reply{margin:.2rem -1rem 0;padding-left:1rem;padding-right:1rem}
  .p-bub{max-width:92%}
  .p-av{display:none}
  .p-reply .p-send{padding:.62rem .8rem}
}
@media (prefers-reduced-motion:reduce){.p-ask,.p-row,.p-need,.p-msg{animation:none}.p-spin{animation-duration:2.4s}}

/* ---- desk top bar: sections as tabs, then light/dark and the account menu */
html[data-app="desk"] .topbar .in{padding-top:0;padding-bottom:0;min-height:3.5rem;gap:0}
.topbar nav.mainnav{display:flex;align-self:stretch;margin:0 0 0 1.6rem;gap:.15rem;flex:0 1 auto;justify-content:flex-start;overflow:visible}
.topbar nav.mainnav a{position:relative;display:flex;align-items:center;padding:0 .8rem;min-height:3.5rem;color:#aebbd0;font-size:.9rem;text-decoration:none;border-radius:0;background:none;white-space:nowrap;transition:color .15s}
.topbar nav.mainnav a:hover{color:#fff;background:none}
.topbar nav.mainnav a.on{color:#fff;background:none;font-weight:600}
.topbar nav.mainnav a.on::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#9a94ff}
.topbar nav.mainnav a:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:6px}
.topbar .me{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.topbar .me .theme{width:2.2rem;height:2.2rem;padding:0;border-radius:50%;display:grid;place-items:center;color:#c6d3ea}
.topbar .me .theme svg{width:1.15rem;height:1.15rem}
.usermenu{position:relative}
.usermenu>summary{list-style:none;cursor:pointer;border-radius:50%;display:block}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.usermenu .av{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#2ec8c3);color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.02em;box-shadow:0 0 0 2px rgba(255,255,255,.16);transition:box-shadow .15s}
.usermenu[open] .av,.usermenu>summary:hover .av{box-shadow:0 0 0 2px #fff}
.usermenu .menu{position:absolute;right:0;top:calc(100% + .6rem);min-width:15.5rem;background:var(--card);color:var(--text);border:1px solid var(--line-3);border-radius:12px;
  box-shadow:0 20px 44px -18px rgba(10,37,64,.5);padding:.9rem .95rem;display:grid;gap:.18rem;z-index:40;animation:rise .18s both}
.usermenu .menu b{font-size:.95rem}
.usermenu .menu small{color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.usermenu .menu .rolechip{justify-self:start;margin:.4rem 0 .25rem;font-family:inherit;font-size:.7rem;background:var(--ai2-bg);color:var(--ai2-ink)}
.usermenu .menu .rolechip.eng{background:var(--chip-bg);color:var(--muted)}
.topbar .usermenu .menu .signout{margin:.35rem 0 0;padding:.5rem .6rem;border-radius:8px;color:var(--warn-ink);text-decoration:none;font-size:.88rem;border:1px solid var(--line-3);text-align:center;display:block;min-height:0}
.topbar .usermenu .menu .signout:hover{background:var(--warn-bg);color:var(--warn-ink)}
@media (max-width:760px){
  html[data-app="desk"] .topbar .in{flex-wrap:wrap;padding:0 1rem;min-height:0}
  html[data-app="desk"] .topbar .brand{min-height:3.1rem}
  .topbar nav.mainnav{order:3;flex:0 0 calc(100% + 2rem);margin:0 -1rem;padding:0 .35rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-top:1px solid rgba(255,255,255,.08)}
  .topbar nav.mainnav::-webkit-scrollbar{display:none}
  .topbar nav.mainnav a{flex:none;min-height:2.85rem;padding:0 .7rem;font-size:.86rem}
  .topbar nav.mainnav a.on::after{left:.7rem;right:.7rem}
  .topbar nav.mainnav::after{content:'';flex:none;width:.6rem}
}

/* ---- queue tabs: underlined, counts as pills, one row that scrolls on a phone */
.wrap .tabs{display:flex;gap:1.5rem;flex-wrap:nowrap;margin:.6rem 0 1rem;border-bottom:1px solid var(--line-3);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.wrap .tabs::-webkit-scrollbar{display:none}
.wrap .tabs a{flex:none;display:inline-flex;align-items:center;gap:.42rem;padding:.7rem 0 .62rem;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-size:.9rem;text-decoration:none;scroll-snap-align:start;min-height:0;white-space:nowrap}
.wrap .tabs a:hover{color:var(--text)}
.wrap .tabs a.on{color:var(--text);font-weight:600;background:none;border:0;border-bottom:2px solid var(--blue);margin-bottom:-1px}
.wrap .tabs a b{margin:0;min-width:1.4rem;text-align:center;font-size:.74rem;font-weight:600;padding:.02rem .45rem;border-radius:999px;background:var(--chip-bg);color:var(--muted)}
.wrap .tabs a.on b{background:var(--blue);color:#fff}
.wrap .tabs a.alert b{background:var(--amber2-bg);color:var(--amber2-ink)}
.wrap .tabs a.alert.on b{background:var(--amber);color:#3b2400}
.wrap .tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (max-width:760px){.wrap .tabs{gap:1.15rem;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}.wrap .tabs::after{content:'';flex:none;width:2.2rem}}

/* ---- filters: a pill that says how many are on */
details.filters>summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .8rem .32rem .65rem;border:1px solid var(--line-in);border-radius:999px;background:var(--card);color:var(--muted);font-size:.84rem;cursor:pointer;width:auto}
details.filters>summary::-webkit-details-marker{display:none}
details.filters>summary::before{content:'';width:.85rem;height:.85rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat}
details.filters>summary:hover,details.filters[open]>summary{color:var(--text);border-color:var(--blue)}

/* ---- reply / internal note: one segmented switch */
.composer .ctabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:.65rem;background:var(--chip-bg);border-radius:10px}
.composer .ctabs label{border:0;padding:.38rem .9rem;border-radius:8px;font-size:.86rem;font-weight:600;color:var(--muted);background:transparent;min-height:0;position:relative;cursor:pointer;transition:background .15s,color .15s}
.composer .ctabs label:hover{color:var(--text)}
.composer .ctabs label.on{background:var(--card);color:var(--blue-ink);border:0;box-shadow:0 1px 3px rgba(10,37,64,.14)}
.composer.note-mode .ctabs label.on{background:var(--card);color:var(--amber-deep)}
.composer .ctabs label:focus-within{outline:2px solid var(--blue);outline-offset:1px}

/* ---- which client is this from? */
.linkc{margin:0 0 1rem;padding:1rem 1.2rem;border-radius:var(--r);background:var(--amber2-bg);border:1px solid var(--amber2-line);color:var(--amber2-ink)}
.linkc .ey{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.linkc p{margin:.35rem 0 .75rem;color:var(--text);line-height:1.5}
.linkc-f{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
.linkc-f select{font:inherit;font-size:.92rem;padding:.48rem .65rem;border:1px solid var(--amber2-line);border-radius:8px;background:var(--card);color:var(--text);min-width:14rem;max-width:100%}
.linkc .chk{display:inline-flex;gap:.45rem;align-items:center;font-size:.88rem;color:var(--text)}
.linkc .fine{margin:.65rem 0 0;font-size:.8rem}
.ticket-ai{margin:-.45rem 0 .9rem}
.ai-filed{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--ai2-ink);background:var(--ai2-bg);border:1px solid var(--ai2-line);padding:.16rem .65rem;border-radius:999px;max-width:100%}
.ai-filed.wait{color:var(--muted);background:var(--chip-bg);border-color:var(--line-3)}
.ticket-m .noclient{color:var(--amber-deep);font-weight:600}
details.chg{display:inline}
details.chg>summary{display:inline;cursor:pointer;color:var(--muted);font-size:.8rem;text-decoration:underline;list-style:none;margin-left:.3rem}
details.chg>summary::-webkit-details-marker{display:none}
details.chg[open]>form{display:flex;gap:.4rem;margin-top:.45rem}
details.chg select{font:inherit;font-size:.85rem;max-width:12rem;padding:.25rem}

/* ======================================================================
   2026-11-03 late: the client file (knowledge, changes, software) and
   what the AI makes of it on a ticket (client context, first-time fix)
   ====================================================================== */
.prof{margin:0 0 1rem}
.prof-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .4rem}
.prof-h h3{margin:0}
.prof .lede{margin:.2rem 0 .6rem;font-size:1.02rem;color:var(--text)}
.prof-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.6rem}
.prof-cols h4{margin:0 0 .3rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prof-cols p,.prof-cols ul{margin:0;font-size:.9rem}
@media (max-width:760px){.prof-cols{grid-template-columns:1fr}}

/* knowledge entries */
.kbwrap{display:grid;gap:1rem}
.kbwrap>p{margin:0}
.kb-group h3,.kb-drafts h3{margin:.4rem 0 .5rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kb-group,.kb-drafts{display:grid;gap:.6rem}
.kb{background:var(--card);border:1px solid var(--line-3);border-radius:var(--r);padding:.9rem 1.05rem;box-shadow:var(--shadow)}
.kb.pinned{border-left:3px solid var(--blue)}
.kb.kb-suggested{background:var(--amber2-bg);border-color:var(--amber2-line)}
.kb-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.kb-h h4{margin:0;font-size:1rem;flex:1 1 16rem;color:var(--text)}
.kb-k{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;background:var(--chip-bg);color:var(--muted);white-space:nowrap}
.kb-k.k-environment{background:var(--info-bg);color:var(--info-ink)}
.kb-k.k-known_issue{background:var(--ok2-bg);color:var(--ok2-ink)}
.kb-k.k-history{background:var(--info-bg);color:var(--info-ink);border:1px dashed currentColor}
.kb-k.k-how_to{background:var(--ai2-bg);color:var(--ai2-ink)}
.kb-k.k-vendor,.kb-k.k-contact{background:var(--amber2-bg);color:var(--amber2-ink)}
.kb-k.k-policy{background:var(--warn2-bg);color:var(--warn2-ink)}
.kb-pin{font-size:.7rem;font-weight:600;color:var(--blue-ink)}
.kb-pin.ai{color:var(--amber-deep)}
.kb-b{margin:.5rem 0 0;font-size:.92rem;line-height:1.55;color:var(--text);overflow-wrap:anywhere}
.kb-tags{margin:.45rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem}
.kb-tags span{font-size:.74rem;color:var(--muted)}
.kb-m{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.6rem;font-size:.78rem;color:var(--muted)}
.kb-m>span:first-child{flex:1 1 18rem}
.kb-acts{display:flex;gap:.35rem;align-items:flex-start;flex-wrap:wrap}
.kb-acts form{display:inline-flex;gap:.35rem}
details.kb-edit>summary{list-style:none;cursor:pointer}
details.kb-edit>summary::-webkit-details-marker{display:none}
details.kb-edit[open]{flex-basis:100%;order:3}
details.kb-new>summary{list-style:none;cursor:pointer}
details.kb-new>summary::-webkit-details-marker{display:none}
details.kb-new>summary h3{display:inline-flex;align-items:center;gap:.4rem;margin:0}
details.kb-new>summary h3::before{content:'+';display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--blue);color:#fff;font-size:.95rem;line-height:1}
details.kb-new[open]>summary h3::before{content:'–'}
.kb-form{display:grid;gap:.6rem;margin-top:.7rem}
.kb-form label{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted);font-weight:600}
.kb-form input:not([type=checkbox]),.kb-form select,.kb-form textarea{font:inherit;font-size:.92rem;font-weight:400;padding:.5rem .6rem;border:1px solid var(--line-in);border-radius:8px;background:var(--card);color:var(--text);width:100%}
.kb-form textarea{resize:vertical;min-height:7rem;line-height:1.5}
.kb-row{display:flex;gap:.6rem .8rem;flex-wrap:wrap;align-items:flex-end}
.kb-row>.grow{flex:1 1 16rem}
.kb-row label.chk{display:inline-flex;grid-template-columns:none;align-items:center;gap:.4rem;font-weight:400;color:var(--text);padding-bottom:.45rem}
.kb-row .btn.primary{margin-left:auto}

/* changes timeline */
.chg-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.1rem}
.chg-list li{display:grid;grid-template-columns:3.2rem 9.5rem 1fr;gap:.6rem;align-items:baseline;padding:.42rem 0;border-bottom:1px solid var(--line-2);font-size:.88rem}
.chg-list li.chg-day{display:block;border:0;padding:.9rem 0 .2rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chg-list time{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.chg-s{overflow-wrap:anywhere;color:var(--text)}
.chg-s b{margin-right:.3rem}
.chg-k{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.7rem;font-weight:600;background:var(--chip-bg);color:var(--muted);white-space:nowrap;justify-self:start}
.chg-k.k-software_added,.chg-k.k-software_updated{background:var(--info-bg);color:var(--info-ink)}
.chg-k.k-software_removed{background:var(--warn2-bg);color:var(--warn2-ink)}
.chg-k.k-os_updated{background:var(--ai2-bg);color:var(--ai2-ink)}
.chg-k.k-rebooted{background:var(--ok2-bg);color:var(--ok2-ink)}
.chg-k.k-hardware,.chg-k.k-network{background:var(--amber2-bg);color:var(--amber2-ink)}
@media (max-width:600px){.chg-list li{grid-template-columns:3rem 1fr}.chg-list li .chg-s{grid-column:1 / -1}}
.chg-row{display:flex;flex-wrap:wrap;gap:.3rem .45rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--line-2);font-size:.84rem}
.chg-row:last-of-type{border-bottom:0}

/* software */
.sw-f{display:flex;gap:.4rem;flex-wrap:wrap}
.sw-f input,.sw-f select{font:inherit;font-size:.86rem;padding:.35rem .6rem;border:1px solid var(--line-in);border-radius:8px;background:var(--card);color:var(--text)}
.sw-f input{min-width:14rem}
.sw-t td{vertical-align:top}

/* the AI on a ticket: what about this client matters, and how to fix it first time */
.ai-ctx{display:grid;gap:.8rem;margin:.9rem 0;padding:.9rem 1rem;border-radius:12px;background:var(--card);border:1px solid var(--ai2-line)}
.ai-ctx h4{margin:0 0 .35rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ai2-ink)}
.ai-ctx p{margin:0;line-height:1.55;color:var(--text)}
.ai-sus li{font-size:.9rem;margin:.2rem 0}
.ai-sus .chg-k{white-space:normal;max-width:100%}
.checklist{margin:0;padding:0;list-style:none;counter-reset:ftf;display:grid;gap:.3rem}
.checklist li{counter-increment:ftf}
.checklist label{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer;font-size:.93rem;line-height:1.5;color:var(--text)}
.checklist label::before{content:counter(ftf);flex:none;width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;background:var(--ai2-bg);color:var(--ai2-ink);font-size:.74rem;font-weight:600;margin-top:.05rem}
.checklist input{margin:.3rem 0 0;flex:none;accent-color:var(--blue)}
.checklist input:checked+span{color:var(--muted);text-decoration:line-through}
.evref{display:inline-block;margin:0 .15rem;padding:0 .4rem;border-radius:999px;font-size:.68rem;font-weight:600;vertical-align:.1em;background:var(--chip-bg);color:var(--muted);cursor:help;white-space:nowrap}
.evref.ev-client_kb{background:var(--ok2-bg);color:var(--ok2-ink)}
.evref.ev-device_change{background:var(--amber2-bg);color:var(--amber2-ink)}
.evref.ev-software,.evref.ev-device{background:var(--info-bg);color:var(--info-ink)}

/* the client file beside a ticket */
.kbp h3{display:flex;align-items:center;gap:.5rem}
.kbp h3 .ln{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0}
.kbp h4{margin:.8rem 0 .2rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
details.kb-mini{border-bottom:1px solid var(--line-2);padding:.35rem 0}
details.kb-mini>summary{list-style:none;cursor:pointer;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap;font-size:.88rem}
details.kb-mini>summary::-webkit-details-marker{display:none}
details.kb-mini .kb-t{flex:1 1 9rem;font-weight:600;color:var(--text)}
details.kb-mini .kb-b{font-size:.86rem;margin:.35rem 0 .2rem}
.kb-match{font-size:.68rem;font-weight:600;color:var(--ok2-ink)}
.kb-match.pin{color:var(--blue-ink)}

/* save what we learned (resolved tickets) */
.learnc{margin:0 0 1rem;padding:1rem 1.2rem;border-radius:var(--r);background:var(--ok2-bg);border:1px solid var(--ok2-line);color:var(--ok2-ink)}
.learnc .ey{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.learnc p{margin:.35rem 0 0;color:var(--text)}
.learnc.histc{background:var(--info-bg);border-color:var(--line);color:var(--info-ink)}
.learnc.histc details{margin:.5rem 0 0}.learnc.histc summary{cursor:pointer;font-weight:600;color:var(--text)}
.learnc .kb-form label{color:var(--ok2-ink)}