/* Avinat Desk — the "bolder" look (redesign round 1, r1-shell, 02/10/2026; approved by Yisroel: bolder, light top bar,
   Calls and More on the phone and the computer, 30/09/2026). Made from reference/checks-2026-09/system/design/proposed.css:
   its tokens, type scale, spacing and every .d-* component, loaded AFTER desk.css on every staff page desk_open() draws.
   Rules for using it: DIRECTION.md beside proposed.css. Class prefix d- so it lives beside desk.css.
   Scoping: nothing here may change a page that has not been redesigned yet. So
   - :root only gains NEW token names; the four tokens whose proposed values differ from desk.css (--grey, --amber,
     --idv-bg, --line) are set on the new frame (.d-top, .d-tabs) and on main.d-page, which a redesigned page opts into;
   - element rules (links, buttons, fields, box-sizing of ::before/::after, reduced motion) sit under those same parts,
     never on bare body/html/a/button;
   - body keeps desk.css's body.desk (no .d-app class), so an un-converted page's .screen content looks as before.
   The frame: the light top bar .d-top (mark, pill nav .d-nav on a computer, search, + New, refresh, avatar menu) and
   the floating phone tab bar .d-tabs (seven tabs, the same as the nav). The installed app keeps the phone frame at
   any width, as the old frame did (display-mode:standalone). */
@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}

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* brand (the same values as desk.css, repeated so this file stands on its own) */
  --plum-deep:#2a1419; --plum:#3c1f25; --plum-soft:#5F363E;
  --coral:#DB4F53; --coral-strong:#c43f43; --coral-press:#a8353a; --coral-tint:#FBECEC;
  --paper:#F8F5F3; --paper-2:#F2EDE9; --paper-3:#E9E1DC; --card:#FFFFFF;
  /* text */
  --ink:#3c1f25; --ink-2:#56404a; --grey-2:#9a8d8f;
  --line-2:rgba(60,31,37,.16); --line-3:rgba(60,31,37,.28);
  /* states — each paired ink + background */
  --green:#2f7a45; --green-bg:#E4EFE7; --amber-bg:#F6EBD9; --bad:#a3363a; --bad-bg:#FBE5E5;
  /* the four desks — used ONLY for the small source tile and its chip */
  --idv:#8f2f33; --onb:#34506e; --onb-bg:#E6ECF3; --fil:#5e4c1c; --fil-bg:#F0E9D7; --fee:#2d5e56; --fee-bg:#E1EEEA;
  /* type scale (px) — only these seven sizes */
  --fs-xs:12.5px; --fs-sm:14px; --fs-md:15.5px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;
  --lh-tight:1.15; --lh:1.5;
  /* spacing — a 4 px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* shape */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(42,20,25,.04),0 4px 12px -6px rgba(42,20,25,.10);
  --sh-2:0 1px 2px rgba(42,20,25,.05),0 18px 40px -20px rgba(42,20,25,.30);
  --sh-bar:0 -1px 0 rgba(60,31,37,.06),0 12px 32px -8px rgba(42,20,25,.28);
  --halo:0 0 0 3px rgba(219,79,83,.22);
  --ease:cubic-bezier(.2,.7,.3,1);
  --font:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --tabs-h:68px;
}
/* the proposed values of the four tokens desk.css already uses with other values: only inside the new parts */
.d-top,.d-tabs,.d-page{--grey:#655760; --amber:#8c5a0e; --idv-bg:#F6E6E6; --line:rgba(60,31,37,.08)}

/* ---------------------------------------------------------------- 2. BASE (scoped to the new parts) */
:where(.d-top,.d-tabs,.d-page) *::before,:where(.d-top,.d-tabs,.d-page) *::after{box-sizing:border-box}
.d-page{color:var(--ink);font-size:var(--fs-md);line-height:var(--lh);font-variant-numeric:tabular-nums}
:where(.d-top,.d-tabs,.d-page) a{color:inherit}
:where(.d-top,.d-tabs,.d-page) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.d-top,.d-tabs,.d-page) :focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.d-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d-co{font-variant-caps:all-small-caps;letter-spacing:.03em;font-size:1.08em}  /* Companies House names arrive in CAPITALS: set them in small caps so they don't shout */
.d-ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.d-muted{color:var(--grey)} .d-num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 3. FRAME: top bar, desktop nav, phone tabs */
.d-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(248,245,243,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--fs-md);line-height:var(--lh)}
.d-mark{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.d-mark img{width:32px;height:32px;border-radius:9px;display:block;box-shadow:0 1px 2px rgba(42,20,25,.12)}
.d-top .d-sp{flex:1}
.d-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--plum-soft);cursor:pointer;text-decoration:none}
.d-iconbtn:hover{background:var(--paper-2)}
.d-avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--plum);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
/* the avatar opens a small menu: who is signed in, Phone app, Sign out (on a 44 px tap target). The .d-avatar span
   is never the click target itself — it sits inside this <summary>, which is already 44x44 — so today-more-6's
   phone-tap-area fix for the avatar is already done here; nothing on .d-avatar needs to change. */
.d-me > summary{display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:50%}
.d-me-name{display:block;padding:10px 12px 8px;margin-bottom:2px;border-bottom:1px solid var(--line);font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.d-nav,.d-top .d-search,.d-top .d-new{display:none}
/* the search box in the bar (desk_search_form 'inbar'): a light pill, its button hidden as before */
.d-top .search input{min-height:40px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-size:var(--fs-sm);box-shadow:inset 0 1px 2px rgba(42,20,25,.04)}
.d-top .search input::placeholder{color:var(--grey)}
.d-top .search input:focus{outline:0;border-color:var(--coral);box-shadow:var(--halo)}
.d-top .d-new > summary{list-style:none}
/* phone: a floating tab bar — seven tabs (Today, ID checks, Onboarding, Calls, Filing, Fees, More) */
.d-tabs{position:fixed;left:max(8px,calc(50% - 320px));right:max(8px,calc(50% - 320px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;grid-template-columns:repeat(7,auto);height:var(--tabs-h);padding:6px 4px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:22px;box-shadow:var(--sh-bar);font-family:var(--font)}
.d-tabs a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;padding:0 4px;text-decoration:none;color:var(--grey);font-size:11px;font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;border-radius:16px;transition:background .2s var(--ease),color .2s}
.d-tabs a svg{width:22px;height:22px}
.d-tabs a.on{color:var(--plum);background:var(--paper-2)}
.d-tabs a.on svg{stroke-width:2.3}
.d-tabs .d-badge{position:absolute;top:3px;left:calc(50% + 5px)}
.d-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--coral-strong);color:#fff;font-size:11px;font-weight:700;line-height:1}
@media (max-width:400px){.d-tabs{left:6px;right:6px;padding:6px 2px}.d-tabs a{font-size:10.5px;padding:0 2px}}   /* seven labels fit at 360 px: each column is its label plus an equal share of the room */
/* the page reserves room for the floating bar (DIRECTION section 4): an un-converted page's .screen too; the filing
   sheet's copy strip sits just above the bar */
@media (max-width:899.98px),(display-mode:standalone){
  body.desk .screen{padding-bottom:calc(var(--tabs-h) + 42px + env(safe-area-inset-bottom,0px))}
  .copynext{bottom:calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:900px){
  .d-top{padding:12px var(--s6);gap:var(--s5)}
  .d-nav{display:flex;gap:2px;padding:4px;background:var(--card);border-radius:var(--r-pill);box-shadow:var(--sh-1)}
  .d-nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);text-decoration:none;font-size:var(--fs-sm);font-weight:600;color:var(--grey);white-space:nowrap;transition:background .18s,color .18s}
  .d-nav a:hover{color:var(--plum);background:var(--paper)}
  .d-nav a.on{background:var(--plum);color:#fff}
  .d-top .d-search{display:flex;flex:0 1 300px;min-width:160px}
  .d-top .d-new{display:inline-flex}
  .d-tabs{display:none}
}
/* the installed app keeps the phone frame at every width (as before the redesign) */
@media (display-mode:standalone){
  .d-top{padding:10px var(--s4);padding-top:calc(10px + env(safe-area-inset-top,0px));gap:var(--s3)}
  .d-nav,.d-top .d-search,.d-top .d-new{display:none}
  .d-tabs{display:grid}
}

/* ---------------------------------------------------------------- 4. PAGE LAYOUT */
.d-page{max-width:1160px;margin:0 auto;padding:var(--s5) var(--s4) calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom,0px));display:grid;gap:var(--s6);align-content:start}
.d-page.narrow{max-width:760px}
.d-grid{display:grid;gap:var(--s6);align-items:start}
.d-main,.d-rail{display:grid;gap:var(--s6);align-content:start;min-width:0}
@media (min-width:900px){
  .d-page{padding:var(--s8) var(--s8) var(--s12)}
  .d-grid{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8)}
  .d-rail{position:sticky;top:88px}
}
@media (min-width:1200px){.d-grid{grid-template-columns:minmax(0,1fr) 360px}}

/* page header */
.d-head{display:grid;gap:var(--s2)}
.d-eyebrow{margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-soft)}
.d-title{margin:0;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.d-title em{font-style:normal;color:var(--plum-soft)}
.d-sub{margin:0;font-size:var(--fs-sm);color:var(--grey);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.d-sub a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
.d-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;width:max-content;font-size:var(--fs-sm);font-weight:600;color:var(--plum-soft);text-decoration:none}
.d-back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
@media (min-width:900px){.d-title{font-size:var(--fs-3xl)}}

/* ---------------------------------------------------------------- 5. PROGRESS (tickable, visible shrinkage) */
.d-progress{display:grid;gap:var(--s2)}
.d-progress .d-pl{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--grey)}
.d-progress .d-pl b{color:var(--ink)}
.d-segs{display:flex;gap:3px;height:8px}
.d-segs i{flex:1;border-radius:3px;background:var(--paper-3)}
.d-segs i.done{background:var(--green)}
.d-segs i:first-child{border-radius:4px 3px 3px 4px} .d-segs i:last-child{border-radius:3px 4px 4px 3px}

/* ---------------------------------------------------------------- 6. CHIPS: source, status, countdown */
.d-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;line-height:1.35;white-space:nowrap;background:var(--paper-2);color:var(--ink-2)}
.d-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.d-chip.plain::before{display:none}
.d-chip--idv{background:var(--idv-bg);color:var(--idv)} .d-chip--onb{background:var(--onb-bg);color:var(--onb)}
.d-chip--fil{background:var(--fil-bg);color:var(--fil)} .d-chip--fee{background:var(--fee-bg);color:var(--fee)}
.d-chip--ok{background:var(--green-bg);color:var(--green)} .d-chip--warn{background:var(--amber-bg);color:var(--amber)} .d-chip--bad{background:var(--bad-bg);color:var(--bad)}
.d-chip--line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--grey)}
/* countdown chip: always in words ("waiting 9 days", "due Mon 19 Oct · in 20 days"); tone set by age */
.d-due{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;color:var(--grey);padding:3px 0}
.d-due::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor;background:linear-gradient(currentColor,currentColor) 5.2px 2.6px/1.6px 4.2px no-repeat,linear-gradient(currentColor,currentColor) 5.2px 5.6px/3.4px 1.6px no-repeat}
.d-due--soon{color:var(--amber);background:var(--amber-bg);padding:3px 10px 3px 8px;border-radius:var(--r-pill)}
.d-due--late{color:var(--coral-press);background:var(--coral-tint);padding:3px 10px 3px 8px;border-radius:var(--r-pill)}

