/* FAIR design system — shared by every FAIR site.
   Layout concept: a filing ledger. Plain paper ground, ruled rows, mono reference
   numbers, one brand colour per product carried by the F mark, buttons and rules. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@87.5..112.5,500..800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  color-scheme: light;
  /* neutrals (cool, biased toward the hub indigo) */
  --paper:#F5F6FA; --surface:#FFFFFF; --ink:#141A33; --ink-2:#4A5170; --ink-3:#7A8099;
  --rule:#DCDFEA; --rule-strong:#B9BED1;
  /* product colours: the same F mark, one colour each */
  --c-entities:#2F3FA8; --c-entities-tint:#E8EBFA; --c-entities-deep:#1D2870;
  --c-permits:#1B7A52;  --c-permits-tint:#E2F3EA;  --c-permits-deep:#0F4F35;
  --c-leases:#0B6E8E;   --c-leases-tint:#E0F1F6;   --c-leases-deep:#074A60;
  --c-evictions:#A8501A;--c-evictions-tint:#F8EADF;--c-evictions-deep:#6E3310;
  /* status */
  --ok:#1B7A52; --warn:#A86A00; --warn-ink:#7A4D00; --warn-tint:#FBF0D6; --late:#B3261E; --late-tint:#FBE6E4;
  /* active brand (overridden by data-brand) */
  --brand:var(--c-entities); --brand-tint:var(--c-entities-tint); --brand-deep:var(--c-entities-deep);
  --on-brand:#FFFFFF;               /* text on a solid brand fill */
  --band-bg:var(--brand-deep); --band-ink:#FFFFFF; --band-muted:#DDE1F2;
  --field:#FFFFFF; --shadow:0 1px 2px rgba(20,26,51,.06),0 8px 24px rgba(20,26,51,.06);
  --note-ink:#5C3A00;
  /* app shell (signed-in pages) */
  --side-bg:#141A33; --side-ink:#C9CEE3; --side-ink-strong:#FFFFFF; --side-hover:#1E2647; --side-rule:#262E52; --side-logo:#AEB8FF;
  /* type */
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Public Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:6px; --gutter:clamp(16px,4vw,40px); --max:1120px;
}
[data-brand="entities"]{--brand:var(--c-entities);--brand-tint:var(--c-entities-tint);--brand-deep:var(--c-entities-deep)}
[data-brand="permits"]{--brand:var(--c-permits);--brand-tint:var(--c-permits-tint);--brand-deep:var(--c-permits-deep)}
[data-brand="leases"]{--brand:var(--c-leases);--brand-tint:var(--c-leases-tint);--brand-deep:var(--c-leases-deep)}
[data-brand="evictions"]{--brand:var(--c-evictions);--brand-tint:var(--c-evictions-tint);--brand-deep:var(--c-evictions-deep)}
body[data-brand="permits"]{--side-logo:#7FE0B0;--side-bg:#0F2A1E;--side-hover:#173A2A;--side-rule:#1F4331;--side-ink:#C4DDD0;--band-muted:#D4ECDF}

/* ---------- dark mode ----------
   Each site stays in its own colour: Fair Entities goes deep navy-blue with a
   bright blue accent; Fair Permits goes near-black green with a bright green
   accent. Solid brand buttons switch to dark text on the bright accent. */
[data-theme="dark"]{color-scheme:dark;
  --paper:#080C1C; --surface:#0F1530; --ink:#E7EAF7; --ink-2:#A8B0D0; --ink-3:#7B84A8;
  --rule:#222A4E; --rule-strong:#343E6B; --field:#0B1026;
  --ok:#4ADE94; --warn:#F5B942; --warn-ink:#F5B942; --warn-tint:#33270A; --late:#FF8A80; --late-tint:#3A1614;
  --note-ink:#F5D48A; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  --side-bg:#060918; --side-ink:#A8B0D0; --side-hover:#141B3A; --side-rule:#1A2146; --side-logo:#8B97FF;
  --c-entities:#8B97FF; --c-entities-tint:#1A2256; --c-entities-deep:#C3CAFF;
  --c-permits:#3DDC91;  --c-permits-tint:#0E3322; --c-permits-deep:#9BF0C4;
  --c-leases:#4CC6EA;   --c-leases-tint:#0C2E3A;  --c-leases-deep:#A7E6F7;
  --c-evictions:#F29A5C;--c-evictions-tint:#3A200E;--c-evictions-deep:#FAC9A3;
  --on-brand:#060A18; --band-bg:#131B42; --band-ink:#FFFFFF; --band-muted:#C3CAFF;
}
[data-theme="dark"] body[data-brand="permits"]{
  --paper:#040D08; --surface:#0A1811; --ink:#E3F3EA; --ink-2:#9DBFAE; --ink-3:#6F9383;
  --rule:#17301F; --rule-strong:#25493A; --field:#06110B;
  --side-bg:#020805; --side-ink:#9DBFAE; --side-hover:#0E2419; --side-rule:#12291D; --side-logo:#3DDC91;
  --band-bg:#0C2A1C; --band-muted:#9BF0C4; --on-brand:#03100A;
}
[data-theme="dark"] [data-brand="entities"]{--brand:var(--c-entities);--brand-tint:var(--c-entities-tint);--brand-deep:var(--c-entities-deep)}
[data-theme="dark"] [data-brand="permits"]{--brand:var(--c-permits);--brand-tint:var(--c-permits-tint);--brand-deep:var(--c-permits-deep)}
[data-theme="dark"] [data-brand="leases"]{--brand:var(--c-leases);--brand-tint:var(--c-leases-tint);--brand-deep:var(--c-leases-deep)}
[data-theme="dark"] [data-brand="evictions"]{--brand:var(--c-evictions);--brand-tint:var(--c-evictions-tint);--brand-deep:var(--c-evictions-deep)}
[hidden]{display:none!important}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--brand);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-stretch:95%;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0;max-width:65ch}
.lede{font-size:1.15rem;color:var(--ink-2)}
.muted{color:var(--ink-2)} .small{font-size:.875rem}
.mono{font-family:var(--f-mono);font-size:.85em;font-variant-numeric:tabular-nums}
.eyebrow{font:500 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(40px,7vw,80px)}
.section + .section{border-top:1px solid var(--rule)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:32px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid{display:grid;gap:20px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.split{display:grid;gap:clamp(24px,5vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
.split > *{min-width:0}

/* prototype strip — delete when the site goes live */
.proto{background:#0B0F1F;color:#fff;font:400 .75rem/1.4 var(--f-mono);padding:6px var(--gutter);text-align:center}
.proto a{color:#fff}

/* header */
.site-head{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-block:12px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.15rem/1 var(--f-display);letter-spacing:-.01em}
.logo svg{width:30px;height:30px;color:var(--brand);flex:none}
.logo b{color:var(--brand);font-weight:800}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.95rem;padding-block:6px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand)}
.nav a[aria-current="page"]{box-shadow:0 2px 0 var(--brand)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1 var(--f-body);padding:13px 20px;border-radius:var(--radius);border:1.5px solid var(--brand);background:var(--brand);color:var(--on-brand);text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-tint)}
.btn.sm{padding:9px 14px;font-size:.875rem}
.nav .btn{color:var(--on-brand)}.nav .btn.ghost{color:var(--brand)}

/* hero */
.hero{padding-block:clamp(40px,7vw,88px)}
.hero h1 em{font-style:normal;color:var(--brand)}

/* ledger: the signature element. Ruled rows with mono reference column. */
.ledger{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);overflow:hidden}
.ledger-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;border-bottom:2px solid var(--ink);font:500 .75rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ledger-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--rule)}
.ledger-row:last-child{border-bottom:0}
.ledger-row > *{min-width:0}
.ledger-row .when{font:500 .8rem/1.2 var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-row .what{font-weight:600}
.ledger-row .what small{display:block;font-weight:400;color:var(--ink-2);font-size:.85rem}
.dot{width:10px;height:10px;border-radius:2px;background:var(--brand);display:inline-block;flex:none}

/* pills */
.pill{display:inline-block;font:500 .72rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:3px;background:var(--brand-tint);color:var(--brand-deep);white-space:nowrap}
.pill.ok{background:var(--c-permits-tint);color:var(--c-permits-deep)}
.pill.warn{background:var(--warn-tint);color:var(--warn-ink)}
.pill.late{background:var(--late-tint);color:var(--late)}
.pill.soon{background:var(--rule);color:var(--ink-2)}
/* "Coming soon": a feature that is planned but not built. Outlined so it reads as not-yet, in both themes. */
.pill.coming{background:transparent;color:var(--ink-2);border:1px dashed var(--rule-strong);padding:4px 7px;margin-left:6px;vertical-align:middle}

/* product cards: each sets its own data-brand */
.product{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--brand);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--ink)}
a.product:hover{border-color:var(--brand)}
.product .logo{font-size:1.05rem}
.product .go{margin-top:auto;font-weight:600;color:var(--brand)}

