/* Avinat Desk — the staff side, redesigned 24/09/2026 to match the v3 website
   (Familjen Grotesk; plum + coral on paper). One row format for every list, one page per case.
   Pages: today.php (and, step by step, the ID and onboarding desks).
   Batch 18 step 3 (29/09/2026): Familjen Grotesk self-hosted from assets/fonts (OFL licence alongside), instead
   of Google Fonts - no request to Google on any desk page. */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/familjen-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/familjen-grotesk-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{
  --plum-deep:#2a1419; --plum:#3c1f25; --plum-soft:#5F363E; --coral:#DB4F53; --coral-strong:#c43f43;
  --paper:#F8F5F3; --paper-2:#F2EDE9; --card:#FFFFFF; --grey:#6b5c5f; --grey-2:#9a8d8f;
  --green:#2f7a45; --green-bg:#E4EFE7; --amber:#9a6412; --amber-bg:#F6EBD9; --bad:#a3363a; --bad-bg:#FBE5E5;
  --idv:#8f2f33; --idv-bg:#F4E4E4; --onb:#34506e; --onb-bg:#E6ECF3;
  --line:rgba(60,31,37,.10); --line-2:rgba(60,31,37,.16);
  --font:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.desk{margin:0;background:var(--paper);color:var(--plum);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
:where(.desk) a{color:inherit} /* zero specificity, so .btn and other link classes set their own colour (batch 16, Q60) */
.desk button,.desk input,.desk select,.desk textarea{font-family:inherit}
.desk :focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* ---- app bar (desktop) and tab bar (phone) ---- */
.appbar{background:var(--plum-deep);color:#F8F5F3;display:flex;align-items:center;gap:22px;padding:12px 22px;padding-top:calc(12px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:20}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:16px;white-space:nowrap;text-decoration:none}
.mark img{width:30px;height:30px;border-radius:8px;display:block}
.topnav{display:flex;gap:4px;flex:1}
.topnav a{color:rgba(248,245,243,.74);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 13px;border-radius:999px}
.topnav a:hover{color:#fff}
.topnav a.on{background:rgba(248,245,243,.13);color:#fff}
.topnav a b{font-weight:700;margin-left:5px;color:var(--coral)}
.who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(248,245,243,.72)}
.who a{color:rgba(248,245,243,.72);text-decoration:none} .who a:hover{color:#fff}
.who .newbtn{background:transparent;color:#fff;border:1.5px solid rgba(248,245,243,.5);border-radius:999px;padding:8px 15px;font-weight:600;font-size:14px;text-decoration:none}
.who .newbtn:hover{border-color:#fff}
/* batch 18 step 2: "+ New" opens onto New ID check / New onboarding, instead of guessing which from the tab. */
.newmenu{position:relative}
.newmenu summary{list-style:none;cursor:pointer}
.newmenu summary::-webkit-details-marker{display:none}
.newmenu-list{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(42,20,25,.06),0 14px 32px -12px rgba(42,20,25,.4);padding:6px;display:grid;min-width:190px;z-index:25}
.newmenu-list a{color:var(--plum)!important;padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:600}
.newmenu-list a:hover{background:var(--paper)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--plum-soft);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12.5px}
.tabbar{display:none}

.screen{width:100%;max-width:880px;margin:0 auto;padding:28px 22px 60px;display:grid;gap:24px;align-content:start;flex:1}

/* ---- type ---- */
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--plum-soft);margin:0}
.h1{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
.h1 em{font-style:normal;color:var(--plum-soft)}
.lede{margin:0;color:var(--grey);font-size:15px;max-width:62ch}
.lane-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lane-h h2{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}
.lane-h span{font-size:13px;color:var(--grey)}

/* ---- chips and buttons ---- */
.chip{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--paper-2);color:var(--plum-soft);white-space:nowrap;line-height:1.3}
.chip.idv{background:var(--idv-bg);color:var(--idv)} .chip.onb{background:var(--onb-bg);color:var(--onb)}
.list.waiting .chip,.list.waiting .chip.idv,.list.waiting .chip.onb{background:transparent;color:var(--grey);box-shadow:inset 0 0 0 1px var(--line-2)}
.chip.time{background:var(--amber-bg);color:var(--amber)} .chip.ok{background:var(--green-bg);color:var(--green)} .chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.notuk[hidden]{display:none}   /* batch 13 step 3: .chip's own display:inline-block otherwise beats [hidden] */
.cap{display:block;font-size:13px;font-weight:600;color:var(--plum-soft);margin:0 0 4px}
.btn{display:inline-block;background:var(--coral-strong);color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:0 6px 16px rgba(196,63,67,.28)}
/* A button whose label is a variable-length name (the QuickBooks rename button) must wrap rather than
   force the page wider than the phone screen it's read on (wording-ux-2). */
.btn.wrap{white-space:normal;text-align:left;max-width:100%}
.btn:hover{background:#a8353a}
.btn.ghost{background:none;color:var(--plum);border:1.5px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--plum)}

/* ---- THE ROW: the one way a case appears in any list ---- */
.list{background:var(--card);border-radius:16px;border:1px solid var(--line);overflow:hidden}
.list > .lane-h{padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto 14px;gap:3px 16px;padding:13px 18px;border-bottom:1px solid var(--line);text-decoration:none;align-items:center;color:inherit}
.row:last-child{border-bottom:0}
a.row:hover{background:#FCFAF9}
.row .n{font-size:16px;font-weight:700;line-height:1.3;min-width:0}
.row .n small{font-weight:500;color:var(--grey);font-size:14px;margin-left:8px}
.row .s{font-size:14.5px;color:var(--plum);min-width:0;overflow-wrap:anywhere}
.row .t{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.row .t .w{font-size:12.5px;color:var(--grey);white-space:nowrap}
a.row::after{content:"›";grid-column:3;grid-row:1/3;font-size:22px;color:var(--grey-2);align-self:center}
/* A .row that isn't a link (onboard-new.php's existing-clients programme, batch 18) has no ::after chevron to
   reserve the last column, so .n and .s must be pinned to column 1 explicitly — left to auto-placement, .s
   drops into that empty, narrow trailing column instead of sitting under .n (wording-ux-1). */
.row.plain .n{grid-column:1;grid-row:1}
.row.plain .s{grid-column:1;grid-row:2}
.rank{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--plum);color:#fff;font-size:12.5px;font-weight:700;margin-right:10px;vertical-align:1px}
.list.first{border:0;box-shadow:0 1px 2px rgba(42,20,25,.05),0 10px 28px -18px rgba(42,20,25,.4)}
.list.first .row{padding:16px 18px}
.list.first .row .n{font-size:18px}
.list.waiting{background:transparent;border-style:dashed;border-color:var(--line-2)}
.list.waiting .n,.list.waiting .s{color:var(--grey);font-weight:500}
.list.waiting .row{border-bottom-style:dashed}
.empty{padding:14px 18px;color:var(--grey);font-size:14.5px;margin:0}

details.done summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:6px 4px;font-size:14px;color:var(--grey);font-weight:600}
details.done summary::-webkit-details-marker{display:none}
details.done summary::after{content:"Show";color:var(--plum-soft);font-size:13px}
details.done[open] summary::after{content:"Hide"}
details.done ul{margin:6px 0 0;padding:0 4px;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--grey)}
details.done li::before{content:"✓";color:var(--green);font-weight:700;margin-right:8px}
details.done li a{color:var(--grey)}

/* ---- today ---- */
.summary{display:grid;gap:12px}
.progress{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--grey)}
.bar{flex:1;max-width:260px;height:8px;border-radius:99px;background:rgba(60,31,37,.1);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px}
.allclear{background:var(--card);border-radius:16px;padding:22px;display:grid;gap:6px;border:1px solid var(--line)}
.allclear b{font-size:19px}
.foot-note{font-size:12.5px;color:var(--grey);text-align:center;margin:8px 0 0}

/* ---- the app, phones and tablets: slim top bar, tabs along the bottom ---- */
@media (max-width:900px), (display-mode:standalone){
  .appbar{padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));gap:10px;justify-content:space-between}
  .topnav,.who .newbtn,.who .newmenu,.who .name,.who .out{display:none}
  .screen{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--plum-deep);padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:grid;justify-items:center;gap:3px;color:rgba(248,245,243,.62);text-decoration:none;font-size:11.5px;font-weight:600;padding:4px 0;position:relative}
  .tabbar a.on{color:#fff}
  .tabbar svg{width:22px;height:22px}
  .tabbar .dot{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--coral-strong);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 4px}
}
/* Six tabs since 28/09/2026 (Fees): on a narrow phone the labels shrink a little so 'Onboarding' still fits */
@media (max-width:420px){.tabbar a{font-size:10.5px}}
@media (min-width:641px) and (max-width:900px), (min-width:641px) and (display-mode:standalone){
  .tabbar{padding-left:max(6px, calc(50% - 320px));padding-right:max(6px, calc(50% - 320px))}
  .tabbar a{font-size:12.5px}
}
/* ---- phone ---- */
@media (max-width:640px){
  .screen{padding:18px 14px calc(110px + env(safe-area-inset-bottom,0px));gap:18px}
  .h1{font-size:25px}
  .row{grid-template-columns:1fr 12px;padding:12px 14px}
  .row .t{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 8px}
  a.row::after{grid-column:2;grid-row:1/4}
  .list.first .row .n{font-size:17px}
}
/* ---- messages carried back from an action ---- */
/* Error text (a raw Karbon reply) wraps rather than widening the page (27/09/2026) */
.flash{border-radius:14px;padding:12px 16px;font-size:15px;overflow-wrap:anywhere}
.flash.good{background:var(--green-bg);color:#234f33}
.flash.bad{background:var(--bad-bg);color:var(--bad)}
.flash ul{margin:6px 0 0;padding-left:18px;font-size:14px} .flash li{margin:2px 0}

/* ---- list sub-tabs (Open / Calls / Closed) ---- */
.subnav{display:flex;gap:6px;flex-wrap:wrap}
.subnav a{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line-2);text-decoration:none;font-weight:600;font-size:14px;color:var(--plum-soft)}
.subnav a.on{background:var(--plum);border-color:var(--plum);color:#fff}
.subnav a.new{margin-left:auto;border-color:transparent;color:var(--plum-soft)}
.foot-note a{color:var(--grey)}

/* ---- the case page ---- */
.back{font-size:14px;font-weight:600;color:var(--plum-soft);text-decoration:none;width:max-content}
.case-h{display:grid;gap:8px}
.case-h .sub{font-size:15px;color:var(--grey);display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.case-h .sub a{color:var(--plum-soft);font-weight:600}
/* money_paid_html()'s output, reused inside a plain <dd> (Details › Payment) where there is no flex
   gap to space its '·' separators from the text either side (wording-ux-12). */
.paidline{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.track{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.track li{display:grid;gap:7px;align-content:start;font-size:12.5px;font-weight:600;color:var(--grey);min-width:0}
.track li::before{content:"";height:6px;border-radius:3px;background:rgba(60,31,37,.12)}
.track li.done{color:var(--green)} .track li.done::before{background:var(--green)}
.track li.now{color:var(--plum)} .track li.now::before{background:var(--coral)}
.tracklabel{display:none;font-size:13px;font-weight:600;color:var(--plum-soft);margin:6px 0 0}
.now-card{background:var(--card);border-radius:18px;padding:20px 22px;display:grid;gap:12px;border-top:4px solid var(--coral);box-shadow:0 1px 2px rgba(42,20,25,.05),0 14px 34px -20px rgba(42,20,25,.45)}
.now-card.amber{border-top-color:var(--amber)}
.now-card h2{margin:0;font-size:22px;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.now-card > p{margin:0;font-size:15px;color:var(--grey);line-height:1.5;overflow-wrap:anywhere}
.now-card > p b{color:var(--plum)}
.eyebrow.grey{color:var(--grey)} .eyebrow.ok{color:var(--green)} .eyebrow.amber{color:var(--amber)}
.pref{background:var(--paper);border-radius:12px;padding:10px 14px;font-size:14.5px}
.setrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
.setrow input,.setrow select{font:inherit;font-size:15.5px;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum);min-width:0;flex:1 1 220px}
.setrow input:focus,.setrow select:focus{outline:0;border-color:var(--coral)}
.small-note{font-size:13px;color:var(--grey);margin:0}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions-row form{margin:0}
details.inline summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--plum-soft)}
.upform{display:grid;gap:10px;margin-top:10px}
.upform label{display:grid;gap:4px;font-size:14px;color:var(--grey)}
.upform input[type=text],.upform input[type=date],.upform select{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff}
.upform select{width:100%;max-width:100%;box-sizing:border-box}
label.tick{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--plum)}
label.tick input{width:18px;height:18px;accent-color:var(--coral)}
.noshow{display:flex;flex-direction:column;gap:8px;align-items:flex-start}   /* batch 13 step 4: the "Email them" tick above the button */
.precheck{background:var(--paper);border-radius:12px;padding:8px 14px;display:grid}
.precheck label{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;padding:5px 0;cursor:pointer}
.precheck input{width:18px;height:18px;accent-color:var(--green);margin-top:1px;flex:none}
.precheck .pc-date{display:block;font-size:13px;color:var(--grey);margin-top:2px} .precheck .pc-date.bad{color:var(--bad);font-weight:600}
.poareasons{border:0;padding:0;margin:0;display:grid;gap:6px}
.poareasons legend{font-weight:600;color:var(--plum);margin-bottom:4px}
.howto{margin:0;padding-left:20px;font-size:14px;color:var(--grey);display:grid;gap:3px}
.howto b{color:var(--plum);font-weight:600}
.warnline{margin:0;background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:8px 12px;font-size:14px;overflow-wrap:anywhere}
.sheet{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.sheet li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:start}
.sheet li:last-child{border-bottom:0}
.sheet li > :not(.pg){grid-column:2}
.sheet .pg{grid-column:1;grid-row:1/span 4;width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--plum-soft);font-size:12.5px;font-weight:700;display:grid;place-items:center}
.sheet .q{font-size:13px;color:var(--grey)}
.sheet .vals{display:flex;flex-wrap:wrap;gap:8px}
.sheet .say{font-size:14.5px;font-weight:600}
.sheet .tip{font-size:13px;color:var(--amber)}
.sheet li.stop{background:var(--bad-bg)} .sheet li.stop .pg{background:var(--coral-strong);color:#fff}
.cp{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);border-radius:10px;padding:6px 6px 6px 11px;font-size:15px;font-weight:600;background:#fff;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
.cp small{font-weight:500;color:var(--grey);font-size:12px;white-space:nowrap;flex:none}
.cp .v{min-width:0;overflow-wrap:anywhere}
.cp em{font-style:normal;font-weight:500;color:var(--amber);font-size:13.5px;padding-right:6px}
.cp button{border:0;background:var(--paper-2);color:var(--plum-soft);border-radius:7px;padding:5px 9px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;flex:none}
.cp button.ok{background:var(--green-bg);color:var(--green)}
.cp button:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
/* Ready card: the documents right under the ticks (1.4), the viewer, "Copy next" (1.3), the confirmation upload (1.2) */
.evstrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 14px;scroll-snap-type:x mandatory}
.evs{flex:0 0 132px;scroll-snap-align:start;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:6px;display:grid;gap:5px;text-decoration:none;color:var(--plum);font-size:12.5px;font-weight:600}
.evs img,.evs .pic{width:100%;height:96px;object-fit:contain;background:var(--paper-2);border-radius:8px;display:grid;place-items:center;color:var(--grey);font-size:12px;font-weight:700}
.evs:hover,.ev[data-view]:hover{border-color:var(--plum-soft)}
.ev img{object-fit:contain}
dialog.viewer{border:0;padding:0;border-radius:14px;width:min(960px,96vw);max-height:94vh;background:#fff;box-shadow:0 20px 60px rgba(42,20,25,.35)}
dialog.viewer::backdrop{background:rgba(42,20,25,.55)}
.viewer .vbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.viewer .vbar b{font-size:14.5px} .viewer .vgap{flex:1}
.viewer .vbar button,.viewer .vbar a{font:inherit;font-size:13px;font-weight:600;border:1.5px solid var(--line-2);background:#fff;color:var(--plum);border-radius:9px;padding:6px 10px;cursor:pointer;text-decoration:none}
.viewer .vimg{padding:14px;display:grid;place-items:center;overflow:auto;max-height:calc(94vh - 56px)}
.viewer .vimg img{max-width:100%;max-height:calc(94vh - 90px);transition:transform .2s ease}
/* The shared viewer (TS8.3, 27/09/2026): n-of-m, zoom, rotate, side by side and a PDF iframe — assets/viewer.js */
.viewer .vbar{flex-wrap:wrap}
.viewer .vpos{font-size:12.5px;color:var(--grey)}
.viewer .vimg{touch-action:manipulation}
.viewer .vimg img.z2{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.viewer #v-pdf{width:100%;height:calc(94vh - 70px);border:0;background:var(--paper-2)}
.viewer .vtwo{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;max-height:calc(94vh - 56px);overflow:auto}
.viewer .vtwo figure{margin:0;display:grid;gap:4px}
.viewer .vtwo img{width:100%;max-height:calc(94vh - 110px);object-fit:contain;background:var(--paper-2);border-radius:8px}
.viewer .vtwo figcaption{font-size:12.5px;color:var(--grey)}
.viewer [hidden]{display:none!important}
@media(max-width:640px){.viewer .vtwo{grid-template-columns:1fr}.viewer .vtwo img{max-height:42vh}}
.copynext{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;width:min(620px,calc(100vw - 20px));display:flex;align-items:center;gap:8px;background:var(--plum-deep);color:#fff;border-radius:16px;padding:10px 10px 10px 14px;box-shadow:0 10px 30px rgba(42,20,25,.35)}
.copynext .cn-l{flex:1;min-width:0;display:grid;gap:1px}
.copynext small{font-size:11.5px;color:rgba(248,245,243,.7)} .copynext b{font-size:15px;font-weight:700}
.copynext #cn-val{font-size:13.5px;color:rgba(248,245,243,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copynext .cn-back,.copynext .cn-id{flex:none;border:1.5px solid rgba(248,245,243,.35);background:none;color:#fff;border-radius:10px;min-width:44px;min-height:44px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.copynext .cn-id{font-size:13px}
.copynext .cn-go{flex:none;min-height:44px;min-width:92px;font-size:15px}
body.has-copynext main.screen{padding-bottom:110px}
.sheet .cp.cn-now{border-color:var(--coral);box-shadow:0 0 0 3px rgba(219,79,83,.18)}
.refbox .confl{display:block;margin-top:12px;font-size:14px;color:var(--plum);font-weight:600}
.refbox input[type=file]{display:block;margin:6px 0 4px;font:inherit;font-size:14px}
.fdocs a{color:var(--plum-soft);font-weight:600}
@media (max-width:900px), (display-mode:standalone){ .copynext{bottom:calc(76px + env(safe-area-inset-bottom,0px))} body.has-copynext main.screen{padding-bottom:180px} }
.editdetails{margin-top:14px}
.editform{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
.editform .wide{grid-column:1 / -1}
.editform input[type=email],.editform input[type=tel],.editform input[type=date]{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum)}
.editform .small-note{margin-left:8px}
.poaread{border:1.5px solid var(--line-2);border-radius:12px;background:#fff;padding:12px 14px;margin:0 0 12px}
.poaread .pr-h{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--plum-soft)}
.poaread ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.poaread li{display:grid;grid-template-columns:22px auto 1fr;gap:8px;align-items:baseline;font-size:14.5px}
.poaread li b{font-weight:600;white-space:nowrap} .poaread li span:last-child{color:var(--grey);overflow-wrap:anywhere}
.poaread .m{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800}
.poaread li.ok .m{background:var(--green-bg);color:var(--green)} .poaread li.bad .m{background:var(--bad-bg);color:var(--bad)} .poaread li.unknown .m{background:var(--amber-bg);color:var(--amber)}
.poaread li.bad span:last-child{color:var(--bad)}
.poaread .pr-flag{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--amber-bg);color:var(--amber);font-size:13.5px}
.poaread .pr-note,.poaread .pr-err{margin:8px 0 0;font-size:12.5px;color:var(--grey)} .poaread .pr-err{color:var(--amber);font-size:13.5px}
.pr-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .pr-ask .pr-h{flex-basis:100%;margin:0}
.pr-again{margin:-6px 0 12px;text-align:right} .pr-again button{border:0;background:none;color:var(--plum-soft);font:inherit;font-size:12.5px;font-weight:600;text-decoration:underline;cursor:pointer;padding:2px 0}
.cp-all{border:1.5px solid var(--line-2);background:#fff;color:var(--plum-soft);border-radius:8px;padding:4px 10px;margin-left:6px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;vertical-align:middle}
.cp-all.ok{background:var(--green-bg);color:var(--green);border-color:transparent}
.cp-all:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
.refbox{display:grid;gap:8px;border-top:1px dashed var(--line-2);padding-top:14px;margin:0}
.refbox label{font-weight:700;font-size:15px}
.preview{background:var(--paper);border-radius:12px;padding:12px 16px;font-size:14.5px;display:grid;gap:8px}
.preview p{margin:0} .preview p.lead{font-weight:600} .preview p.note{color:var(--grey);font-size:13.5px}
.sect{display:grid;gap:10px}
.sect > h2{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}
.evid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:6px;align-content:start;font-size:13.5px;text-decoration:none;color:inherit}
.ev img,.ev .pic{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;background:var(--paper-2);display:grid;place-items:center;color:var(--grey);font-size:12px}
.ev b{font-weight:600} .ev span{color:var(--grey);font-size:12.5px}
.facts{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0;display:grid;grid-template-columns:180px minmax(0,1fr)}
.facts dt,.facts dd{margin:0;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.facts dt{color:var(--grey)}
.facts dd a{color:var(--plum-soft);font-weight:600}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
.facts code{font-size:12.5px;background:var(--paper-2);padding:1px 5px;border-radius:5px}
details.fold{background:var(--card);border:1px solid var(--line);border-radius:14px}
details.fold > summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;gap:10px}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"+";color:var(--grey);font-size:18px;line-height:1}
details.fold[open] > summary::after{content:"\2013"}
.hist{list-style:none;margin:0;padding:0 16px 12px;display:grid;gap:8px;font-size:14px}
.hist li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px}
.hist time{color:var(--grey);font-variant-numeric:tabular-nums}
.more{display:grid;gap:12px;padding:0 16px 16px}
.btn.danger{color:var(--bad);border-color:rgba(163,54,58,.3)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---- the company page ---- */
.chip.warn{background:var(--amber-bg);color:var(--amber)}
.upform textarea{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum);resize:vertical;width:100%;box-sizing:border-box}
.upform textarea:focus,.upform input:focus,.upform select:focus{outline:0;border-color:var(--coral)}
.now-card .upform > input[type=text]{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff}
.facts.mini{grid-template-columns:120px minmax(0,1fr);background:var(--paper);border:0;border-radius:12px}
.facts.mini dt,.facts.mini dd{padding:7px 12px;font-size:14px;border-bottom-color:rgba(60,31,37,.07)}
.warn-t{color:var(--amber)} .muted{color:var(--grey)}
.factors{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.factors b{font-size:12px;letter-spacing:.06em;color:var(--amber)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:8px;align-content:start;min-width:0}
.pcard.now{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.pcard .ph{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pcard h3{margin:0;font-size:17px}
.pcard .pr{margin:0;font-size:14px;color:var(--grey)}
.plinks{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.plinks a{color:var(--plum-soft);font-weight:600}
.plinks span{color:var(--grey)}
.tries{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5} .tries li{margin:0 0 6px} .tries a{color:var(--plum-soft);font-weight:600}
.pcard .more{padding:10px 0 0}
.ev form{margin:0}
.xd{background:var(--green-bg);border-radius:12px;padding:12px 14px;display:grid;gap:8px;font-size:14.5px}
.xd p{margin:0;line-height:1.5} .xd a{color:var(--plum-soft);font-weight:600}
.xd .upform{margin-top:0} .xd .linkbtn{color:var(--grey)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--bad);cursor:pointer;text-decoration:underline}
pre.raw{margin:0;padding:12px 16px 16px;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.own{font-size:14px;overflow-x:auto}
.own table{border-collapse:collapse;font-size:13.5px} .own td,.own th{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left}
/* "Read the ownership again from Companies House" is wider than a phone card: let it wrap instead of scrolling the card sideways */
.own .btn{white-space:normal;text-align:left;max-width:100%}

@media (max-width:640px){
  .track{gap:4px} .track li{font-size:0;gap:0} .tracklabel{display:block}
  .now-card{padding:16px}
  .now-card h2{font-size:20px}
  .refbox .setrow .btn{width:100%}
  .facts{grid-template-columns:minmax(0,1fr)} .facts dt{border-bottom:0;padding-bottom:0;font-size:12.5px} .facts dd{padding-top:2px}
  .hist li{grid-template-columns:minmax(0,1fr);gap:0} .hist time{font-size:12.5px}
  .subnav a.new{margin-left:0}
  .evid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:minmax(0,1fr)}
  .facts.mini{grid-template-columns:minmax(0,1fr)}
  /* 44 px tap targets on a phone (batch 16, RV-5) */
  .cp button,.cp-all{min-height:44px;padding:8px 12px}
  .back,.foot-note a{display:inline-flex;align-items:center;min-height:44px}
  .foot-note a{padding:0 4px}
  .facts dd a{display:inline-flex;align-items:center;min-height:44px;max-width:100%}
  details.done summary{min-height:44px}
  details.inline summary{min-height:44px;padding:11px 0}
  .subnav a{display:inline-flex;align-items:center;min-height:44px}
  .btn{min-height:44px}
  /* Today's own new controls (batch 16): the foot-note Refresh button and the "Everything in the last
     14 days" link were left out of the rule above (wording-ux-15). */
  .refresh-link,details.done .small-note a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Filing sheet, second batch (25/09/2026): corrected values, missing postcode, shared email, the reference email, corrections */
.cp .ed{font-style:normal;font-size:11px;font-weight:700;color:var(--plum-soft);background:var(--paper-2);border-radius:6px;padding:1px 6px;white-space:nowrap}
.say .ed{font-style:normal;font-size:11px;font-weight:700;color:var(--plum-soft);background:var(--paper-2);border-radius:6px;padding:1px 6px;margin-left:6px}
.cp .fixlink{font-size:12.5px;font-weight:700;color:var(--coral-strong);white-space:nowrap;padding-right:6px}
.cp.miss{border-color:var(--bad)} .cp.miss em{color:var(--bad)}
.sheet .tip.bad{color:var(--bad);font-weight:600} .sheet .tip.bad a{color:inherit}
.sheet .tip.why{color:var(--grey)}
.warnline.bad{background:var(--bad-bg);color:var(--bad)}
.dd-bad{display:block;margin-top:4px;color:var(--bad);font-weight:600;font-size:13.5px} .dd-bad a{color:inherit}
.stopbox{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14.5px;display:grid;gap:8px;justify-items:start}
.stopbox b{font-size:15.5px}
.sheetfix{margin:2px 0 0}
.sheetfix form{margin-top:10px}
.sheetfix input[type=text]{width:100%}
.chmail{border:1.5px solid var(--green);background:var(--green-bg);border-radius:12px;padding:12px 14px;display:grid;gap:6px;font-size:14.5px}
.chmail p{margin:0} .chmail .cm-ref{font-family:ui-monospace,Consolas,monospace;font-size:14px;overflow-wrap:anywhere;color:var(--plum)}
.chmail.bad{border-color:var(--bad);background:var(--bad-bg)} .chmail .cm-bad{color:var(--bad);font-weight:600}
.fdocs .chg,p .chg{font-size:13px;font-weight:700;color:var(--coral-strong);margin-left:4px}
.chchange > summary{display:none}
.chchange form{margin-top:4px}
.chfix-in{display:grid;gap:10px;margin-top:10px}
.chfix-in .vals{display:flex;flex-wrap:wrap;gap:8px}
.fixlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fixlist li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;display:grid;gap:4px;justify-items:start}
.fixlist small{color:var(--grey)} .fixlist .okline{color:var(--green);font-weight:600}
.chmail[hidden]{display:none}

/* Record integrity (25/09/2026): a person decides a flagged document */
.docdecide{border:1.5px solid var(--bad);background:var(--bad-bg);border-radius:12px;padding:12px 14px;display:grid;gap:8px;margin-top:6px}
.docdecide .dd-h{margin:0;font-weight:700;color:var(--bad);font-size:14.5px}
.docdecide ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--plum)} .docdecide li small{color:var(--grey)}
.docdecide .upform{display:grid;gap:8px}
.facts dd.bad{color:var(--bad);font-weight:600}
.docdecide .dd-rule{margin:0;font-size:14px;background:var(--card);border-radius:8px;padding:8px 10px;color:var(--plum)}
.docdecide .dd-rule.stop{color:var(--bad);font-weight:700}

/* Stage moves (batch 4, TS11.6): each choice says what will happen; the ones the record doesn't support are greyed */
.stagemove .opts{display:grid;gap:6px}
.stagemove .opt{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer}
.stagemove .opt input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--coral)}
.stagemove .opt span{display:grid;gap:2px;font-size:14.5px;color:var(--plum)}
.stagemove .opt small{font-size:13px;color:var(--grey)}
.stagemove .opt.off{opacity:.55;cursor:default}
.stagemove .opt:has(input:checked){border-color:var(--coral)}
.stagemove .btn{white-space:normal;text-align:left;max-width:100%}