/* ---------------------------------------------------------------- 7. BUTTONS */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:var(--fs-md);font-weight:700;letter-spacing:-.005em;line-height:1.2;
  background:var(--coral-strong);color:#fff;box-shadow:0 1px 1px rgba(122,30,34,.30),0 10px 20px -10px rgba(196,63,67,.65);transition:background .15s,box-shadow .15s,transform .15s var(--ease)}
.d-btn:hover{background:var(--coral-press)}
.d-btn:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(122,30,34,.3)}
.d-btn svg{width:18px;height:18px}
.d-btn--sec{background:var(--card);color:var(--plum);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(42,20,25,.05)}
.d-btn--sec:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--plum-soft),0 1px 2px rgba(42,20,25,.05)}
.d-btn--quiet{background:transparent;color:var(--plum-soft);box-shadow:none;padding-left:12px;padding-right:12px}
.d-btn--quiet:hover{background:var(--paper-2)}
.d-btn--danger{background:var(--card);color:var(--bad);box-shadow:inset 0 0 0 1px rgba(163,54,58,.35)}
.d-btn--danger:hover{background:var(--bad-bg)}
.d-btn--sm{min-height:36px;padding:7px 14px;font-size:var(--fs-sm)}
.d-btn--block{width:100%}
.d-btn[disabled],.d-btn.is-disabled{background:var(--paper-2);color:var(--grey-2);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed;transform:none}
.d-btn.is-sending,.d-btn.is-sending[disabled]{cursor:progress;opacity:1;background:var(--coral-strong);color:#fff;box-shadow:0 1px 1px rgba(122,30,34,.30)}
.d-btn--sec.is-sending,.d-btn--sec.is-sending[disabled]{background:var(--card);color:var(--plum);box-shadow:inset 0 0 0 1px var(--line-2)}
.d-btn.is-sending::before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:d-spin .9s linear infinite}
.d-btn--sec.is-sending::before{border-color:var(--line-2);border-top-color:var(--plum)}
@keyframes d-spin{to{transform:rotate(360deg)}}
.d-btn-note{margin:0;font-size:var(--fs-xs);color:var(--grey)}
.d-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.d-link{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
@media (max-width:640px){.d-btn--block-phone{width:100%}.d-btn{min-height:48px}.d-btn--sm{min-height:40px}}

/* ---------------------------------------------------------------- 8. CARDS */
.d-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);min-width:0}
.d-card-b{padding:var(--s5)}
.d-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5) var(--s2)}
.d-card-h h2,.d-lane-h h2{margin:0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}
.d-count{font-size:var(--fs-xs);color:var(--grey);font-weight:600}
.d-card--lift{box-shadow:var(--sh-2)}
.d-card--quiet{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
/* the "now" card on a case: one job, one coral button */
.d-now{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s6) var(--s5) var(--s5);display:grid;gap:var(--s4)}
.d-now::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--coral)}
.d-now h2{margin:0;font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.015em}
.d-now p{margin:0;color:var(--ink-2)}
.d-now--decide::before{background:var(--amber)}
.d-quote{background:var(--paper);border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-sm)}
.d-divider{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:var(--s1) 0 0}
.d-divider::after{content:"";flex:1;height:1px;background:var(--line-2)}
@media (min-width:900px){.d-now{padding:var(--s8) var(--s8) var(--s6)}.d-now h2{font-size:var(--fs-2xl)}}

/* ---------------------------------------------------------------- 9. SPOTLIGHT (Today: never more than three) */
.d-spot{display:grid;gap:var(--s3)}
.d-hero{position:relative;display:grid;gap:var(--s3);padding:var(--s5);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.d-hero::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--coral)}
.d-hero .d-rk{background:var(--coral-strong)}
.d-hero h3{margin:0;font-size:var(--fs-xl);line-height:1.2;letter-spacing:-.015em}
.d-hero p{margin:0;color:var(--ink-2);font-size:var(--fs-md)}
.d-hero .d-actions{margin-top:var(--s1)}
.d-next{display:grid;grid-template-columns:auto minmax(0,1fr) 16px;gap:4px var(--s3);align-items:start;padding:var(--s4);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);text-decoration:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.d-next:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.d-next h3{margin:0;font-size:var(--fs-lg);line-height:1.25;letter-spacing:-.01em}
.d-next p{margin:0;font-size:var(--fs-sm);color:var(--grey)}
.d-next > .d-rk{grid-column:1;grid-row:1/4} .d-next > h3,.d-next > p,.d-next > .d-meta{grid-column:2} .d-next > .d-meta{margin-top:6px}
.d-next::after{content:"";grid-column:3;grid-row:1/4;align-self:center;width:8px;height:8px;border-right:2px solid var(--grey-2);border-top:2px solid var(--grey-2);transform:rotate(45deg)}
.d-rk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--plum);color:#fff;font-size:13px;font-weight:700;flex:none}
.d-hero-top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.d-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
@media (min-width:900px){
  .d-spot{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .d-hero{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--s6) var(--s8);column-gap:var(--s8)}
  .d-hero > *{grid-column:1} .d-hero .d-actions{grid-column:2;grid-row:1/5;margin:0;flex-direction:column;align-items:stretch}
  .d-hero h3{font-size:var(--fs-2xl)}
}

/* ---------------------------------------------------------------- 10. LANES and THE ROW */
.d-lane{display:grid;gap:var(--s2)}
.d-lane-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:0 var(--s1)}
.d-rows{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.d-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 12px;gap:2px var(--s3);align-items:center;padding:14px var(--s4);text-decoration:none;color:inherit;transition:background .15s}
.d-row + .d-row::before{content:"";position:absolute;top:0;right:0;left:64px;border-top:1px solid var(--line)}
a.d-row:hover{background:#FCFAF8} a.d-row:active{background:var(--paper-2)}
a.d-row::after{content:"";grid-column:3;grid-row:1/3;justify-self:center;width:7px;height:7px;border-right:2px solid var(--grey-2);border-top:2px solid var(--grey-2);transform:rotate(45deg)}
.d-row-ic{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--paper-2);color:var(--plum-soft)}
.d-row-ic svg{width:19px;height:19px}
.d-row-ic.idv{background:var(--idv-bg);color:var(--idv)} .d-row-ic.onb{background:var(--onb-bg);color:var(--onb)} .d-row-ic.fil{background:var(--fil-bg);color:var(--fil)} .d-row-ic.fee{background:var(--fee-bg);color:var(--fee)}
.d-row-a{font-size:var(--fs-md);font-weight:700;line-height:1.3;letter-spacing:-.005em;min-width:0}  /* the ACTION, a verb first */
.d-row-c{display:block;font-size:var(--fs-sm);line-height:1.45;color:var(--grey);min-width:0}
.d-row-c .d-due{margin-left:8px;vertical-align:-1px}  /* who + context + countdown */
.d-row-c b{font-weight:600;color:var(--ink-2)}
.d-row-e{display:none}
.d-row.is-waiting .d-row-a{font-weight:500;color:var(--ink-2)}
.d-row.is-waiting .d-row-ic{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--grey)}
.d-rows.is-waiting{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.d-rows.is-waiting .d-row + .d-row::before{border-top-style:dashed}
.d-more{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:var(--fs-sm);font-weight:600;color:var(--plum-soft);text-decoration:none;border-top:1px solid var(--line)}
@media (min-width:900px){
  .d-row{grid-template-columns:36px minmax(0,1fr) auto 12px;padding:14px var(--s5);column-gap:var(--s4)}
  .d-row + .d-row::before{left:72px}
  a.d-row::after{grid-column:4}
  .d-row-e{display:flex;grid-column:3;grid-row:1/3;align-items:center;gap:var(--s2)}
  .d-row .d-row-c .d-due{display:none}   /* on a computer the countdown moves to the right-hand column */
  .d-rail .d-row{grid-template-columns:36px minmax(0,1fr) 12px;padding:14px var(--s4)} .d-rail .d-row-e{display:none} .d-rail a.d-row::after{grid-column:3}
  .d-rail .d-row .d-row-c .d-due{display:inline-flex}
}
/* fold: collapsed lanes (waiting, connections, done) — a single line until opened */
details.d-fold{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
details.d-fold.is-waiting{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
details.d-fold > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);align-items:center;padding:14px var(--s5);min-height:56px}
details.d-fold > summary::-webkit-details-marker{display:none}
details.d-fold > summary::after{content:"";grid-column:2;grid-row:1/3;width:8px;height:8px;border-right:2px solid var(--grey-2);border-bottom:2px solid var(--grey-2);transform:rotate(45deg);transition:transform .2s var(--ease);margin-right:4px}
details.d-fold[open] > summary::after{transform:rotate(-135deg)}
details.d-fold > summary b{font-size:var(--fs-md)}
details.d-fold > summary span{font-size:var(--fs-sm);color:var(--grey)}
details.d-fold .d-fold-b{padding:0 var(--s5) var(--s4);display:grid;gap:var(--s2)}
.d-mini{list-style:none;margin:0;padding:0;display:grid}
.d-mini li{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;border-top:1px dashed var(--line-2);font-size:var(--fs-sm);color:var(--ink-2)}
.d-mini li:first-child{border-top:0}
.d-mini li small{color:var(--grey);font-size:var(--fs-xs);white-space:nowrap}
.d-done li::before{content:"✓";color:var(--green);font-weight:800;margin-right:8px}

/* ---------------------------------------------------------------- 11. FILTERS and MENUS */
.d-filter{display:flex;gap:2px;padding:4px;background:var(--paper-2);border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none;max-width:100%}
.d-filter::-webkit-scrollbar{display:none}
.d-filter a{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:var(--r-pill);text-decoration:none;font-size:var(--fs-sm);font-weight:600;color:var(--grey);white-space:nowrap;transition:background .18s,color .18s}
.d-filter a b{font-weight:700;color:var(--grey);font-size:var(--fs-xs)}
.d-filter a.on{background:var(--card);color:var(--plum);box-shadow:0 1px 3px rgba(42,20,25,.12)}
.d-filter a.on b{color:var(--coral-strong)}
details.d-menu{position:relative}
details.d-menu > summary{list-style:none}
details.d-menu > summary::-webkit-details-marker{display:none}
.d-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:25;min-width:230px;display:grid;padding:6px;background:var(--card);border-radius:var(--r-md);box-shadow:0 1px 2px rgba(42,20,25,.06),0 18px 40px -14px rgba(42,20,25,.4)}
.d-menu-list a{display:grid;gap:1px;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:var(--fs-sm)}
.d-menu-list a small{font-weight:500;color:var(--grey);font-size:var(--fs-xs)}
.d-menu-list a:hover{background:var(--paper)}
.d-toolbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;min-width:0}
.d-toolbar > .d-filter{min-width:0;flex:1 1 auto}

