/* ui.css · The JGCH Advantage portal · v0.14 design system (contract sections 4, 5 and 9).
   One file for the member app (app.html), the join and sign-in page (index.html), the office desk
   (office.html) and the privacy and terms pages. Phone under 768 px is Front Door (B3, B4, B5); web from
   768 px is Daylight (C2, C4, C5, C6), with the 248 px rail from 1024 px and a top bar from 768 to 1023 px.
   Every color comes from the theme engine's custom properties (js/theme.js sets them on :root from
   /api/me). The values below are the JGCH defaults (navy #165778, copper #B87333) so a page renders before
   the theme arrives; the dark set follows the device until a member's setting says otherwise. The only
   colors the theme does not carry are the error reds (--bad, --bad-tint, --bad-line), checked to WCAG AA
   on every ground (6.0:1 light, 8.5:1 dark), and the overlay scrim. */

/* ---------- 1 · tokens ---------- */
:root{
  color-scheme:light;
  --brand:#165778;--on-brand:#FFFFFF;--accent:#B87333;
  --ground:#F5F4F1;--surface:#FFFFFF;--sunk:#FAF9F7;--ink:#15171A;--ink2:#33373D;--muted:#575C64;
  --line:#E4E2DD;--line2:#D3D0C9;--track:#E6E4DF;--warn:#8A5300;--warn-tint:#FBF5E9;--warn-line:#EFDFC0;
  --acc:#165778;--on-acc:#FFFFFF;--tint:#EFF3F6;--tint2:#DEE7EC;--focus:#165778;--accent-ui:#B87333;
  --bad:#B42318;--bad-tint:#FEF3F2;--bad-line:#FECDCA;
  --font-heading:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --heading-wght:650;--heading-track:-.022em;--display-wght:780;--display-wdth:120%;--display-track:-.01em;
  --avatar-fill:#FFFFFF;--avatar-ink:#165778;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --r-sm:8px;--r:12px;--r-lg:14px;--r-xl:20px;
  --card-pad:24px;--gutter:48px;--col:1100px;--rail-w:248px;
  --tabbar-h:66px;--regbar-h:70px;
  --shadow-1:0 1px 2px rgba(16,18,20,.07);
  --shadow-2:0 1px 1px rgba(16,18,20,.04),0 2px 6px rgba(16,18,20,.05),0 12px 28px -8px rgba(16,18,20,.14);
  --shadow-up:0 -1px 0 rgba(16,18,20,.05),0 -8px 28px -10px rgba(16,18,20,.18);
  --scrim:rgba(10,12,14,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1012;--surface:#16181B;--sunk:#1C1F23;--ink:#ECEDEF;--ink2:#C8CBD0;--muted:#9EA4AC;
  --line:#2A2E33;--line2:#3B4046;--track:#30343A;--warn:#E9B865;--warn-tint:#2A2318;--warn-line:#4A3B1F;
  --acc:#2696CF;--on-acc:#15171A;--tint:#182832;--tint2:#1A3646;--focus:#2696CF;--accent-ui:#B87333;
  --bad:#FDA29B;--bad-tint:#2B1714;--bad-line:#5C2A24;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 1px 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.35),0 12px 28px -8px rgba(0,0,0,.6);
  --shadow-up:0 -1px 0 rgba(0,0,0,.4),0 -8px 28px -10px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.62);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --ground:#0E1012;--surface:#16181B;--sunk:#1C1F23;--ink:#ECEDEF;--ink2:#C8CBD0;--muted:#9EA4AC;
    --line:#2A2E33;--line2:#3B4046;--track:#30343A;--warn:#E9B865;--warn-tint:#2A2318;--warn-line:#4A3B1F;
    --acc:#2696CF;--on-acc:#15171A;--tint:#182832;--tint2:#1A3646;--focus:#2696CF;--accent-ui:#B87333;
    --bad:#FDA29B;--bad-tint:#2B1714;--bad-line:#5C2A24;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 1px 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.35),0 12px 28px -8px rgba(0,0,0,.6);
    --shadow-up:0 -1px 0 rgba(0,0,0,.4),0 -8px 28px -10px rgba(0,0,0,.7);
    --scrim:rgba(0,0,0,.62);
  }
}
@media (max-width:767.98px){:root{--card-pad:16px;--gutter:16px;--r:16px}}
/* v0.14.4: a brokerage that picked its own heading face keeps it for the phone's display role too (js/theme.js sets data-face) */
[data-face="brand"]{--font-display:var(--font-heading);--heading-wght:600;--heading-track:-.005em;--display-wght:700;--display-wdth:100%;--display-track:-.005em}

