/* WOLF. The firm's own colours (Gabe, 2026-10-02: "Stick to our firm colors"; Marketing\Logo\logo-deliverables\
   brand-colors.pdf): navy #22316A and deep navy #131A3A, gold #C0975B and light gold #EFD580, black and white. Navy is
   action and the active place; gold is WOLF, wins, badges and urgency; white surfaces carry the firm's official black
   logo on its white plate (--brand-plate, white in both themes; never recoloured or inverted: test/brand.test.ts). No
   red anywhere: "act now" is deep navy on light gold, the strongest pairing the palette has. No cream page and no brown
   ink: the page is a cool navy-tinted white, and gold text is darkened only as far as legibility needs. Light and dark
   are designed together: <html data-theme="light|dark"> chooses, and with no attribute the computer's setting decides
   (app.js writes it from localStorage "wolf_theme" before it draws). Dark is the deep navy of the brand with gold for
   action. Every text pair is WCAG AA in both themes (test/theme.test.ts computes them from this block). Type is Times
   New Roman throughout (Gabe, the same day). Older token names (--bronze, --gold, --red, --cy, --mono...) are aliases,
   so public/features/*.css keep working. */
:root{
  color-scheme: light;

  /* ---- surfaces */
  --surface-page:#F3F4F8;        /* the page behind everything: white with a breath of navy */
  --surface:#FFFFFF;             /* cards, panels, rows */
  --surface-2:#F8F9FC;           /* a quieter card, an inset header */
  --surface-sunk:#ECEEF5;        /* fields at rest, toggles, tracks */
  --surface-raised:#FFFFFF;      /* popovers, the command bar, menus */
  --surface-glass:rgba(255,255,255,.82);  /* kept for a module that names it; the top bar and the tab bar are solid now (no blur) */
  --line:#D8DCE7;                /* hairlines: a touch stronger, so a hairline that is the only separator reads */
  --line-2:#C5CADB;              /* table heads, stronger separators */
  --edge:#A3AAC4;                /* a focused or hovered border */
  --scrim:rgba(19,26,58,.5);
  --blur:saturate(1.3) blur(14px);

  /* ---- ink: deep navy, the firm's darkest colour */
  --ink:#131A3A;                 /* 16.9:1 on white */
  --ink-2:#353D62;               /* 10.6:1 */
  --ink-3:#565E80;               /* 6.4:1 on white: the floor for small text */
  --ink-inverse:#FFFFFF;

  /* ---- brand accent: navy (action, links, focus, the active place) */
  --accent:#22316A;              /* text and icons, 12.3:1 on white */
  --accent-fill:#22316A;         /* the primary button; white on it 12.3:1 */
  --accent-fill-hover:#131A3A;
  --accent-deep:#131A3A;
  --accent-bg:#ECEFF8;           /* a tint: the active nav item, selected row */
  --accent-bg-2:#DDE2F1;
  --accent-line:#B9C1DE;
  --accent-ring:rgba(34,49,106,.25);
  --on-accent:#FFFFFF;

  /* ---- the assistant: WOLF speaks in navy on a light-gold ground, with gold for its rings and bars */
  --wolf:#22316A;
  --wolf-fill:#C0975B;
  --wolf-bg:#FBF5DF;
  --wolf-line:#E9D69B;

  /* ---- wins and badges: gold */
  --win:#6E5418;                 /* gold ink, darkened for 6.9:1 on white */
  --win-fill:#C0975B;
  --win-bg:#FBF5E4;
  --win-line:#E7CF94;

  /* ---- the urgency scale (DESIGN.md 4.3): u0 clear, u1 scheduled, u2 soon, u3 act now. No red: navy to gold. */
  --u0:#565E80;      --u0-fill:#9AA1BA;  --u0-bg:#F1F2F7;  --u0-line:#D5D9E6;   /* grey-navy: nothing is due */
  --u1:#22316A;      --u1-fill:#4A5A95;  --u1-bg:#ECEFF8;  --u1-line:#C3CBE6;   /* navy: on the calendar */
  --u2:#6E5418;      --u2-fill:#EFD580;  --u2-bg:#FDF8E7;  --u2-line:#EED9A0;   /* light gold: soon, plan it this week */
  --u3:#131A3A;      --u3-fill:#131A3A;  --u3-bg:#F6E3A6;  --u3-line:#C0975B;   /* deep navy on gold: act now (and late) */
  --on-u3:#EFD580;                                                                /* light gold on deep navy 11.8:1 */

  /* ---- brand plate: the official black logo sits on this, in both themes */
  --brand-plate:#FFFFFF;
  --brand-plate-line:#DFE2EC;

  /* ---- the brand itself, the same in both themes (the Home hero, the sign-in frame, the badges) */
  --brand-black:#000000; --brand-deep:#131A3A; --brand-navy:#22316A; --brand-gold:#C0975B; --brand-gold-light:#EFD580;

  /* ---- type: Times New Roman throughout (a system font on Windows, macOS and iOS; Liberation Serif and Tinos are its
     metric twins elsewhere), with tabular figures as a feature setting (font-variant-numeric), not a family */
  --font-ui:"Times New Roman",Times,"Liberation Serif",Tinos,serif;
  --font-num:var(--font-ui);
  --font-code:var(--font-ui);
  --fs-2xs:12px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px; --fs-hero:44px;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.55;
  --track-caps:.08em; --track-tight:-.01em;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* ---- space (4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* ---- radius */
  --r-xs:8px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:16px; --r-pill:999px;   /* three sizes: controls 8, cards 12, heroes and sheets 16 */

  /* ---- elevation: soft navy shadows, never heavy */
  --shadow-1:0 1px 2px rgba(19,26,58,.06);
  --shadow-2:0 1px 2px rgba(19,26,58,.06),0 2px 8px -2px rgba(19,26,58,.08);
  --shadow-3:0 2px 4px rgba(19,26,58,.08),0 10px 24px -8px rgba(19,26,58,.2);
  --glow-accent:0 0 0 4px var(--accent-ring);
  --hover:rgba(19,26,58,.045);   /* a row or link under the pointer */

  /* ---- motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --t-fast:120ms; --t-base:180ms; --t-slow:320ms;

  /* ---- layout */
  --rail-w:248px; --rail-mini:76px; --top-h:60px; --content-max:1360px; --tabbar-h:64px;

  /* ================================================================ legacy aliases (public/features/*.css)
     --bg is the browser and phone theme colour: white, the ground the official black logo sits on (Gabe, 2026-10-01);
     index.html's theme-color, manifest.webmanifest and the PNG icons' ground match it (test/signin-return.test.ts) */
  --bg:#ffffff;
  --chrome:var(--surface); --chrome-art:var(--surface); --chrome-line:var(--line);
  --chrome-hover:rgba(19,26,58,.045); --chrome-active:var(--accent-bg);
  --shell:#131A3A; --shell2:#1A2249; --shell3:#22316A;
  --shell-line:rgba(245,246,250,.09); --shell-ink:#F5F6FA; --shell-ink2:#CDD2E6; --shell-ink3:#A3AAC8;
  --page:var(--surface-page); --panel:var(--surface); --panel2:var(--surface-2); --field:var(--surface); --sunk:var(--surface-sunk);
  --line2:var(--line-2);
  --ink2:var(--ink-2); --ink3:var(--ink-3);
  --bronze:var(--accent-fill); --bronze-ink:var(--accent); --bronze-deep:var(--accent-deep);
  --gold:var(--accent-line); --gold-soft:var(--accent-bg-2); --gold-wash:var(--accent-bg); --goldd:var(--accent-line);
  --cy:var(--accent); --cyd:var(--accent-fill);
  --red:var(--u3); --red-bg:var(--u3-bg); --red-line:var(--u3-line);
  --amber:var(--u2); --amber-bg:var(--u2-bg); --amber-line:var(--u2-line);
  --green:var(--win); --green-bg:var(--win-bg); --green-line:var(--win-line);
  --violet:var(--wolf); --violet-bg:var(--wolf-bg); --violet-line:var(--wolf-line);
  --slate:var(--u0); --slate-bg:var(--u0-bg); --slate-line:var(--u0-line);
  --tint:rgba(34,49,106,.06); --tint2:rgba(34,49,106,.12);
  --sans:var(--font-ui); --display:var(--font-ui); --mono:var(--font-ui); --code:var(--font-code);
  --r:var(--r-md);
  --shadow-sm:var(--shadow-1); --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3);
  --side-w:var(--rail-w); --side-mini:var(--rail-mini);
}

/* ================================================================ dark theme
   The brand's deep navy with gold for action: text is near-white, links and the primary button are light gold carrying
   deep-navy text, and the urgency scale climbs from grey-navy to the brightest gold. The brand plate stays white. The same
   block twice: once for a person who chose dark, once for "system" on a computer set to dark (test/theme.test.ts keeps
   them equal). The legacy aliases (--panel:var(--surface)...) follow by themselves: they are worked out on <html>. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-page:#0B1029; --surface:#131A3A; --surface-2:#1A2249; --surface-sunk:#0E1431; --surface-raised:#1A2249;
  --surface-glass:rgba(11,16,41,.74);
  --line:#2C376A; --line-2:#37427A; --edge:#56619A; --scrim:rgba(0,0,0,.6);
  --ink:#F5F6FA; --ink-2:#CDD2E6; --ink-3:#A3AAC8; --ink-inverse:#131A3A;
  --accent:#EFD580; --accent-fill:#EFD580; --accent-fill-hover:#F6E3A6; --accent-deep:#F6E3A6;
  --accent-bg:#2A2F45; --accent-bg-2:#353A52; --accent-line:#6B5F3A; --accent-ring:rgba(239,213,128,.3); --on-accent:#131A3A;
  --wolf:#EFD580; --wolf-fill:#C0975B; --wolf-bg:#2B2A33; --wolf-line:#6B5F3A;
  --win:#EFD580; --win-fill:#C0975B; --win-bg:#2A2A30; --win-line:#6B5F3A;
  --u0:#B3B9D3; --u0-fill:#6A7398; --u0-bg:#1C2448; --u0-line:#37427A;
  --u1:#C3CCF0; --u1-fill:#7C8BD0; --u1-bg:#1F2A5C; --u1-line:#3B4A8C;
  --u2:#C9A468; --u2-fill:#C0975B; --u2-bg:#26283A; --u2-line:#5E5134;
  --u3:#F3DE96; --u3-fill:#EFD580; --u3-bg:#3A3418; --u3-line:#8A7A40; --on-u3:#131A3A;
  --brand-plate:#FFFFFF; --brand-plate-line:#37427A;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 1px 2px rgba(0,0,0,.3),0 2px 8px -2px rgba(0,0,0,.35);
  --shadow-3:0 2px 4px rgba(0,0,0,.35),0 10px 24px -8px rgba(0,0,0,.5);
  --hover:rgba(245,246,250,.06);
  --bg:#0B1029; --chrome-hover:rgba(245,246,250,.06);
  --tint:rgba(239,213,128,.08); --tint2:rgba(239,213,128,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-page:#0B1029; --surface:#131A3A; --surface-2:#1A2249; --surface-sunk:#0E1431; --surface-raised:#1A2249;
    --surface-glass:rgba(11,16,41,.74);
    --line:#2C376A; --line-2:#37427A; --edge:#56619A; --scrim:rgba(0,0,0,.6);
    --ink:#F5F6FA; --ink-2:#CDD2E6; --ink-3:#A3AAC8; --ink-inverse:#131A3A;
    --accent:#EFD580; --accent-fill:#EFD580; --accent-fill-hover:#F6E3A6; --accent-deep:#F6E3A6;
    --accent-bg:#2A2F45; --accent-bg-2:#353A52; --accent-line:#6B5F3A; --accent-ring:rgba(239,213,128,.3); --on-accent:#131A3A;
    --wolf:#EFD580; --wolf-fill:#C0975B; --wolf-bg:#2B2A33; --wolf-line:#6B5F3A;
    --win:#EFD580; --win-fill:#C0975B; --win-bg:#2A2A30; --win-line:#6B5F3A;
    --u0:#B3B9D3; --u0-fill:#6A7398; --u0-bg:#1C2448; --u0-line:#37427A;
    --u1:#C3CCF0; --u1-fill:#7C8BD0; --u1-bg:#1F2A5C; --u1-line:#3B4A8C;
    --u2:#C9A468; --u2-fill:#C0975B; --u2-bg:#26283A; --u2-line:#5E5134;
    --u3:#F3DE96; --u3-fill:#EFD580; --u3-bg:#3A3418; --u3-line:#8A7A40; --on-u3:#131A3A;
    --brand-plate:#FFFFFF; --brand-plate-line:#37427A;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 1px 2px rgba(0,0,0,.3),0 2px 8px -2px rgba(0,0,0,.35);
    --shadow-3:0 2px 4px rgba(0,0,0,.35),0 10px 24px -8px rgba(0,0,0,.5);
    --hover:rgba(245,246,250,.06);
    --bg:#0B1029; --chrome-hover:rgba(245,246,250,.06);
    --tint:rgba(239,213,128,.08); --tint2:rgba(239,213,128,.14);
  }
}
/* Motion is a courtesy, not a requirement (the global kill-switch is further down). */
@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:0ms; --t-base:0ms; --t-slow:0ms; }
}
*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:400 15px/1.5 var(--sans);font-variant-numeric:lining-nums;text-rendering:optimizeLegibility;font-kerning:normal;font-feature-settings:"kern","liga","lnum";overflow-wrap:break-word}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:2px}
a:hover{color:var(--accent-deep);text-decoration-color:currentColor}
b,strong{font-weight:600}
img{max-width:100%}
code,kbd,.code{font-family:var(--font-code)}
/* figures that line up in a column keep their tabular widths */
table,.mono,.num,.udate,.kbd,.navbadge,.tile b,input[type=date]{font-variant-numeric:lining-nums tabular-nums}
::selection{background:var(--accent-bg-2);color:var(--ink)}
/* Quoted source text (an order's words, OCR'd) can hold a long unbroken run such as "*****" or a file path. Allowing a
   break anywhere keeps that run from widening its grid column past a phone's screen (found on the Court orders panel). */