/* ---------------------------------------------------------------- 12. FORMS */
.d-field{display:grid;gap:6px;min-width:0}
.d-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.d-hint{font-size:var(--fs-xs);color:var(--grey);margin-top:-2px}
.d-input,.d-select,.d-textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;font-size:var(--fs-md);color:var(--ink);box-shadow:inset 0 1px 2px rgba(42,20,25,.04);transition:border-color .15s,box-shadow .15s}
.d-textarea{min-height:88px;resize:vertical}
.d-select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F363E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center}
.d-input:focus,.d-select:focus,.d-textarea:focus{outline:0;border-color:var(--coral);box-shadow:var(--halo)}
.d-input::placeholder,.d-textarea::placeholder{color:var(--grey-2)}
.d-input.is-bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(163,54,58,.12)}
.d-err{font-size:var(--fs-xs);color:var(--bad);font-weight:600}
.d-tick{display:flex;gap:var(--s3);align-items:flex-start;min-height:48px;padding:12px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font-size:var(--fs-md)}
.d-tick input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;border:1.5px solid var(--line-3);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.d-tick input::after{content:"";width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg);opacity:0}
.d-tick input:checked{background:var(--green);border-color:var(--green)}
.d-tick input:checked::after{opacity:1}
.d-tick:has(input:checked){box-shadow:inset 0 0 0 1.5px rgba(47,122,69,.5);background:#F6FAF7}
.d-tick small{display:block;font-size:var(--fs-xs);color:var(--grey)}
.d-choice{display:inline-flex;padding:4px;gap:2px;border-radius:var(--r-pill);background:var(--paper-2)}
.d-choice label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:6px 18px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--grey);cursor:pointer}
.d-choice input{position:absolute;opacity:0;pointer-events:none}
.d-choice label:has(input:checked){background:var(--card);color:var(--plum);box-shadow:0 1px 3px rgba(42,20,25,.12)}
.d-upload{display:grid;justify-items:center;gap:6px;padding:var(--s6) var(--s4);border:1.5px dashed var(--line-3);border-radius:var(--r-md);background:var(--paper);text-align:center;font-size:var(--fs-sm);color:var(--grey);cursor:pointer}
.d-upload b{color:var(--plum);font-size:var(--fs-md)}
.d-upload svg{width:26px;height:26px;color:var(--plum-soft)}
.d-form{display:grid;gap:var(--s4)}
.d-form-row{display:grid;gap:var(--s4)}
@media (min-width:640px){.d-form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}}