/* ---------- 2 · base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
/* the phone's fixed tab bar and Register bar: focus scrolling keeps a focused card clear of both (WCAG 2.4.11, technique C43) */
@media (max-width:767.98px){html{scroll-padding-bottom:calc(var(--tabbar-h) + var(--regbar-h) + 16px + env(safe-area-inset-bottom,0px))}}
html.has-overlay{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6{margin:0;color:inherit;line-height:1.25;font-weight:600;font-synthesis:none}
h1,h2{font-family:var(--font-heading);font-weight:var(--heading-wght);letter-spacing:var(--heading-track)}
h1{font-size:28px}
h2{font-size:20px}
h3,h4,h5,h6{font-family:var(--font-body)}
h3{font-size:16px}
h4,h5,h6{font-size:15px}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding-left:1.3em}
b,strong{font-weight:650}
small{font-size:.86em}
a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img,svg,video,canvas{max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
details>summary{cursor:pointer;font-weight:600;color:var(--ink);padding:6px 0}
details>summary:hover{color:var(--acc)}
::selection{background:var(--tint2);color:var(--ink)}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.phone-head :focus-visible,.card.brand :focus-visible,.doc-head :focus-visible,.on-brand :focus-visible,.logo-tile :focus-visible{outline-color:var(--on-brand)}
main:focus,[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip{position:absolute;left:12px;top:-64px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;box-shadow:var(--shadow-2);transition:top .15s}
.skip:focus,.skip:focus-visible{top:12px}
.icon{display:inline-block;flex:none;vertical-align:-.2em}
.on-brand{color:var(--on-brand)}

/* ---------- 3 · the member app frame (js/shell.js sets data-frame, data-focus, data-route, data-regbar) ---------- */
.shell{min-height:100vh;min-height:100dvh;background:var(--ground)}
.main{display:block;min-width:0}
.boot-note{padding:56px 0;text-align:center}
.banners{display:flex;flex-direction:column;gap:8px}
.banners:empty{display:none}

/* web, 1024 px and wider: the Daylight rail (C2) */
.shell[data-frame="rail"]{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:start}
.shell[data-frame="rail"]>.rail{grid-column:1;grid-row:1/4;align-self:stretch}
.shell[data-frame="rail"]>.banners,.shell[data-frame="rail"]>.main,.shell[data-frame="rail"]>.foot{grid-column:2;padding-inline:max(var(--gutter),calc((100% - var(--col))/2))}
.shell[data-frame="rail"]>.banners{grid-row:1;padding-top:24px}
.shell[data-frame="rail"]>.main{grid-row:2;padding-top:32px;padding-bottom:48px}
.shell[data-frame="rail"]>.foot{grid-row:3}

/* web, 768 to 1023 px: the rail's items as a top bar, content one column */
.shell[data-frame="topbar"]{display:flex;flex-direction:column}
.shell[data-frame="topbar"]>.topbar{position:sticky;top:0;z-index:30}
.shell[data-frame="topbar"]>.banners,.shell[data-frame="topbar"]>.main,.shell[data-frame="topbar"]>.foot{padding-inline:max(24px,calc((100% - 960px)/2))}
.shell[data-frame="topbar"]>.banners{padding-top:20px}
.shell[data-frame="topbar"]>.main{flex:1 0 auto;padding-top:28px;padding-bottom:40px}

/* a full-screen flow on the web (a view registered with rail:false, the register steps C5) */
.shell[data-focus="1"]:not([data-frame="phone"]){display:flex;flex-direction:column}
.shell[data-focus="1"]:not([data-frame="phone"])>.banners,.shell[data-focus="1"]:not([data-frame="phone"])>.main,.shell[data-focus="1"]:not([data-frame="phone"])>.foot{padding-inline:max(24px,calc((100% - 960px)/2))}
.shell[data-focus="1"]:not([data-frame="phone"])>.main{flex:1 0 auto;padding-top:16px;padding-bottom:48px}
.shell[data-focus="1"]>.foot{display:none}

/* phone, under 768 px: Front Door (B3) */
.shell[data-frame="phone"]{display:flex;flex-direction:column}
.shell[data-frame="phone"]>.banners{padding:12px 16px 0}
.shell[data-frame="phone"]>.main{flex:1 0 auto;padding:16px 16px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom,0px))}
.shell[data-frame="phone"][data-regbar="1"]>.main{padding-bottom:calc(var(--tabbar-h) + var(--regbar-h) + 24px + env(safe-area-inset-bottom,0px))}
.shell[data-frame="phone"][data-focus="1"]>.main{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.shell[data-frame="phone"]>.foot{display:none}

/* the rail */
.rail{min-width:0;background:var(--surface);border-right:1px solid var(--line)}
.rail-in{position:sticky;top:0;display:flex;flex-direction:column;gap:24px;height:100vh;height:100dvh;overflow-y:auto;padding:16px}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink2);font:inherit;font-size:14.5px;font-weight:500;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer}
.nav-item:hover{background:var(--sunk);color:var(--ink)}
.nav-item[aria-current]{background:var(--tint);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--acc)}
.nav-item[aria-current] .icon{color:var(--acc)}
.nav-item:focus-visible{outline-offset:-1px}
.nav-label{flex:1 1 auto;min-width:0}
.nav-count{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-count:empty{display:none}
.nav-lock{display:inline-flex;flex:none;color:var(--muted)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px}
.person-card{display:flex;flex-direction:column;gap:8px;padding:0 4px}
.person-card-head{display:flex;align-items:center;gap:8px}
.person-card-head .avatar{width:24px;height:24px;font-size:10px}
.person-card-title{font-family:var(--font-body);font-size:13.5px;font-weight:650;line-height:1.3}
.person-card p{font-size:12.5px;line-height:1.5;color:var(--muted)}
.person-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12.5px;font-weight:600}
.me-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none}
a.me-card:hover{background:var(--sunk)}
.me-card[aria-current]{border-color:var(--line2);background:var(--tint)}
.me-text{display:flex;flex-direction:column;min-width:0}
.me-name{font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.me-sub{font-size:12.5px;color:var(--muted)}
.hosted{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 4px 4px;color:var(--ink2)}
.hosted-by{font-size:12px;line-height:1.35;color:var(--muted)}

/* the top bar */
.topbar{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .logo-tile{flex:0 1 auto;min-height:48px;max-width:160px;padding:6px 12px;border-radius:10px}
.topbar .logo-tile .brand-logo{max-height:34px}
.topbar .logo-tile .brand-name{font-size:15px}
.top-nav{flex:1 1 auto;display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.top-nav::-webkit-scrollbar{display:none}
.top-nav>:first-child{margin-left:auto}
.top-nav>:last-child{margin-right:auto}
.top-nav .nav-item{position:relative;flex:0 0 auto;width:auto;flex-direction:column;justify-content:center;gap:3px;min-height:52px;padding:4px 8px;font-size:12px;text-align:center}
.top-nav .nav-label{flex:none}
.top-nav .nav-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--tint2);color:var(--ink);font-size:11px;line-height:18px;text-align:center}
.top-nav .nav-lock{position:absolute;top:4px;right:6px}
.topbar.is-focus{background:transparent;border-bottom:0}
.topbar-gap{flex:1 1 auto}
.me-link{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:inherit;text-decoration:none}
.me-link[aria-current] .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--acc)}

/* the phone header (B3): brokerage color, logo or name, "with Justin Green Custom Homes", Help, avatar */
.phone-head{display:flex;align-items:center;gap:6px;min-height:64px;padding:8px 6px 8px 16px;padding-top:max(8px,env(safe-area-inset-top,0px));background:var(--brand);color:var(--on-brand)}
.ph-logo{flex:1 1 auto;display:flex;align-items:center;min-width:0;min-height:44px;color:inherit;text-decoration:none}
.ph-logo .brand-logo{width:auto;max-width:100%;max-height:36px}
.ph-logo .plate{padding:4px 8px}
.ph-logo .plate .brand-logo{max-height:28px}
.ph-logo .brand-name{font-size:19px}
.ph-jg{flex:0 1 auto;display:flex;align-items:center;min-width:0;margin:0 4px}
.ph-jg .jg-lockup img{height:20px}
.phone-head .icon-btn{color:inherit}
.phone-head .icon-btn:hover{background:transparent;opacity:.85}
.phone-head .me-link[aria-current] .avatar{box-shadow:0 0 0 2px var(--brand),0 0 0 4px var(--on-brand)}
@media (max-width:359.98px){.ph-jg .jg-with{display:none}.ph-jg .jg-lockup img{height:17px}}