/* Clients & fees (fees.php) and the company page's Billing card, 28/09/2026 */
.fee-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.fee-cmp > div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;align-content:start}
.fee-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;overflow-wrap:anywhere}
.fee-line:last-child{border-bottom:0}
.fee-line .amt{font-weight:700;white-space:nowrap}
.fee-line.skip{color:var(--grey-2)}
.fee-line.skip s{color:inherit}
.fee-diff{display:grid;gap:2px;font-size:14px}
.fee-diff .old{color:var(--grey);text-decoration:line-through}
.fee-diff .new{font-weight:600}
.fee-note{font:inherit;font-size:14px;padding:6px 10px;border:1.5px solid var(--line-2);border-radius:10px;width:100%}
.fee-plan{display:grid;gap:8px}
.fee-plan label.tick{display:flex;gap:8px;align-items:flex-start}
.fee-sub{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--plum-soft)}
.fee-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:4px 0;font-size:13px;color:var(--grey)}
.fee-meta .fee-diff{flex-basis:100%}
.fee-line > .fee-note,.fee-line > .small-note{grid-column:1 / -1}
.fee-acts{display:grid;gap:4px;margin-top:6px}
.fee-acts details.inline summary{font-size:13.5px}
.fee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:start}
.fee-addr{display:grid;gap:6px;font-size:14px;color:var(--grey)}
.fee-addr input,.upform input[type=month],.upform input[type=email]{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum)}
.upform label[hidden]{display:none}
.upform select{max-width:100%}
/* A long client name in a select must not widen the page on a phone: each grid item on the way down may shrink */
.screen > .sect,.screen > .case-h,.sect > *,.case-h > *,.upform > *,.upform label > *{min-width:0}
.fee-grid select,.fee-grid input,.fee-addr input,form.pcard select,form.pcard input[type=text]{width:100%;min-width:0}
.upform input[readonly]{background:var(--paper-2);color:var(--grey)}
.dext-chips{display:flex;flex-wrap:wrap;gap:6px}
.dext-chips:empty{display:none}
/* A Dext inbox is a long address: its chip wraps inside the card instead of running off a phone or tablet screen (28/09/2026) */
.chip.dext{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:left}
@media (max-width:640px){.fee-cmp{grid-template-columns:minmax(0,1fr)}}