blockquote{overflow-wrap:anywhere}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--ink-inverse);padding:10px 14px;border-radius:var(--r-sm);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}

/* ------------------------------------------------------------------ the shell */
.shell{min-height:100vh}
/* The nav rail (DESIGN.md 4.1): white with a hairline; the brand plate at the top; the active place an accent-tint pill
   with an accent icon, label and a 3px rail at the left edge. (The class stays .side: .rail is the row of buttons.) */
.side{position:fixed;top:0;bottom:0;left:0;width:var(--rail-w);z-index:70;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
  border-right:1px solid var(--line);transition:width .22s var(--ease),transform .25s var(--ease)}
.side-top{position:relative;display:flex;align-items:center;gap:8px;padding:14px 12px 10px 14px}
/* the brand plate: the official mark and wordmark, black, on white in BOTH themes (the logo is never inverted, so it
   carries its own ground); a link to Today */
.side-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:8px 12px;border-radius:var(--r-md);background:var(--brand-plate);
  border:1px solid var(--brand-plate-line);color:#131A3A;text-decoration:none;box-shadow:var(--shadow-1)}
.side-brand:hover{border-color:var(--edge)}
.side-mark{width:52px;height:auto;flex:none;display:block}
/* the official wordmark (STOOPS / LAW FIRM), cropped from the logo; it narrows rather than overflow beside the close button */
.side-name{display:block;width:126px;height:auto;flex:0 1 auto;min-width:0}
.side .side-x{display:none}
.side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 16px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.navgroup{margin-top:14px}
.navgroup:first-child{margin-top:4px}
.navhead{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink3);padding:8px 10px 8px}
.navlink{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;margin:1px 0;border-radius:var(--r-sm);color:var(--ink2);text-decoration:none;font:500 13.5px/1.25 var(--sans);transition:background var(--t-fast),color var(--t-fast)}
.navlink .ico{width:19px;height:19px;color:var(--ink3);transition:color var(--t-fast)}
.navlink:hover{background:var(--hover);color:var(--ink)}
.navlink:hover .ico{color:var(--ink2)}
.navlink[aria-current="page"]{background:var(--accent-bg);color:var(--accent);font-weight:600}
.navlink[aria-current="page"] .ico{color:var(--accent)}
.navlink[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--wolf-fill)}
.navlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a count beside a place: neutral, u3 (Today: needs you) or wolf (Tasks: drafts ready); navBadge() in lib.js */
.navbadge{margin-left:auto;min-width:20px;padding:2px 7px;border-radius:var(--r-pill);font:600 12px/1.3 var(--sans);text-align:center;background:var(--surface-sunk);color:var(--ink2)}
.navbadge.u3{background:var(--u3-bg);color:var(--u3);box-shadow:inset 0 0 0 1px var(--u3-line)}
.navbadge.wolf{background:var(--wolf-bg);color:var(--wolf);box-shadow:inset 0 0 0 1px var(--wolf-line)}
.side-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;gap:6px}
.side-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-sm);border:0;background:none;color:var(--ink3);font:500 12.5px var(--sans);cursor:pointer}
.side-toggle:hover{background:var(--hover);color:var(--ink)}
.side-toggle .ico{transition:transform .2s var(--ease)}
/* the theme switch: light / system / dark, a segmented control in the rail's footer */
.themesw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--r-sm)}
.themesw button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:5px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink3);font:600 12px/1 var(--sans);cursor:pointer}
.themesw button .ico{width:15px;height:15px}
.themesw button:hover{color:var(--ink)}
.themesw button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.scrim{position:fixed;inset:0;z-index:65;background:var(--scrim);}

.main-col{margin-left:var(--rail-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .22s var(--ease)}
/* the top bar (60px, a solid surface with a hairline; no glass, so its text is never blurred): the command bar, New task, the account */
.topbar{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--ink2);cursor:pointer}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}
.iconbtn .ico{width:20px;height:20px}
.menu-btn,.top-brand{display:none}
/* on a phone the brand plate moves here, small */
.top-brand{align-items:center;gap:7px;padding:4px 8px;border-radius:var(--r-sm);background:var(--brand-plate);border:1px solid var(--brand-plate-line);color:#131A3A;text-decoration:none;min-width:0}
.top-brand img{display:block;height:auto}
.top-mark{width:34px;flex:none}
.top-word{width:84px;flex:0 1 auto;min-width:0}
.newtask{flex:none}

/* ------------------------------------------------------------------ the command bar (Ctrl K / Cmd K; DESIGN.md 4.2)
   The top-bar field is a button that opens one dialog to ask WOLF or jump anywhere. */
.cmd{position:relative;flex:1;max-width:620px;display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 13px;border-radius:var(--r-md);background:var(--surface-sunk);border:1px solid transparent;
  color:var(--ink3);font:400 14px/1 var(--sans);text-align:left;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.cmd:hover{border-color:var(--line-2);background:var(--surface)}
.cmd .ico{color:var(--wolf)}
.cmd-ico,.pal-spark{display:inline-flex;flex:none}
.cmd-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbd{display:inline-flex;gap:3px;align-items:center;font:600 12px var(--sans);color:var(--ink3);padding:3px 7px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);pointer-events:none;white-space:nowrap}
.pal-scrim{position:fixed;inset:0;z-index:110;background:var(--scrim)}
.pal{position:fixed;z-index:111;left:0;right:0;top:12vh;margin:0 auto;width:min(680px,calc(100vw - 32px));max-height:76vh;display:flex;flex-direction:column;
  background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);overflow:hidden;animation:palin var(--t-slow) var(--ease-spring) both}
@keyframes palin{from{opacity:0}to{opacity:1}}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pal-in .ico{color:var(--wolf);width:20px;height:20px}
.pal-in input{flex:1;min-width:0;height:40px;border:0;background:none;box-shadow:none;padding:0;font-size:16px;color:var(--ink)}
.pal-in input:focus{box-shadow:none;outline:none}
.pal-in input::-webkit-search-cancel-button{display:none}
.pal-res{flex:1;overflow-y:auto;padding:6px}
.pal-group{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink3);padding:12px 12px 6px}
.pal-opt{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);text-decoration:none}
.pal-opt[aria-selected="true"]{background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent-line)}
.pal-opt>span:nth-child(2){min-width:0}
.pal-opt .nm{display:block;font-size:14px}
.pal-opt .sub{display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface-sunk);color:var(--ink2)}
.pal-ic .ico{width:17px;height:17px}
.pal-ic.wolf{background:var(--wolf-bg);color:var(--wolf)}
.pal-note{padding:14px 12px;color:var(--ink3);font-size:13px}
.pal-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3);background:var(--surface-2)}

.who{margin-left:auto;position:relative;display:flex;align-items:center}
.whobtn{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border-radius:var(--r-md);border:1px solid transparent;background:none;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.whobtn:hover,.whobtn[aria-expanded="true"]{background:var(--hover)}
.whotext{display:flex;flex-direction:column;line-height:1.2}
.whotext b{font-size:13.5px}
.whotext span{font-size:12px;color:var(--ink3);text-transform:capitalize}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);font:600 12.5px/1 var(--sans);letter-spacing:.04em}
/* the account's initials (top right; Gabe: "I love the user's initials in the top right ... make it cooler"): a disc from
   navy to deep navy, a thin light-gold ring, the initials in light-gold small capitals (11.7:1), a soft gold halo on hover
   and focus. The same in both themes: it is the brand. */
.whobtn .avatar,.whohead .avatar{position:relative;width:38px;height:38px;color:var(--brand-gold-light);background:radial-gradient(120% 120% at 30% 20%,var(--brand-navy) 0%,var(--brand-deep) 70%);
  box-shadow:inset 0 0 0 1px rgba(239,213,128,.75),0 0 0 2px var(--surface),0 0 0 3px rgba(239,213,128,.28);font:600 15px/1 var(--font-ui);font-variant-caps:all-small-caps;letter-spacing:.08em;transition:box-shadow var(--t-fast)}
.whobtn:hover .avatar,.whobtn:focus-visible .avatar,.whobtn[aria-expanded="true"] .avatar{box-shadow:inset 0 0 0 1px var(--brand-gold-light),0 0 0 2px var(--surface),0 0 0 3px rgba(239,213,128,.6),0 0 14px rgba(239,213,128,.35)}
.whohead .avatar{width:48px;height:48px;font-size:19px;box-shadow:inset 0 0 0 1px rgba(239,213,128,.75)}
.avatar.lg{width:44px;height:44px;font-size:15px}
.whomenu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:240px;padding:8px;color:var(--ink);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3)}
/* the account menu opens on a small piece of the hero: the initials, the name and the role on deep navy */
.whomenu .whohead{display:flex;gap:12px;align-items:center;padding:14px;margin:0 0 6px;border-radius:var(--r-sm);color:#FFFFFF;
  background:radial-gradient(90% 140% at 100% 0%,rgba(239,213,128,.18),transparent 60%),linear-gradient(135deg,var(--brand-deep),var(--brand-navy))}