/* the phone tab bar and the "Register a client" bar above it (Home and Referrals) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow-up)}
.tab{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;border-radius:14px;color:var(--muted);font-size:11.5px;font-weight:550;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tab:hover{color:var(--ink)}
.tab-ic{display:grid;place-items:center;width:52px;height:28px;border-radius:14px}
.tab[aria-current]{color:var(--acc);font-weight:650}
.tab[aria-current] .tab-ic{background:var(--tint2);box-shadow:inset 0 0 0 2px var(--acc)}
.tab:focus-visible{outline-offset:-3px}
.tab-lock{position:absolute;top:5px;left:calc(50% + 12px);display:inline-flex;color:var(--muted)}
.shell[data-regbar="1"]>.tabbar{border-top-color:transparent;box-shadow:none}
.regbar{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));z-index:41;padding:12px 12px 4px;background:var(--surface);border-radius:24px 24px 0 0;box-shadow:var(--shadow-up)}
.regbar .btn{min-height:52px;border-radius:16px;font-size:16px;gap:10px}
.regbar-plus{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--on-brand);color:var(--brand)}

/* the web footer line (U-127) */
.foot{padding-bottom:28px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--muted)}
.foot a{color:inherit}

/* global notices (re-sign, paused, office confirming the PB, master being signed again) */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px 12px 16px;border:1px solid var(--warn-line);border-radius:var(--r);background:var(--warn-tint);color:var(--ink);font-size:14px;line-height:1.5}
.banner-ic{display:flex;flex:none;color:var(--warn)}
.banner-text{flex:1 1 260px;min-width:0}
.banner .btn{flex:none}
.banner.bad{border-color:var(--bad-line);background:var(--bad-tint)}
.banner.bad .banner-ic{color:var(--bad)}