/* Clients & fees: the QuickBooks customer compare and the Sync page, 28/09/2026 */
.fee-qb{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:14px;overflow-wrap:anywhere}
.fee-qb th,.fee-qb td{text-align:left;vertical-align:top;padding:7px 10px;border-bottom:1px solid var(--line)}
.fee-qb thead th{font-size:12.5px;color:var(--grey);font-weight:600}
.fee-qb tbody th{font-weight:500;color:var(--grey);width:34%}
.fee-qb tr:last-child th,.fee-qb tr:last-child td{border-bottom:0}
.fee-qb tr.diff td{background:var(--amber-bg)}
.fee-qb tr.diff td:last-child{font-weight:600}
.fee-qb tr.info th,.fee-qb tr.info td{color:var(--grey)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fee-sync{display:grid;gap:8px}
label.tick.fee-change,.fee-change{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;align-items:flex-start;overflow-wrap:anywhere}
.fee-change input{flex:none;margin-top:2px}
@media (max-width:640px){.fee-qb tbody th{width:30%}.fee-qb th,.fee-qb td{padding:6px 8px}}

/* 'What we charge' (fees.php?view=charges, 29/09/2026): a proper table on a computer, sticky header; a card
   per row on a phone — data-label turns each cell into a label/value line and the header simply hides. */
.charges-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:14px}
.charges-table th,.charges-table td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
.charges-table thead th{position:sticky;top:0;background:var(--card);font-size:12px;color:var(--grey);font-weight:600;text-transform:uppercase;letter-spacing:.03em;z-index:1;white-space:nowrap}
/* No overflow-wrap:anywhere on this table as a whole (unlike most desk cards): every value in the money/rate
   columns — a header word, a money figure, "£2.50 each" — has no natural break point, so "anywhere" only ever
   broke it mid-character (RULE, 29/09/2026). The Client column is the exception, not the rule it first looked
   like: a name with no late space to wrap at (one long compound word) genuinely has nowhere else to break and
   overflows the card at 375px, so it alone gets overflow-wrap (independent-review-fix, 29/09/2026). */