.whomenu .whohead .whotext b{font-size:15px;color:#FFFFFF}
.whomenu .whohead .whotext span{font-size:13px;color:#C9CEE3}
.whomenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--r-sm);background:none;font:500 13.5px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.whomenu button:hover{background:var(--accent-bg);color:var(--accent)}
.whomenu button .ico{color:var(--ink-3)}
.whomenu button:hover .ico{color:var(--accent)}

.wrap{width:100%;max-width:var(--content-max);margin:0 auto;padding:30px 36px 96px}
.wrap:focus{outline:none}

/* the phone's tab bar: Home, Phone, Matters, Calendar, Mail, More (More opens the full menu as a sheet). Hidden above 767px. */
.tabbar{display:none}

/* collapsed to icons: chosen on a wide screen (side-mini, remembered), or by default on a medium one (below) */
@media (min-width:1200px){
  .side-mini .side{width:var(--rail-mini)}
  .side-mini .main-col{margin-left:var(--rail-mini)}
  .side-mini .side-name,.side-mini .navhead,.side-mini .side-toggle .navlabel,.side-mini .navbadge{display:none}
  .side-mini .side-top{justify-content:center;padding:14px 8px 10px}
  .side-mini .side-brand{flex:none;justify-content:center;padding:6px}
  .side-mini .side-mark{width:40px}
  .side-mini .navgroup{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .side-mini .navgroup:first-child{border-top:0;padding-top:0}
  .side-mini .navlink{justify-content:center;padding:10px}
  .side-mini .navlink[aria-current="page"]::before{left:-12px}
  .side-mini .side-toggle{justify-content:center}
  .side-mini .side-toggle .ico{transform:rotate(180deg)}
  .side-mini .themesw{grid-template-columns:minmax(0,1fr)}
  /* in the rail a link's label is kept for screen readers and shown as a tooltip (.navtip, placed by app.js) */
  .side-mini .navlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.navtip{position:fixed;z-index:90;background:var(--ink);color:var(--ink-inverse);padding:6px 11px;border-radius:var(--r-sm);font:500 12.5px/1.2 var(--sans);box-shadow:var(--shadow-3);pointer-events:none;white-space:nowrap}
.navtip::before{content:"";position:absolute;left:-4px;top:calc(50% - 4px);width:8px;height:8px;background:inherit;transform:rotate(45deg)}

@media (min-width:768px) and (max-width:1199px){
  .side:not(.open){width:var(--rail-mini)}
  .main-col{margin-left:var(--rail-mini)}
  .side:not(.open) .side-name,.side:not(.open) .navhead,.side:not(.open) .side-foot,.side:not(.open) .navbadge{display:none}
  .side:not(.open) .side-top{justify-content:center;padding:14px 8px 10px}
  .side:not(.open) .side-brand{flex:none;justify-content:center;padding:6px}
  .side:not(.open) .side-mark{width:40px}
  .side:not(.open) .navgroup{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .side:not(.open) .navgroup:first-child{border-top:0;padding-top:0}
  .side:not(.open) .navlink{justify-content:center;padding:10px}
  .side:not(.open) .navlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .side.open{box-shadow:var(--shadow-3)}
  .side.open .side-toggle{display:none}
  .side.open .side-x{display:inline-flex;color:var(--ink2)}
  .side.open .side-x:hover{background:var(--hover);color:var(--ink)}
  .menu-btn{display:inline-flex}
  .side-mini .main-col{margin-left:var(--rail-mini)}
  .topbar{padding:0 22px 0 14px}
  .wrap{padding:26px 26px 90px}
}
/* a phone: a light top bar with the small brand plate, the command bar as an icon, the tab bar at the bottom, and the
   full menu (with the theme switch) as a sheet from the side */
@media (max-width:767px){
  .side{width:min(86vw,320px);transform:translateX(-102%);box-shadow:none}
  .side.open{transform:none;box-shadow:var(--shadow-3)}
  .side-toggle{display:none}
  .side .side-x{display:inline-flex;color:var(--ink2)}
  .side .side-x:hover{background:var(--hover);color:var(--ink)}
  .main-col,.side-mini .main-col{margin-left:0}
  .topbar{height:58px;padding:0 8px;gap:6px}
  .top-brand{display:inline-flex}
  .menu-btn{display:none}
  .cmd{flex:none;width:42px;max-width:none;margin-left:auto;padding:0;justify-content:center;background:none}
  .cmd-text,.cmd .kbd,.newtask .navlabel{display:none}
  .newtask{padding:8px 10px}
  .who{margin-left:2px}
  .pal{top:0;width:100vw;max-height:100dvh;border-radius:0 0 var(--r-xl) var(--r-xl);border-width:0 0 1px}
  .pal-foot>span{display:none}
  .pal-opt .sub{white-space:normal}
  .whobtn{padding:4px}
  .whobtn .whotext{display:none}
  .wrap{padding:20px 16px calc(var(--tabbar-h) + 40px)}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    padding:4px 4px env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;border:0;background:none;border-radius:var(--r-sm);color:var(--ink3);
    font:600 12px/1.1 var(--sans);text-decoration:none;cursor:pointer}
  .tabbar .ico{width:21px;height:21px}
  .tabbar [aria-current="page"]{color:var(--accent)}
  .tabbar [aria-current="page"] .ico{color:var(--accent)}
}

/* ------------------------------------------------------------------ page heads and sections */
.hero{padding:0 0 6px}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 12.5px/1.3 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--win);margin-bottom:10px}
.eyebrow::before{content:"";flex:none;width:22px;height:1px;background:var(--wolf-fill)}
.eyebrow a{color:inherit}
h1{margin:0;font:400 clamp(27px,2.7vw,36px)/1.12 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
h1 em{font-style:italic;font-weight:400;color:var(--win)}
.lede{color:var(--ink2);max-width:80ch;margin:12px 0 0;font-size:16px;line-height:1.55}
section{margin-top:30px}
.sechead{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.sechead h2{margin:0;font:600 17px/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.sechead .rule{flex:1;height:1px;background:var(--line);min-width:20px}
.sechead .note{font:600 12px/1 var(--sans);color:var(--ink2);background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);position:relative;min-width:0}
.pad{padding:20px 22px}
@media(max-width:640px){.pad{padding:16px}}
/* a panel's first subhead is its title; any later one labels a part of it */
.subhead{font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.panel>.subhead:first-child,.panel>.skel:first-child+.subhead{display:flex;align-items:center;gap:10px;font:600 17px/1.3 var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--ink);padding-bottom:12px;margin-bottom:14px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,var(--panel) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--panel) 30%,transparent) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(19,26,58,.13),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(19,26,58,.13),transparent) right/12px 100% no-repeat scroll}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:12px;margin-top:20px}
.tile{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 15px;box-shadow:var(--shadow-sm);min-width:0}
.tile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--line2)}
.tile h3{margin:0 0 10px;font:600 12px/1.35 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.tile b{display:block;font:600 29px/1 var(--sans);letter-spacing:-.025em;color:var(--ink);overflow-wrap:normal}
@media(max-width:640px){.vitals{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}.tile{padding:14px 14px 13px}.tile b{font-size:22px}}
.tile span{display:block;font-size:12.5px;line-height:1.4;color:var(--ink3);margin-top:8px}
a.tilelink{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s var(--ease)}
a.tilelink::after{content:"";position:absolute;right:16px;top:17px;width:7px;height:7px;border-top:2px solid var(--ink3);border-right:2px solid var(--ink3);transform:rotate(45deg);opacity:.55;transition:opacity .15s,transform .15s var(--ease)}
a.tilelink:hover,a.tilelink:focus-visible{border-color:var(--edge);box-shadow:var(--shadow)}
a.tilelink:hover::after{opacity:1}
.tile.red::before{background:var(--u3)} .tile.amb::before{background:var(--u2)} .tile.grn::before{background:var(--win)} .tile.gold::before{background:var(--accent-line)} .tile.cy::before{background:var(--u0)}
.tile.red b{color:var(--u3)} .tile.amb b{color:var(--u2)} .tile.grn b{color:var(--win)} .tile.gold b{color:var(--accent)} .tile.cy b{color:var(--ink)}
/* the 2028 hues (lib.js HUES): the rail in the level's fill, the figure in its text colour; never a coloured card */
.tile.u0::before{background:var(--u0-fill)} .tile.u1::before{background:var(--u1-fill)} .tile.u2::before{background:var(--u2-fill)} .tile.u3::before{background:var(--u3-fill)}
.tile.wolf::before{background:var(--wolf-fill)} .tile.acc::before{background:var(--accent-fill)} .tile.win::before{background:var(--win-fill)}
.tile.u1 b{color:var(--u1)} .tile.u2 b{color:var(--u2)} .tile.u3 b{color:var(--u3)} .tile.wolf b{color:var(--wolf)} .tile.acc b{color:var(--accent)} .tile.win b{color:var(--win)}

/* ------------------------------------------------------------------ tables */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
th{text-align:left;font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:0 12px 11px;border-bottom:1px solid var(--line2);vertical-align:bottom}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
th:first-child,td:first-child{padding-left:4px}
th:last-child,td:last-child{padding-right:4px}
tr:last-child td{border-bottom:0}
tr.row{cursor:pointer}
tr.row td{transition:background .12s}
tr.row:hover td,tr.row:focus td{background:var(--accent-bg);outline:none}
tr.row:focus-visible td{box-shadow:inset 0 2px 0 var(--accent-fill),inset 0 -2px 0 var(--accent-fill)}
td.num,th.num{text-align:right;white-space:nowrap}
.nm{font-weight:600;color:var(--ink)}
.sub{font-size:13px;color:var(--ink3);line-height:1.45}
.mono{font-size:13px;color:var(--ink2);font-variant-numeric:lining-nums tabular-nums}
.big{font-size:15px;font-weight:600;letter-spacing:-.01em}
.red{color:var(--u3)} .amb{color:var(--u2)} .grn{color:var(--win)} .dim{color:var(--ink3)} .gold{color:var(--accent)} .cy{color:var(--u0)}
/* on a phone, a table marked .cards-sm becomes one card per row; each cell names its column (data-label) */
@media(max-width:640px){
  table.cards-sm{min-width:0!important}
  table.cards-sm thead{display:none}
  table.cards-sm,table.cards-sm tbody,table.cards-sm tr,table.cards-sm td{display:block;width:100%}
  table.cards-sm tr{padding:12px 4px;border-bottom:1px solid var(--line)}
  table.cards-sm tr:last-child{border-bottom:0}
  table.cards-sm td{border:0;padding:3px 0;text-align:left}
  table.cards-sm td[data-label]{display:flex;gap:12px;align-items:baseline}
  table.cards-sm td[data-label]::before{content:attr(data-label);flex:0 0 96px;font:600 12px/1.6 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
  /* a number column's nowrap (td.num) would keep "Sep 30, 2029 · protect by Sep 28, 2029" on one line, wider than a
     375 px phone beside the 96 px label: on a card it wraps, and a value never pushes its card past the scroll box */
  table.cards-sm td.num{text-align:left;white-space:normal}
  table.cards-sm td[data-label]>*{min-width:0;overflow-wrap:anywhere}
  table.cards-sm td:first-child{padding-bottom:6px}
  tr.row:hover td{background:none}
}

/* ------------------------------------------------------------------ chips, buttons, fields */
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.25 var(--sans);letter-spacing:.005em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);white-space:nowrap;vertical-align:baseline}
.chip.red{color:var(--u3);background:var(--u3-bg);border-color:var(--u3-line)}
.chip.amb{color:var(--u2);background:var(--u2-bg);border-color:var(--u2-line)}
.chip.grn{color:var(--win);background:var(--win-bg);border-color:var(--win-line)}
.chip.gold{color:var(--accent-deep);background:var(--accent-bg);border-color:var(--accent-line)}
.chip.cy{color:var(--u0);background:var(--u0-bg);border-color:var(--u0-line)}
.chip.vio{color:var(--wolf);background:var(--wolf-bg);border-color:var(--wolf-line)}
/* Pill (DESIGN.md 4.3): a status readout. Hues u0..u3, wolf, win, acc, or neutral. .pill.u3.solid (white on the pink
   fill) is the only filled pill, kept for "Act now" on a Today card. A span .chip with a hue reads the same. */