/* plain feature item: no card, just a rule */
.item{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.item p{color:var(--ink-2)}
.steps{counter-reset:s;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.steps .item::before{counter-increment:s;content:"Step " counter(s);font:500 .75rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(18px,3vw,28px)}
.band{background:var(--band-bg);color:var(--band-ink)}
.band .muted,.band p{color:var(--band-muted)}
.band .btn{background:#fff;color:#0B0F1F;border-color:#fff}
.band .btn:hover{background:var(--brand-tint);color:var(--brand-deep)}

/* forms */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.9rem}
.field .hint{font-size:.8rem;color:var(--ink-2)}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--f-body);color:var(--ink);background:var(--field);border:1.5px solid var(--rule-strong);border-radius:var(--radius);padding:11px 12px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{margin-top:4px;width:auto}
.msg{padding:12px 14px;border-radius:var(--radius);font-size:.9rem;background:var(--brand-tint);color:var(--brand-deep);border:1px solid var(--brand)}
.msg.err{background:var(--late-tint);color:var(--late);border-color:var(--late)}
.auth{max-width:460px;margin-inline:auto}

/* tables */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{font:500 .72rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--ink-2);border-bottom:2px solid var(--ink);padding:12px 14px;white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ---------- signed-in app shell (modelled on the RDL firm portal) ---------- */
.app-body{background:var(--paper)}
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;gap:18px;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--side-rule)}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;border-bottom:1px solid var(--side-rule);text-decoration:none;color:var(--side-ink-strong);font:800 1.1rem/1.1 var(--f-display)}
.side-brand svg{width:32px;height:32px;flex:none;color:var(--side-logo)}
.side-brand b{color:inherit;font-weight:800}
.side-brand small{display:block;font:500 .66rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--side-ink);margin-top:3px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a,.side-off{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;color:var(--side-ink);text-decoration:none;font-weight:500;font-size:.93rem}
.side-nav a:hover{background:var(--side-hover);color:var(--side-ink-strong)}
.side-nav a[aria-current="page"]{background:var(--c-entities);color:#fff;font-weight:600}
body[data-brand="permits"] .side-nav a[aria-current="page"]{background:var(--c-permits)}
[data-theme="dark"] .side-nav a[aria-current="page"]{background:var(--brand-tint);color:var(--brand-deep);box-shadow:inset 3px 0 0 var(--brand)}
.side-off{opacity:.55;cursor:default}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-tag{margin-left:auto;font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:var(--side-hover);color:var(--side-ink)}
.side-nav a[data-brand="permits"] .side-tag{background:#1B7A52;color:#fff}
.side .label{font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--side-ink);opacity:.7;padding:18px 11px 6px}
.side-foot{margin-top:auto;font-size:.72rem;line-height:1.5;color:var(--side-ink);opacity:.7;padding:0 8px}

.shell-main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px clamp(16px,3vw,32px);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topbar-name{font:800 1.25rem/1.2 var(--f-display);margin-top:4px}
.topbar-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-deep);font:700 .85rem/1 var(--f-body)}
.who-text{display:flex;flex-direction:column;line-height:1.2}
.who-text b{font-size:.9rem}
.who-text small{font-size:.75rem;color:var(--ink-2)}
.content{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:36px;max-width:1240px;width:100%}
.page-title{font-size:clamp(1.7rem,3vw,2.1rem)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
.ledger.card{border-color:var(--rule)}
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.kpi{--tone:var(--brand);background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--tone);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.kpi[data-tone="warn"]{--tone:var(--warn)} .kpi[data-tone="late"]{--tone:var(--late)} .kpi[data-tone="ok"]{--tone:var(--ok)}
.kpi b{font:800 2rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.kpi span{font-size:.85rem;color:var(--ink-2)}
.dash-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
.service-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-top:4px solid var(--brand)}
.service-card .btn{align-self:flex-start}
.ledger-empty{padding:18px 16px;color:var(--ink-2)}
.facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px 24px}
.facts dt{font-size:.8rem;color:var(--ink-2)}
.facts dd{margin:2px 0 0;font-weight:600}
.table-wrap.card{border-radius:12px}
tbody tr:hover td{background:color-mix(in srgb,var(--brand-tint) 45%,transparent)}
@media (max-width:900px){
  .dash-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column;gap:10px;padding:12px var(--gutter)}
  .side-brand{padding:4px 0 10px}
  .side-nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px}
  .side-nav a,.side-off{white-space:nowrap;padding:8px 10px}
  .side .label,.side-foot,.side-off{display:none}
  .topbar{position:static}
  .who-text{display:none}
  .ledger-row{grid-template-columns:1fr auto}
  .ledger-row .when{grid-column:1/-1}
}