.charges-table td:first-child{overflow-wrap:anywhere}
.charges-table tr.sub td:first-child{padding-left:26px;color:var(--grey)}
.charges-table tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0;background:var(--paper)}
@media (max-width:640px){
  .charges-table thead{display:none}
  .charges-table,.charges-table tbody,.charges-table tfoot,.charges-table tr{display:block;width:100%}
  .charges-table tbody tr,.charges-table tfoot tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 12px;background:var(--card)}
  .charges-table td{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:0}
  .charges-table td::before{content:attr(data-label);color:var(--grey);font-weight:600;font-size:12.5px;flex:none}
  .charges-table td:first-child{display:block;font-weight:700}
  .charges-table td:first-child::before{content:none}
  .charges-table tr.sub td:first-child{padding-left:0}
  .charges-table tr.sub{border-style:dashed}
}

/* Phone app and Staff and devices (batch 8): phone.php, staff.php */
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;gap:10px;min-width:0}
.acct-card h2{margin:0;font-size:17px;line-height:1.3}
.acct-card p{margin:0;font-size:15px}
.acct-card .small-note{font-size:13px} .acct-card .acct-msg{font-size:14px}
.acct-card [hidden]{display:none!important}
.acct-how{margin:0;padding-left:20px;font-size:14.5px;display:grid;gap:4px}
.acct-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acct-msg{margin:0;font-size:14px;color:var(--grey);min-height:1.4em}
.acct-name{display:grid;gap:6px;max-width:380px}
.acct-name span{font-size:14.5px;font-weight:600}
.acct-name input,.acct-form input{font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum);width:100%}
.acct-sub{margin:6px 0 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}
.acct-devs{display:grid}
.acct-dev{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.acct-dev:first-child{border-top:0}
.acct-dev small{display:block;color:var(--grey);font-size:13px}
.acct-this{color:var(--green);font-weight:700}
.acct-form{display:grid;gap:10px;max-width:520px}
.acct-form label{display:grid;gap:6px;margin:0} .acct-form .q{font-size:14.5px;font-weight:600} .acct-form .hint{font-size:13px;color:var(--grey)}
@media (max-width:640px){.acct-card{padding:14px}.acct-dev{flex-wrap:wrap}}
/* Batch 5: a screening match staff can discount as a different person (amber, not the green .xd box: a match is not good news) */
.screenm{background:var(--amber-bg);border-radius:12px;padding:12px 14px;display:grid;gap:8px;font-size:14.5px}
.screenm p{margin:0;line-height:1.5} .screenm ul{margin:0 0 0 18px;padding:0} .screenm .upform{margin-top:0}

/* Batch 10: the terms on the company page (editable until the letter is signed) */
.terms{margin-top:4px;display:grid;gap:10px} fieldset.sched,fieldset.ask{border:0;padding:0;margin:12px 0 0;display:grid;gap:8px} fieldset.sched legend,fieldset.ask legend{font-weight:600;font-size:14px;color:var(--grey);padding:0;margin-bottom:4px} fieldset.sched details.inline{margin:0 0 4px 28px}
.warnline.bad{background:var(--bad-bg);color:var(--bad)} .warnline a{color:inherit;font-weight:600}

/* Batch 10, step 3: the desk-styled records card and 'Directors and owners on the register' (.chip.ok/.bad already exist — see .chip.warn above) */
.heldcards{display:grid;gap:12px;margin:8px 0}
.hc .editform{display:grid;gap:10px}
.hc label.tick{font-size:14px}
.reglist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reglist li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.reglist small{color:var(--grey)}
/* wording-ux-1: a long "checked by us"/"taken off" chip must wrap, not force the whole page wider than the phone. */
.reglist .chip{white-space:normal;text-align:left}

/* Batch 15 (27/09/2026): hidden means hidden; the refresh button (phone header) and link (Today); the claim chip; who is taking the call. */
[hidden]{display:none!important}
.appbar .refresh{display:none;background:none;border:0;color:rgba(248,245,243,.82);font:inherit;font-size:21px;min-width:44px;min-height:44px;cursor:pointer}
@media (max-width:900px),(display-mode:standalone){.appbar .refresh{display:inline-grid;place-items:center}}
.refresh-link{background:none;border:0;padding:0;font:inherit;color:var(--grey);text-decoration:underline;cursor:pointer}
.chip.claim{background:var(--plum);color:#fff}
.claimrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:14px;color:var(--grey)}
.hostpick{display:flex;align-items:center;gap:8px;font-size:14px}

/* Next call strip on Today (batch 16, TS10.8) */
.nextcall{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--coral);border-radius:16px;padding:12px 14px 12px 18px}
.nextcall .nc-l{flex:1;min-width:0;display:grid;gap:2px}
.nextcall small{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft)}
.nextcall b{font-size:17px;overflow-wrap:anywhere}
.nextcall .nc-when{font-size:14px;color:var(--grey)}
.nextcall .btn{flex:none;min-height:44px}