.pill{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.25 var(--sans);padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);white-space:nowrap;vertical-align:baseline}
.pill.u0,.chip.u0{color:var(--u0);background:var(--u0-bg);border-color:var(--u0-line)}
.pill.u1,.chip.u1{color:var(--u1);background:var(--u1-bg);border-color:var(--u1-line)}
.pill.u2,.chip.u2{color:var(--u2);background:var(--u2-bg);border-color:var(--u2-line)}
.pill.u3,.chip.u3{color:var(--u3);background:var(--u3-bg);border-color:var(--u3-line)}
.pill.wolf,.chip.wolf{color:var(--wolf);background:var(--wolf-bg);border-color:var(--wolf-line)}
.pill.win,.chip.win{color:var(--win);background:var(--win-bg);border-color:var(--win-line)}
.pill.acc,.chip.acc{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-line)}
.pill.u3.solid{color:var(--on-u3);background:var(--u3-fill);border-color:var(--u3-fill)}
/* Chip as a filter you press (a button or link .chip): white, 12.5px/500; pressed is the accent tint with a count in it.
   An urgency filter borrows its level's tint when pressed (button.chip.u3). */
button.chip,a.chip{font:500 12.5px/1.25 var(--sans);padding:6px 11px;background:var(--surface);color:var(--ink-2);border-color:var(--line-2);cursor:pointer;text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
button.chip:hover,a.chip:hover{border-color:var(--edge);color:var(--ink)}
button.chip[aria-pressed="true"],a.chip[aria-current="page"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-line)}
button.chip.u2[aria-pressed="true"]{background:var(--u2-bg);color:var(--u2);border-color:var(--u2-line)}
button.chip.u3[aria-pressed="true"]{background:var(--u3-bg);color:var(--u3);border-color:var(--u3-line)}
button.chip:not([aria-pressed="true"]).u2,button.chip:not([aria-pressed="true"]).u3{background:var(--surface);color:var(--ink-2);border-color:var(--line-2)}
.chip .n{font-weight:600;color:inherit;opacity:.8}
/* a date in its urgency colour (urgency() in lib.js gives the level and the words) */
.udate{font-weight:600;white-space:nowrap}
.udate.u0{color:var(--u0)} .udate.u1{color:var(--u1)} .udate.u2{color:var(--u2)} .udate.u3{color:var(--u3)}
/* a card that carries urgency: a 3px rail in the level's fill at its left edge, never a coloured background */
.panel.u2,.panel.u3{border-left:3px solid var(--u2-fill)}
.panel.u3{border-left-color:var(--u3-fill)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
input,select,textarea{font:400 14px/1.4 var(--sans);color:var(--ink);background:var(--surface-sunk);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 11px;min-height:38px;max-width:100%;transition:border-color .15s,box-shadow .15s}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--accent-fill);width:16px;height:16px}
input[type=date]{font-variant-numeric:tabular-nums}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C86A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
textarea{width:100%;min-height:76px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--ink3)}
input:hover,select:hover,textarea:hover{border-color:var(--edge)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--surface);border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-ring)}
.toggle{display:inline-flex;gap:2px;flex-wrap:wrap;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md)}
.toggle button{font:600 13px/1.2 var(--sans);padding:7px 13px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink2);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.toggle button:hover{color:var(--ink)}
.toggle button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.act{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 13px/1.2 var(--sans);padding:8px 14px;min-height:36px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.act:hover{border-color:var(--edge);background:var(--panel2);color:var(--ink)}
.act.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);box-shadow:var(--shadow-1)}
.act.primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);color:var(--on-accent)}
.act.ghost{background:none;border-color:transparent;box-shadow:none;color:var(--accent)}
.act.ghost:hover{background:var(--accent-bg);color:var(--accent)}
.act:disabled,.act[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.act .ico{width:16px;height:16px}
.rail{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
/* a long button label in a rail ("Ask the client about the ...") wraps instead of pushing a 375px phone sideways */
.rail .act{white-space:normal;max-width:100%;text-align:left}
.note{font-size:13px;color:var(--ink2);line-height:1.55}
p.note{margin:10px 0}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;margin-top:20px}
@media(max-width:980px){.grid2{grid-template-columns:minmax(0,1fr)}}
/* align-content:start: a column shorter than its neighbour keeps its panels at their own height instead of
   stretching each one to share the gap (a long court-dates list made the client page's left panels ~2000px tall) */
.stack{display:grid;gap:18px;min-width:0;align-content:start}
.stack>section{margin-top:0}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 16px;margin:0}
.kv dt{font:600 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding-top:1px}
.kv dd{margin:0}
@media(max-width:560px){.kv{grid-template-columns:minmax(0,1fr);gap:2px 0}.kv dd{margin-bottom:10px}}
.flag{padding:10px 13px;border:1px solid var(--u2-line);border-left:3px solid var(--u2);border-radius:var(--r-sm);background:var(--u2-bg);margin-bottom:8px;font-size:13px;line-height:1.5;color:var(--ink)}
.flag.w3,.flag.w4,.flag.u3{border-color:var(--u3-line);border-left-color:var(--u3);background:var(--u3-bg)}
.flag.w1{border-color:var(--accent-line);border-left-color:var(--accent-line);background:var(--accent-bg)}
.ev{display:grid;grid-template-columns:100px 104px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.ev:last-child{border-bottom:0}
.ev .k{font:600 12px/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ev.client .k{color:var(--win)}
/* On a phone two fixed columns leave the words about 120px, so a court date's text ran one or two words a line.
   There the date and kind share the first line and the text takes the full width below. Every .ev has three parts. */
@media(max-width:560px){.ev{grid-template-columns:96px minmax(0,1fr);gap:3px 10px}.ev>:nth-child(3){grid-column:1/-1}}
.banner{padding:12px 16px;font-size:13.5px;line-height:1.5;border:1px solid var(--u3-line);border-radius:var(--r-sm);background:var(--u3-bg);color:var(--ink)}
.banner b{color:var(--u3)}
.banner.caution,.banner.u2{border-color:var(--u2-line);background:var(--u2-bg)}
.banner.caution b,.banner.u2 b{color:var(--u2)}
#health .banner{border-width:0 0 1px;border-radius:0;padding:11px 36px}
@media(max-width:767px){#health .banner{padding:10px 16px}}
/* no logo watermark here: the official mark is shown black on white or not at all (test/brand.test.ts) */
.empty{padding:30px 22px;color:var(--ink2);text-align:center;font-size:14px;line-height:1.55}
.empty.err::before{content:"Something went wrong";display:block;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--u3);margin:0 0 10px}
.skel{height:12px;width:40%;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-sunk) 0%,var(--surface-2) 40%,var(--surface-sunk) 80%);background-size:220% 100%;animation:sh 1.4s ease-in-out infinite}
.skel+.skel{margin-top:10px}
.skel.h28{height:28px;width:46%;border-radius:var(--r-sm)}
.skel.w70{width:70%} .skel.w55{width:55%} .skel.w25{width:25%;height:10px}
.skelpage .tile{min-height:104px}
.skelpage .tile .skel{width:60%}
/* Today's lead (the work queue, public/features/work.js) holds its place while that module loads, so the tiles below do not jump */
.wklead-skel{margin:22px 0 28px}
@keyframes sh{0%{background-position:120% 0}100%{background-position:-120% 0}}
.toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:12px;max-width:min(92vw,560px);padding:12px 18px 12px 14px;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--win-fill);border-radius:var(--r-md);box-shadow:var(--shadow-3);font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(calc(100% + 40px));transition:transform .28s var(--ease),opacity .2s;pointer-events:none}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast.err{border-left-color:var(--u3-fill)}
.toast:hover{transition-delay:0s}
@media (max-width:767px){.toast{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px))}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 14px;margin-top:12px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld span{font:600 12px/1.3 var(--sans);color:var(--ink2);text-transform:none;letter-spacing:0}
.fld input,.fld select,.fld textarea{width:100%}
.recform{border-top:1px solid var(--line);margin-top:14px;padding-top:6px}
.rec .sechead .act{padding:6px 12px;min-height:32px}
.rec .sechead h2{font-size:15px}
.bar{height:8px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent-fill)}

/* ------------------------------------------------------------------ people (My Board) and the story */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:12px}
.person{display:block;padding:16px 18px;text-decoration:none;color:inherit;border-left:3px solid var(--line2);transition:border-color .15s,box-shadow .15s,transform .15s var(--ease)}
.person:hover,.person:focus-visible{border-left-color:var(--accent-line);box-shadow:var(--shadow);color:inherit}
.ptop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ptop .nm{font-size:15.5px}
.story1{margin-top:7px;color:var(--ink);font-size:13.5px;line-height:1.5}
.why{margin-top:8px;font-size:13px;color:var(--u2);font-weight:500}
.ask{margin-top:10px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:9px}
.storypanel{border-left:3px solid var(--accent-line);background:var(--surface)}
.storygrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:8px 32px;align-items:start}
.storyside{min-width:0;padding-left:24px;border-left:1px solid var(--line)}
.storyside .aboutedit .formgrid{grid-template-columns:minmax(0,1fr)}
.storygrid:has(.aboutedit[open]){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.storygrid,.storygrid:has(.aboutedit[open]){grid-template-columns:minmax(0,1fr)}.storyside{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px}}
.storylines p{margin:0 0 7px;font-size:14.5px;line-height:1.6;max-width:84ch;color:var(--ink)}
.storylines .src{display:inline-block;font:600 12px/1.4 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-left:6px;padding:1px 7px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);vertical-align:1px}
.asks ul{margin:0;padding-left:20px;color:var(--ink2);font-size:13.5px}
.asks li{margin-bottom:5px}
.aboutedit{margin-top:14px}
.aboutedit summary{display:inline-flex;list-style:none;cursor:pointer}
.aboutedit summary::-webkit-details-marker{display:none}
.stack>*,.grid2>*{min-width:0}

/* ------------------------------------------------------------------ the page hero (Clients list, client page)
   Home's language (public/features/work.css .td-hero, the same values): the brand's deep navy to navy with a soft
   light-gold glow in its top corner, a gold hairline along its top, a Times New Roman title with its emphasis in italic
   light gold, and WOLF's reading of the page beneath it. The hero is the brand itself, so its colours are the same in
   light and dark: white and navy-tinted whites on deep navy (the lightest small text, #C9CEE3, is 4.7:1 even under the
   glow; the gold glow sits behind the title, not the small print). No stripes, no glass, no blur: every edge is a whole-pixel line.
   Classes: pghero, pghero-*. */