/* the status line: short messages from the shell and ADV.flash */
.toast{position:fixed;left:50%;bottom:24px;z-index:120;width:min(520px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:none}
.toast:empty{display:none}
.toast .note{pointer-events:auto;box-shadow:var(--shadow-2);animation:adv-rise .2s var(--ease)}
@media (max-width:767.98px){.toast{bottom:calc(var(--tabbar-h) + var(--regbar-h) + 12px + env(safe-area-inset-bottom,0px))}}

/* ---------- 4 · page ---------- */
.page{display:flex;flex-direction:column;gap:24px;min-width:0}
.page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:0;align-items:end;min-width:0}
.page-head>*{grid-column:1;min-width:0}
.page-head>*+*:not(.page-actions){margin-top:6px}
.page-head>.page-actions{grid-column:2;grid-row:1/span 3;align-self:end}
.page-title{font-family:var(--font-heading);font-size:28px;line-height:1.25;font-weight:var(--heading-wght)}
.page-sub{font-size:15px;line-height:1.5;color:var(--muted)}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---------- 5 · cards, grids, layout ---------- */
.card{display:block;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:var(--card-pad)}
.card:not(.stack):not(.row)>*+*{margin-top:12px}
a.card{color:inherit;text-decoration:none;transition:box-shadow .18s,border-color .18s}
a.card:hover{border-color:var(--line2);box-shadow:var(--shadow-2)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-width:0}
.card-title{font-family:var(--font-heading);font-size:19px;line-height:1.3;font-weight:600}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-body{min-width:0}
.card-body:not(.stack):not(.row)>*+*{margin-top:12px}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:14px;border-top:1px solid var(--line)}
.card.warn{background:var(--warn-tint);border-color:var(--warn-line)}
.card.brand{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.card.brand .muted,.card.brand .small,.card.brand .eyebrow,.card.brand .page-sub,.card.brand .card-title,.card.brand a:not(.btn):not(.cam){color:inherit}
.card.sunk{background:var(--sunk)}
.card>.list,.card>.table,.card>[data-in]>.table{width:calc(100% + var(--card-pad) * 2);max-width:none;margin-inline:calc(var(--card-pad) * -1);border-left:0;border-right:0;border-radius:0}
.card>.list:last-child,.card>.table:last-child{margin-bottom:calc(var(--card-pad) * -1);border-bottom:0;border-radius:0 0 var(--r) var(--r)}
.card .empty{border:0;background:transparent;padding:24px 8px}
.grid-2,.grid-3{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.split{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .split{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}

/* ---------- 6 · text ---------- */
.eyebrow{font-size:13px;line-height:1.35;font-weight:550;letter-spacing:.01em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.45}
.num{font-variant-numeric:tabular-nums}
.money{font-size:32px;line-height:1.15;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.money-sm{font-size:17px;line-height:1.3;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:.92em;overflow-wrap:anywhere}
.email{overflow-wrap:break-word}   /* v0.14.2: an address breaks after the @ or before a dot (ADV.ui.email); mid-word only when one part outruns the line */
.email-part{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}   /* ADV.ui.email(s, 'clip'): that part ends in "…" instead */
.email-fit{display:inline-grid;grid-template-columns:minmax(0,max-content);max-width:100%;vertical-align:top}   /* v0.14.3: the clip form asks for its whole length but needs no width at all, so it never sets a column's minimum */
.lead{font-size:17px;line-height:1.55;color:var(--ink2)}
.h-display{font-family:var(--font-heading);font-size:34px;line-height:1.12;font-weight:600;font-synthesis:none;letter-spacing:-.01em}

/* ---------- 7 · stats ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px 24px;background:var(--surface);box-shadow:-1px 0 0 0 var(--line),0 -1px 0 0 var(--line)}
.stat-label{font-size:12.5px;line-height:1.35;font-weight:550;color:var(--muted)}
.stat-value{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.stat-sub{font-size:12.5px;line-height:1.4;color:var(--muted)}

/* ---------- 8 · buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,filter .15s,box-shadow .15s}
.btn:hover{background:var(--sunk);text-decoration:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.primary:hover{background:var(--acc);box-shadow:var(--shadow-2)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.brand:hover{background:var(--brand);box-shadow:var(--shadow-2)}
.btn.danger{background:var(--surface);border-color:var(--bad-line);color:var(--bad)}
.btn.danger:hover{background:var(--bad-tint)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--acc)}
.btn.ghost:hover{background:var(--tint)}
.btn.sm{min-height:32px;padding:0 12px;gap:6px;font-size:13.5px}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:none}
.btn[aria-busy="true"]{cursor:progress}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{background:var(--sunk);color:var(--ink)}
.icon-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 9 · forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field-label{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--ink2)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),select,textarea){display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--muted);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;line-height:1.4}
:where(textarea){min-height:96px;resize:vertical}
:where(input,select,textarea):focus-visible{border-color:var(--acc)}
:where(input,select,textarea)[aria-invalid="true"]{border-color:var(--bad)}
:where(input,select,textarea):disabled{background:var(--sunk);color:var(--muted);cursor:not-allowed}
:where(input[readonly],textarea[readonly]){background:var(--sunk)}
::placeholder{color:var(--muted);opacity:1}
:where(input[type=checkbox],input[type=radio]){flex:none;width:18px;height:18px;margin:0;accent-color:var(--acc)}
.hint{font-size:12.5px;line-height:1.45;color:var(--muted)}
.check{display:flex;align-items:flex-start;gap:10px;line-height:1.45;cursor:pointer}
.check>input{margin-top:2px}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
.radio-cards>label,.radio-cards>.radio-card{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);cursor:pointer;line-height:1.45;transition:border-color .15s,background-color .15s}
.radio-cards>label:hover,.radio-cards>.radio-card:hover{border-color:var(--acc)}
.radio-cards>label>input,.radio-cards>.radio-card input{margin-top:2px}
.radio-cards>label:has(input:checked),.radio-cards>.radio-card:has(input:checked),.radio-cards>.is-checked{border-color:var(--acc);background:var(--tint);box-shadow:inset 0 0 0 1px var(--acc)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.step{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;font-size:13px;font-weight:550;line-height:1.3;color:var(--muted)}
.step::before{content:"";display:block;height:4px;border-radius:2px;background:var(--track)}
.step.is-done{color:var(--ink2)}
.step.is-done::before,.step.is-current::before{background:var(--acc)}
.step.is-current{color:var(--ink);font-weight:700}
.dropzone{display:flex;flex-direction:column;gap:8px;min-width:0}
.dropzone.is-over{outline:2px dashed var(--acc);outline-offset:4px;border-radius:var(--r)}
.slot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;min-height:56px;padding:8px 8px 8px 14px;border:1px dashed var(--line2);border-radius:10px;background:var(--surface)}
.slot>.icon{color:var(--muted)}
.slot.is-filled{border-style:solid;border-color:var(--line);background:var(--sunk)}
.slot.is-filled>.icon{color:var(--acc)}
.slot.warn,.slot.is-needed{border:1px solid var(--warn-line);background:var(--warn-tint)}
.slot.warn>.icon,.slot.is-needed>.icon{color:var(--warn)}
.slot-name{flex:1 1 180px;min-width:0;font-weight:550;line-height:1.35;overflow-wrap:anywhere}
.slot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}

/* ---------- 10 · status ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:24px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--sunk);color:var(--ink2);font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;vertical-align:middle}
.badge.ok,.badge.warn,.badge.bad,.badge.info{padding-left:8px}
.badge.ok::before,.badge.warn::before,.badge.bad::before,.badge.info::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--tint);border-color:var(--tint2);color:var(--ink)}
.badge.ok::before{background:var(--acc)}
.badge.warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn)}
.badge.bad{background:var(--sunk);border-color:var(--line2);color:var(--muted)}
.badge.info{background:var(--tint);border-color:var(--tint2);color:var(--ink2)}
.badge.info::before{background:var(--accent-ui)}
.badge.brand{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--line);border-radius:6px;background:var(--sunk);color:var(--muted);font-size:11.5px;font-weight:650;line-height:1.5;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.note{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--ink2);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.note:empty{display:none}
.note.ok{background:var(--tint);border-color:var(--tint2);color:var(--ink)}
.note.err{background:var(--bad-tint);border-color:var(--bad-line);color:var(--bad)}
.note.info{background:var(--sunk);border-color:var(--line);color:var(--ink2)}
.note.warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn)}
.note .btn{margin-left:8px;vertical-align:middle}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--muted);text-align:center;line-height:1.5}
.empty-title{font-family:var(--font-heading);font-size:18px;line-height:1.3;font-weight:600;font-synthesis:none;color:var(--ink)}
.empty .btn{margin-top:8px}

/* ---------- 11 · the stage meter (7 segments) ---------- */
.meter{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:center;min-width:0}
.meter>.seg{height:6px}
.meter.sm{gap:2px}
.meter.sm>.seg{height:4px}
.seg{display:block;height:6px;border-radius:3px;background:var(--track)}
.seg.done{background:var(--acc)}
.seg.now{background:var(--accent-ui)}
.seg.wait{background:repeating-linear-gradient(135deg,var(--acc) 0 2px,var(--tint2) 2px 4px)}
.meter.is-stage .seg.wait{background:repeating-linear-gradient(135deg,var(--warn) 0 2px,var(--warn-tint) 2px 4px)}
.meter>.meter-label{grid-column:1/-1;margin-top:5px}
.meter-label{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
.meter-word{font-weight:650;color:var(--ink)}
.meter.is-wait .meter-word{color:var(--warn)}
.meter.is-off{display:block}
.meter.is-off>.meter-label{margin-top:0}

/* ---------- 12 · lists, tables, the board ---------- */
.list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list>*+*{border-top:1px solid var(--line)}
.list>li{margin:0}
.item{display:flex;align-items:center;gap:12px 20px;width:100%;min-height:56px;padding:14px 16px 14px 20px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none}
a.item,button.item{cursor:pointer}
a.item:hover,button.item:hover{background:var(--sunk);text-decoration:none}
.item:focus-visible{outline-offset:-3px}
.item-main{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.item-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.item>.icon:last-child{color:var(--muted)}
.table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14.5px;line-height:1.4}
.table th{padding:10px 16px;border-bottom:1px solid var(--line);background:var(--sunk);color:var(--muted);font-size:12.5px;font-weight:600;text-align:left;white-space:nowrap}
.table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}
.table tbody tr:first-child td{border-top:0}
.table th.num,.table td.num,.table td.money-sm{text-align:right}
.table tbody tr:hover td{background:var(--sunk)}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px;align-items:start}
.col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:160px;padding:8px;border-radius:10px;background:var(--sunk)}
.col-head{display:flex;justify-content:space-between;gap:8px;padding:4px 4px 2px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.col>.card{padding:12px;border-radius:var(--r-sm)}
.seg-toggle{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--sunk)}
.seg-toggle>button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.seg-toggle>button:hover{color:var(--ink)}
.seg-toggle>button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc),var(--shadow-1)}

