/* Client portal — the look approved by Mark on 12 Oct 2026 (dark blueprint grid, one card, a person one call away).
   Fonts are SELF-HOSTED here (the security policy allows no third-party font loads): the same two the AITS website
   uses — Big Shoulders Display (name, headings), JetBrains Mono (tagline) and Inter (text), SIL Open Font License —
   copied from it on 12 Oct 2026: "it needs to match the website as its AITS with tracmar as the back end". */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/big-shoulders-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  /* THE PAGE WIDTH, one home (Mark, 15 Oct 2026: "its not very wide overall … approx 25%"): 860 → 1080 — and the request
     form the same ("I am thinking the request should be the same width"), so it reads as part of the same pages. */
  --page-w:1080px; --form-w:var(--page-w);
  --ground:#0E1726; --panel:#13203A; --deep:#0A1120; --line:rgba(95,168,221,.22); --line-2:rgba(95,168,221,.35);
  --brand:#5FA8DD; --brand-bright:#8CC5EF; --ink:#EAF1F4; --muted:#A9BACA; --bad:#F59E8B; --good:#6EE7B7; --warn:#E8A33C;
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
/* The scrollbar's room is kept on every page (Mark, 15 Oct 2026: "the page shifts slightly to the left" on Send us a
   request — the one page tall enough to scroll, so a scrollbar appeared and the centred page moved by its width). */
html{scrollbar-gutter:stable}
body{background-color:var(--ground);background-image:linear-gradient(rgba(95,168,221,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(95,168,221,.06) 1px,transparent 1px);background-size:40px 40px;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand-bright)} a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--brand-bright);outline-offset:3px;border-radius:4px}
.shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:48px 16px 28px;gap:26px}
.loading{color:var(--muted);margin-top:30vh}

/* brand lockup */
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:56px;height:56px;object-fit:contain}
.brand .bn{display:flex;flex-direction:column;line-height:.86}
.brand .org{font-family:var(--display);font-weight:800;font-size:30px;line-height:.86;text-transform:uppercase;letter-spacing:.02em}
.brand .sub{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--brand);margin-top:5px;text-transform:uppercase}

/* the sign-in card */
.card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 30px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
h1{margin:0;font-family:var(--display);font-weight:800;font-size:32px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
h2{margin:0;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;text-transform:uppercase}
.lead{margin:0;color:var(--muted)}
.small{margin:0;font-size:13px;color:var(--muted)}
label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}
input[type=email],input[type=password],input[type=text],input[type=tel],input[type=search]{width:100%;height:48px;background:var(--deep);border:1px solid var(--line-2);border-radius:9px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink)}
input::placeholder{color:#6F8293}
.btn{height:48px;border:0;border-radius:9px;background:var(--brand);color:var(--deep);font:inherit;font-weight:600;font-size:15px;cursor:pointer;padding:0 18px}
.btn:hover{background:var(--brand-bright)}
.btn[disabled]{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--brand)}
/* How to sign in — a link or a password, side by side (16 Oct 2026). Its own names: .seg is the tabs' pill control. */
.signin-how{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.signin-opt{height:44px;border:1px solid var(--line-2);border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0 10px;text-align:center}
.signin-opt:hover{border-color:var(--brand)}
.signin-opt.on{background:rgba(95,168,221,.14);border-color:var(--brand);color:var(--ink);cursor:default}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-bright);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;align-self:flex-start}
.rule{height:1px;background:rgba(95,168,221,.18)}
.call{display:flex;align-items:center;gap:10px;margin:0}
.call svg{flex:none}
.call a{font-weight:600;text-decoration:none}
.msg{margin:0;padding:10px 12px;border-radius:8px;font-size:14px}
.msg.bad{background:rgba(245,158,139,.12);color:var(--bad)}
.msg.good{background:rgba(110,231,183,.10);color:var(--good)}
.iconbox{width:52px;height:52px;border-radius:12px;background:rgba(95,168,221,.14);display:flex;align-items:center;justify-content:center}