.pghero{--h-ink:#FFFFFF;--h-ink-2:#D7DBEC;--h-ink-3:#C9CEE3;
  position:relative;isolation:isolate;overflow:hidden;display:flex;gap:22px 32px;align-items:stretch;justify-content:space-between;flex-wrap:wrap;
  margin:0 0 18px;padding:clamp(22px,3.4vw,38px) clamp(20px,3.6vw,42px);border-radius:var(--r-xl);border:1px solid rgba(239,213,128,.18);color:var(--h-ink-2);
  background:radial-gradient(90% 140% at 100% 0%,rgba(239,213,128,.22),transparent 58%),radial-gradient(70% 120% at 0% 100%,rgba(192,151,91,.16),transparent 60%),linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-navy) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px -8px rgba(19,26,58,.4)}
.pghero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(239,213,128,.5),transparent) top/100% 1px no-repeat}
.pghero-main{min-width:0;flex:1 1 440px;display:flex;flex-direction:column;justify-content:flex-end}
.pghero-eye{font:600 12px/1.3 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-gold-light)}
.pghero h1{margin:10px 0 12px;font:400 clamp(30px,4.2vw,46px)/1.08 var(--font-ui);letter-spacing:-.01em;color:var(--h-ink);text-wrap:balance}
.pghero h1 em{font-style:italic;font-weight:400;color:var(--brand-gold-light)}
.pghero-lede{margin:0;max-width:78ch;font-size:15.5px;line-height:1.55;color:var(--h-ink-2)}
.pghero-lede b{color:var(--h-ink)}
.pghero-lede a{color:var(--brand-gold-light);text-decoration-color:rgba(239,213,128,.5)}
.pghero-lede a:hover{color:var(--h-ink);text-decoration-color:currentColor}
.pghero-w{font-weight:600;letter-spacing:.04em;color:var(--brand-gold-light)}
.pghero-side{flex:0 1 330px;min-width:260px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.pghero :focus-visible{outline-color:var(--brand-gold-light)}
.pghero .ring-track{stroke:rgba(255,255,255,.16)}
.pghero .ring-fill{stroke:var(--brand-gold-light)}
.pghero .ring-text{color:var(--h-ink)}
@media(max-width:640px){
  .pghero{border-radius:var(--r-lg);margin-bottom:14px}
  .pghero-side{flex-basis:100%;min-width:0}
}

/* ------------------------------------------------------------------ the client page */
/* The case header: the hero (.pghero.mhero) holds the client, the file's numbers, the court and claim numbers and the
   actions; on its right a glass card with the statute and its time left, the responsible lawyer and the last client
   contact (a 3px light-gold rail marks one that needs a person); then the stage line (the stepper, restyled for navy) and
   WOLF's reading of the file. Below it, floating over its lower edge, the case facts as white tiles, each with where it
   came from (.fsrc), and on a wide screen what the case is waiting on beside them.
   No logo watermark in the corner: the official mark is black on white or not shown (test/brand.test.ts). */
.mhead{margin:0}
.mhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);grid-template-areas:"main side" "step step" "read read";gap:20px 34px;
  margin:0;padding-bottom:clamp(46px,5vw,58px)}
.mhero>.pghero-main{grid-area:main;justify-content:flex-start}
.mhero>.pghero-side{grid-area:side;justify-content:flex-start;min-width:0}
.mhero>.mh-step{grid-area:step;min-width:0}
.mhero>.mh-step:empty{display:none}
.mhero>.mstatus{grid-area:read;max-width:96ch}
.mname{margin:10px 0 4px;font:400 clamp(32px,4.4vw,50px)/1.05 var(--font-ui);letter-spacing:-.015em;color:var(--h-ink,var(--ink));text-wrap:balance;overflow-wrap:anywhere}
.mhero .mwith{margin:6px 0 0;font-size:15px;color:var(--h-ink-2)}
.mhero .mwith em{font-style:italic;color:var(--brand-gold-light)}
.mhero .mref{margin:8px 0 0;font-size:13.5px;color:var(--h-ink-3)}
.mhero .mref .mono{font-size:13.5px;letter-spacing:.04em;color:var(--h-ink-2)}
.mhero .mref .dim{color:var(--h-ink-3)}
.mh-chips{margin-top:14px}
.mh-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mhero .act{background:rgba(255,255,255,.07);border-color:rgba(239,213,128,.32);color:var(--h-ink)}
.mhero .act:hover{background:rgba(255,255,255,.13);border-color:rgba(239,213,128,.6);color:var(--h-ink)}
.mhero .act.mh-go{background:var(--brand-gold-light);border-color:var(--brand-gold-light);color:var(--brand-deep)}
.mhero .act.mh-go:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--brand-deep)}
/* the glass card: statute, responsible lawyer, last client contact */
.mh-vitals{display:flex;flex-direction:column;gap:0;padding:4px 0;border:1px solid rgba(239,213,128,.26);border-radius:var(--r);background:rgba(255,255,255,.06)}
.mh-v{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:13px 18px}
.mh-v+.mh-v{border-top:1px solid rgba(255,255,255,.09)}
.mh-v::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:transparent}
.mh-v.hot::before{background:var(--brand-gold-light);box-shadow:0 0 12px rgba(239,213,128,.55)}
.mh-v.warm::before{background:var(--brand-gold)}
.mh-k{font:600 12px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--h-ink-3)}
.mh-val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;font-size:17px;font-weight:600;color:var(--h-ink);overflow-wrap:anywhere}
.mh-big{font:400 36px/1 var(--font-ui);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;color:var(--h-ink)}
.mh-v.hot .mh-big{color:var(--brand-gold-light)}
.mh-unit{font-size:14px;font-weight:400;color:var(--h-ink-2)}
.mh-quiet{font-weight:400;color:var(--h-ink-2)}
.mh-sub{font-size:12.5px;line-height:1.5;color:var(--h-ink-3);overflow-wrap:anywhere}
.mh-sub .chip{margin-right:4px}
.mh-c.ok{color:var(--h-ink)}
.mh-c.warn,.mh-c.late{color:var(--brand-gold-light)}
.mh-c.late::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;vertical-align:2px;background:var(--brand-gold-light);box-shadow:0 0 0 3px rgba(239,213,128,.22)}
/* the stage line on navy: done in gold, the current station ringed in light gold, the rest quiet */
.mhero .stepper{margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.mhero .step::before{background:rgba(255,255,255,.16)}
.mhero .step.done::before,.mhero .step.current::before{background:var(--brand-gold)}
.mhero .step-dot{background:var(--brand-deep);border-color:rgba(255,255,255,.26);color:var(--h-ink-3)}
.mhero .step.done .step-dot{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-deep)}
.mhero .step.current .step-dot{background:var(--brand-deep);border-color:var(--brand-gold-light);color:var(--brand-gold-light);box-shadow:0 0 0 5px rgba(239,213,128,.16),0 0 18px rgba(239,213,128,.35)}
.mhero .step.current .step-dot::after{background:var(--brand-gold-light)}
.mhero .step-label,.mhero .step-when{color:var(--h-ink-3)}
.mhero .step.done .step-label{color:var(--h-ink-2)}
.mhero .step.current .step-label{color:var(--h-ink)}
.mhero .step.current .step-when{color:var(--brand-gold-light)}
.mhero .step.blocked .step-dot{background:transparent;border-color:var(--brand-gold-light);color:var(--brand-gold-light)}
.mhero .step.blocked .step-label{color:var(--brand-gold-light)}
.mhero>.mstatus{margin:0;font-size:15px}
/* the case facts: white tiles over the hero's lower edge, each a label, the value with its source, and a line under it */
.mhead-below{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:-32px clamp(10px,2vw,24px) 0}
@media(min-width:1180px){
  .mhead-below:has(>.mwait:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(240px,300px);align-items:start}
}
/* six facts: one row of six on a wide screen, two rows of three beside what the case waits on or on a tablet, three rows
   of two on a phone (never a row of four over a row of two) */
.mfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;min-width:0}
@media(min-width:1180px){.mhead-below:not(:has(>.mwait:not([hidden]))) .mfacts{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fact{position:relative;min-width:0;padding:13px 15px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);transition:border-color var(--t-fast)}
.fact::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--wolf-line),transparent);pointer-events:none}
.fact:hover{border-color:var(--edge)}
.fact .k{display:block;font:600 var(--fs-2xs)/1.3 var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fact .v{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.fact .v.vtxt{display:block;line-height:1.5}
.fact .sub{display:block;font-weight:400;margin-top:3px}
/* where a case fact came from (app.js srcTag; matter.fact_source): quiet for an authoritative source, the soon hue for a
   fact only Filevine gives (a lead to verify, never an alarm) */
.fsrc{display:inline-flex;align-items:center;max-width:100%;margin-left:7px;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r-pill);
  font:500 12px/1.45 var(--font-ui);letter-spacing:.01em;color:var(--ink-3);background:transparent;vertical-align:1px;white-space:normal;text-transform:none}
.fsrc::before{content:"";flex:none;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--wolf-fill)}
.fsrc.fv{font-weight:600;color:var(--u2);background:var(--u2-bg);border-color:var(--u2-line)}
.fsrc.fv::before{background:var(--u2)}
/* in a fact tile the source sits on its own line under the value */
.fact .fsrc{display:flex;width:fit-content;margin:6px 0 0}
/* the file's twelve tabs (Gabe's Filevine; DESIGN.md 4.6): one sticky strip of pill tabs, the chosen one filled in the
   accent with a gold point under its name. It wraps to a second row rather than hide a tab past its edge (a tab nobody
   can see is a tab nobody uses); a phone chooses from a list instead (.mtabsel) */
.mtabbar{position:sticky;top:var(--top-h);z-index:30;margin:18px 0 0;padding:8px 0;background:var(--surface-page)}
.tabs{display:flex;flex-wrap:wrap;gap:3px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 10px;color:var(--ink-3);text-decoration:none;font:600 13.5px/1 var(--font-ui);white-space:nowrap;border-radius:var(--r-pill);transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.tab:hover{color:var(--ink);background:var(--hover)}
.tab[aria-selected="true"]{color:var(--on-accent);background:var(--accent-fill);box-shadow:0 6px 16px -8px var(--accent-ring)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--wolf-fill)}
.tab:focus-visible{outline-offset:2px}
.mtabsel{display:none}
/* at least a screen tall, so moving from a long tab to a short one keeps the tabs where they were */
.tabpanel{padding-top:12px;min-height:calc(100vh - var(--top-h) - 56px)}
.tabpanel:focus{outline:none}
.tabpanel>.stack{gap:18px}
.fpanels{margin-top:18px}
/* a panel brought into view (showPanel) lands under the top bar and the sticky tabs, not behind them */
[data-fp]{scroll-margin-top:calc(var(--top-h) + 124px)}
.fpanels:empty,.tablead:empty{display:none}
/* the case line is in the client page's header; the Case brief does not repeat it */
.mhead.line-shown~.tabpanel [data-fp="brief"] .pl-steps{display:none}
.tablead{margin-bottom:18px}
.ev.party{grid-template-columns:140px minmax(0,1fr)}
.ev.party>.k{display:none}
table.rectable{min-width:520px}
.quick{display:grid;gap:8px}
.reach{display:flex;flex-direction:column;gap:6px}
.reach a,.reach span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.reach .ico{color:var(--ink-3);width:16px;height:16px}
@media(max-width:900px){
  .mhero{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "step" "read"}
}
@media(max-width:879px){
  .mhero .step.current .step-dot{box-shadow:0 0 0 3px rgba(239,213,128,.2)}
}
@media(max-width:767px){
  .mhero{padding:20px 16px 48px;gap:16px}
  .mh-v{padding:12px 16px}
  .mhead-below{margin:-32px 8px 0}
  .mfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fact{padding:11px 12px 10px}
  .mtabbar{top:58px;margin-left:-16px;margin-right:-16px;padding:8px 16px;border-bottom:1px solid var(--line-2)}
  .tabs{display:none}
  .mtabsel{display:block}
  .mtabsel select{width:100%;font-weight:600}
}
/* what the case is waiting on, as a mini task card beside the facts (a white card with WOLF's gold rail: WOLF read it
   from the file; never a coloured background) */