/* ---------- 13 · the checks timeline ---------- */
.timeline{position:relative;display:flex;flex-direction:column;margin:0;padding:0 0 0 28px;list-style:none}
.timeline::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:1px;background:var(--line)}
.tl-group{display:flex;flex-direction:column;margin:0}
.tl-group+.tl-group{margin-top:12px}
.tl-head{display:flex;justify-content:space-between;gap:8px;padding:4px 0 6px;font-size:12.5px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.tl-item{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0;padding:6px 0}
.tl-dot{position:absolute;left:-28px;top:8px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);background:var(--surface)}
.tl-dot.paid{border-color:var(--acc);background:var(--acc)}
.tl-dot.paid::after{content:"";width:4px;height:7px;margin-top:-2px;border:solid var(--on-acc);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tl-dot.due{border-color:var(--acc)}
.tl-dot.due::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.tl-dot.next{border-color:var(--line2)}
.tl-dot.closed{border-style:dashed;border-color:var(--muted);background:var(--sunk)}
.tl-dot.closed::after{content:"";width:6px;height:2px;border-radius:1px;background:var(--muted)}
.tl-main{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.45}
.tl-amount{flex:none;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 14 · people ---------- */
.avatar{position:relative;display:inline-flex;flex:none;width:40px;height:40px;border-radius:50%;font-size:14px;line-height:1;vertical-align:middle}
.avatar>img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--sunk)}
.avatar.sm{width:32px;height:32px;font-size:12px}
.avatar.lg{width:72px;height:72px;font-size:25px}
.mono-initials{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--tint2);color:var(--ink);font-weight:650;letter-spacing:.02em;line-height:1;user-select:none}
.avatar .cam{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--line2);border-radius:50%;background:var(--surface);color:var(--ink2);box-shadow:var(--shadow-1)}
.avatar.lg .cam{right:-6px;bottom:-6px;width:30px;height:30px}
.avatar.sm .cam{right:-5px;bottom:-5px;width:18px;height:18px}
button.cam{cursor:pointer}
:is(a,button).cam::before{content:"";position:absolute;inset:-11px}
.avatar.sm :is(a,button).cam::before{inset:-13px}

/* ---------- 15 · overlays: the sheet (phone bottom sheet, web side panel) and the confirm dialog ---------- */
.backdrop{position:fixed;inset:0;z-index:80;background:var(--scrim);animation:adv-fade .18s ease}
.sheet{position:fixed;z-index:90;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);outline:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 12px 24px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:19px;line-height:1.3}
.sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 24px 24px}
.sheet-body>*+*{margin-top:12px}
@media (min-width:768px){
  .sheet{top:0;right:0;bottom:0;width:min(440px,100vw);border-left:1px solid var(--line);animation:adv-from-right .22s var(--ease)}
}
@media (max-width:767.98px){
  .sheet{left:0;right:0;bottom:0;max-height:calc(100% - 24px);max-height:min(90dvh,calc(100% - 24px));border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:adv-from-below .24s var(--ease)}
  .sheet::before{content:"";display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--line2)}
  .sheet-head{padding:8px 8px 10px 16px}
  .sheet-body{padding:14px 16px 20px}
}
div.dialog{position:fixed;left:50%;top:50%;z-index:100;display:flex;flex-direction:column;gap:16px;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);transform:translate(-50%,-50%);animation:adv-pop .18s var(--ease)}
div.dialog .dialog-title{font-size:20px;line-height:1.3}
div.dialog .dialog-body{display:flex;flex-direction:column;gap:12px;line-height:1.5}
div.dialog .dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media (max-width:767.98px){div.dialog .dialog-actions .btn{flex:1 1 auto}}