/* footer */
.site-foot{background:var(--surface);border-top:1px solid var(--rule);padding-block:36px;font-size:.88rem;color:var(--ink-2)}
.site-foot .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.site-foot h4{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--brand)}
.legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule);font-size:.8rem;max-width:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* fixes */
.product .pill{align-self:flex-start}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.ledger-row{grid-template-columns:7.5em 1fr auto}
.ledger-row .when{white-space:normal}
@media (max-width:760px){.ledger-row{grid-template-columns:1fr auto}}

/* signed-in pages stay hidden until the session check passes */
body[data-fair-guard]:not(.fair-ok) main{visibility:hidden}
button[disabled]{opacity:.6;cursor:progress}
.cf-turnstile{min-height:65px}
.legal-doc h2{font-size:1.25rem;margin-top:8px}
.legal-doc p,.legal-doc li{max-width:72ch}
.draft-note{border:1px dashed var(--warn);background:var(--warn-tint);color:var(--note-ink);padding:10px 14px;border-radius:var(--radius);font-size:.9rem}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;flex:none}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
[data-theme="dark"] .btn.ghost:hover{color:var(--brand-deep)}
[data-theme="dark"] .ledger-head{border-bottom-color:var(--rule-strong)}
[data-theme="dark"] th{border-bottom-color:var(--rule-strong)}
[data-theme="dark"] .item,[data-theme="dark"] .stat{border-top-color:var(--rule-strong)}
body,.site-head,.site-foot,.panel,.ledger,.product,.table-wrap,.field input,.field select,.field textarea{transition:background-color .2s,border-color .2s,color .2s}