.mwith{margin:6px 0 0;color:var(--ink-2);font-size:14px}
.mref{margin:4px 0 0;color:var(--ink-2);font-size:13px}
.mstatus{position:relative;z-index:1}
.mwait{display:flex;flex-direction:column;gap:6px;min-width:0;padding:13px 15px;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--wolf-fill);border-radius:var(--r-md);box-shadow:var(--shadow-2);position:relative;z-index:1;overflow-wrap:anywhere}
.mwait>.k{font:600 var(--fs-2xs)/1.3 var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--wolf)}
.mwait .sep{color:var(--ink-3)}
/* in the right column each party it waits on starts its own line (the dot becomes the break; screen readers keep the ";") */
@media(min-width:1180px){
  .mhead-below>.mwait .sep{display:block;height:4px;overflow:hidden;color:transparent}
}
.stagewhy{cursor:help}
/* Activity: one timeline, newest first, grouped by month */
.tl-filter{margin:0 0 12px}
.tl-n{font-weight:500;color:var(--ink-3);margin-left:2px}
.tl{list-style:none;margin:0;padding:0}
.tl-month{font:600 var(--fs-2xs)/1.3 var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);padding:14px 0 6px;border-bottom:1px solid var(--line)}
.tl-month:first-child{padding-top:2px}
.tl-item{display:grid;grid-template-columns:100px 104px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.tl-item:last-child{border-bottom:0}
.tl-item .k{font:600 var(--fs-2xs)/1.4 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tl-item.client .k{color:var(--win)}
.tl-note{white-space:pre-wrap}
@media(max-width:560px){.tl-item{grid-template-columns:96px minmax(0,1fr);gap:3px 10px}.tl-item>:nth-child(3){grid-column:1/-1}}
/* Related Cases: the people on the case */
.rel{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.rel li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}

/* ------------------------------------------------------------------ the firm menu's pages: a name, sub-tabs, parts */
/* Every page in the firm menu opens the same way: its name, its sub-tabs (one per view), then, where a sub-tab holds
   several parts, a part bar; the part's own heading follows. Links, not ARIA tabs: each is its own address. */
.hubhead{margin:-8px 0 24px;border-bottom:1px solid var(--line2)}
.hubname{margin:0 0 6px;display:flex;align-items:center;gap:10px;font:600 var(--fs-2xs)/1.3 var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
.hubhead:not(:has(.subtabs)){border-bottom:0;margin-bottom:12px}
.subtabs-wrap{position:relative;min-width:0}
.subtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px;scroll-behavior:smooth}
.subtabs::-webkit-scrollbar{display:none}
/* when the sub-tabs do not all fit they scroll sideways (no scrollbar): the edge they continue past fades, and an arrow
   there scrolls them a step (subtabScroll in app.js sets can-left / can-right and shows the arrows) */
.subtabs-wrap.can-right .subtabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.subtabs-wrap.can-left .subtabs{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent)}
.subtabs-wrap.can-left.can-right .subtabs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.subtabs-arrow{position:absolute;top:0;bottom:0;z-index:1;width:30px;padding:0;border:0;background:none;color:var(--ink2);cursor:pointer}
.subtabs-arrow::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translate(-5px,-4px) rotate(45deg)}
.subtabs-arrow.prev{left:-6px}
.subtabs-arrow.prev::before{transform:translate(-2px,-4px) rotate(-135deg)}
.subtabs-arrow.next{right:-6px}
.subtabs-arrow:hover{color:var(--ink)}
.subtab{position:relative;flex:none;padding:10px 14px 12px;color:var(--ink3);text-decoration:none;font:600 14px/1 var(--sans);white-space:nowrap;border-radius:8px 8px 0 0}
.subtab:hover{color:var(--ink);background:var(--hover)}
.subtab[aria-current="page"]{color:var(--ink)}
.subtab[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent-fill)}
.subtab:focus-visible{outline-offset:-2px}
.parts{display:inline-flex;gap:2px;flex-wrap:wrap;padding:3px;margin:0 0 22px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md)}
.part{font:600 13px/1.2 var(--sans);padding:7px 13px;border-radius:var(--r-sm);color:var(--ink2);text-decoration:none}
.part:hover{color:var(--ink)}
.part[aria-current="page"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.hubbody{min-width:0}
.hubpart:not([hidden])+.hubpart{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.hubpart:not([hidden])+.hubpart>.hero h1{font-size:21px}
.hubpart>section:first-child{margin-top:0}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plainlist li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
@media(max-width:767px){
  .hubhead{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .subtabs{margin-left:-6px}
  .subtabs-arrow.prev{left:-12px}
  .subtab{padding:10px 11px 12px;font-size:13.5px}
  .parts{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .parts::-webkit-scrollbar{display:none}
  .part{flex:none}
}

/* ------------------------------------------------------------------ sign-in */
.out .side,.out .topbar,.out #health{display:none}
.out .main-col{margin-left:0}
.out .wrap{max-width:none;padding:0}
/* One centred column on white at every width (Gabe, 2026-10-01): the official black logo, one line, the Microsoft
   button, inside a frame of the logo's own black with a gold inner line (2026-10-02: the navy ink beside the black
   logo looked "a little off", so the frame and the line are the brand's true black and gold). The development sign-in
   (this computer only) sits under the frame, small. */
html:has(body.out),body.out{background:#fff}
body.out{color-scheme:light;--ink:#131A3A;--ink2:#353D62;--ink3:#565E80;--line:#D8DCE7;--line2:#C5CADB;--edge:#A3AAC4;--panel:#FFFFFF;--panel2:#F8F9FC;
  --surface:#FFFFFF;--surface-2:#F8F9FC;--sunk:#ECEEF5;--amber:#6E5418;--u2:#6E5418;--accent:#22316A;--accent-fill:#22316A;--shell:#131A3A;--shell3:#22316A;--shadow-sm:0 1px 2px rgba(19,26,58,.06)}
.portal{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));background:#fff}
.portal-card{position:relative;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(36px,8vw,56px) clamp(24px,7vw,48px) clamp(32px,7vw,48px);border:2px solid var(--brand-black);border-radius:4px;background:#fff}
.portal-card::after{content:"";position:absolute;inset:6px;border:1px solid var(--brand-gold);border-radius:2px;pointer-events:none}
.portal-brand{margin:0;line-height:0;width:min(300px,100%)}
.portal-logo{width:100%;height:auto;display:block}
.portal-tag{margin:clamp(20px,5vw,28px) 0 0;padding-top:clamp(18px,4.5vw,24px);border-top:1px solid var(--brand-gold);
  font:600 clamp(12.5px,3.5vw,14.5px)/1.5 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-black);text-wrap:balance}
.act.ms{position:relative;z-index:1;width:100%;max-width:320px;min-height:52px;margin-top:clamp(26px,6vw,34px);font-size:15px;gap:12px;border-radius:var(--r-sm);
  background:var(--shell);border-color:var(--shell);color:#fff;white-space:normal;box-shadow:0 2px 10px rgba(19,26,58,.22)}
.act.ms:hover{background:var(--shell3);border-color:var(--shell3);color:#fff}
.act.ms:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.act.ms svg{width:20px;height:20px;flex:none}
.act.ms:disabled{opacity:.5}
.portal-note{margin:12px 0 0;font-size:13px;color:var(--ink3)}
.devbox{width:100%;max-width:440px;margin:0;padding:12px 14px;border:1px dashed var(--line2);border-radius:var(--r-sm);background:var(--panel2)}
.devhead{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--u2)}
.devhead .ico{width:14px;height:14px}
.devusers{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.devuser{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);text-align:left;transition:border-color .15s,box-shadow .15s}
.devuser:hover{border-color:var(--edge);box-shadow:var(--shadow-sm)}
.devuser .avatar{width:28px;height:28px;font-size:12px}
.devuser span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.devuser small{font-size:12px;color:var(--ink3);text-transform:capitalize}
.signin{max-width:520px;margin:60px auto}

/* ------------------------------------------------------------------ momentum: progress, steps and earned wins
   (helpers in lib.js: stepper, meter, ring, statTile, spark, markMoved, celebrate) */
.stepper{display:flex;align-items:flex-start;margin:0;padding:0;list-style:none;counter-reset:st;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.stepper::-webkit-scrollbar{display:none}
.step{position:relative;flex:1 1 0;min-width:58px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 3px}
.step::before{content:"";position:absolute;top:11px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;border-radius:2px;background:var(--line2)}
.step:first-child::before{display:none}
.step-dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--line2);color:var(--ink3);font:700 12px/1 var(--sans)}
.step-dot svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step-label{margin-top:8px;font:600 12px/1.25 var(--sans);color:var(--ink3);max-width:120px}
.step-when{margin-top:2px;font-size:12px;color:var(--ink3);white-space:nowrap}
.step.done::before,.step.current::before{background:var(--accent-fill)}
.step.done .step-dot{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.step.done .step-label{color:var(--ink2)}
.step.current .step-dot{background:var(--surface);border-color:var(--accent-fill);color:var(--accent);box-shadow:0 0 0 5px var(--accent-ring)}
.step.current .step-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent-fill)}
.step.current .step-label{color:var(--ink)}
/* blocked is amber (soon, plan it), never pink: a stuck case is work to do, not an alarm */
.step.blocked .step-dot{border-color:var(--u2-fill);color:var(--u2);background:var(--u2-bg)}
.step.blocked .step-label{color:var(--u2)}
/* a laptop or tablet: twelve named stations at their 58px minimum leave single words such as "Negotiation" touching the
   next label (QA at 900px, 2026-10-01); a little smaller type keeps a gap between them */
@media(min-width:880px) and (max-width:1100px){
  .step{padding:0 2px}
  .step-label{font-size:12px}
}
/* a phone or a narrow tablet: every station as a dot, and only the current one named (the others stay named for screen
   readers). Below about 880px twelve named stations no longer fit, and the stepper's hidden scrollbar cut the last ones off */
@media(max-width:879px){
  .step{min-width:0;padding:0}
  .step::before{top:8px;left:calc(-50% + 9px);right:calc(50% + 9px)}
  .step-dot{width:18px;height:18px;font-size:12px;border-width:2px}
  .step-dot svg{width:10px;height:10px}
  .step.current .step-dot{box-shadow:0 0 0 3px var(--accent-ring)}
  .step.current .step-dot::after{width:7px;height:7px}
  .step:not(.current) .step-dot{font-size:0}
  .step:not(.current) .step-label,.step:not(.current) .step-when{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .step.current .step-label,.step.current .step-when{white-space:nowrap}
  .step.current:first-child>.step-label,.step.current:first-child>.step-when,.step.current:nth-child(2)>.step-label,.step.current:nth-child(2)>.step-when{align-self:flex-start;text-align:left}
  .step.current:last-child>.step-label,.step.current:last-child>.step-when,.step.current:nth-last-child(2)>.step-label,.step.current:nth-last-child(2)>.step-when{align-self:flex-end;text-align:right}
  .stepper{overflow:visible}
}
.meter{display:block;height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden;min-width:60px}
.meter svg{display:block;width:100%;height:100%}
.meter rect{fill:var(--wolf-fill)}
.meter.grn rect,.meter.win rect{fill:var(--win-fill)} .meter.amb rect,.meter.u2 rect{fill:var(--u2-fill)} .meter.red rect,.meter.u3 rect{fill:var(--u3-fill)} .meter.gold rect,.meter.acc rect{fill:var(--accent-fill)}
.meter.u0 rect{fill:var(--u0-fill)} .meter.u1 rect{fill:var(--u1-fill)} .meter.wolf rect{fill:var(--wolf-fill)}
.meter rect,.ring .ring-fill{transform-origin:left center;animation:grow .9s var(--ease) both}
.ring{position:relative;display:inline-grid;place-items:center;flex:none}
.ring svg{display:block;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.ring .ring-track{stroke:var(--sunk)}
.ring .ring-fill{stroke:var(--wolf-fill);stroke-linecap:round;animation:sweep 1.1s var(--ease) both}
.ring.grn .ring-fill,.ring.win .ring-fill{stroke:var(--win-fill)} .ring.amb .ring-fill,.ring.u2 .ring-fill{stroke:var(--u2-fill)} .ring.red .ring-fill,.ring.u3 .ring-fill{stroke:var(--u3-fill)}
.ring.gold .ring-fill,.ring.acc .ring-fill{stroke:var(--accent-fill)} .ring.u0 .ring-fill{stroke:var(--u0-fill)} .ring.u1 .ring-fill{stroke:var(--u1-fill)} .ring.wolf .ring-fill{stroke:var(--wolf-fill)}
.ring-text{position:absolute;inset:0;display:grid;place-items:center;font:600 15px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.ringrow{display:flex;gap:16px;align-items:center}
.ringrow .ring-copy b{display:block;font-size:15px}
.ringrow .ring-copy span{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.stat .statrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.herorow{display:flex;gap:20px 28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.herorow>div:first-child{flex:1 1 480px;min-width:0}
.heroring{flex:0 1 auto;min-width:0;padding:14px 20px 14px 14px}
.ringrow .ring-copy{min-width:0}
.listring{margin-left:auto}
.listring .ring-text{font-size:12px}
.delta{display:inline-flex;align-items:center;gap:3px;font:600 12px/1 var(--sans);padding:4px 7px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink2);white-space:nowrap}
.delta.up{background:var(--win-bg);color:var(--win)}
.delta.down{background:var(--u2-bg);color:var(--u2)}
.spark{display:block;width:96px;height:30px;overflow:visible}
.spark polyline{fill:none;stroke:var(--accent-fill);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .spark-area{fill:var(--tint2);stroke:none}
.spark circle{fill:var(--accent-fill);stroke:var(--surface);stroke-width:1.5;vector-effect:non-scaling-stroke}
/* "moved forward": a row, card or step that just advanced glows once in the accent */
.moved{animation:moved 1.8s var(--ease) 1}
/* a win: the toast carries a green seal whose check draws itself; restrained, once, and only for real progress */
.toast.win{border-left-color:var(--win-fill);padding-left:12px}
.toast .seal{position:relative;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--win-bg);box-shadow:0 0 0 1px var(--win-line)}
.toast .seal svg{width:18px;height:18px;fill:none;stroke:var(--win);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.toast .seal path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s .25s var(--ease) forwards}
.toast.win.on .seal{animation:seal .7s var(--ease-spring) 1}
.toast .seal::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--win-fill);opacity:0;animation:halo 1.2s .2s var(--ease) 1}
.toast .ttl{display:block;font-weight:600;color:var(--ink)}
.toast .tsub{display:block;color:var(--ink3);font-size:12.5px;margin-top:1px}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sweep{from{stroke-dasharray:0 100}}
@keyframes moved{0%{box-shadow:0 0 0 0 transparent;background-color:var(--accent-bg-2)}35%{box-shadow:0 0 0 6px var(--accent-ring)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes seal{0%{transform:scale(.6) rotate(-20deg)}60%{transform:scale(1.08) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes halo{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.7)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .skel{animation:none}
  .toast .seal path{stroke-dashoffset:0}
}

/* ---- Layout classes that replace inline style attributes.
   The server's Content-Security-Policy (style-src 'self') ignores every style attribute in markup, so the page uses
   these classes instead. test/csp.test.ts fails if an inline style, script or handler attribute comes back. */
.mt0{margin-top:0} .mt8{margin-top:8px} .mt10{margin-top:10px} .mt12{margin-top:12px} .mt14{margin-top:14px} .mt18{margin-top:18px}
/* wide tables keep their columns readable and scroll inside .tablewrap on a phone instead of squashing */
table.mw560{min-width:560px} table.mw600{min-width:600px} table.mw620{min-width:620px} table.mw700{min-width:700px}
table.mw760{min-width:760px} table.mw820{min-width:820px} table.mw880{min-width:880px} table.mw980{min-width:980px} table.mw1000{min-width:1000px}
.wfull{width:100%}
td.nowrap{white-space:nowrap}
.grow{flex:1;min-width:200px}
.fld.full{grid-column:1/-1}
.chips.base{align-items:baseline}
.rail.flush{margin:0}
td.barcell{width:34%}
/* A bar's width comes from its data-w value through barWidths() in lib.js. Until then it is empty, never full:
   a full bar would claim every month matched the busiest one. */
.bar i{width:0}
tr.inactive{opacity:.55}
td.evid{max-width:280px}
.decwhy{margin-top:6px;width:160px}
/* A date a later order replaced: struck through AND labelled in words (see supersededDates() in lib.js). */
/* overflow-wrap:anywhere: an order's file name is one long unbroken run and must not widen the column on a phone */
.superseded{margin-top:6px;font-size:12px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;overflow-wrap:anywhere}
.superseded>span{min-width:0}
.superseded s{color:var(--ink2);text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-color:var(--u2)}
.superseded .chip{align-self:center}
/* a court date nobody has confirmed yet (read from an order, or counted from a rule): shown apart, never as the live date */
.sub.pending{margin-top:5px;overflow-wrap:anywhere}
.pending .chip{margin-right:2px}
/* a template's typed fields (recipient, letter text), under its row in "Letters and forms" */
.docin{padding:4px 0 14px;border-bottom:1px solid var(--line)}
.docin textarea{min-height:90px}
.doclist .ev{grid-template-columns:110px minmax(0,1fr) auto;align-items:center}
@media(max-width:560px){.doclist .ev{grid-template-columns:minmax(0,1fr)}.doclist .ev>:nth-child(3){grid-column:auto}}
.folderline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.folderline .mono{overflow-wrap:anywhere}
/* letters for another kind of case (a premises letter on a motor-vehicle matter), folded under one heading */
.doclist-other{margin-top:10px;border-top:1px solid var(--line)}
.doclist-other>summary{display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none;padding:10px 0 6px;font-weight:600;font-size:13px;color:var(--ink2)}
.doclist-other>summary::-webkit-details-marker{display:none}
.doclist-other>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-45deg);transition:transform .15s var(--ease);margin-right:2px}
.doclist-other[open]>summary::before{transform:rotate(45deg)}
/* a long list a page at a time: the "Show 50 more" button under the rows shown so far (orders.js, identity.js) */
.showmore{margin-top:10px}
/* the paged rows sit in one wrapper inside a .stack, so the wrapper lays its cards out the way .stack did (the 18px gap
   between a client's order cards and between identity review cards; the Show-more button is one more grid item) */
.stack>[data-plist]{display:grid;gap:18px;min-width:0}

/* ------------------------------------------------------------------ Today */
/* the scheduled jobs, folded to one line unless one failed (every failure is also in the banner on every page) */
.jobsbox>summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;cursor:pointer;list-style:none}
.jobsbox>summary::-webkit-details-marker{display:none}
.jobsbox>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-45deg);transition:transform .15s var(--ease);align-self:center;margin-right:2px}
.jobsbox[open]>summary::before{transform:rotate(45deg)}
.jobsbox[open]>summary{margin-bottom:8px}
.jobsum{font-weight:600;font-size:14px}
/* the statutes in Today's right column: one row each */
.sollist{list-style:none;margin:0;padding:4px 0}
.sollist li+li{border-top:1px solid var(--line)}
.solrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 18px;color:inherit;text-decoration:none;transition:background .12s}
.solrow:hover,.solrow:focus-visible{background:var(--accent-bg);color:inherit}
.solrow:hover .nm{text-decoration:underline;text-decoration-color:var(--edge)}
.solleft .sub{font-size:12px}
.solwho{display:flex;flex-direction:column;min-width:0}
.solwho .nm{overflow-wrap:anywhere}
@media(max-width:560px){.solrow{grid-template-columns:78px minmax(0,1fr);padding:10px 14px}.solrow>.chips{grid-column:2}}

/* an inline message at a form field (the statute record on a client page): said where the problem is, never only in a toast */
.field-msg{font-size:12.5px;color:var(--u3);margin:6px 0 0}
#sol [aria-invalid="true"]{border-color:var(--u3);background:var(--u3-bg)}
/* a phone is narrower than a long label: buttons, chips and check labels wrap instead of widening the page (last in the file, so it wins over the base rules above) */
@media (max-width:640px){.act,.chip{white-space:normal;max-width:100%}.check{white-space:normal;align-items:flex-start}}

/* The Clients list (public/app.js clientsView; DESIGN.md 4.4 and 5.2). Tokens only, no colour of its own, except the
   hero (.pghero, above), which is the brand itself. The head: the hero with WOLF's reading of the list and three counts
   that are chips; then whose cases, the find box and New case; the chips as pills; one card of rows, each with a monogram,
   the name and its case line, the stage, the signals, the statute and the lawyer, and a 3px rail for act now or soon. */
.cl-hero .pghero-main { justify-content: center; }
.cl-pulse { justify-content: center; }
.cl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 11px 12px 10px; border-radius: var(--r-md); border: 1px solid rgba(239,213,128,.22);
  background: rgba(255,255,255,.05); color: var(--h-ink-2); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.cl-stat b { font: 400 30px/1 var(--font-ui); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; color: var(--h-ink); }
.cl-stat span { font-size: 12px; line-height: 1.3; color: var(--h-ink-3); overflow-wrap: anywhere; }
.cl-stat.u3 b { color: var(--brand-gold-light); }
.cl-stat:hover { background: rgba(255,255,255,.1); border-color: rgba(239,213,128,.5); }
.cl-stat[aria-pressed="true"] { background: rgba(239,213,128,.14); border-color: rgba(239,213,128,.7); box-shadow: inset 0 0 0 1px rgba(239,213,128,.3); }
.cl-stat[aria-pressed="true"] span { color: var(--brand-gold-light); }
.cl-ring { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(239,213,128,.28); border-radius: var(--r-md);
  background: rgba(255,255,255,.06); font-size: 13px; color: var(--h-ink-3); }
.cl-ring b { color: var(--h-ink); }
.cl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cl-head .toggle .n { font-weight: 500; color: var(--ink-3); }
.cl-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cl-find { position: relative; display: inline-flex; align-items: center; }
.cl-find .ico { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.cl-find input { padding-left: 36px; min-width: 260px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); }
.cl-find input:focus { border-color: var(--accent-fill); box-shadow: var(--glow-accent); outline: none; }
.cl-tools .act .ico { width: 15px; height: 15px; }
.cl-banner { margin: 0 0 12px; }
.cl-banner a { margin-left: 6px; font-weight: 600; }
/* the chips as pills: a count in its own small badge; pressed is filled in the accent (act now in deep navy and light
   gold, the strongest pairing the palette has); an urgency chip carries a dot of its hue */
.cl-chips { gap: 8px; margin-bottom: 14px; }
.cl-chips .ico { width: 13px; height: 13px; }
.cl-chips button.chip { gap: 7px; padding: 6px 7px 6px 14px; font-size: 13px; font-weight: 500; border-radius: var(--r-pill); background: var(--surface); border-color: var(--line);
  color: var(--ink-2); box-shadow: var(--shadow-1); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease); }
.cl-chips button.chip:hover { border-color: var(--edge); color: var(--ink); box-shadow: var(--shadow-2); }
.cl-chips button.chip .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-sunk);
  color: var(--ink-2); font-size: 12px; font-weight: 600; opacity: 1; font-variant-numeric: lining-nums tabular-nums; }