/* ---------------------------------------------------------------- 13. FLASHES and CALLOUTS */
.d-flash{position:relative;display:grid;gap:4px;padding:14px 16px 14px 50px;border-radius:var(--r-md);font-size:var(--fs-md);overflow-wrap:anywhere}
.d-flash::before{position:absolute;left:14px;top:13px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.d-flash b{font-weight:700}
.d-flash ul{margin:4px 0 0;padding-left:18px;font-size:var(--fs-sm)}
.d-flash--good{background:var(--green-bg);color:#1f4d2e} .d-flash--good::before{content:"✓";background:var(--green)}
.d-flash--todo{background:var(--amber-bg);color:#6e4608} .d-flash--todo::before{content:"!";background:var(--amber)}
.d-flash--bad{background:var(--bad-bg);color:var(--bad)} .d-flash--bad::before{content:"×";background:var(--bad);font-size:16px}
/* desk batch 2 (07/10/2026): the flag's buttons, tappable contacts with Copy, the change-first steps, the started list's calls,
   the rejection box, the IN01 summary's gaps and the evidence fold (lib/orderdesk.php, csorder.php, in01order.php, filing.php). */
.od-flag{gap:8px}
.od-flag .d-fold{background:color-mix(in srgb, #fff 70%, transparent);margin:0}
.od-flag .d-actions{margin:0}
.od-contact{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.od-copy{font:inherit;font-size:var(--fs-xs,12px);font-weight:600;padding:2px 8px;min-height:28px;border-radius:999px;border:1px solid var(--line-2,#d9d1cc);background:var(--card,#fff);color:inherit;cursor:pointer}
.od-copy:hover{border-color:var(--ink,#211b1c)}
.od-step-l{margin:var(--s3,12px) 0 0;padding-left:22px;display:grid;gap:var(--s4,16px)}
.od-step-l > li.is-done > b{text-decoration:line-through;color:var(--grey,#6b6265)}
.od-step-l > li.is-now > b{color:var(--ink,#211b1c)}
.od-step-l > li:not(.is-now):not(.is-done){color:var(--grey,#6b6265)}
.od-mail p{margin:0 0 8px;font-size:var(--fs-sm)}
.od-started .d-row-c{display:block}
.od-started-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.od-started-chip{text-decoration:none}
.od-reject .od-reject-l{margin:4px 0 0;padding-left:20px;font-size:var(--fs-md)}
.od-reject .d-fold{background:color-mix(in srgb, #fff 70%, transparent);margin:0}
.howto li.od-miss{color:var(--amber,#8a5a0b);font-weight:600}
.od-ev > summary{padding:var(--s4,16px)}
.od-clock{font-variant-numeric:tabular-nums}
.chw-then{margin:4px 0 0;font-size:var(--fs-sm)}
.d-flags{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.d-flags li{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;padding:10px 14px;border-radius:var(--r-md);background:var(--paper);font-size:var(--fs-md)}

/* ---------------------------------------------------------------- 14. EMPTY STATES */
.d-empty{display:grid;justify-items:center;gap:var(--s2);padding:var(--s8) var(--s5);text-align:center}
.d-empty-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--green-bg);color:var(--green)}
.d-empty-ic svg{width:26px;height:26px}
.d-empty b{font-size:var(--fs-lg)}
.d-empty p{margin:0;font-size:var(--fs-sm);color:var(--grey);max-width:34ch}

/* ---------------------------------------------------------------- 15. CASE PAGE parts */
.d-case-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:center}
.d-ava{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-weight:700;font-size:var(--fs-lg);background:var(--idv-bg);color:var(--idv)}
.d-ava.onb{background:var(--onb-bg);color:var(--onb)} .d-ava.fee{background:var(--fee-bg);color:var(--fee)}
.d-case-h .d-meta{grid-column:1/-1}
.d-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:4px}
.d-steps li{display:grid;gap:8px;font-size:var(--fs-xs);font-weight:600;color:var(--grey);min-width:0}
.d-steps li::before{content:"";height:6px;border-radius:3px;background:var(--paper-3)}
.d-steps li.done{color:var(--green)} .d-steps li.done::before{background:var(--green)}
.d-steps li.now{color:var(--plum)} .d-steps li.now::before{background:var(--coral)}
.d-steps li span{display:none}
.d-steps-label{margin:8px 0 0;font-size:var(--fs-sm);font-weight:600;color:var(--plum-soft)}
.d-steps-label b{color:var(--plum)}
@media (min-width:900px){.d-steps li span{display:block}.d-steps-label{display:none}}
.d-facts{margin:0;display:grid}
.d-facts > div{display:grid;gap:2px;padding:12px var(--s5);border-top:1px solid var(--line)}
.d-facts > div:first-child{border-top:0}
.d-facts dt{font-size:var(--fs-xs);color:var(--grey);font-weight:600}
.d-facts dd{margin:0;font-size:var(--fs-md);overflow-wrap:anywhere}
.d-facts dd a{color:var(--plum-soft);font-weight:600}
.d-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--paper-2);color:var(--plum-soft);border-radius:8px;padding:4px 10px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;min-height:32px}
.d-evid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);padding:0 var(--s5) var(--s5)}
.d-ev{display:grid;gap:6px;text-decoration:none;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.d-ev i{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--paper-2);color:var(--grey);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em}
@media (max-width:640px){.d-facts > div{padding:12px var(--s4)}.d-facts dd a{display:inline-flex;align-items:center;min-height:44px;max-width:100%}.d-evid{padding:0 var(--s4) var(--s4)}.d-page{gap:var(--s5)}.d-ava{width:44px;height:44px;border-radius:14px;font-size:var(--fs-md)}.d-case-h{column-gap:var(--s3)}}

/* ---------------------------------------------------------------- 16. FEE ROWS (a row with a tick) */
.d-frow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 12px;gap:4px var(--s3);align-items:center;padding:14px var(--s4)}
.d-frow + .d-frow::before{content:"";position:absolute;top:0;right:0;left:60px;border-top:1px solid var(--line)}
.d-frow .d-tickc{grid-row:1/3;appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0 4px 0 0;border-radius:50%;border:1.5px solid var(--line-3);background:#fff;display:grid;place-items:center;cursor:pointer}
.d-frow .d-tickc::after{content:"";width:7px;height:12px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg);opacity:0}
.d-frow .d-tickc:checked{background:var(--green);border-color:var(--green)} .d-frow .d-tickc:checked::after{opacity:1}
.d-frow .d-fn{font-size:var(--fs-md);font-weight:700;text-decoration:none;min-width:0}
.d-frow .d-fn small{white-space:nowrap;font-weight:500;color:var(--grey);font-size:var(--fs-xs);margin-left:6px}
.d-frow .d-fl{grid-column:2;font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.d-frow .d-fl b{font-weight:700;color:var(--ink)}
.d-frow .d-fx{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}
.d-frow .d-fx .d-due::before{display:none}
.d-frow > a.d-go{grid-column:3;grid-row:1/4;justify-self:center;width:7px;height:7px;border-right:2px solid var(--grey-2);border-top:2px solid var(--grey-2);transform:rotate(45deg)}
.d-frow > a.d-go::after{content:"";position:absolute;inset:0 0 0 56px}   /* the whole row (not the tick) opens the client */
@media (min-width:900px){
  .d-frow{grid-template-columns:auto minmax(0,1fr) auto 12px;padding:14px var(--s5);column-gap:var(--s4)}
  .d-frow + .d-frow::before{left:68px}
  .d-frow .d-fx{grid-column:3;grid-row:1/3;justify-content:flex-end}
  .d-frow > a.d-go{grid-column:4}
}

/* ---------------------------------------------------------------- 17. FOOT + MOTION */
.d-foot{margin:0;text-align:center;font-size:var(--fs-xs);color:var(--grey)}
@media (prefers-reduced-motion:reduce){:where(.d-top,.d-tabs,.d-page) *,:where(.d-top,.d-tabs,.d-page) *::before,:where(.d-top,.d-tabs,.d-page) *::after{transition:none!important;animation:none!important}}
/* the installed app at any width: the page keeps room for the tab bar (after section 4, which sets a computer's padding) */
@media (display-mode:standalone){.d-page{padding-bottom:calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom,0px))}}
/* a narrow computer (900-1199 px): everything in the bar still fits — the mark's name and "New" kept for screen
   readers only, tighter pills, a shorter search box */
@media (min-width:900px) and (max-width:1199.98px) and (display-mode:browser){
  .d-top{padding:12px var(--s4);gap:var(--s2)}
  .d-mark span,.d-new > summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .d-nav a{padding:8px 10px}
  .d-top .d-search{flex:1 1 140px;min-width:120px}
  .d-new > summary{padding:7px 10px}
}

/* ---------------------------------------------------------------- 18. TODAY (r1-today, 02/10/2026) and what a redesigned page needs
   main.d-page fills the width of body.desk (a flex column, where auto side margins would otherwise shrink it to its content). */
body.desk > main.d-page{width:100%;flex:1 0 auto}
.d-head .d-progress{max-width:520px}
.d-flash p{margin:0}
/* "Show N more": rows after the sixth start hidden; the lane opens in place (today.php's script) or as the #target */
.d-rows > .d-row.is-more{display:none}
.d-rows:target > .d-row.is-more,.d-rows.is-open > .d-row.is-more{display:grid}
.d-rows:target > .d-more,.d-rows.is-open > .d-more{display:none}
/* the row's status chips (who is on it, direct debit, a filing deadline, a flag) sit on its context line, phone and computer */
.d-row-c .d-chip{margin-left:6px;vertical-align:1px}
.d-chip.d-claim{background:var(--plum);color:#fff}
.d-next p b,.d-hero p b{font-weight:600;color:var(--ink-2)}
/* a fold's rows run edge to edge under its summary */
details.d-fold .d-fold-b > .d-rows{margin:0 calc(-1 * var(--s5)) calc(-1 * var(--s4));background:transparent;box-shadow:none;border-radius:0 0 var(--r-lg) var(--r-lg);border-top:1px dashed var(--line-2)}
.d-mini li a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.d-fold .d-foot a,.d-page .d-foot .refresh-link{display:inline-flex;align-items:center;min-height:44px}

/* ---------------------------------------------------------------- 19. ID CHECKS LISTS (r1-checks, 02/10/2026)
   a lane count with words in it ("4 · reminded automatically where switched on") drops under its title on a phone
   instead of squeezing both into two narrow columns */
.d-checks .d-lane-h{flex-wrap:wrap;row-gap:2px}

/* ---------------------------------------------------------------- 20. THE ID CASE PAGE (r1-case, 02/10/2026)
   case.php in the new look (bolder/case.html). Its many smaller forms keep their wrappers (.upform, .setrow, label.tick,
   details.inline, .cp) so every field and hook stays as it was; these rules give them the new look inside main.d-case. */
.d-case .d-meta .claimrow{margin:0;font-size:var(--fs-xs);color:var(--grey)}
.d-case .d-stepline{min-width:0}
.d-case .d-main > .replied,.d-case .d-main > .d-alert,.d-case .d-main > .stopbox{margin:0}
.d-alert{display:grid;gap:var(--s2)}
/* a card that is waiting on someone else (the client, a payment, a closed case) has no coral edge: coral means "your move" */
.d-now--wait::before{background:var(--paper-3)}
.d-now > .d-eyebrow.d-muted{color:var(--grey)}
.d-now .d-btn-note,.d-case .small-note{font-size:var(--fs-sm);color:var(--grey);margin:0}
.d-case .small-note a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
.d-case .warnline{border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-sm)}
.d-now .d-quote{color:var(--ink)}
.d-decide{display:grid;gap:var(--s4)}
.d-case .dd-rule{margin:0;font-size:var(--fs-sm);background:var(--paper);border-radius:var(--r-md);padding:10px 14px;color:var(--ink)}
.d-case .dd-rule.stop{color:var(--bad);background:var(--bad-bg);font-weight:700}
.d-flags li > span:first-child{min-width:0}
/* the older fields inside a case page: the same look as .d-input / .d-select / .d-textarea */
.d-case :is(.upform,.setrow,.refbox,.editform) :is(input[type=text],input[type=date],input[type=datetime-local],input[type=email],input[type=tel],select,textarea),
.d-case .hostpick select{min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;font:inherit;font-size:var(--fs-md);color:var(--ink);box-shadow:inset 0 1px 2px rgba(42,20,25,.04)}
.d-case :is(.upform,.setrow,.refbox,.editform) :is(input,select,textarea):focus{outline:0;border-color:var(--coral);box-shadow:var(--halo)}
.d-case .upform{gap:var(--s3);margin-top:var(--s2)}
.d-case .upform label:not(.tick){color:var(--ink);font-weight:600;font-size:var(--fs-sm);gap:6px}
.d-case .setrow{gap:var(--s2)}
.d-case .hostpick select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F363E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center}
.d-case .hostpick.d-field{display:grid;gap:6px;font-size:inherit}
/* a tick: the .d-tick look */
.d-case label.tick{display:flex;gap:var(--s3);align-items:flex-start;min-height:48px;padding:12px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font-size:var(--fs-md);color:var(--ink);margin:0}
.d-case label.tick input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;border:1.5px solid var(--line-3);background:#fff;display:grid;place-items:center;cursor:pointer}
.d-case label.tick input[type=radio]{border-radius:50%}
.d-case label.tick input::after{content:"";width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg);opacity:0}
.d-case label.tick input:checked{background:var(--green);border-color:var(--green)}
.d-case label.tick input:checked::after{opacity:1}
.d-case label.tick:has(input:checked){box-shadow:inset 0 0 0 1.5px rgba(47,122,69,.5);background:#F6FAF7}
/* a secondary way folded away: a quiet line with a chevron, opening in place */
.d-case details.inline > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;font-size:var(--fs-sm);font-weight:600;color:var(--plum-soft);cursor:pointer}
.d-case details.inline > summary::-webkit-details-marker{display:none}
.d-case details.inline > summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
.d-case details.inline[open] > summary::before{transform:rotate(45deg)}
.d-case details.inline[open]{display:grid;gap:var(--s3)}
/* the shared helpers' buttons (payments, the upload control) in the secondary look */
.d-case .btn.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 14px;border:0;border-radius:var(--r-pill);background:var(--card);color:var(--plum);font-size:var(--fs-sm);font-weight:700;box-shadow:inset 0 0 0 1px var(--line-2)}
/* the filing sheet in headed sections (idcheck-7), still in Companies House's order */
.d-sheet{display:grid;gap:var(--s4)}
.d-sheet-sec{display:grid;gap:var(--s2);min-width:0}
.d-sheet-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:0 var(--s1)}
.d-sheet-h h3{margin:0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-soft);font-weight:700}
.d-case .sheet{border-color:var(--line-2);border-radius:var(--r-md)}
.d-case .cp{border-radius:var(--r-sm);border-width:1px}
.d-case .cp button{border-radius:8px;font-size:var(--fs-xs);min-height:32px}
/* the rail: evidence tiles with their picture, the history and messages lists in their folds */
.d-ev{min-width:0}
.d-ev i{overflow:hidden}
.d-ev i img{width:100%;height:100%;object-fit:cover;display:block}
.d-ev b{font-weight:600;overflow-wrap:anywhere}
.d-ev small{font-weight:500;color:var(--grey);font-size:var(--fs-xs)}
.d-facts dd form{margin-top:6px}
.d-facts dd .dd-bad{display:block;color:var(--bad);font-weight:600;font-size:var(--fs-sm)}
.d-facts dd.bad{color:var(--bad);font-weight:600}
.d-facts code{font-size:var(--fs-xs);background:var(--paper-2);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.d-card > details.editdetails{padding:0 var(--s5) var(--s4)}
.d-hist li{align-items:flex-start}
.d-hist li small{text-align:right}
.d-case details.d-fold .msgs{padding:0}
.d-case details.d-fold > summary .bad{color:var(--bad);font-weight:600}
.d-case details.d-fold .more{padding:0 var(--s5) var(--s4)}
@media (max-width:640px){.d-card > details.editdetails{padding:0 var(--s4) var(--s4)}.d-case .msgs li{grid-template-columns:minmax(0,1fr)}}
/* the filing sheet's copy strip sits above the floating tab bar; the page leaves room for both */
body.has-copynext main.d-page{padding-bottom:calc(var(--tabs-h) + 130px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px) and (display-mode:browser){body.has-copynext main.d-page{padding-bottom:110px}}
.d-case input[type=file]::file-selector-button{margin-right:10px;padding:7px 14px;border:0;border-radius:var(--r-pill);background:var(--card);color:var(--plum);font:inherit;font-size:var(--fs-sm);font-weight:700;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}

/* ---------------------------------------------------------------- round 2 additions: r2-onb-list, THE ONBOARDING LIST (02/10/2026)
   companies.php in the new look (onboarding/design/companies.html). The programme's progress line (prog_progress_html(),
   unchanged) reads as the head's sub line; a lane count with words in it drops under its title on a phone (as .d-checks);
   a test run's created date stays visible on a phone as a third line (the right-hand column only shows on a computer);
   the Tools menu opens from its button's left edge, since on a phone the button wraps to the left of the screen. */
.d-onb .d-toolbar .d-menu-list{left:0;right:auto}
.d-onb .d-head .small-note{margin:0;font-size:var(--fs-sm);color:var(--grey)}
.d-onb .d-head .small-note a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
.d-onb .d-lane-h{flex-wrap:wrap;row-gap:2px}
.d-onb details.d-fold .d-fold-b > .d-hint{margin:0}
.d-onb #lane-tests .d-row-e{font-size:var(--fs-xs);font-weight:600;color:var(--grey)}
@media (max-width:899.98px){.d-onb #lane-tests .d-row-e{display:block;grid-column:2}}

/* ---------------------------------------------------------------- round 2 additions: r2-company, THE ONBOARDING COMPANY PAGE (02/10/2026)
   company.php in the new look (onboarding/design/company-review.html), main.d-page.d-case.d-company: it shares the case
   page's rules above for the fields its shared helpers still draw (the records cards, the ownership tree, the proof of
   address panel). Two person cards side by side from 640 px (the mockup's own .d-people rule), a person's name in the
   card heading at body size rather than the eyebrow style; the now-card's eyebrow amber on a decision, grey while
   waiting, green when done; the waiting or done card has no coloured edge; a fold inside a card or another fold is a
   quiet outline, not a second raised card; facts and lists inside a card body or fold line up with its text. */
.d-people{display:grid;gap:var(--s4)}
@media (min-width:640px){.d-people{grid-template-columns:1fr 1fr}}
.d-people .d-card-b{display:grid;gap:var(--s3);align-content:start}
.d-people .d-card-h{align-items:flex-start}
.d-people .d-card-h h2{text-transform:none;letter-spacing:0;font-size:var(--fs-lg);color:var(--ink)}
.d-people > .d-card.is-now{box-shadow:var(--sh-1),inset 3px 0 0 var(--coral)}
.d-people > .d-card.is-now.is-decide{box-shadow:var(--sh-1),inset 3px 0 0 var(--amber)}
.d-people > .d-card.is-now.is-wait{box-shadow:var(--sh-1),inset 3px 0 0 var(--line-3)}
.d-company .d-now--decide > .d-eyebrow{color:var(--amber)}
.d-company .d-eyebrow.d-muted{color:var(--grey)}
.d-company .d-eyebrow.is-ok{color:var(--green)}
.d-nowq > .d-card-b{display:grid;gap:var(--s4)}
.d-nowq h2{margin:0;font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.015em}
.d-nowq p{margin:0;color:var(--ink-2)}
@media (min-width:900px){.d-nowq > .d-card-b{padding:var(--s6) var(--s8)}.d-nowq h2{font-size:var(--fs-2xl)}}
.d-company .d-now > .d-facts{background:var(--paper);border-radius:var(--r-md)}
.d-company .d-now > .d-facts > div{padding:10px 14px}
.d-company :is(.d-card-b,.d-fold-b) .d-facts > div{padding-left:0;padding-right:0}
.d-company :is(.d-facts,.reglist) .d-chip{white-space:normal}
.d-company :is(.d-now,.d-nowq,.d-card,.d-fold) details.d-fold{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:var(--r-md)}
.d-company :is(.d-now,.d-nowq,.d-card,.d-fold) details.d-fold > summary{padding:10px 14px;min-height:48px}
.d-company :is(.d-now,.d-nowq,.d-card,.d-fold) details.d-fold .d-fold-b{padding:0 14px 14px}
.d-company .d-card > .d-flash{margin:0 var(--s5) var(--s3)}
.d-company .d-card > .d-btn-note{padding:0 var(--s5) var(--s4)}
.d-company .d-card > details.d-fold{margin:0 var(--s5) var(--s4)}
.d-company :is(.d-fold-b,.d-card-b) p,.d-company p.d-hint{margin:0}
.d-company :is(.d-hint,.d-btn-note) a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
.d-company .d-reg .d-card-b{display:grid;gap:var(--s3);padding-top:var(--s2)}
.d-company .reglist li{background:transparent;border:0;border-top:1px dashed var(--line-2);border-radius:0;padding:10px 0}
.d-company .reglist li:first-child{border-top:0}
.d-empty-ic.is-plain{background:var(--paper-2);color:var(--grey)}
.d-company :is(.xd,.screenm){border-radius:var(--r-md)}
.d-company ul.d-checked{margin:0;padding-left:18px}
.d-fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s2)}
.d-fieldset[hidden]{display:none}
.d-fieldset > legend{padding:0;margin-bottom:var(--s2)}
.d-fieldset .d-fieldset{padding:var(--s3) 14px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-2)}
.d-tick input[type=radio]{border-radius:50%}
.d-upload input[type=file]{max-width:100%;font-size:var(--fs-sm)}
@media (max-width:640px){.d-company .d-card > .d-flash{margin:0 var(--s4) var(--s3)}.d-company .d-card > .d-btn-note{padding:0 var(--s4) var(--s4)}.d-company .d-card > details.d-fold{margin:0 var(--s4) var(--s4)}}
@media (max-width:640px){.d-company .d-actions > form:has(.d-btn--block-phone){flex:1 1 100%}}
.d-people .d-card-b{padding-top:var(--s2)}

/* ---------------------------------------------------------------- round 2 additions: r2-onb-new, START AN ONBOARDING (02/10/2026)
   onboard-new.php in the new look (main.d-page.narrow.d-onbnew), and the create forms it draws from lib/onb_forms.php.
   A card body stacks its parts; the search box and its button share one line from 640 px; a company's create form is a
   card inside the Find card, so a quiet outline (as r2-company's fold in a card), its name at body size rather than the
   eyebrow style; folds inside a form are quiet outlines too. The pick-list and programme rows are .d-frow rows without
   the fee row's chevron: a tick column (empty when a row has no tick, so the names line up), the actions on the right
   from 900 px. */
.d-onbnew .d-card-b{display:grid;gap:var(--s4)}
.d-onbnew :is(.d-card-b,.d-fold-b,.d-form,.d-pick) > p.d-hint,.d-onbnew .d-fieldset > p.d-hint{margin:0}
.d-onbnew .d-hint a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
@media (min-width:640px){.d-onbnew .onb-find .d-form-row{grid-template-columns:minmax(0,1fr) auto}}
.d-onbnew form.d-card.d-form{gap:0;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.d-onbnew form.d-card > .d-card-h{display:grid;gap:2px;justify-content:start}
.d-onbnew form.d-card > .d-card-h h2{text-transform:none;letter-spacing:0;font-size:var(--fs-lg);color:var(--ink)}
.d-onbnew form.d-card > .d-card-h p{margin:0}
.d-onbnew form.d-card > .d-facts + .d-card-b{border-top:1px solid var(--line)}
.d-onbnew .d-facts .d-hint{display:block;margin-top:2px}
.d-onbnew .d-flash form{margin-top:var(--s2)}
.d-onbnew :is(.d-card,.d-fold) details.d-fold{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:var(--r-md)}
.d-onbnew :is(.d-card,.d-fold) details.d-fold > summary{padding:10px 14px;min-height:48px}
.d-onbnew :is(.d-card,.d-fold) details.d-fold .d-fold-b{padding:0 14px 14px}
.d-onbnew .d-card-b .d-rows{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.d-onbnew .d-pick{display:grid;gap:var(--s3)}
.d-onbnew .d-frow{grid-template-columns:32px minmax(0,1fr)}
.d-onbnew .d-frow > .d-fn{grid-column:2}
.d-onbnew .d-frow .d-fx{align-items:center}
.d-onbnew .d-frow .ec-work{flex-basis:100%;font-size:var(--fs-sm);color:var(--grey)}
.d-onbnew .d-fieldset details.d-fold{margin-left:var(--s8)}
.d-onbnew .d-fieldset details.d-fold > summary{min-height:40px;padding:6px 14px}
.d-onbnew .d-fieldset details.d-fold > summary b{font-size:var(--fs-sm);color:var(--plum-soft)}
.d-onbnew .d-frow.is-pick{grid-template-columns:minmax(0,1fr)}
.d-onbnew .d-frow.is-pick > *{grid-column:1}
.d-onbnew .d-frow.is-pick + .d-frow::before{left:var(--s4)}
@media (min-width:900px){
  .d-onbnew .d-frow{grid-template-columns:32px minmax(0,1fr) auto}
  .d-onbnew .d-frow .d-fx{grid-column:3;grid-row:1/5;max-width:360px}
  .d-onbnew .d-frow .ec-work{text-align:right}
  .d-onbnew .d-frow.is-pick{grid-template-columns:minmax(0,1fr) auto}
  .d-onbnew .d-frow.is-pick > .d-fx{grid-column:2}
  .d-onbnew .d-frow.is-pick + .d-frow::before{left:var(--s5)}
}
.d-onbnew .d-frow .d-tickc{align-self:start}
@media (max-width:640px){.d-onbnew .d-card-b{padding:var(--s4)}.d-onbnew .d-card-h{padding:var(--s4) var(--s4) var(--s2)}.d-onbnew .d-card-b .d-card-b{padding:var(--s4) var(--s3)}.d-onbnew .d-card-b form.d-card > .d-card-h{padding:var(--s3) var(--s3) var(--s2)}.d-onbnew .d-card-b form.d-card .d-facts > div{padding:10px var(--s3)}}
/* ---------------------------------------------------------------- round 2 additions: r2-filing-due (02/10/2026)
   The Filing tab's due list (lib/chwatch.php chw_due_html / chw_card_html; pick filing-4): the first real deadline
   spotlit as .d-hero, the rest as .d-fold cards in lanes. A card is a stack of plain lines; a Karbon mismatch line
   keeps its button (Fix dates in Karbon, or the Complete confirm) under its words, one tap away. */
.chw-due{display:grid;gap:var(--s6)}
#chw > .chw-due{margin:0 0 var(--s6)}   /* until the Filing tab itself is converted (r2-filing-tab): room before New at Companies House */
.chw-due > p{margin:0}
.chw-card{display:grid;gap:var(--s2);min-width:0;overflow-wrap:anywhere}
.chw-card p{margin:0}
.chw-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s2)}
.chw-card .d-mini li{display:grid;gap:var(--s2);justify-items:start}
.chw-card .chw-kbf,.chw-card details.chw-confirm{margin:0}
.chw-card details.chw-confirm{display:grid;gap:var(--s2);justify-items:start}
.chw-card details.chw-confirm > summary{list-style:none}
.chw-card details.chw-confirm p{margin:0;font-size:var(--fs-sm)}
.chw-card .chw-links{display:flex;flex-wrap:wrap;gap:4px var(--s4);font-size:var(--fs-sm)}
details.d-fold.chw-later .d-fold-b{gap:var(--s3)}
details.d-fold.chw-later details.d-fold{box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:640px){.chw-due{gap:var(--s5)}}

/* ---------------------------------------------------------------- round 2 additions: r2-filing-tab (02/10/2026)
   The Filing tab's landing (filing.php, main.d-page.d-filing; picks filing-12, filing-13): Check now (the one coral
   button) with the run line under it; the due list and New at Companies House in .d-main, the history, the new-company
   drafts, the test panel and the system notices in .d-rail. A row's status chip (Karbon job status, a filing's result)
   is information, not just a computer's extra column: on a phone and in the rail it shows as the row's third line. */
.d-filing-go{display:grid;gap:var(--s2)}
.d-filing #chw{display:grid;gap:var(--s6)}
.d-filing #chw > .chw-due{margin:0}
.d-filing-status{display:grid;gap:var(--s3)}
.d-filing .d-row-e small{font-size:var(--fs-xs);color:var(--grey)}
.d-filing .d-card > .d-row + .d-card-b{border-top:1px solid var(--line)}
.d-filing-tp{margin:0;padding:0 var(--s5) var(--s3)}
#test-panel .row:last-child{border-bottom:0}
.chw-newcard .d-card-b{display:grid;gap:var(--s2)}
.chw-newcard form{margin:0}
.chw-new .d-mini li > span{min-width:0}
.chw-new .d-mini li small{white-space:normal;text-align:right}
@media (max-width:899.98px){.d-filing .d-row-e{display:flex;grid-column:2;flex-wrap:wrap;align-items:center;gap:var(--s2)}}
@media (min-width:900px){.d-filing .d-rail .d-row-e{display:flex;grid-column:2;grid-row:auto;flex-wrap:wrap;align-items:center;gap:var(--s2)}}
@media (max-width:640px){.chw-actions > form{flex:1 0 100%}.chw-new .d-mini li{flex-direction:column;gap:2px}.chw-new .d-mini li small{text-align:left}}

/* ---------------------------------------------------------------- round 2 additions: r2-filing-tools (02/10/2026)
   filing-13's two smaller screens, single-column lists: ch-checks.php (main.d-page.narrow.d-chwset; its grid is drawn
   by chw_css() in lib/chwatch.php) and karbonfix.php (main.d-page.narrow.d-kfix). The Show filter on ch-checks.php
   works inside the page, so it is nav.d-filter with <button>s: the same look as the filter's links, aria-pressed for
   the one chosen. On karbonfix.php, from the approved mockup's own <style>: a job card's head line (.chk-jhead: the
   tick, name, number and kind chip), the tick as the .d-tick box (.chk-box) and each change's one-line reason under
   it (.chk-diff dd small); the confirm step's summary is a secondary button, the long labels wrap on a phone. */
.d-filter button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--grey);white-space:nowrap;transition:background .18s,color .18s}
.d-filter button b{font-weight:700;color:var(--grey);font-size:var(--fs-xs)}
.d-filter button[aria-pressed="true"]{background:var(--card);color:var(--plum);box-shadow:0 1px 3px rgba(42,20,25,.12)}
.d-filter button[aria-pressed="true"] b{color:var(--coral-strong)}
.d-chwset p.d-hint,.d-kfix p{margin:0}
.chk-jhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
label.chk-jhead{min-height:44px;cursor:pointer}
.chk-jhead b{font-size:var(--fs-md)}
.chk-jhead small{color:var(--grey);font-weight:500}
.chk-box{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;border-radius:7px;border:1.5px solid var(--line-3);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.chk-box::after{content:"";width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg);opacity:0}
.chk-box:checked{background:var(--green);border-color:var(--green)}
.chk-box:checked::after{opacity:1}
.chk-diff dd b{color:var(--ink);font-weight:700}
.chk-diff dd small{display:block;color:var(--grey);font-weight:500;font-size:var(--fs-xs);margin-top:2px}
.d-kfix-form{display:grid;gap:var(--s4)}
.d-kfix .kf-job .d-card-b{display:grid;gap:var(--s1)}
.d-kfix-confirm{display:grid;gap:var(--s3);justify-items:start}
.d-kfix-confirm > summary{list-style:none}
.d-kfix-confirm > summary::-webkit-details-marker{display:none}
.d-kfix-confirm[open] > summary{box-shadow:inset 0 0 0 1px var(--plum-soft),0 1px 2px rgba(42,20,25,.05)}
.d-kfix-confirm p{font-size:var(--fs-sm);color:var(--ink-2)}
.d-kfix-np,.d-kfix-auto{display:grid;gap:var(--s2);justify-items:start}
.d-kfix-np p{color:var(--ink-2)}
.d-kfix-auto form{margin:0}
.d-kfix-confirm .d-btn,.d-kfix-auto .d-btn{white-space:normal;text-align:center}
.kf-result li{justify-content:flex-start}
@media (max-width:640px){.d-kfix-confirm,.d-kfix-auto{justify-items:stretch}}

/* ---------------------------------------------------------------- round 2 additions: r2-filing-forms (02/10/2026)
   One company's Filing screen, its form screens and the new-company (IN01) editor (filing.php, main.d-page.d-filing
   .d-filing-one): one column, no rail. Each form is a .d-card whose head carries the form's name and its own mode chip;
   its fields are .d-field / .d-tick inside .d-form-row grids (the old grid2 / addr-grid / soc-grid / sic-grid names kept
   beside it for the page script). The parts with no ready component: the IN01 step chips inside nav.d-filter (spans
   and links), a repeating person/share-class group (fieldset.row-edit) as a quiet outlined panel, facts and folds inside
   a card as sunk panels, the register's people and the filing history as quiet rows, a long secondary label wrapping. */
.d-filing-one .d-form p,.d-filing-one .d-card-b > p{margin:0}
.d-filing-one .d-card-h{flex-wrap:wrap;row-gap:4px}
.d-filing-one .d-card-h .d-chip{flex:none}
.d-filing-one .d-form > p > strong,.d-filing-one .d-form-row + p > strong{font-size:var(--fs-sm)}
.d-filing-one .d-form > .d-actions{margin-top:var(--s1)}
.d-field > .d-btn{justify-self:start}
.d-form-row > .fld-full{grid-column:1/-1;display:grid;width:auto}
.d-btn.wrap{white-space:normal;text-align:left}
.d-filing-one fieldset.row-edit{margin:0;padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-md);display:grid;gap:var(--s3);min-width:0}
.d-filing-one fieldset.row-edit > legend{padding:0 6px;font-size:var(--fs-sm);font-weight:700;color:var(--plum)}
.d-filing-one .d-card-b .d-facts{background:var(--paper);border-radius:var(--r-md)}
.d-filing-one .d-card-b .d-facts > div{padding:10px 14px}
.d-filing-one .d-card details.d-fold{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-filing-one .d-card details.d-fold > summary{min-height:48px;padding:10px var(--s4)}
.d-filing-one .d-card details.d-fold .d-fold-b{padding:0 var(--s4) var(--s4);gap:var(--s3)}
.d-filing-one .reglist li{background:var(--paper);border:0;border-radius:var(--r-md);padding:12px 14px}
.d-filing-one .reglist form{flex:1 1 100%;margin:0}
.d-filing-probs,.d-filing-hist{display:grid;gap:var(--s3)}
.d-filing-hist .ev{background:var(--paper);border:0;border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-sm);gap:4px}
.d-filing-hist .ev .d-chip{white-space:normal}
.d-filing-hist .ev .d-form{gap:var(--s2);margin-top:var(--s1)}
.d-filing-hist .ev details.d-fold{flex:1 1 100%}
.d-filing-one .check-row{display:grid;gap:var(--s2)}
.d-filing-one .check-row form{margin:0}
.d-filing-one .step-indicator{margin:0}
.d-filter .step-chip{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border-radius:var(--r-pill);background:transparent;text-decoration:none;font-size:var(--fs-sm);font-weight:600;color:var(--grey);white-space:nowrap;transition:background .18s,color .18s}
.d-filter .step-chip:hover{background:var(--paper-3)}
.d-filter .step-chip.on{background:var(--card);color:var(--plum);box-shadow:0 1px 3px rgba(42,20,25,.12)}
.d-filing-one .d-tick input[type=radio]{border-radius:50%}
.d-filing-one .d-form div:not([class]){display:grid;gap:var(--s3);min-width:0}   /* the forms' plain wrappers: a spare row, an address box, a question block */
.d-filing-one .soc-grid > label:last-child{grid-column:1/-1}   /* SH01's prescribed particulars box takes its row */
.d-filter.step-chips{border-radius:var(--r-md)}
.d-filing-one .d-form-row.sic-grid{grid-template-columns:minmax(0,420px)}   /* in01-polish item 4: one SIC code per row, its description under it */
.d-filing-one .d-form > .d-btn,.d-filing-one .d-card-b > .d-btn,.d-filing-one .d-card-b > .d-chip{justify-self:start}
@media (max-width:640px){.d-filing-one fieldset.row-edit{padding:var(--s3)}.d-filing-one .d-card-b .d-facts > div{padding:10px 12px}
  .d-filing-one .d-actions > .d-btn:not([class*="d-btn--"]){flex:1 1 100%}}

/* ---------------------------------------------------------------- round 3 additions: r3-fees-list (02/10/2026)
   The Clients & fees list (fees.php, main.d-page.narrow). A row's round mark is a read-only state marker, not a
   control (span.d-tickc, aria-hidden): .is-on, when the client is ticked as checked, is the mockup's :checked circle,
   the same green fill and tick. The search is its field and Find on one line. On a phone the Tools list opens
   rightwards. A Fees page not in the new look yet (in main.d-page since this item) keeps its old blocks from
   stretching the frame, as desk.css's .screen > .sect did. */
.d-frow .d-tickc.is-on{background:var(--green);border-color:var(--green)} .d-frow .d-tickc.is-on::after{opacity:1}
.d-frow span.d-tickc{cursor:default}
.d-fees-find{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:center}
.d-page > .sect,.d-page > .summary,.d-page > .case-h{min-width:0}
/* on a phone the Tools menu sits at the left of its row: its list opens rightwards from it, inside the screen */
@media (max-width:899.98px){.d-toolbar .d-menu-list{left:0;right:auto;max-width:calc(100vw - 32px)}}

/* ---------------------------------------------------------------- round 3 additions: r3-fees-client (02/10/2026)
   One client's fee page (fees.php?c=N, main.d-page.narrow.d-feec; picks fees-9, fees-10), built to the approved
   fees/design/client.html. From that mockup's own <style>: the priced fee-line row (.fl, .fl-top, .fl-amt, .fl-meta,
   .fl-next) and the fold under a line. The rest places existing parts: a card's stream headings and its foot of folds,
   folds inside a card or a fold drawn as quiet outlined panels (as on the Filing forms), rows inside a fold or the
   check card without the card's side padding, facts inside a fold as a sunk panel, the compare's two blocks as sunk
   panels, the payroll companies as outlined cards, the Karbon link opening in place under the head's chips. */
.fl{padding:var(--s4) var(--s5)}
.fl + .fl{border-top:1px solid var(--line)}
.fl-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.fl-top b{font-size:var(--fs-md);font-weight:700;min-width:0;overflow-wrap:anywhere}
.fl-amt{font-weight:700;font-size:var(--fs-md);white-space:nowrap;font-variant-numeric:tabular-nums}
.fl-meta{margin:6px 0 0;color:var(--grey);font-size:var(--fs-sm)}
.fl-next{margin:4px 0 0;color:var(--green);font-size:var(--fs-sm);font-weight:600}
.fl details.d-fold{margin-top:var(--s3)}
.d-feec .fl-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.d-feec .fl-meta .fee-diff{flex-basis:100%}
.d-feec .fl > .d-hint{margin:4px 0 0}
.d-feec .fl > .fee-note{margin-top:var(--s2)}
.d-feec .fl.is-skip .fl-top b,.d-feec .fl.is-skip .fl-amt{color:var(--grey);font-weight:600}
.d-feec p.d-hint,.d-feec p.d-flash,.d-feec .fl-b > p{margin:0}
.d-feec .d-hint a{color:var(--plum-soft);font-weight:600;text-underline-offset:3px}
.d-case-h > .d-hint{grid-column:1/-1}
/* Fee lines: the stream (and a bundle's company) over its rows; Add a line / website rates / Past lines at the foot */
.d-card > .fl-group{padding:var(--s3) var(--s5) 0}
.d-card > .fl + .fl-group{border-top:1px solid var(--line);padding-top:var(--s4)}
.d-card > p.d-hint.fl-group{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.fl-foot{display:grid;gap:var(--s2);padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
/* a fold inside a card or inside another fold: a quiet outlined panel, a shorter summary */
.d-feec .d-card details.d-fold,.d-feec details.d-fold details.d-fold{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-feec .d-card details.d-fold > summary,.d-feec details.d-fold details.d-fold > summary{min-height:48px;padding:10px var(--s4)}
.d-feec .d-card details.d-fold .d-fold-b,.d-feec details.d-fold details.d-fold .d-fold-b{padding:0 var(--s4) var(--s4);gap:var(--s3)}
.d-feec details.d-fold .d-fold-b{gap:var(--s3)}
/* rows inside a card's body, a fold or the check card: no side padding of their own */
.d-feec :is(.d-card-b,.d-fold-b,.d-now) .fl{padding:var(--s3) 0}
.d-feec .fl-b{display:grid;gap:var(--s2)}
.d-feec .fl-b > .d-eyebrow:not(:first-child){margin-top:var(--s3)}
.d-feec .fl-meta .d-link{white-space:nowrap}
/* facts inside a fold, a payroll card or the test write: a sunk panel */
.d-feec :is(.d-fold-b,.d-people) .d-facts{background:var(--paper);border-radius:var(--r-md)}
.d-feec :is(.d-fold-b,.d-people) .d-facts > div{padding:10px 14px}
/* the check: the compare's two blocks as sunk panels inside the amber card */
.d-feec .fee-cmp{gap:var(--s3)}
.d-feec .fee-cmp > div{background:var(--paper);border:0;border-radius:var(--r-md);padding:var(--s3) var(--s4);gap:var(--s2);min-width:0}
.d-feec .fee-cmp .fl{padding:10px 0}
.d-feec .fee-cmp .fl + .fl{border-top-color:var(--line-2)}
.d-feec .fee-cmp .fl-top b,.d-feec .fee-cmp .fl-amt{font-size:var(--fs-sm)}
.d-feec .fee-cmp .fl-top b{font-weight:600}
.d-feec .fee-cmp .d-facts > div{padding:8px 0}
.d-feec .fee-cmp .d-facts > div:first-child{border-top:1px solid var(--line-2)}
.d-feec .fee-checked,.d-feec .fee-qbtest{display:grid;gap:var(--s3)}
.d-feec .fee-qbtest{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-feec .fee-qb{border-radius:var(--r-md);border-color:var(--line-2)}
/* the payroll companies, each an outlined card */
.d-people{display:grid;gap:var(--s3)}
.d-people .d-card{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-people .d-card-h{flex-wrap:wrap}
.d-people .d-card-h h3{margin:0;font-size:var(--fs-md)}
.d-people .d-card-b{padding-top:var(--s2)}
.d-people form{margin:0}
/* fields the old styles reach first (.fee-addr input) and the reminder name until "change it" */
.d-feec .fee-addr{gap:var(--s2);font-size:inherit;color:inherit}
.d-feec .fee-addr .d-input{padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);font-size:var(--fs-md);color:var(--ink)}
.d-input[readonly]{background:var(--paper-2);color:var(--grey)}
.d-chip.dext{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:left}
/* the head's "Link to a Karbon organisation": a quiet button; open, its form takes the row under the chips */
.d-kblink > summary{list-style:none}
.d-kblink > summary::-webkit-details-marker{display:none}
.d-kblink[open]{flex:1 1 100%;display:grid;gap:var(--s2);justify-items:start}
.d-kblink-b{justify-self:stretch;padding:var(--s4);border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.d-kblink-b p{margin:0}
/* the check, last: its amber card fills the fold with a quiet outline (no second shadow), and wraps inside it on a phone */
.d-feec .d-fold-b > *{min-width:0}
.d-feec .fee-checkfold > .d-fold-b{padding:0 var(--s2) var(--s2)}
.d-feec .fee-checkfold > .d-fold-b > :is(.d-now,.d-card){box-shadow:inset 0 0 0 1px var(--line-2)}
.d-feec .d-now .d-btn{white-space:normal;text-align:center}
@media (max-width:640px){
  .fl,.d-card > .fl-group,.fl-foot{padding-left:var(--s4);padding-right:var(--s4)}
  .d-feec .fee-cmp > div{padding:var(--s3)}
}

/* ---------------------------------------------------------------- round 3 additions: r3-fees-pages (02/10/2026)
   The other Clients & fees pages in the new look: Add a client (.d-fnew), Import (.d-fimport), Sync (.d-fsync), Tick the
   clients that agree (.d-ftick) and What we charge (.d-chg). A card's body stacks its parts with the form gap; Import's
   report lists a client per ul.d-mini line (name and QB line, its flags under, the chip on the right); Sync's unlinked
   reminder-list records are outlined panels and its rows sit inside the card with a quiet outline. What we charge: from
   the approved fees/design/charges.html's own <style>, the table on a computer (.chg-table: capital headers, right-
   aligned tabular money, a heavier totals row) and, under 760 px, the same rows as .fl cards instead. */
:is(.d-fnew,.d-fimport,.d-fsync) .d-card-b{display:grid;gap:var(--s3);min-width:0}
:is(.d-fnew,.d-fimport,.d-fsync,.d-ftick,.d-chg) :is(p.d-hint,p.d-flash,.d-card-b > p){margin:0}
.d-fimport .d-card-b form{display:grid;gap:var(--s2)}
.d-imp li{align-items:flex-start}
.d-imp li > span:first-child{display:grid;gap:2px;min-width:0}
.d-imp li > span:first-child a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.d-imp li > span:first-child em{font-style:normal;color:var(--grey);font-size:var(--fs-xs)}
.d-imp li > span:first-child small{white-space:normal}
.d-imp li > .d-chip{flex:none}
.d-fsync .d-card-b > form{margin:0}
.d-fsync .fee-sync.d-form{gap:var(--s2)}
.d-fsync .d-card-b > .d-eyebrow{margin-top:var(--s2)}
.d-unl{display:grid;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-2);min-width:0;overflow-wrap:anywhere}
.d-unl p{margin:0}
.d-fsync .d-card-b > .d-rows{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-ftick .d-lane > form{margin-top:var(--s2)}
.d-ftick .d-lane > p.d-hint{padding:0 var(--s1)}
/* What we charge */
.chg-find{display:grid;gap:var(--s2)}
.chg-find .d-tick{align-items:center}
.chg-jump{justify-self:start}
.chg-jump a{flex:0 0 auto}
.chg-table-wrap{padding:0 var(--s5) var(--s5);overflow-x:auto}
.chg-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.chg-table th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--grey);font-weight:700;padding:0 var(--s3) var(--s2)}
.chg-table td{padding:var(--s3);border-top:1px solid var(--line);vertical-align:top}
.chg-table td:not(:first-child),.chg-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.chg-table td:first-child{overflow-wrap:anywhere;min-width:180px}
.chg-table td:last-child{white-space:nowrap}
.chg-table tfoot td{border-top:2px solid var(--line-2);font-weight:700}
.chg-table tr.sub td:first-child{padding-left:var(--s8);color:var(--ink-2)}
.chg-table a{color:var(--plum-soft);font-weight:600;text-decoration:none}
.chg-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chg-note{display:block;color:var(--grey);font-size:var(--fs-xs);font-weight:500}
.chg-cards{display:none}
.chg-foot{padding:0 var(--s5) var(--s5)}
.d-chg .chg-yr-note{padding:0 var(--s5) var(--s2)}
.d-chg .d-card > h3.fl-group{margin:0}
.d-chg .d-card > .fl:last-child{padding-bottom:var(--s5)}
.d-chg .fl-top b a{color:inherit;text-decoration:none}
.d-chg .fl-meta{overflow-wrap:anywhere}
.d-chg .fl-meta .d-chip{vertical-align:1px}
.d-chg .fl-meta .chg-note{display:inline}
@media (max-width:759.98px){
  .chg-table-wrap{display:none}
  .chg-cards{display:block;padding:0 0 var(--s2)}
  .chg-cards .fl{padding:var(--s3) var(--s4)}
  .chg-cards .fl.is-sub{padding-left:var(--s8)}
  .chg-cards .fl.chg-total{border-top:2px solid var(--line-2)}
  .chg-foot{padding:0 var(--s4) var(--s4)}
  .d-chg .chg-yr-note{padding:0 var(--s4) var(--s2)}
}
.d-fimport .d-card-b .d-facts{background:var(--paper);border-radius:var(--r-md)}
.d-fimport .d-card-b .d-facts > div{padding:10px 14px}
:is(.d-fimport,.d-fsync) .d-card-h + .d-card-b{padding-top:var(--s2)}

/* ---------------------------------------------------------------- round 3 additions: r3-billrun (02/10/2026)
   The billing run (fees.php?view=run, main.d-page.narrow.d-run), built to the approved fees/design/run.html. The month
   field and Go on one line; each stream's gross chip stays on a phone (under the line, as the Filing list does). On a
   stream page a client's card stacks its parts with the form gap: its name (h3) and chips in the head, the QuickBooks
   table kept as it was, facts as a sunk panel, folds inside the card as quiet outlined panels (as on the Fees client
   page), the test invoice a quiet card with its own padding. */
.d-run-month .d-form-row{grid-template-columns:minmax(0,220px) auto;justify-content:start;align-items:end;gap:var(--s3)}
@media (max-width:899.98px){.d-run .run-streams .d-row-e{display:flex;grid-column:2;flex-wrap:wrap;align-items:center;gap:var(--s2)}}
.d-run #preview{gap:var(--s3)}
.d-run .d-card-h{flex-wrap:wrap;row-gap:4px}
.d-run .d-card-h h3{margin:0;font-size:var(--fs-md);font-weight:700;min-width:0;overflow-wrap:anywhere}
.d-run .d-card-h + .d-card-b{padding-top:var(--s2)}
.d-run .d-card-b{display:grid;gap:var(--s3);min-width:0}
.d-run :is(p.d-hint,p.d-flash,.d-card-b > p){margin:0}
.d-run .d-card-b form{margin:0}
.d-run .d-card-b .d-facts{background:var(--paper);border-radius:var(--r-md)}
.d-run .d-card-b .d-facts > div{padding:10px 14px}
.d-run .fee-qb{border-radius:var(--r-md);border-color:var(--line-2)}
.d-run .d-card details.d-fold{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-run .d-card details.d-fold > summary{min-height:48px;padding:10px var(--s4)}
.d-run .d-card details.d-fold .d-fold-b{padding:0 var(--s4) var(--s4);gap:var(--s3)}
.d-run-test{display:grid;gap:var(--s2);padding:var(--s4)}
.d-run-test > .d-eyebrow{margin:0}
.d-run .d-people .d-card-b{padding-top:var(--s2)}
.d-run input[type=file].d-input{padding:8px 10px}
.d-run input[type=file].d-input::file-selector-button{margin-right:var(--s3);padding:7px 14px;border:0;border-radius:var(--r-pill);background:var(--paper-2);color:var(--plum);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
@media (max-width:640px){.d-run .d-card-b .d-facts > div{padding:10px 12px}.d-run-test{padding:var(--s3)}}
/* ---------------------------------------------------------------- round 3 additions: r3-more (02/10/2026)
   More (more.php, main.d-page.narrow.d-morep): Desk alerts, Shortcuts and Your account as lanes, then the Tools, System
   status and clean-up cards. An alert's Clear sits under its words; a card's paragraphs, hint and form keep the card's
   own spacing (the mockup's gap); the clean-up's candidate rows sit in a lined box inside the card, and their "last
   contact" stays on a phone too (under the reason), as the Filing list keeps its right-hand column. */
.d-morep p.d-hint{margin:0}
.d-morep .d-lane > p.d-hint{padding:0 var(--s1)}
.d-morep .d-flash small{font-size:var(--fs-xs)}
.d-morep .d-flash form{margin-top:4px}
.d-morep .d-card-b{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.d-morep #tools .d-card-b{gap:10px}
@media (max-width:640px){.d-morep #tools .d-btn{white-space:normal;text-align:left}}
.d-morep .d-card-b > p:not(.d-hint):not(.d-btn-note){margin:0;color:var(--ink-2)}
.d-morep #cleanup .d-card-b > .d-rows{box-shadow:inset 0 0 0 1px var(--line-2)}
.d-morep #cleanup .d-row-e{font-size:var(--fs-xs);color:var(--grey);white-space:nowrap}
@media (max-width:899.98px){.d-morep #cleanup .d-row-e{display:block;grid-column:2;white-space:normal}}
/* ---------------------------------------------------------------- round 3 additions: r3-more-pages (02/10/2026)
   More's own pages. Staff and devices and Phone app (main.d-page.narrow.d-acctp): each person, step and "Lost a phone?"
   a .d-card whose body keeps the mockup's own gap (staff-and-devices.html: display:grid;gap:var(--s4)); a person's
   name is the card's heading at the mockup's size (--fs-lg) with its chips beside it; the device lists
   (app_device_list_html(), unchanged) sit under a .d-eyebrow; an empty message line takes no room until app.js fills it.
   Search (.d-searchp): the box under the eyebrow. The two money look pages (.d-moneyp): the card body's gap. */
.d-acctp .d-card-b,.d-moneyp .d-card-b{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.d-acctp .d-card-b p,.d-moneyp .d-card-b p{margin:0}
.d-acctp .d-card-h + .d-card-b,.d-moneyp .d-card-h + .d-card-b{padding-top:var(--s2)}
.d-acctp .d-card-b > p:not(.d-hint):not(.d-flash){color:var(--ink-2)}
.d-acctp .d-card-b > div > .d-eyebrow{margin:0 0 4px}
.d-acctp .d-card-b > p.d-hint:empty{display:none}
.d-acctp section[aria-label] > .d-card-h h2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-lg);letter-spacing:0;text-transform:none;color:var(--ink)}
.d-acctp section[aria-label] > .d-card-h{padding-top:var(--s5)}
.d-acctp .d-actions form,.d-moneyp .d-actions form{margin:0}
.d-acctp .acct-how{margin:0}
.d-searchp .d-head .search.page{margin:0 0 var(--s2)}
@media (max-width:640px){.d-moneyp .d-actions > form,.d-moneyp .d-actions > form > .d-btn{width:100%}}
/* redesign2-onb review fixes (02/10/2026): access-1/access-2 - the person cards on the company page and the Companies House match cards on Start an onboarding head with h3 now (nested under the People / Find the company h2), drawn exactly as before */
.d-people .d-card-h h3,.d-onbnew form.d-card > .d-card-h h3{margin:0;font-weight:700;text-transform:none;letter-spacing:0;font-size:var(--fs-lg);color:var(--ink)}
/* access-3 - the existing-clients tick is a 44x44 tap target on a phone: an 8px transparent border round the same 28px circle, with negative margins so the row's layout doesn't move (inputs only - the Fees list's read-only span.d-tickc marker is untouched) */
.d-frow input.d-tickc{width:44px;height:44px;border:8px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--line-3);margin:-8px -4px -8px -8px}
.d-frow input.d-tickc:checked{border-color:transparent;box-shadow:none}

/* ---------------------------------------------------------------- filing hub (02/10/2026)
   filinghub (requested by Yisroel on 02/10/2026, option C, Hub: "It's all too much on one page"). The Filing tab's landing
   (filing.php, main.d-page.d-filing.d-hub) is a hub: the head with "+ New filing" and the ⋯ Tools menu on its eyebrow
   line; four tiles (.d-tiles: Due now, Karbon to tidy, Waiting at Companies House, Filed this week - 2 x 2 on a phone, 4
   across from 900 px), each plain unless it needs you: amber .is-warn (needs you soon), red .is-bad (needs you now), its
   words under the number so the colour is never the only sign; Next up (.d-spot, at most three: #1 the .d-hero, #2 and
   #3 .d-next cards that are not links - each carries its own buttons - so no chevron and no lift), or a calm one-line
   .d-hub-calm when nothing needs you; then New at Companies House and a foot line. Each list is a view of its own
   (main.d-page.narrow.d-filing.d-hubv), where on a computer (1024 px and up) the tiles stay across the top, the one
   shown marked .on. Check now inside the Tools menu is drawn as one of its items (.d-menu-btn); a red dot on ⋯ when
   System status needs a look. */
.d-hub-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);flex-wrap:wrap}
.d-hub-acts{flex-wrap:nowrap}
.d-hub-tools > summary{position:relative;min-width:44px;padding-left:12px;padding-right:12px}
.d-hub-tools > summary > span[aria-hidden]{font-size:var(--fs-xl);line-height:1;letter-spacing:.04em}
.d-hub-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--card)}
.d-hub-tools .d-menu-list{min-width:300px;max-width:calc(100vw - 32px)}
.d-menu-list form{margin:0;display:grid}
.d-menu-list .d-menu-btn{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-weight:600;font-size:var(--fs-sm);color:inherit;cursor:pointer}
.d-menu-list .d-menu-btn:hover{background:var(--paper)}
/* filing-5 (02/10/2026, approved by Yisroel): every item in the Filing hub's ⋯ Tools menu - Check now, "Choose which
   clients to check", "Fix Karbon dates against Companies House" and the rest - at least 44 px tall, so each is easy to tap
   on a phone (the plain .d-menu-list item was 41 px). */
.d-hub-tools .d-menu-list a,.d-hub-tools .d-menu-list .d-menu-btn{min-height:44px;align-content:center}
.d-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.d-tile{display:grid;align-content:start;gap:2px;min-height:96px;padding:var(--s4);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
a.d-tile:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.d-tile b{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.02em}
.d-tile span{font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--ink-2)}
.d-tile small{font-size:var(--fs-xs);font-weight:600}
.d-tile.is-warn{background:var(--amber-bg)} .d-tile.is-warn b,.d-tile.is-warn small{color:var(--amber)}
.d-tile.is-bad{background:var(--bad-bg)} .d-tile.is-bad b,.d-tile.is-bad small{color:var(--bad)}
.d-tile.on{box-shadow:inset 0 0 0 2px var(--plum),var(--sh-1)}
@media (min-width:900px){.d-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.d-tiles--views{display:none}
@media (min-width:1024px){.d-tiles--views{display:grid}}
.d-hub-calm{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s2);margin:0;padding:12px var(--s4);border-radius:var(--r-md);background:var(--paper-2);font-size:var(--fs-md);color:var(--ink-2)}
.d-hub-calm::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--green-bg);color:var(--green);font-weight:800;font-size:var(--fs-sm)}
.d-hub-calm .d-link{font-size:var(--fs-sm)}
.chw-next,.fil-next.d-next{grid-template-columns:auto minmax(0,1fr);align-content:start}
.chw-next > *,.fil-next.d-next > *{grid-column:2;min-width:0}
.chw-next > .d-rk,.fil-next.d-next > .d-rk{grid-column:1}
.chw-next::after,.fil-next.d-next::after{content:none}
.chw-next:hover,.fil-next.d-next:hover{box-shadow:var(--sh-1);transform:none}
.chw-next .d-err{color:var(--bad)}
.fil-next .d-actions{margin-top:var(--s1)}
.d-hub-foot{text-align:left}
.d-hub-find{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:center;flex:1 1 280px;margin:0}
.d-hubv .d-toolbar{align-items:center}
.d-hubv .d-card-b{display:grid;gap:var(--s3)}
.d-hubv .d-card-b > p.d-hint{margin:0}
.fil-item .d-card-b{gap:var(--s2)}
.fil-item p{margin:0}
.fil-item-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s2)}
.fil-item .d-form{gap:var(--s2)}
.fil-item details.d-fold{box-shadow:inset 0 0 0 1px var(--line-2)}
.fil-item details.d-fold > summary{min-height:44px;padding:8px var(--s4)}
.fil-item details.d-fold .d-fold-b{padding:0 var(--s4) var(--s3)}
@media (max-width:640px){.d-hub-find{grid-template-columns:minmax(0,1fr)}.d-hub-find .d-btn{width:100%}.d-tile{min-height:88px;padding:var(--s3) var(--s4)}}
/* ---------------------------------------------------------------- filing-2 (02/10/2026)
   A row on the Filing tab that opens a company's filing screen, once pressed (filing.php's own script: .is-opening,
   "Opening <name>…" in place of its name): a progress cursor, slightly faded, and a small spinner after the words -
   standing still under reduced motion, where the changed words alone say it. */
.d-row.is-opening{cursor:progress;opacity:.8}
.d-row.is-opening .d-row-a::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-2px;box-sizing:border-box;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--plum);animation:d-spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){.d-row.is-opening .d-row-a::after{animation:none}}