/* ---------- 16 · brand pieces ---------- */
.logo-tile{display:flex;align-items:center;justify-content:center;min-width:0;min-height:80px;padding:12px 18px;border-radius:var(--r);background:var(--brand);color:var(--on-brand);text-decoration:none;overflow:hidden}
.logo-tile .brand-logo{max-height:52px}
.logo-tile .brand-name{font-size:18px;text-align:center}
.brand-logo{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
.brand-name{display:block;min-width:0;font-family:var(--font-heading);font-weight:600;font-synthesis:none;line-height:1.15;color:inherit;overflow-wrap:anywhere}
.plate{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:6px 10px;border-radius:var(--r-sm)}
.jg-lockup{display:inline-flex;align-items:center;gap:7px;max-width:100%;color:inherit;line-height:1}
.jg-lockup img{display:block;width:auto;height:22px}
.jg-with{flex:none;font-size:11.5px;font-weight:500;letter-spacing:.01em}
.jg-lockup.text .jg-word{display:flex;flex-direction:column;font-family:var(--font-heading);font-size:13px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.jg-lockup.text .jg-word small{margin-top:2px;font-family:var(--font-body);font-size:8.5px;font-weight:600;letter-spacing:.16em}
.jg-lockup.ink .jg-mark{display:block;flex:none;width:106px;height:24px;background:currentColor;-webkit-mask:url(/jg-logo-horizontal-white.png) no-repeat left center/contain;mask:url(/jg-logo-horizontal-white.png) no-repeat left center/contain}
.jg-alt{display:none;font-family:var(--font-heading);font-size:14px}
@supports not ((mask-image:none) or (-webkit-mask-image:none)){.jg-lockup.ink .jg-mark{display:none}.jg-lockup.ink .jg-alt{display:inline}}

/* ---------- 17 · the reading pages: privacy and terms (Daylight typography, 720 px column) ---------- */
.doc{display:flex;flex-direction:column;min-height:100vh;background:var(--ground);color:var(--ink)}
.doc-head{background:var(--brand);color:var(--on-brand)}
.doc-head-in{display:flex;align-items:center;gap:14px;max-width:720px;min-height:62px;margin:0 auto;padding:12px 20px}
.doc-head .jg-lockup{height:26px;width:auto}
.doc-adv{padding-left:14px;border-left:1px solid currentColor;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.legal{width:100%;max-width:720px;margin:0 auto;padding:40px 20px 64px;font-size:16px;line-height:1.7;color:var(--ink)}
.legal h1{font-size:34px;line-height:1.2;font-weight:400;margin-bottom:6px}
.legal-sub{margin-bottom:28px;font-size:13px;line-height:1.5;color:var(--muted)}
.legal h2{margin:32px 0 8px;font-size:21px;line-height:1.3;font-weight:400}
.legal p{margin:0 0 14px}
.legal-foot{margin-top:auto;border-top:1px solid var(--line)}
.legal-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:720px;margin:0 auto;padding:18px 20px 28px;font-size:13px;color:var(--muted)}
.legal-foot a{color:var(--acc)}

/* ---------- 18 · phone sizes: 44 px targets, 16 px fields (no zoom on focus) ---------- */
@media (max-width:767.98px){
  body{font-size:15px}
  .page{gap:16px}
  .page-head{grid-template-columns:minmax(0,1fr)}
  .page-head>.page-actions{grid-column:1;grid-row:auto;align-self:start;margin-top:12px}
  .page-title{font-size:24px}
  .card{box-shadow:var(--shadow-1)}
  .card-title{font-size:18px}
  .btn,.btn.sm{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .seg-toggle>button{min-height:44px}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea){font-size:16px}
  :where(input[type=checkbox],input[type=radio]){width:20px;height:20px}
  .check{min-height:44px;padding:4px 0}
  details>summary{min-height:44px;padding:10px 0}
  /* v0.14.5 walk: a link that stands on its own (not inside a sentence) is a 44 px target too: a form slot's template link,
     a card's action link, the page head's export link, the legal pages' footer links */
  .slot-actions>a:not(.btn),.card-actions>a:not(.btn),.page-actions a:not(.btn),.legal-foot a{display:inline-flex;align-items:center;min-height:44px}
  .money{font-size:28px}
  .h-display{font-size:28px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:14px 16px}
  .stat-value{font-size:22px}
  .item{padding:14px 16px}
  .steps{gap:6px}
  .step{font-size:12px}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table{background:transparent}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .table tr{margin-bottom:10px;padding:4px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
  .table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 14px;border:0;text-align:right}
  .table td::before{content:attr(data-label);flex:none;max-width:50%;color:var(--muted);font-size:12.5px;font-weight:600;text-align:left}
  .table tbody tr:hover td{background:transparent}
  /* v0.14.6: a caption over stacked rows reads as a line above them (as a table caption in a block table it shrank to its
     longest word: "Files on R-1005, newest first" stood 45 px wide over six lines on the office queue at 390) */
  .table>caption{display:block;width:100%;padding:0 0 6px}
  .card>.table,.card>[data-in]>.table{width:auto;margin-inline:0}
  .card>.table:last-child{margin-bottom:0}
  .legal{padding:28px 16px 48px}
  .legal h1{font-size:28px}
}
/* v0.14.3: a table its card cannot hold at this width (the roster beside the brand card, or in a wide brand face) takes the
   phone's row form at any width; brokerage.js fitRoster sets .as-rows only when the table would cross the card's edge */
.table.as-rows,.table.as-rows tbody,.table.as-rows tr,.table.as-rows td{display:block;width:100%}
.table.as-rows{background:transparent}
.table.as-rows thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.table.as-rows tr{margin-bottom:10px;padding:4px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.table.as-rows td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 14px;border:0;text-align:right}
.table.as-rows td::before{content:attr(data-label);flex:none;max-width:50%;color:var(--muted);font-size:12.5px;font-weight:600;text-align:left}
.table.as-rows tbody tr:hover td{background:transparent}
.table.as-rows caption{display:block;width:100%;padding:0 0 6px}
.card>[data-in]>.table.as-rows{width:auto;margin-inline:0}

/* ---------- 20 · v0.14.4 the concept pass (Daylight on the web, Front Door on the phone; BOOT v0144 sections 1 and 2) ---------- */
/* the web: the brokerage's signed line, export and W-9 beside a title that keeps one line */
@media (min-width:768px){.page-head>.page-actions{max-width:420px;justify-content:flex-end;text-align:right}}
/* home on the web (C2): client, stage and fee on a fixed grid under a header row; one line each */
.list.rows{display:grid;grid-template-columns:minmax(190px,1fr) 1.5fr auto auto;column-gap:16px}
.list.rows>*{grid-column:1/-1;display:grid;grid-template-columns:minmax(190px,1fr) 1.5fr auto auto;column-gap:16px;align-items:center}
@supports (grid-template-columns:subgrid){.list.rows>*{grid-template-columns:subgrid}}
.list>.list-head{padding:10px 16px 10px 20px;background:var(--sunk);color:var(--muted);font-size:12.5px;font-weight:600}
@media (min-width:1024px){.split.wide-first{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.list-head>:nth-child(3){text-align:right}
.list.rows .item-main>strong,.list.rows .one-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list.rows .item-side{max-width:160px}
section[aria-labelledby="ref-status-h"] .meter-label{display:none}
/* the stage card (C4): next up and the stage count, the meter, a check marker under each check's segment, the two ends */
.stage-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.meter-marks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:center;margin-top:8px}
.meter-marks>.marks-label{grid-column:1/4;justify-self:end;padding-right:8px;font-size:12.5px;color:var(--muted)}
.mark{justify-self:center;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--line2);border-radius:50%;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mark.paid{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
.mark.due{border-color:var(--acc);color:var(--ink)}
.mark.closed{border-style:dashed}
.meter-ends{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:12.5px;color:var(--muted)}
/* the fee's three checks: tiles on the phone (B4), the timeline on the web (C4) */
.check-tiles{display:none}
.check-tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:12.5px;line-height:1.35}
.check-tile>.ct-amt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.check-tile.is-next{border-color:var(--acc);background:var(--tint);box-shadow:inset 0 0 0 1px var(--acc)}
.check-tile.is-later{background:var(--sunk);color:var(--muted)}
.check-tile.is-closed{background:var(--sunk);color:var(--muted);border-style:dashed}
.stepper{display:none}
/* the B6 wallet card replaces the stat strip on the phone; phone lists stand in for the brokerage tables there */
.bk-wallet,.bk-phone-list{display:none}
.wallet-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);padding:14px var(--card-pad);background:var(--tint);border-top:1px dashed var(--line2);border-radius:0 0 var(--r) var(--r)}
.wallet-panel.one{grid-template-columns:minmax(0,1fr)}
.wallet-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wallet-label{margin:0;font-family:var(--font-body);font-size:14px;line-height:1.35;font-weight:600;letter-spacing:0}
/* v0.14.6: the wallet's labels print one line each, as on B3 (a long brokerage name wrapped "Paid to … to date" to two lines
   and "Next check to …" to three at 390); a label cut short ends in "…" and home.js puts the whole of it in its title */
.wallet-row>.wallet-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-panel [data-wallet]>.row{min-width:0}
.wallet-panel [data-wallet]>.row>.swatch-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-panel>div>.row:first-child{font-size:13px;font-weight:600;color:var(--ink2)}
.wallet-panel.mid{margin-bottom:0;border-bottom:1px dashed var(--line2);border-radius:0}
/* the roster at 768 px and wider (C6): one line per agent; the address on one line ending in "…" (the whole of it in the title and in Details) */
.table.roster{table-layout:fixed}
.table.roster col.c-joinder{width:150px}
.table.roster col.c-refs{width:160px}
.table.roster col.c-act{width:216px}
.table.roster td{padding:10px 12px}
.table.roster td:first-child,.table.roster th:first-child{padding-left:var(--card-pad)}
.table.roster td:last-child,.table.roster th:last-child{padding-right:var(--card-pad)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who-text{flex:1 1 auto;min-width:0}
.who-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px}
.acts .chev{transition:transform .15s}
.acts [aria-expanded="true"] .chev{transform:rotate(180deg)}
.table.roster tr.agent-detail td{padding-top:4px;padding-bottom:16px;background:var(--sunk)}
/* between the phone and 1200 px the roster card is 680 to 856 px: narrower columns and stacked actions keep the name readable */
@media (min-width:768px) and (max-width:1199.98px){
  .table.roster col.c-joinder{width:140px}
  .table.roster col.c-refs{width:120px}
  .table.roster col.c-act{width:136px}
  .table.roster .acts{flex-direction:column;align-items:flex-end;gap:6px}
}
/* v0.14.5 (s1b) · no page scrolls sideways. The brokerage's Referrals and Checks tables keep tighter cells from 768 to 1199 px
   (the Checks table crossed its card by 13.9 px at 768 and pushed the page 5 px at 1024 on this PC; 25 and 41 px of page in
   the PM seat's verify); brokerage.js fitRoster stacks a table's rows (.table.as-rows) when it still would not fit. :where()
   keeps these under .table.as-rows td, so the stacked form keeps its own padding. */
@media (min-width:768px) and (max-width:1199.98px){
  :where(section[data-in="refs"],section[data-in="checks"])>.table :is(th,td){padding-left:10px;padding-right:10px}
  :where(section[data-in="refs"],section[data-in="checks"])>.table :is(th,td):where(:first-child){padding-left:16px}
  :where(section[data-in="refs"],section[data-in="checks"])>.table :is(th,td):where(:last-child){padding-right:16px}
}
/* v0.14.6 · the Brokerage from 768 to 1199 px (the rail leaves the page about 680 px at 1024): the four totals on one row
   (auto-fit made them 3 + 1) with tighter cells and figures, and the page actions under the title, so the brokerage's name
   keeps one line (beside actions up to 420 px wide it had 236 px and wrapped) */
@media (min-width:768px) and (max-width:1199.98px){
  [data-brk-root] .strip[data-in="strip"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-brk-root] .strip[data-in="strip"] .stat{padding:14px 16px}
  [data-brk-root] .strip[data-in="strip"] .stat-value{font-size:24px}
  [data-brk-root]>.page-head{grid-template-columns:minmax(0,1fr)}
  [data-brk-root]>.page-head>.page-actions{grid-column:1;grid-row:auto;align-self:start;max-width:none;justify-content:flex-start;text-align:left;margin-top:12px}
}
/* the roster's Referrals cell on one line ("5 referrals · 5 active" at 1280 wrapped by 0.2 px); the whole text in its title */
.table.roster td[data-label="Referrals"]>.num{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1200px){.table.roster col.c-refs{width:176px}}
/* the web home's checks (C2): the client and the amount on one line, the check under them; one line each from 1200 px */
.tl-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.tl-line>.tl-name{min-width:0}
@media (min-width:1200px){.tl-line>.tl-name,.tl-main>.tl-what{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:767.98px){
  /* Front Door's display role: titles and money in Archivo, heavy and wide (or the brokerage's own heading face) */
  h1,.page-title,.money,.h-display,.door-title,.door-h{font-family:var(--font-display);font-weight:var(--display-wght);font-stretch:var(--display-wdth);letter-spacing:var(--display-track);font-synthesis:none}
  h1,.page-title{font-size:30px;line-height:1.12}
  .money{font-size:34px;line-height:1.1}
  .money.xl{font-size:38px}
  /* the brand band (B3, B4, B5, B6): the view's head in the brand color, continuous with the header; the first card rides over its edge */
  .page>.band{margin:-16px -16px -70px;padding:6px 16px 74px;background:var(--brand);color:var(--on-brand)}
  .page>.band.no-lap{margin-bottom:0;padding-bottom:20px}
  .page>.band~*{position:relative}
  .band .eyebrow,.band .page-sub,.band .muted,.band .small,.band a:not(.btn):not(.cam){color:inherit}
  .band .page-sub,.band .eyebrow{opacity:.86}
  .band .btn.ghost{color:inherit}
  .band .btn.ghost:hover{background:rgba(127,127,127,.18)}
  .band :focus-visible{outline-color:var(--on-brand)}
  .band .steps .step{color:inherit;opacity:.8}
  .band .steps .step::before{background:currentColor;opacity:.35}
  .band .steps .step.is-done::before,.band .steps .step.is-current::before{background:var(--on-brand);opacity:1}
  .band .steps .step.is-current{opacity:1}
  .greet{display:flex;align-items:center;gap:16px;min-width:0}
  .greet .avatar.lg .mono-initials{background:var(--avatar-fill);color:var(--avatar-ink);font-family:var(--font-display);font-weight:var(--display-wght);font-stretch:var(--display-wdth)}
  .greet .avatar.lg{box-shadow:0 0 0 3px var(--brand),0 0 0 4px rgba(255,255,255,.28);border-radius:50%}
  .greet .page-sub{margin-top:4px}
  /* the B4 stepper on the band: seven stages, the labels above and below the line in turn */
  .stepper{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:12px -4px 0;padding:22px 0;list-style:none}
  .stepper::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;margin-top:-1px;background:currentColor;opacity:.35}
  .stepper>li{position:relative;display:grid;place-items:center;min-width:0}
  .st-dot{position:relative;z-index:1;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;background:var(--brand)}
  .stepper>li:not(.is-done):not(.is-now) .st-dot{opacity:.6}
  .stepper>.is-done .st-dot{border-color:var(--accent);background:var(--accent)}
  .stepper>.is-now .st-dot{width:22px;height:22px;border:3px solid var(--on-brand);background:var(--accent)}
  .st-label{position:absolute;left:50%;transform:translateX(-50%);font-size:11.5px;line-height:1.2;white-space:nowrap;opacity:.86}
  .stepper>li:nth-child(odd) .st-label{bottom:calc(100% + 6px)}
  .stepper>li:nth-child(even) .st-label{top:calc(100% + 6px)}
  .stepper>.is-now .st-label{font-weight:700;opacity:1}
  .stepper>li:first-child .st-label{left:0;transform:none}
  .stepper>li:last-child .st-label{left:auto;right:0;transform:none}
  section[aria-labelledby="ref-status-h"] .meter,section[aria-labelledby="ref-status-h"] .meter-marks,section[aria-labelledby="ref-status-h"] .meter-ends,section[aria-labelledby="ref-status-h"] .meter-label{display:none}
  .check-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  section[aria-labelledby="ref-fee-h"] .timeline{display:none}
  /* Front Door forms: 48 px fields with a 14 px radius, the main button 52 px with a 16 px radius */
  :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),select){min-height:48px;border-radius:14px}
  :where(textarea){border-radius:14px}
  form .btn.primary,.btn.primary.block{min-height:52px;border-radius:16px;font-size:16px}
  /* register: Next pinned full width at the bottom of the screen (B5) */
  .page[data-view="register"]{padding-bottom:92px}
  .page[data-view="register"] [data-region="actions"]{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);box-shadow:var(--shadow-up)}
  .page[data-view="register"] [data-region="actions"]>.btn.primary{flex:1 1 auto}
  .page[data-view="register"] [data-region="actions"][hidden]{display:none}
  .oral-check{padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--surface)}
  /* the brokerage on the phone (B6): the wallet card, agents as two-up tiles, referrals as cards and checks as the timeline */
  .strip.web-only{display:none}
  .bk-wallet{display:block}
  .bk-phone-list{display:flex;flex-direction:column;gap:10px}
  .bk-has-phone>.table{display:none}
  .table.roster{table-layout:auto}
  .table.roster colgroup{display:none}
  .table.roster tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .table.roster tr{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:12px 10px 10px;text-align:center}
  .table.roster td,.table.roster td:first-child,.table.roster td:last-child{display:block;padding:0;border:0;text-align:center}
  .table.roster td::before{content:none;display:none}
  .table.roster td[data-label="Agent"]{order:1}
  .table.roster td[data-label="Referrals"]{order:2;font-size:13px;color:var(--muted)}
  .table.roster td[data-label="Joinder"]{order:3}
  .table.roster td[data-label="Actions"]{order:4;margin-top:4px}
  .table.roster .who{flex-direction:column;gap:6px}
  .table.roster .who>.avatar{width:48px;height:48px;font-size:17px}
  .table.roster .who-name{font-size:14.5px}
  /* v0.14.6 (1.3): a name stays inside its tile. The column flex centred .who-text at its own width, so a long name ran past
     both edges of its tile ("Isabella Fontaine-Whitaker Dumont", 247.8 px in a 157 px tile) and the ellipsis never applied.
     The text block now takes the tile's width; the name ends in "…" (the whole of it in the title) and a PB or Paused tag
     keeps its place beside it */
  .table.roster .who>.who-text{align-self:stretch}
  .table.roster .who-name{display:flex;justify-content:center;align-items:baseline;gap:4px}
  .table.roster .who-name>b{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .table.roster .who-name>.tag{flex:none}
  .table.roster .email-line{display:none}
  .table.roster .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
  .table.roster .acts .btn{padding:0 6px;font-size:13px}
  .table.roster tr.agent-detail{grid-column:1/-1;padding:12px 14px;text-align:left}
  .table.roster tr.agent-detail td{text-align:left;background:transparent;padding:0}
  .bk-phone-list{gap:6px}
  .bk-ref{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);line-height:1.35}
  .bk-ref>*+*{margin-top:3px}
  .bk-ref>.meter{margin:7px 0 2px}
  .bk-phone-list .tl-group+.tl-group{margin-top:8px}
  .bk-phone-list .tl-head{padding:2px 0 4px}
  .bk-phone-list .tl-item{padding:3px 0}
  .bk-phone-list .tl-dot{top:5px}
  .bk-phone-list .tl-main{font-size:13px;line-height:1.3}
  /* v0.14.5: every line of a B6 referral card or check prints on one line (the whole text in its title), so a longer name
     never adds a line and the lists keep their height */
  .bk-phone-list .one-line{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bk-phone-list .wallet-row>.one-line{flex:1 1 auto}
  /* v0.14.5 · the referral's band (B4): the back link compact (20 px tall, a 46 px target), then the title, then the R-number,
     type and JGCH job chip, then the stepper */
  .band .band-back{position:relative;display:flex;width:max-content;min-height:0;padding:0;gap:4px}
  .band .band-back::before{content:"";position:absolute;inset:-13px -10px}
  .page[data-view="referral"]>.band .page-sub{font-size:14px}
  .band-chip{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:12.5px;line-height:1.3;white-space:nowrap;vertical-align:middle}
}

/* ---------- 19 · motion and contrast preferences ---------- */
@keyframes adv-fade{from{opacity:0}to{opacity:1}}
@keyframes adv-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes adv-from-right{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes adv-from-below{from{transform:translateY(32px);opacity:.4}to{transform:none;opacity:1}}
@keyframes adv-pop{from{opacity:0;transform:translate(-50%,-47%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .seg{border:1px solid CanvasText}
  .seg.done,.seg.now{background:CanvasText}
  .tl-dot.paid,.tl-dot.due::after{background:CanvasText}
  .nav-item[aria-current],.tab[aria-current]{outline:2px solid CanvasText}
}