.cl-chips #cl-more-btn { padding-right: 14px; }
.cl-chips button.chip.u3::before, .cl-chips button.chip.u2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--u3-fill); }
.cl-chips button.chip.u2::before { background: var(--wolf-fill); }
.cl-chips button.chip[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); box-shadow: 0 6px 16px -8px var(--accent-ring); }
.cl-chips button.chip[aria-pressed="true"] .n { background: var(--surface); color: var(--accent); }
.cl-chips button.chip.u3[aria-pressed="true"] { background: var(--u3-fill); border-color: var(--u3-fill); color: var(--on-u3); }
.cl-chips button.chip.u3[aria-pressed="true"]::before { background: var(--on-u3); }
.cl-chips button.chip.u3[aria-pressed="true"] .n { background: var(--surface); color: var(--u3); }
.cl-chips button.chip.u2[aria-pressed="true"] { background: var(--u2-bg); border-color: var(--u2-line); color: var(--u2); box-shadow: none; }
.cl-chips button.chip.u2[aria-pressed="true"] .n { background: var(--surface); color: var(--u2); }
.cl-more { margin-bottom: 12px; }
.cl-more-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.cl-more-row label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cl-more-lists { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.cl-ctx { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.cl-ctx:empty { display: none; }
/* the rows */
.cl-card { display: grid; overflow: visible; }
.cl-r { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) 128px minmax(0, 1.6fr) 180px 40px; gap: 16px; align-items: center;
  padding: 14px 22px; border-top: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); }