/* Search (batch 16, TS10.3): in the app bar on a computer; at the top of Today and More on a phone. "inbar", never "bar" (Today's progress bar). */
.search{display:flex;align-items:center;gap:6px;min-width:0}
.search input{font:inherit;font-size:15px;flex:1;min-width:0;min-height:44px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--plum)}
.search input:focus{outline:0;border-color:var(--coral)}
.search button{flex:none;min-width:44px;min-height:44px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--plum-soft);display:grid;place-items:center;cursor:pointer}
.search svg{width:18px;height:18px}
.search.inbar{flex:0 1 300px;min-width:180px}
.search.inbar input{min-height:38px;padding:7px 14px;background:rgba(248,245,243,.1);border-color:rgba(248,245,243,.28);color:#fff}
.search.inbar input::placeholder{color:rgba(248,245,243,.72)}
.search.inbar button{display:none}
.search.inpage{display:none}
@media (max-width:900px),(display-mode:standalone){.search.inbar{display:none}.search.inpage{display:flex}}

/* ---------------------------------------------------------------------------------------------------------
   Filing tab on the desk look (28/09/2026). filing.php and ch-checks.php move onto desk_open()/desk_close(),
   using the components above (.screen/.sect/.facts/.reglist/.chip/.btn/.warnline/.flash/.small-note) for their
   own content. This block is only the small extra CSS that content needs and cannot get from those components:
     - lib/chwatch.php is untouched, and its chw_css()/chw_render_filing()/chw_karbon_notice() output (echoed
       unchanged from both pages) still assumes the OLD style.css tokens ("notice", "secondary", a plain
       <button> base look, <fieldset class="chw-due|chw-new">) — the variable aliases and small rules below let
       that output render in the desk's own colours without touching chwatch.php itself.
     - filing.php's own CS01/CH01 markup keeps its existing "Correct" tick divs, "Change it" captions and
       <span class="q">/<span class="hint"> question labels unchanged (rather than rewriting ~20 tick and label
       call sites) — .check/.src and the two .upform label rules give those the same look with no markup risk.
   --------------------------------------------------------------------------------------------------------- */
:root{
  /* old style.css token names this unchanged code still reads, mapped onto the desk palette above */
  --surface:var(--card); --surface-2:var(--card); --ink:var(--plum); --muted:var(--grey);
  --accent:var(--coral); --gold:var(--amber); --gold-ink:var(--amber); --gold-bg:var(--amber-bg);
  --ok:var(--green); --bg:var(--paper); --line-strong:var(--line-2);
  --radius:14px; --radius-s:12px;
  --shadow:0 1px 2px rgba(42,20,25,.05), 0 10px 28px -18px rgba(42,20,25,.4);
}
/* lib/chwatch.php prints bare <button class="secondary chw-btn|chw-small"> (and "chw-btn" alone for its one
   primary-look button, "Yes, complete it"), and a plain <form class="actions …"> — chw-btn/chw-small only ever
   set the button's SIZE, so without style.css's old tag-selector button{} they need a base look here too. */
.chw-btn,.chw-small{font:inherit;font-weight:700;cursor:pointer;color:#fff;background:var(--coral);border:1px solid var(--coral);border-radius:27px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.chw-btn:hover,.chw-small:hover{background:var(--coral-strong);border-color:var(--coral-strong)}
.secondary.chw-btn,.secondary.chw-small{background:var(--card);color:var(--plum);border-color:var(--line-2)}
.secondary.chw-btn:hover,.secondary.chw-small:hover{background:var(--paper-2)}
.actions{display:flex;gap:10px;align-items:center;margin:12px 0 0;flex-wrap:wrap}
/* chw_run_line()/chw_karbon_notice() print class="notice"/"notice bad" directly */
.notice{background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:8px 12px;font-size:14px;overflow-wrap:anywhere}
.notice p{margin:0}
.notice.bad{background:var(--bad-bg);color:var(--bad)}
/* chw_render_filing()'s own "Due at Companies House" / "New at Companies House" fieldsets (the only <fieldset>s
   any desk-look page prints outside the borderless fieldset.sched/.ask groups above) */
fieldset.chw-due,fieldset.chw-new{border:0;padding:0;margin:0 0 20px}
fieldset.chw-due > legend,fieldset.chw-new > legend{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);font-weight:700;padding:0;margin:0 0 10px;width:100%}
/* filing.php's own tick rows (cs01_tick() and the CH01/CS01 confirmed/lawful/verify checkboxes) keep their
   id/for markup unchanged; this gives that unchanged markup the desk's look. */
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.check input{margin:3px 0 0;flex:none;width:18px;height:18px;accent-color:var(--coral)}
/* F3, 28/09/2026: the label only ever wrapped the word next to the box, so only the 18px box or that word
   toggled it - a phone tap anywhere else in the row (most of its 48px height) did nothing. The label's own
   for="" already targets the checkbox regardless of where it sits, so stretching it to fill the row is enough:
   no change to cs01_tick()'s markup or the fields ChForms is sent. */
.check label{display:flex;align-items:center;flex:1;align-self:stretch;min-height:44px;margin:0;font-size:14.5px;font-weight:500;color:var(--plum)}
/* filing.php's own small muted captions ("Change it", "Filing results last checked HH:MM (UK)", a Karbon description, …) */
.src{color:var(--grey);font-size:13px}
/* the CS01/CH01 forms' "<span class="q">Question</span><span class="hint">…</span>" fields, inside .upform */
.upform label .q{display:block;font-weight:600;color:var(--plum);margin-bottom:2px}
.upform label .hint{display:block;color:var(--grey);font-size:12.5px;margin:-1px 0 2px;font-weight:400}
/* tidy-layout (30/09/2026, approved by Yisroel): PSC04's "New name"/"New service address"/"New home address"
   field groups and CH01's "New home address" one (both print class="grid2" already) had no rule here at all,
   so they stacked one field per row even on a computer. Same gaps as .onbnew .row.two's two-column rows. */
.grid2{display:grid;grid-template-columns:1fr;gap:10px 14px}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
/* cf2fix-b (01/10/2026, approved by Yisroel, item 6): on a computer, two .grid2 boxes side by side must line
   up even when only one has a hint line above it (AD01's "County / region" and "Postcode"; SH01's two date
   boxes) - the box itself lines up, not the label text above it: each label stretches to the row's own
   height (the grid default) and its box is pushed to the bottom with margin-top:auto, whatever sits above it.
   Scoped to the round-2 forms that use .grid2 - every other .grid2 (CH01, PSC04, IN01) is unchanged. */
:is(#ad01,#ap01,#psc01,#sh01) .grid2 label{display:flex;flex-direction:column}
:is(#ad01,#ap01,#psc01,#sh01) .grid2 label>input,:is(#ad01,#ap01,#psc01,#sh01) .grid2 label>select{margin-top:auto}
/* cf2fix-c (01/10/2026, approved by Yisroel, item 5): SH01's own statement-of-capital row (Aggregate nominal
   value, a plain box, sits beside Prescribed particulars, a much taller textarea) is the one .grid2 row on this
   page where item 6's own margin-top:auto pushes a short box away from its label rather than lining it up with
   a neighbour - stretched the full row's height by the grid default, then dropped to the bottom, level with the
   taller box beside it, leaving a gap under its own label. Scoped to this one grid only (.soc-grid, the share-
   class rows' own class) - every other round-2 .grid2 row (addresses, the two date boxes) keeps item 6 exactly
   as it was; same specificity, so this must stay declared after it to win. */
#sh01 .soc-grid label>input{margin-top:0}
/* Item 5 continued: tick boxes line up with one-line labels, vertical centre - the same fix IN01's own item 13
   already proved, scoped here to the round-2 forms alone (the shared ".check"/".check input" rules above are
   untouched, since every other form on this page still uses them). */
:is(#aa01,#tm01,#ap01,#psc01,#sh01) .check{align-items:center}
:is(#aa01,#tm01,#ap01,#psc01,#sh01) .check input{margin:0}

/* Batch 9 (27/09/2026): what the client opened; the Messages fold */
.seenline{color:var(--plum-soft)}
.msgs{list-style:none;margin:0;padding:0 16px 8px;display:grid;gap:8px;font-size:14px}
.msgs li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 10px;overflow-wrap:anywhere}
.msgs time{color:var(--grey);font-variant-numeric:tabular-nums}
.msgs li details{grid-column:2}
.msgs li details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--plum-soft)}
.msgs li.bad span{color:var(--bad);font-weight:600}
summary .bad{color:var(--bad)}
/* the client's link for the stage (Copy / WhatsApp), and the one-tap resend after an email edit */
.sendlink{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sendlink span{font-size:14px;color:var(--grey)}
.offer{margin:0 0 12px}
/* quiet cases (batch 9): the coral "Call <first>" and "Phoned"; phone numbers you can tap */
.callnow{display:grid;gap:8px;margin:0 0 4px}
.callnow .btn{justify-self:start}
a.tel{color:var(--coral);font-weight:700;text-decoration:none}

/* Batch 11 (27/09/2026): "Karbon needs a look" — the job on the person who paid, a company Karbon only nearly matched */
.kbcheck{border:1.5px solid var(--amber);background:var(--amber-bg);border-radius:12px;padding:12px 14px;display:grid;gap:10px;min-width:0}
.kbcheck > b{color:var(--amber);font-size:14.5px}
.kbcheck p{margin:0;font-size:14.5px;color:var(--plum);overflow-wrap:anywhere}
.kbcheck form{margin:0}
.kbcheck .upform{margin-top:8px}
.kbcheck .btn{white-space:normal;text-align:left;max-width:100%}
.kbcheck details.inline summary{color:var(--amber)}

/* Batch 11 (27/09/2026): an invited case (the verify link sent, not paid yet); where the Google review request stands on a closed card */
.now-card > p.invnote{font-size:14px}
.revline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
.revline form{margin:0}
.facts dd form.setrow{margin-top:6px}

/* Batch 11 step 3 (27/09/2026): a reply to a desk email, at the top of the now-card until marked dealt with */
.replied{border:1.5px solid var(--amber);background:var(--amber-bg);border-radius:12px;padding:12px 14px;display:grid;gap:10px;min-width:0}
.replied > b{color:var(--amber);font-size:14.5px}
.replied .replyrow{margin:0;font-size:14.5px;color:var(--plum);overflow-wrap:anywhere;display:grid;gap:4px}
.replied .replyrow time{font-weight:600;color:var(--plum-soft)}
.replied q{display:block;margin:0;color:var(--grey);font-style:italic;overflow-wrap:anywhere;quotes:none}
.replied form{margin:0}
.replied .btn{white-space:normal;text-align:left;max-width:100%}

/* Batch 12: failures and hand steps, in their own amber box */
.flash.todo{background:var(--amber-bg);color:var(--amber)}
.flash.todo ul{margin:6px 0 0;padding-left:18px}
.flash.todo li{margin:4px 0;overflow-wrap:anywhere}
.flash.todo a{color:inherit;font-weight:600}

/* Batch 12 step 3: New ID check search */
.find{display:grid;gap:6px;margin-top:8px}
.find .fg{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum-soft);font-weight:700;margin:6px 0 0}
.find .fr{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14.5px}
.find .fr small{color:var(--grey)}
.find .fr .warn-t{flex-basis:100%;font-size:13px}
#find{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff}
.find-l{font-weight:700}
.newcase .modes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Batch 12 step 5: the onboarding forms (lib/onb_forms.php) inside the desk */
.onbnew fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 14px;background:#fff}
.onbnew legend{font-weight:700;padding:0 6px}
.onbnew label{display:grid;gap:4px;font-size:14px;margin:0 0 10px}
.onbnew .q{font-weight:600;color:var(--plum)}
.onbnew .hint,.onbnew .src{font-size:13px;color:var(--grey)}
.onbnew .ec-kind,.onbnew .ec-sub{font-size:13px;color:var(--grey)}
.onbnew .row.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px}
.onbnew .check{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
.onbnew .check input{width:18px;height:18px;accent-color:var(--coral);flex:none}
.onbnew input[type=text],.onbnew input[type=email],.onbnew input[type=tel],.onbnew select,.onbnew textarea{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--plum);width:100%}
.onbnew .readback dl{display:grid;grid-template-columns:160px minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px}
.onbnew .readback dt{color:var(--grey)}
.onbnew .readback dd{margin:0}
.onbnew .person h3{margin:0 0 8px;font-size:18px}
.onbnew .sched-pick{border-top:1px solid var(--line);padding:8px 0}
.onbnew form button[type=submit]:not(.linkish){font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--coral);border:0;border-radius:999px;padding:12px 22px;cursor:pointer}
@media (max-width:640px){.onbnew .readback dl{grid-template-columns:1fr}}
.newcase .modes label{border:1.5px solid var(--line-2);border-radius:12px;padding:10px 12px;background:#fff}
.foldextras{margin-top:10px} /* ec-karbon-extras-out, 30/09/2026: each Add sits on the same line as its name */
.foldextras form{display:inline-block;margin-left:4px}
.foldextras .btn{padding:3px 12px;font-size:12.5px;box-shadow:none}

/* IN01 ("Form a new company") tidy-up, 01/10/2026, approved by Yisroel - reference/BRIEF-in01-polish-2026-10-01.json.
   Items 1/13 reuse the desk's own existing "tick"/"check" looks (no change to either rule itself - item 13's
   fix is scoped under #in01form alone, below, so no OTHER form on this page is touched); items 4-6 are new,
   small, scoped classes used only by app/filing.php's IN01 field builders (in01_fld()/in01_sic_fields()/
   in01_step_nav_html()). */
/* Item 6: a small visible label above a box or dropdown (in01_fld()) - "inline-grid" so each field still sits
   next to its neighbours and wraps the row exactly as the unstyled ".addr-grid" already did before this item
   (never a full-width stacked redesign of that grid), while its own two lines (label, then box) stack. */
.fld{display:inline-grid;gap:3px;vertical-align:top;margin:0 10px 10px 0;max-width:100%}
.fld-q{font-size:12px;font-weight:600;color:var(--plum-soft)}
.fld textarea{resize:vertical}
/* Item 4: SIC codes on a computer - one code per row (a single-column grid; ".fld" above still stacks its own
   label/box/description inside that one row), never sharing a row with another code's box. */
.sic-grid{display:grid;gap:10px}
.sic-grid .fld{margin:0;max-width:420px}
/* Item 5: the step indicator as a row of chips - the current step filled/bold, the rest links; the row wraps
   between chips on a phone ("flex-wrap"), while each chip's own label never breaks mid-word ("white-space"). */
.step-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.step-chip{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--plum-soft);background:var(--paper-2);white-space:nowrap}
.step-chip:hover{background:var(--line-2)}
.step-chip.cur{background:var(--plum);color:#fff;font-weight:700}
/* Item 13: tick boxes line up with one-line labels, vertical centre - scoped to the IN01 form alone (the
   shared ".check"/".check input" rules above are untouched, since they are used by every other form on this
   page too). */
#in01form .check{align-items:center}
#in01form .check input{margin:0}

/* in01-polish-2, 01/10/2026 (approved by Yisroel) - reference/BRIEF-in01-polish-2026-10-01.json follow-up,
   the four things left after the 01/10 re-shoot. */
/* Item 1: the prescribed-particulars box breaks out of ".fld"'s own shrink-to-content sizing (which just
   left it narrow, at any width, however tall rows= made it) to span the whole row inside its share class's
   own card - a phone and a computer both get the full width, so Companies House's whole wording shows
   without scrolling or clicking in; ".fld textarea{resize:vertical}" above still applies unchanged. */
.fld-full{display:block;width:100%;max-width:none;margin-right:0;box-sizing:border-box}
.fld-full textarea{width:100%;box-sizing:border-box}
/* Item 2/3: the "Same as ..." summary line (data-addrsummary - both the subscriber's new one and the
   existing home-address ones on steps 2/3) needs the same gap under it as every other question block in
   this form (".check"'s own 10px bottom margin, used throughout) - ".small-note"'s shared "margin:0" above
   otherwise left it touching the text straight after. */
[data-addrsummary]{margin-bottom:10px}