/* onboarding-12 (02/10/2026): the desk's own "are you sure?" dialog, replacing window.confirm(). New component —
   tokens only, no new colour or radius. */
.d-dialog{background:var(--card);color:var(--ink);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s5);width:min(420px,calc(100% - 2 * var(--s4)));animation:d-dialog-in .15s var(--ease)}
.d-dialog p{margin:0 0 var(--s4);font-size:var(--fs-md)}
.d-dialog .d-actions{flex-wrap:nowrap}
.d-dialog::backdrop{background:color-mix(in srgb, var(--ink) 45%, transparent)}
@keyframes d-dialog-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.d-dialog{animation:none}}

/* ---------------------------------------------------------------- desk batch 3 (07/10/2026)
   8.2/8.5 .co-cmp: declared beside the document on a decision card, with its thumbnail. 12.2 .d-elsewhere: "This
   client elsewhere" under a client page's head. 9.1/9.6 .bookedday / .slotpick: the calls already booked that day and
   the one-tap free times under a call-time box. Tokens only. */
.co-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:var(--s2) 0}
.co-cmp-col{background:var(--paper-2);border-radius:var(--r-md);padding:var(--s3);display:grid;gap:var(--s1);align-content:start;min-width:0}
.co-cmp-col p{margin:0}
.co-cmp-addr{font-weight:600;overflow-wrap:anywhere}
.co-cmp-thumb{display:block;margin-top:var(--s1)}
.co-cmp-thumb img{width:100%;max-height:180px;object-fit:contain;border-radius:var(--r-sm);background:var(--card);display:block}
@media (max-width:520px){.co-cmp{grid-template-columns:minmax(0,1fr)}}
.d-elsewhere{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s2);font-size:var(--fs-sm);margin-top:calc(-1 * var(--s3))}
.d-elsewhere-h{color:var(--grey);font-weight:600}
.d-elsewhere a{color:var(--plum);font-weight:600}
.bookedday{display:grid;gap:var(--s1);margin-top:var(--s2)}
.bookedday p{margin:0}
.slotpick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
/* deskb1 (07/10/2026). 5.5: More's Connections card, each title stacked over its text. 5.4: Yisroel's thin desk-alert strip on Today.
   10.3: the billing run's one-line rows and the sticky Create bar. 11.2: a reply card's Outlook / Reply links. */