.cl-r::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background var(--t-fast); }
.cl-r.lv-u3::before { background: var(--u3-fill); }
.cl-r.lv-u2::before { background: var(--u2-fill); }
.cl-r:not(.cl-hd):hover, .cl-r:not(.cl-hd):focus-within { background: var(--hover); }
.cl-r:not(.cl-hd):not(.lv-u3):not(.lv-u2):hover::before { background: var(--line-2); }
.cl-r:has(.cl-nmt a:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent-fill); }
.cl-r.cl-hd { border-top: 0; padding: 12px 22px 9px; font: 600 12px/1.3 var(--font-ui, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: default; }
.cl-r.cl-hd > span:first-child { padding-left: 48px; }
#cl-rows > .cl-r:first-child { border-top: 1px solid var(--line); }
.cl-r.former { opacity: .78; }
.cl-nm { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 600 13px/1 var(--font-ui); letter-spacing: .05em;
  color: var(--brand-gold-light); background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy)); box-shadow: inset 0 0 0 1px rgba(239,213,128,.35), var(--shadow-1); }
.cl-r.former .cl-av { background: var(--surface-sunk); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.cl-nmt { display: flex; flex-direction: column; min-width: 0; }
.cl-nmt a { font: 600 16px/1.25 var(--font-ui); letter-spacing: -.005em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cl-nmt a:hover { color: var(--accent); text-decoration: underline; }
.cl-nmt > span { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; overflow-wrap: anywhere; }
.cl-nmt > span .mono, .cl-nmt > span .udate { white-space: nowrap; } /* the last-contact words end the line: wrap, never clip them */
.cl-nmt .mono { font-family: var(--font-code); font-size: 12px; letter-spacing: .03em; }
.cl-stage { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.cl-stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--u0-fill); flex: none; box-shadow: 0 0 0 3px var(--surface-sunk); }
.cl-stage.lit i { background: var(--accent-fill); } .cl-stage.neg i { background: var(--wolf-fill); } .cl-stage.dem i { background: var(--u2-fill); }
.cl-stage.win i { background: var(--win-fill, var(--u0-fill)); }
.cl-sig { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cl-quiet { font-size: 12.5px; font-style: italic; color: var(--ink-3); }
.cl-sol { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.cl-solb { font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.cl-sols { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.cl-who { margin-top: 6px; font: 500 12.5px/1.3 var(--font-ui, inherit); color: var(--ink-2); background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.cl-who:hover, button.cl-who:focus-visible { color: var(--accent); text-decoration: underline; }
.cl-who.none { color: var(--u2); }
.cl-who.plain { cursor: default; }
.cl-ok { margin-top: 6px; min-height: 28px; padding: 4px 10px; font-size: 12px; border-radius: var(--r-pill); }
.cl-menu { position: relative; justify-self: end; }
.cl-menu summary { list-style: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.cl-menu summary::-webkit-details-marker { display: none; }
.cl-menu summary .ico { width: 16px; height: 16px; }
.cl-r:hover .cl-menu summary, .cl-menu[open] summary { background: var(--surface-sunk); color: var(--ink); }
.cl-menu-list { position: absolute; right: 0; top: 36px; z-index: 20; min-width: 230px; display: flex; flex-direction: column; padding: 6px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md, 10px); box-shadow: var(--shadow-3); }
.cl-menu-list a, .cl-menu-list button { display: block; text-align: left; padding: 9px 11px; border: 0; border-radius: var(--r-xs); background: none; font: 500 13.5px/1.3 var(--font-ui, inherit);
  color: var(--ink); text-decoration: none; cursor: pointer; }
.cl-menu-list a:hover, .cl-menu-list button:hover, .cl-menu-list a:focus-visible, .cl-menu-list button:focus-visible { background: var(--accent-bg); color: var(--accent); }
.cl-pop { position: absolute; right: 52px; top: calc(100% - 6px); z-index: 25; width: min(360px, calc(100vw - 32px)); padding: 14px; cursor: default;
  background: var(--surface-raised); border: 1px solid var(--line); border-top: 2px solid var(--wolf-fill); border-radius: var(--r-md, 10px); box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 8px; }
.cl-pop p { margin: 0; }
.cl-pop-h { font-weight: 600; font-size: 13.5px; }
.cl-pop-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border-radius: var(--r-sm); background: var(--wolf-bg); border: 1px solid var(--wolf-line); }
.cl-pop-sug p { flex-basis: 100%; }
.cl-pop-list { gap: 6px; }
.cl-pop-x { align-self: flex-end; }
.cl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.cl-back { margin: 10px 0 0; font-size: 13px; }
/* nothing matches: a calm line, what Everyone holds, and the way back */
.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 46px 22px; }
.cl-empty-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; color: var(--wolf-fill); background: var(--wolf-bg); border: 1px solid var(--wolf-line); }
.cl-empty-mark .ico { width: 24px; height: 24px; }
.cl-empty-h { margin: 0; font: italic 400 21px/1.3 var(--font-ui); color: var(--ink); }
.cl-empty-s { margin: 0; font-size: 14px; color: var(--ink-3); }
.cl-empty .act { margin-top: 10px; }
@media (max-width: 980px) {
  .cl-r { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 160px 40px; }
  .cl-r .cl-stg { display: none; }
}
@media (max-width: 768px) {
  .cl-r.cl-hd { display: none; }
  .cl-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm sol" "sig sig" "menu menu"; padding: 14px 16px; gap: 10px 12px; }
  .cl-nm { grid-area: nm; gap: 10px; } .cl-sol { grid-area: sol; align-items: flex-end; text-align: right; max-width: 46vw; } .cl-sig { grid-area: sig; }
  .cl-av { width: 32px; height: 32px; font-size: 12px; }
  .cl-menu { grid-area: menu; justify-self: start; }
  .cl-find { flex: 1 1 auto; }
  .cl-find input { min-width: 0; width: 100%; }
  .cl-tools { margin-left: 0; width: 100%; }
  .cl-pop { right: 8px; left: 8px; width: auto; }
  .cl-foot { padding: 12px 16px; }
}
@media (max-width: 420px) {
  .cl-stat { padding: 9px 10px 8px; }
  .cl-stat b { font-size: 24px; }
}

/* ---------------------------------------------------------------- the task card (lib.js taskCard; DESIGN.md 4.5)
   Used on Tasks, Today and in a case. Urgency lives in the 3px rail and the pills, never in the card's background. */
.tcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px 19px;box-shadow:var(--shadow-sm);min-width:0}
.tcard::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--wolf-fill)}
.tcard.b-needs_you::before{background:var(--accent-fill)}
.tcard.b-ready_send::before,.tcard.b-done::before{background:var(--win-fill)}
.tcard.u2::before{background:var(--u2-fill)} .tcard.u3::before{background:var(--u3-fill)}
.tcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tcard-when{font-size:12px;color:var(--ink-3)}
.tcard-title{font-size:16px;line-height:1.3;margin:8px 0 2px;font-weight:650}
.tcard-title a{color:var(--ink);text-decoration:none} .tcard-title a:hover{text-decoration:underline}
.tcard-sub{margin:0 0 8px;font-size:13px;color:var(--ink-2)}
.tcard-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)} .tcard-bar .meter{flex:1 1 120px;max-width:260px}
.tcard-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.tstep{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:13px}
.tstep .tstep-d{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans);border:1px solid var(--line-2);color:var(--ink-3);background:var(--surface-2)}
.tstep .tstep-d svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tstep.done .tstep-d{background:var(--win-bg);border-color:var(--win-line);color:var(--win)}
.tstep.live .tstep-d,.tstep.ready .tstep-d{background:var(--wolf-bg);border-color:var(--wolf-line);color:var(--wolf)}
.tstep.live .tstep-d{animation:tc-halo 1.8s var(--ease,ease) infinite}
.tstep.you .tstep-d{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.tstep .tstep-t{display:grid;gap:1px;min-width:0} .tstep .tstep-t b{font-weight:600;color:var(--ink);overflow-wrap:anywhere} .tstep .tstep-t span{color:var(--ink-3);font-size:12.5px;overflow-wrap:anywhere}
.tstep .tstep-x{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.tstep.you .tstep-x{color:var(--accent)} .tstep.live .tstep-x,.tstep.ready .tstep-x{color:var(--wolf)} .tstep.done .tstep-x{color:var(--win)}
.tcard-ask{margin-top:10px;padding:10px 12px;border-radius:var(--r-md,10px);background:var(--accent-bg);border:1px solid var(--accent-line)}
.tcard-ask h3{margin:0 0 4px;font-size:12.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.tcard-ask ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.tcard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tcard-never{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.tcard-never svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--wolf);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tcard.compact{padding-bottom:12px} .tcard.compact .tcard-title{font-size:14.5px}
@keyframes tc-halo{0%{box-shadow:0 0 0 0 var(--wolf-line)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tstep.live .tstep-d{animation:none}}