/* powered by */
.powered{display:flex;align-items:center;gap:10px;opacity:.85;margin-top:auto}
.powered span{font-size:15px;color:var(--muted)}
.powered .priv{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.powered .priv:hover{color:inherit}
.tm-mark{position:relative;width:38px;height:29px}
.tm-mark i{position:absolute;border-radius:2px;display:block}
.tm-mark .a{left:0;top:0;width:3px;height:28px;background:#1D9E75}
.tm-mark .b1{left:6px;top:0;width:32px;height:4px;background:#378ADD}
.tm-mark .b2{left:6px;top:10px;width:24px;height:4px;background:#378ADD;opacity:.7}
.tm-mark .b3{left:6px;top:20px;width:16px;height:4px;background:#1D9E75;opacity:.8}
.tm-word{font-family:"Courier New",Courier,monospace;font-weight:700;font-size:21px;letter-spacing:4px;color:#378ADD}

/* signed in */
.top{width:100%;max-width:var(--page-w);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.wide{width:100%;max-width:var(--page-w);display:flex;flex-direction:column;gap:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.tickets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tk{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--ink);font:inherit;cursor:pointer}
.tk:hover{border-color:var(--brand)}
.tk .num{font-family:var(--mono);font-size:13px;color:var(--brand);flex:none}
.tk .ttl{flex:1;min-width:0;font-weight:600}
.tk .meta{font-size:13px;color:var(--muted);margin-top:2px;font-weight:400}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;display:inline-block}
.empty{color:var(--muted);text-align:center;padding:30px 10px}
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cl li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--deep);border-radius:9px}
.cl .box{flex:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--line-2);margin-top:2px;display:flex;align-items:center;justify-content:center}
.cl .done .box{background:var(--brand);border-color:var(--brand)}
.cl .done .tx{color:var(--muted);text-decoration:line-through}
.cl .by{display:block;font-size:12px;color:var(--brand);margin-top:2px}
.cl .cl-main{flex:1;min-width:0}
.cl .cl-edit{flex:none;font-size:13px;align-self:center}
.cl .cl-form{flex:1;display:flex;flex-direction:column;gap:8px}
/* Checklist priority — the team's H / M / L (14 Oct 2026) */
.pri-pick{display:inline-flex;gap:3px;align-items:center}
.pri{width:30px;height:30px;padding:0;border-radius:7px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:600 13px/1 var(--mono,monospace);cursor:pointer}
.pri.badge{width:auto;height:auto;padding:2px 7px;font-size:11px;cursor:default;flex:none;align-self:center}
.pri.on.pr-high{background:#ef4444;border-color:#ef4444;color:#fff}
.pri.on.pr-medium{background:#f59e0b;border-color:#f59e0b;color:#111}
.pri.on.pr-low{background:#3b82f6;border-color:#3b82f6;color:#fff}
.pri-lbl{display:inline-flex;align-items:center;gap:6px}
/* Checklist count on the jobs list: done / total */
.clc{flex:none;align-self:center;display:inline-flex;align-items:center;gap:5px;font:600 13px/1 var(--mono,monospace);padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.clc.all{color:var(--brand);border-color:var(--brand)}
/* The client's own request, shown back to them */
.det{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.det-body{line-height:1.55}
.det-body p{margin:0 0 8px}
.addrow{display:flex;gap:8px;flex-wrap:wrap}
.addrow input{flex:1 1 240px}
.back{align-self:flex-start}
@media (max-width:560px){
  .shell{padding:36px 16px 24px}
  .card{padding:24px 20px 20px}
  .brand .org{font-size:24px}
  .tk{flex-wrap:wrap}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
textarea{width:100%;background:var(--deep);border:1px solid var(--line-2);border-radius:9px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);resize:vertical;min-height:110px}
.lbl{font-size:13px;font-weight:600;display:block;margin-bottom:8px}
.urg{display:flex;flex-wrap:wrap;gap:8px}
.urg-opt{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;font-weight:500;font-size:14px}
.urg-opt:has(input:checked){border-color:var(--brand);background:rgba(95,168,221,.12)}
.urg-opt input{accent-color:var(--brand);margin:0}
/* request form: a hairline between questions; urgency as four tiles named like ticket priorities (12 Oct 2026) */
.q{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.q .lbl{margin-bottom:-6px}
.q-end{padding-top:20px}
.urg-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.urg-tile{align-items:flex-start;padding:12px}
.urg-tile input{margin-top:3px}
.urg-tile b{display:block;font-size:14px;font-weight:600}
.urg-tile small{display:block;font-size:12px;line-height:1.35;color:var(--muted);font-weight:400;margin-top:3px}
/* the priority colour as an edge on the tile, not another dot beside the radio */
.urg-tile{padding-left:14px}.p-low{box-shadow:inset 3px 0 0 var(--muted)}.p-normal{box-shadow:inset 3px 0 0 var(--brand)}
.p-high{box-shadow:inset 3px 0 0 #F5B454}.p-urgent{box-shadow:inset 3px 0 0 var(--bad)}
@media (max-width:560px){.urg-4{grid-template-columns:1fr 1fr}}
.work{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.work li{padding:10px 12px;background:var(--deep);border-radius:9px}
.work .wmeta{font-size:12px;color:var(--brand);font-family:var(--mono)}
.work .wtext{margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.brand.wide{flex-direction:column;gap:10px}
.logo-tile{background:#fff;border-radius:12px;padding:12px 20px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;align-items:center}
.logo-tile img{display:block;height:64px;width:auto;max-width:min(340px,80vw)}
.top .brand.wide{flex-direction:row;align-items:center;gap:14px}
.top .logo-tile{padding:8px 14px}
.top .logo-tile img{height:40px}
@media (max-width:560px){.logo-tile img{height:52px}.top .logo-tile img{height:34px}}

/* Jobs · Documents · People (SAAS_READINESS 2.4, 12 Oct 2026) */
/* Centred over the page content (--page-w) (Mark, 12 Oct 2026: they sat off to the left — the row was 980 wide, left-packed). */
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;max-width:var(--page-w);margin:0 auto 4px}
.tab{background:transparent;border:1px solid rgba(255,255,255,.14);color:inherit;border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer}
.tab.on{background:rgba(95,168,221,.18);border-color:rgba(95,168,221,.55);font-weight:600}
.docs,.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.doc{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.03)}
.dmain{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.dname{font-weight:600;color:inherit;word-break:break-word}
a.dname{text-decoration:underline;text-underline-offset:3px}
.dshare{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.share{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.doc select,.share select,#np-r{background:rgba(0,0,0,.25);color:inherit;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px}
.doc .meta{font-size:13px;color:var(--muted)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* Your details (12 Oct 2026) */
.facts{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:0}
.facts dt{color:var(--muted);font-size:14px}.facts dd{margin:0;font-size:15px;word-break:break-word}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.formgrid .span2{grid-column:1/-1}
.formgrid input{width:100%;box-sizing:border-box}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.tags .pill{font-size:12px;padding:2px 8px}
@media (max-width:560px){.formgrid{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.facts dt{margin-top:6px}}
input[readonly]{opacity:.6;cursor:not-allowed}

/* MFA (12 Oct 2026) */
.check{display:flex;gap:10px;align-items:center;font-weight:400;font-size:14px;cursor:pointer}.check input{width:18px;height:18px}
input[inputmode=numeric]{width:100%;height:48px;background:var(--deep);border:1px solid var(--line-2);border-radius:9px;padding:0 14px;font:600 22px/1 ui-monospace,Consolas,monospace;letter-spacing:6px;color:var(--ink)}
.nudge{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-color:rgba(95,168,221,.45)}
.qr{background:#fff;border-radius:10px;padding:10px;width:220px;height:220px;box-sizing:border-box}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.key{display:inline-block;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:6px;font:600 14px ui-monospace,Consolas,monospace;letter-spacing:1px;word-break:break-all}

/* The request form's formatting toolbar and attachments (12 Oct 2026) — the same tools as the team's ticket editor. */
.rte{border:1px solid var(--line-2);border-radius:9px;background:var(--deep);overflow:hidden}
.rte:has(.rte-bar) textarea{display:none}
.rte:not(:has(.rte-bar)){border:0;background:none}
.rte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 6px;border-bottom:1px solid var(--line);background:rgba(95,168,221,.06)}
.rte-btn{background:none;border:0;border-radius:5px;color:var(--muted);font:600 13px/1 var(--body);padding:5px 8px;cursor:pointer}
.rte-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.rte-btn.on{color:var(--brand-bright);background:rgba(95,168,221,.16)}
.rte-gap{width:1px;height:16px;background:var(--line-2);margin:0 4px}
.rte-size{background:var(--deep);color:var(--ink);border:1px solid var(--line-2);border-radius:5px;font:12px var(--body);padding:3px 4px;margin-right:4px}
.rte-colours{display:inline-flex;align-items:center;gap:3px}
.rte-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25);padding:0;cursor:pointer}
.rte-dot.on{outline:2px solid var(--brand-bright);outline-offset:1px}
.rte-area .ProseMirror{min-height:130px;max-height:50vh;overflow-y:auto;padding:12px 14px;outline:none;color:var(--ink);font-size:16px;line-height:1.5}
.rte-area .ProseMirror p{margin:0 0 8px}.rte-area .ProseMirror h1{font-size:24px;margin:6px 0}.rte-area .ProseMirror h2{font-size:19px;margin:6px 0}
.rte-area .ProseMirror blockquote{border-left:3px solid var(--line-2);margin:0 0 8px;padding-left:12px;color:var(--muted)}
.rte-area .ProseMirror ul,.rte-area .ProseMirror ol{margin:0 0 8px;padding-left:22px}
.rte-area .ProseMirror hr{border:0;border-top:1px solid var(--line-2);margin:10px 0}
.btn.attach{display:inline-flex;align-items:center;height:40px;font-size:14px;margin:0}
.files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.files li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 12px;background:var(--deep);border-radius:8px;font-size:14px}
.files .fname{font-weight:600;word-break:break-all;flex:1 1 180px}
.files .fok{color:var(--good);font-size:13px}.files .fbad{color:var(--bad);font-size:13px}
/* A select never pushes past its panel on a phone (14 Oct 2026) */
select{max-width:100%}

/* ── 14 Oct 2026: Open / Closed, progress, visits, comments, rating, reopen ── */
.seg{display:inline-flex;gap:0;border:1px solid var(--line-2);border-radius:999px;padding:3px;margin:10px 0 2px;background:var(--deep)}
.seg button{background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;padding:6px 18px;border-radius:999px;cursor:pointer}
.seg button.on{background:rgba(95,168,221,.2);color:var(--ink);font-weight:600}
.prog{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:0;align-items:flex-start}
.prog li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;color:var(--muted);text-align:center}
.prog li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line-2);z-index:0}
.prog li:first-child::before{display:none}
.prog li.done::before{background:var(--brand)}
.prog .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);background:var(--deep);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;color:var(--deep)}
.prog li.done .dot{background:var(--brand);border-color:var(--brand)}
.prog li.now .dot{box-shadow:0 0 0 4px rgba(95,168,221,.25)}
.prog li.now .pl{color:var(--ink);font-weight:600}
.prog li.done .pl{color:var(--ink)}
.visit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:rgba(110,231,183,.08);border:1px solid rgba(110,231,183,.35)}
.visit .vi{font-size:20px;line-height:1}
.visit-chip{display:inline-block;margin-top:4px;font-size:12px;color:var(--good);font-weight:600}
.cmts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cmts li{padding:10px 12px;background:var(--deep);border-radius:9px;border-left:3px solid var(--brand)}
.cmts .wmeta{font-size:12px;color:var(--brand);font-family:var(--mono)}
.cmts .wtext{margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.panel textarea{width:100%;background:var(--deep);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);resize:vertical}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumb{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.thumb .tf{font-size:20px}
.thumb:hover{border-color:var(--brand)}
.thumb.on.up{background:rgba(110,231,183,.14);border-color:rgba(110,231,183,.6)}
.thumb.on.down{background:rgba(245,158,139,.14);border-color:rgba(245,158,139,.6)}
.reopen{display:flex;flex-direction:column;gap:8px;margin-top:8px}
@media (max-width:520px){ .prog li{font-size:11px} .seg button{padding:6px 14px} }

/* THEIR LOGO BESIDE OURS (14 Oct 2026) — the client record's logo on a white tile (most are made for paper), a thin
   rule, then the company's own lockup. Narrow screens stack them. */
.cobrand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.client-mark{background:#fff;border-radius:12px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;min-width:64px;height:64px}
.client-mark img{display:block;max-height:48px;max-width:140px;width:auto;height:auto;object-fit:contain}
.cobrand-rule{width:1px;align-self:stretch;min-height:40px;background:var(--line-2)}
.top .client-mark{height:52px;min-width:52px;padding:6px}
.top .client-mark img{max-height:40px;max-width:110px}
@media (max-width:560px){.cobrand{gap:12px}.client-mark{height:52px;min-width:52px}.client-mark img{max-height:40px;max-width:110px}}

/* The team's replies (two-way comments, 14 Oct 2026): the other side, in our colour. */
.cmts li.us{background:rgba(95,168,221,.1);border-left:none;border-right:3px solid var(--brand-bright);margin-left:28px}
.cmts li.us .wmeta{color:var(--brand-bright);text-align:right}
@media (max-width:560px){.cmts li.us{margin-left:14px}}

/* ── The open requests list's extras (15 Oct 2026) ── */
.list-above{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.list-above:empty{display:none}
.list-summary{margin:0;font-size:14px;color:var(--muted)}
.list-summary b{color:var(--ink)}
.list-summary .sw{color:var(--warn);font-weight:600}
.visit-strip{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.visit-strip button{width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--good);border-radius:10px;padding:10px 14px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.visit-strip button:hover{border-color:var(--good)}
.visit-strip .meta{color:var(--muted)}
.list-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lsearch{flex:1;min-width:200px}
.tk.waiting{border-color:var(--warn);border-left-width:3px}
.wait-badge{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;color:#1a1300;background:var(--warn);border-radius:999px;padding:1px 9px;vertical-align:2px}
.new-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--brand);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(86,152,232,0.25)}
.tk .latest{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk .latest b{font-weight:600;color:var(--ink)}
.tk .latest.us b{color:var(--brand)}
.cmts .ask-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#1a1300;background:var(--warn);border-radius:999px;padding:0 8px}
.cmt-form{display:flex;flex-direction:column;gap:8px}
.cmt-form.asked textarea{border-color:var(--warn);box-shadow:0 0 0 3px rgba(232,163,60,.15)}
.cmt-form .ask-line{margin:0;font-size:14px;font-weight:600;color:var(--warn)}
.cmts li.asking{border-right-color:var(--warn)}
/* Section headings (15 Oct 2026): colour on the heading and a thin top edge on its panel — never on the text. */
.sec-h{display:flex;align-items:center;gap:8px}
.sec-h .sec-i{font-family:inherit;font-size:17px;line-height:1;font-weight:400}
.sec-h-cmts{color:var(--brand-bright)}
.sec-h-work{color:var(--good)}
.panel.sec-cmts{border-top:3px solid var(--brand)}
.panel.sec-work{border-top:3px solid var(--good)}
/* Files on a comment (15 Oct 2026): the send button and the picker on one row; the names listed under the comment. */
.cmt-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.cmt-actions .fpick{flex:1 1 260px}
.cmt-actions .fpick .small{display:inline-block}
.cfiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cfile{font-size:13px;padding:3px 9px;border-radius:6px;background:var(--deep);word-break:break-all}
/* Ready-made requests (15 Oct 2026): a drop-down above the title (ours, then theirs, then "Create your own…"); the chosen
   one's questions under it; their own editor opens under the drop-down. */
.tpl-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tpl-sel{flex:1 1 280px;height:48px;background:var(--deep);border:1px solid var(--line-2);border-radius:9px;padding:0 12px;font:inherit;font-size:16px;color:var(--ink)}
.tpl-tools{display:inline-flex;align-items:center;gap:12px}
.tpl-edit[hidden]{display:none}
.tpl-edit-in{margin-top:10px;padding:14px;border:1px dashed var(--line-2);border-radius:10px;display:flex;flex-direction:column;gap:10px}
.tpl-edit-in textarea{width:100%}
.tpl-qs{display:flex;flex-direction:column;gap:10px}
.tpl-qs:empty{display:none}
/* The visit (15 Oct 2026): Add to calendar beside it; "on the way" in the brand blue, above it. */
.visit{flex-wrap:wrap}
.visit .cal-btn{height:36px;font-size:14px;display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.onway{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:rgba(95,168,221,.10);border:1px solid rgba(95,168,221,.45)}
.onway .vi{font-size:20px;line-height:1}
.onway-chip{color:var(--brand);margin-right:10px}

.card.form-w{max-width:var(--form-w)}
/* The request box with its heading outside it (15 Oct 2026): an empty message slot or tool span takes no room. */
.form-out:empty,.tpl-tools:empty{display:none}
/* Phone polish (17 Oct 2026): the tabs stay on one row instead of leaving "Access" alone on a second; the
   editor's toolbar is two tight rows instead of three, every tool still in sight (a swiped row hid the colours);
   a phone number never breaks in the middle. */
.call a{white-space:nowrap}
@media (max-width:560px){
  .tabs{flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none}
  .tab{flex:1 1 auto;padding:7px 10px;font-size:13px;white-space:nowrap}
  .rte-bar{gap:2px;padding:4px 4px}
  .rte-btn{padding:5px 5px}
  .rte-gap{display:none}
}
/* H/M/L beside a checklist box stand as tall as the box (polish pass, 17 Oct 2026); the badge in a list row keeps its size. */
.addrow .pri:not(.badge){width:40px;height:48px;border-radius:9px}

/* next-round C1, C2, C10 (17 Oct 2026) — the portal on a phone. */
@media (max-width:560px){
  /* C1: a request card stacks — number, checklist count and status on top, the title and its details full width under
     them. Side by side, the title was squeezed to two or three words a line beside the number. */
  .tk{display:grid;grid-template-columns:auto auto 1fr auto;column-gap:10px;row-gap:6px;align-items:center}
  .tk .pill{grid-column:4;justify-self:end}   /* the status at the right; the checklist count stays its own size beside the number */
  .tk .num{grid-row:1;grid-column:1}
  .tk > :not(.num):not(.ttl){grid-row:1}
  .tk .ttl{grid-row:2;grid-column:1/-1}
  /* C2: the visit banner's Add to calendar goes under the text instead of crushing it. */
  .visit .cal-btn{flex-basis:100%;justify-content:center}
  .visit > span:not(.vi){flex:1 1 0;min-width:0}
  /* C10: the search box and the Everyone's / Mine switch are one height. */
  .list-tools .lsearch{height:40px;box-sizing:border-box}
  .list-tools .seg{height:40px;box-sizing:border-box;margin:0;align-items:center}
}

/* The Health tab (17 Oct 2026): one line per area — a dot, the area, what we found, and the verdict in words, so the
   colour is never the only signal. Wraps to two rows on a phone. */
.hl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hl-asof{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hl-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hl-line{display:grid;grid-template-columns:12px 150px 1fr auto;align-items:center;gap:12px;padding:8px 14px;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--good);border-radius:10px;background:rgba(255,255,255,.03)}
.hl-dot{width:10px;height:10px;border-radius:50%;background:var(--good)}
.hl-label{font-weight:600}
.hl-text{color:var(--ink)}
.hl-word{font-size:12px;font-weight:700;color:var(--good);white-space:nowrap}
.hl-warn{border-left-color:var(--warn)} .hl-warn .hl-dot{background:var(--warn)} .hl-warn .hl-word{color:var(--warn)}
.hl-bad{border-left-color:var(--bad)} .hl-bad .hl-dot{background:var(--bad)} .hl-bad .hl-word{color:var(--bad)}
.hl-sub{margin:22px 0 10px}
/* Devices: name, problems and model flow on one line and wrap only when they must (19 Oct 2026). */
.hl-devs{gap:6px}
.hl-dev{padding:7px 14px;gap:6px 14px}
.hl-dev .dmain{display:block;line-height:1.45}
.hl-dev .dname{margin-right:12px}
.hl-probs{font-size:13px;color:var(--ink);margin-right:10px}
.hl-dev .meta{font-size:12px}
.hl-jump{cursor:pointer}.hl-jump:hover,.hl-jump:focus-visible{background:rgba(255,255,255,.06)}
.hl-jump .hl-word::after{content:' ↓'}
#hl-attn{scroll-margin-top:16px}
@media (max-width:640px){
  .hl-line{grid-template-columns:12px 1fr auto;row-gap:4px}
  .hl-text{grid-column:2 / 4}
  .hl-word{grid-row:1;grid-column:3}   /* the status word on the label's row, not a row of its own (19 Oct 2026) */
  .hl-dot{grid-row:1}
}