/* ---------- confirmation panel ----------
   Used by FAIR_CONFIRM() in fair.js after every successful form submit. The
   form is hidden and this panel takes its place: a check mark draws in and the
   panel fades up. Colours come from the brand variables, so it follows the
   site brand and light/dark theme. No animation under prefers-reduced-motion. */
.confirm{display:flex;flex-direction:column;gap:14px;align-items:flex-start;animation:confirm-in .5s cubic-bezier(.2,.8,.2,1) both}
.confirm-icon{width:64px;height:64px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;animation:confirm-pop .5s cubic-bezier(.2,.9,.3,1.3) .05s both}
.confirm-icon svg{display:block}
.confirm-ring,.confirm-tick{stroke:currentColor;stroke-dasharray:100;stroke-dashoffset:0}
.confirm-ring{stroke-linecap:round;animation:confirm-draw .6s ease-out .1s both}
.confirm-tick{animation:confirm-draw .4s ease-out .55s both}
.confirm h2{font-size:1.7rem}
.confirm h2:focus{outline:none}
.confirm b{overflow-wrap:anywhere}
.confirm-status:empty{display:none}
@keyframes confirm-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes confirm-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes confirm-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.confirm,.confirm-icon,.confirm-ring,.confirm-tick{animation:none!important}}

/* ---------- Google sign-in ---------- */
.oauth{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.btn.google{background:var(--field);color:var(--ink);border:1.5px solid var(--rule-strong);width:100%;font-weight:600}
.btn.google:hover{background:var(--paper);border-color:var(--ink-3);color:var(--ink)}
.or{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--ink-2);max-width:none}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- first-run: add your company ---------- */
.onboard{display:flex;flex-direction:column;gap:14px;padding:22px;border-top:4px solid var(--brand)}
.onboard h2{font-size:1.4rem}