.d-conns{display:grid;gap:var(--s4)}
.d-conn + .d-conn{border-top:1px solid var(--line);padding-top:var(--s4)}
.d-conn p{margin:0;font-size:var(--fs-sm);line-height:var(--lh)}
.d-conn .d-conn-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;font-size:var(--fs-md)}
.d-ownerstrip{padding:8px var(--s4)}
.d-ownerstrip p{margin:0;font-size:var(--fs-sm)}
.reply-links{margin:8px 0}
.reply-did{margin-top:8px}
.d-run-sub{margin:var(--s4) 0 var(--s2);font-size:var(--fs-sm);font-weight:700;color:var(--grey)}
.d-run-fine{display:grid;background:var(--card);border-radius:var(--r-lg,18px);box-shadow:var(--sh-1);overflow:hidden}
.d-run-fine > details.d-fold{margin:0;border-radius:0;box-shadow:none;background:transparent}
.d-run-fine > details.d-fold + details.d-fold{border-top:1px solid var(--line)}
.d-run-fine summary .d-run-line{font-weight:600;overflow-wrap:anywhere}
.d-run-fine .d-card{box-shadow:none;background:transparent}
.d-run-fine .d-card > .d-card-h{display:none}
.d-run-sticky .d-btn-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 0}
.d-run-after{height:24px}   /* desk batch 2: room under the sticky Create bar so the last rows scroll clear of it */
@media (max-width:1199.98px),(display-mode:standalone){.d-run-after{height:calc(var(--tabs-h, 64px) + 140px + env(safe-area-inset-bottom,0px))}}
.d-run-sticky{position:sticky;bottom:0;z-index:5;background:var(--paper,#f8f5f3);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-2)}
@media (max-width:899.98px),(display-mode:standalone){.d-run-sticky{bottom:calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom,0px));border-radius:var(--r-md,14px)}}