/* The sign-in, claim and run screens. Rules are the union of the <style> blocks
   in vatico-vitality-export/standalone/Auth-*.html; where screens disagreed on
   a rule (.h1, .card, .btn, .two, .code), the variants became modifier classes.
   Every colour, radius, face and named type size is a token from the report's
   ds/colors_and_type.css, which every page loads first (site/src/layout.ts).
   This file adds only what that file lacks, in :root below: a spacing scale,
   the type steps between its named sizes, weights, and three colours mixed
   from its tokens. No hex anywhere. */
:root{
  /* Spacing, 4px base. The screens had used 2, 6, 10, 14, 18, 22, 28 and 56 px
     in place; each rounded to the nearest step. */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:48px;--s-10:64px;
  /* Type steps the ds lacks, each a multiple of its body size. */
  --fs-tiny:calc(var(--fs-body)*.74);
  --fs-small:calc(var(--fs-body)*.86);
  --fs-lg:calc(var(--fs-body)*1.4);
  --fs-h2:calc(var(--fs-body)*1.5);
  --fs-num:calc(var(--fs-body)*1.8);
  --fs-big:calc(var(--fs-body)*2.6);
  --fs-price:calc(var(--fs-body)*2.8);
  --fs-h1-xl:clamp(calc(var(--fs-body)*2),4.5vw,calc(var(--fs-body)*3.4));
  --fs-h1-md:clamp(calc(var(--fs-body)*1.6),3vw,calc(var(--fs-body)*2.2));
  /* Weights; the ds names none. */
  /* Card inset; the design export used 28px on every card. */
  --pad-card:28px;
  --fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;--fw-black:900;
  /* Colours the ds lacks, each mixed from one of its tokens. */
  --text-2:color-mix(in srgb,var(--text) 40%,var(--muted-2));   /* body copy */
  --text-3:color-mix(in srgb,var(--text) 20%,var(--muted-2));   /* small copy */
  --blue-hover:color-mix(in srgb,var(--blue) 88%,white);        /* links and buttons on hover */
  /* The front page's rhythm (design canvas, Marketing-Home): roomier than the app's scale. */
  --mk-sec:104px;--mk-sec-top:112px;--mk-sec-door:120px;--mk-gap:56px;
}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-hover)}
h1,h2,h3,strong{text-wrap:balance;overflow-wrap:anywhere}
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s-9) var(--wrap-px) var(--s-10)}
.topbar .wrap{padding-top:0;padding-bottom:0}
/* A page with less on it is a narrower wrap, still centred, so its cards fill it (design export: a single card sits at 620px, centred). */
.wrap.mid{max-width:calc(1000px + 2*var(--wrap-px))}
.wrap.narrow{max-width:calc(680px + 2*var(--wrap-px))}
@media (max-width:700px){.wrap{padding:var(--s-7) var(--s-4) var(--s-8)}.topbar .wrap{padding:0 var(--s-4)}}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.stack>.pill{align-self:flex-start}
.row{display:flex;align-items:center;gap:var(--s-3)}
.inline{display:inline}

/* top bar and steps */
.topbar{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;flex-wrap:wrap}
.logo{width:96px;height:auto;display:block}
.sep-left{border-left:1px solid var(--border-2);padding-left:var(--s-4)}
/* the steps sit in their own strip under the bar, so the account links keep the bar's right side */
.stepbar{border-top:1px solid var(--border)}
.stepbar .wrap{min-height:0;padding-top:var(--s-3);padding-bottom:var(--s-3)}
.steps{display:flex;gap:var(--s-2);flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-tiny);font-weight:var(--fw-semibold);color:var(--muted-2);border:1px solid var(--border)}
.step b{width:20px;height:20px;border-radius:var(--r-pill);background:var(--border);color:var(--muted-2);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label)}
.step.on{color:var(--text);border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:var(--blue-t)}
.step.on b{background:var(--blue);color:var(--bg)}
.step.done b{background:var(--green);color:var(--bg)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-tiny);color:var(--blue);cursor:pointer}
.linkbtn:hover{color:var(--blue-hover)}
/* phones: one line for the current step */
.step-now{display:none}
@media (max-width:700px){
  .steps .step{display:none}
  .steps .step-now{display:inline-flex}
  /* the logo and the current step share one row: the "Vitality Report" label gives way (audit 2026-10-27) */
  .topbar:has(.wrap > .steps) .sep-left{display:none}
  .topbar .wrap{padding-block:var(--s-2)}
}

/* type. The ds sets .eyebrow too; the site keeps it at the secondary text colour, which clears the contrast floor. */
.eyebrow{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted-2)}
.h1{margin:0;text-wrap:balance;overflow-wrap:anywhere;word-spacing:.04em;font-size:var(--fs-title);font-weight:var(--fw-black);letter-spacing:var(--tr-title);line-height:var(--lh-title)}
.h1.xl{font-size:var(--fs-h1-xl);line-height:.98}
.h1.md{font-size:var(--fs-h1-md);line-height:1.02}
.h2{margin:0;overflow-wrap:anywhere;font-size:var(--fs-h2);font-weight:var(--fw-heavy);letter-spacing:var(--tr-title)}
.h3{margin:0;text-wrap:balance;overflow-wrap:anywhere;font-size:var(--fs-heading);font-weight:var(--fw-heavy);letter-spacing:var(--tr-heading);line-height:1.15}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2)}
.small{font-size:var(--fs-small);line-height:1.5;color:var(--text-3)}
.strong{color:var(--text);font-weight:var(--fw-semibold)}
.tiny{font-size:var(--fs-tiny);line-height:1.45;color:var(--muted-2)}
.big{font-size:var(--fs-big);font-weight:var(--fw-black);letter-spacing:var(--tr-display);line-height:1;color:var(--text)}
.big.sm{font-size:var(--fs-num-md)}
.price{font-size:var(--fs-price);font-weight:var(--fw-black);letter-spacing:-.05em;line-height:1}
.price.sm{font-size:var(--fs-h2)}
.num{font-variant-numeric:tabular-nums}
.mono,.pre{font-family:var(--font-mono)}
.grad{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);padding:var(--pad-card)}
.card.sm{padding:var(--s-5)}
.ctop{border-top:2px solid var(--blue)}.ctop.green{border-top-color:var(--green)}
.amber-top{border-top:2px solid var(--amber)}.purple-top{border-top:2px solid var(--purple)}
.green-edge{border-color:color-mix(in srgb,var(--green) 40%,transparent)}.amber-edge{border-color:color-mix(in srgb,var(--amber) 40%,transparent)}.purple-edge{border-color:color-mix(in srgb,var(--purple) 45%,transparent)}
.pro-glow{background:radial-gradient(60% 60% at 100% 0%,color-mix(in srgb,var(--purple) 12%,transparent),transparent 70%),var(--card)}
.dashed{border-style:dashed;border-color:color-mix(in srgb,var(--blue) 30%,transparent);background:transparent}
.quiet{background:var(--surface)}
.notice{padding:var(--s-4);border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--purple) 35%,transparent);background:color-mix(in srgb,var(--purple) 8%,transparent);font-size:var(--fs-small);line-height:1.5;color:color-mix(in srgb,var(--text) 70%,var(--muted-2))}
.err{margin:0;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-t);color:var(--amber);font-size:var(--fs-small);line-height:1.5}
.divider{height:1px;background:var(--border)}
.ruled{border-top:1px solid var(--border);padding:var(--s-6) 0}

/* forms */
.label{display:block;font-size:var(--fs-tiny);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:var(--s-2)}
.input{width:100%;min-height:48px;border-radius:var(--r-lg);border:1px solid var(--border-2);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-body);padding:0 var(--s-4)}
.input::placeholder{color:var(--muted-2)}
.input:focus{outline:2px solid var(--blue);outline-offset:1px}
.input.area{padding:var(--s-3) var(--s-4);min-height:96px;resize:vertical;line-height:1.5}
.input.otp{height:64px;font-size:var(--fs-num-md);font-weight:var(--fw-heavy);letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.input.auto{width:auto}
.join{display:flex;align-items:stretch}
.join .input{border-radius:var(--r-lg) 0 0 var(--r-lg);min-width:0}
.join .suffix{display:flex;align-items:center;padding:0 var(--s-4);border:1px solid var(--border-2);border-left:0;border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--surface);color:var(--muted-2);font-size:var(--fs-body);white-space:nowrap}
.join .suffix-btn{border-radius:0 var(--r-lg) var(--r-lg) 0}
.opt{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--border-2);border-radius:var(--r-lg);cursor:pointer;color:var(--text);font-size:var(--fs-small)}
.opt input{accent-color:var(--blue);width:16px;height:16px}
.tick{width:18px;height:18px;flex:none;accent-color:var(--blue)}
.cf-turnstile{max-width:100%}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-body);background:var(--blue);color:white;border:1px solid var(--blue);transition:background .16s;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--blue-hover);color:white}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn.ghost:hover{border-color:var(--muted-2);color:white;background:transparent}
.btn.purple{background:var(--purple);border-color:var(--purple);color:white}.btn.purple:hover{background:color-mix(in srgb,var(--purple) 88%,white)}
.btn.wide{width:100%}
.btn.sm{min-height:44px;padding:0 var(--s-4);font-size:var(--fs-small)}
/* one focus ring for everything you can press (audit 2026-10-27) */
:is(a,button,.btn,.linkbtn,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.opt:focus-within{outline:2px solid var(--blue);outline-offset:2px}
/* text links and link buttons keep their line, but the hit area is 44px tall */
.linkbtn,a.tiny,.tiny a,a.small,.small a{padding-block:var(--s-3);margin-block:calc(-1*var(--s-3))}
/* disclosures (Rename, Manage, What each role can do): a chevron, a full-size hit area, no wrapping */
details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;white-space:nowrap;color:var(--blue);font-weight:var(--fw-semibold)}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .16s;flex:none}
details[open]>summary::before{transform:rotate(45deg)}
details.fold>summary::before{content:none}
/* 900-weight display type at -0.04em closes its word spaces ("AIwhere") */
.mk-display,.mk-h2{word-spacing:.04em}
/* admin View as: one-press views as tiles, then people as rows with an initial, chips and the button */
.va-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:900px){.va-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.va-q{margin:0;min-width:0}
.va-q button,.va-q.off{width:100%;height:100%;min-height:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);border:1px solid var(--border-2);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .16s,background .16s}
.va-q button:hover{border-color:color-mix(in srgb,var(--amber) 60%,transparent);background:color-mix(in srgb,var(--amber) 6%,var(--surface))}
.va-q strong{font-weight:var(--fw-bold)}
.va-q .tiny{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-q.off{cursor:default;opacity:.55}
.va-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.va-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid var(--border)}
.va-av{width:40px;height:40px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-heavy);color:#08090d;background:linear-gradient(135deg,var(--green),var(--blue) 55%,var(--purple))}
.va-mail{overflow-wrap:anywhere}
@media (max-width:600px){.va-row{grid-template-columns:40px minmax(0,1fr)}.va-row>form{grid-column:2}}
/* destructive actions (remove a member, sign out a device, delete the account): amber outline, never the primary blue */
.btn.danger,.btn.ghost.danger{background:transparent;color:var(--amber);border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.btn.danger:hover,.btn.ghost.danger:hover{background:var(--amber-t);color:var(--amber);border-color:var(--amber)}
/* history: the score and its line side by side, the line to its own range with high and low labelled;
   on a phone the run table becomes one card per check (audit 2026-10-27) */
.hist-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-5)}
.hist-spark{flex:1 1 260px;max-width:420px}
.hist-spark .spark{width:100%}
.spark-ax{fill:var(--muted-2);font-size:10px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .hist thead{display:none}
  .hist,.hist tbody,.hist tr,.hist td{display:block;width:100%}
  .hist tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--border)}
  .hist td{padding:0;border:0}
  .hist td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .hist td.hist-open{grid-column:1/-1}
}

/* pills */
.pill{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-tiny);font-weight:var(--fw-semibold);background:var(--blue-t);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);white-space:nowrap}
.pill.green{background:var(--green-t);color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
.pill.amber{background:var(--amber-t);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 25%,transparent)}
.pill.purple{background:var(--purple-t);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 25%,transparent)}
.pill.slate{background:color-mix(in srgb,var(--slate) 12%,transparent);color:color-mix(in srgb,var(--slate) 58%,var(--text));border-color:color-mix(in srgb,var(--slate) 30%,transparent)}
.pill.plain{background:transparent;color:color-mix(in srgb,var(--slate) 58%,var(--text));border-color:var(--border-2)}

/* grids */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);align-items:stretch}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);align-items:stretch}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-6);align-items:stretch}
.two-run{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-6);align-items:start}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-7);align-items:center}
/* home: the locations and the plan down the left, the cards on the right (design export, Auth-ProHome) */
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (max-width:900px){.g2,.g3,.two,.two-run,.split,.layout{grid-template-columns:minmax(0,1fr)}}

/* sign in */
.hero{background:radial-gradient(60% 80% at 15% 0%,color-mix(in srgb,var(--blue) 9%,transparent),transparent 70%),radial-gradient(50% 70% at 90% 20%,color-mix(in srgb,var(--purple) 5%,transparent),transparent 70%),var(--bg);min-height:calc(100vh - 65px)}
.two-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-9);align-items:center;padding-top:var(--sec-py);padding-bottom:var(--sec-py)}
@media (max-width:900px){.two-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-7);padding-top:var(--s-8);padding-bottom:var(--s-8)}}
.why{display:flex;gap:var(--s-4);align-items:flex-start}
.why b{width:32px;height:32px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-small);flex:none;color:var(--text)}

/* find */
.find{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s-3);align-items:end}
.find.plus-one{grid-template-columns:minmax(0,1fr) auto}
.find.plus-two{grid-template-columns:minmax(0,1fr) auto auto}
@media (max-width:700px){.find,.find.plus-one,.find.plus-two{grid-template-columns:minmax(0,1fr)}}
.result{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-7);align-items:center}
.result.tight{grid-template-columns:minmax(0,1fr) 260px}
@media (max-width:900px){.result,.result.tight{grid-template-columns:minmax(0,1fr)}}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-5);font-size:var(--fs-small);align-items:baseline;margin:0}
.kv dt{color:var(--muted-2);margin:0;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase}
.kv dd{color:var(--text);margin:0;font-size:var(--fs-body);font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.kv dd.mono{font-size:var(--fs-small)}

/* website control; the admin pages print JSON in the same box */
.pre{font-size:var(--fs-code);color:var(--text);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.6;margin:0}

/* verified, quota */
.chk{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.chk:last-child{border-bottom:0}
.chk.pick{justify-content:flex-start;gap:var(--s-4);cursor:pointer}
.ready{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);background:color-mix(in srgb,var(--green) 8%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.ready i{width:10px;height:10px;border-radius:var(--r-pill);background:var(--green);display:block;flex:none;box-shadow:0 0 12px color-mix(in srgb,var(--green) 70%,transparent)}
.ready.later{background:color-mix(in srgb,var(--slate) 8%,transparent);border-color:color-mix(in srgb,var(--slate) 30%,transparent)}
.ready.later i{background:var(--slate);box-shadow:none}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-2)}
.day{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-1);border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
.day b{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.08em;color:var(--muted-2)}
.day i{width:10px;height:10px;border-radius:var(--r-pill);background:var(--border);display:block}
.day.ran{border-color:color-mix(in srgb,var(--green) 40%,transparent)}.day.ran i{background:var(--green)}

/* plans */
.feat{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.feat div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border);font-size:var(--fs-small);align-items:baseline}
.feat div span:first-child{color:var(--text-3)}
.feat div span:last-child{color:var(--text);font-weight:var(--fw-semibold);text-align:right}
.feat div span.no{color:var(--muted-2);font-weight:var(--fw-medium)}

/* running. The fill's first width is a .w-* class (tens, one per stage); site.js moves it from there. */
.bar{height:10px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--green),var(--blue));transition:width .4s}
.w-0{width:0}.w-10{width:10%}.w-20{width:20%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}
.stage{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.stage:last-child{border-bottom:0}
.dot{width:12px;height:12px;border-radius:var(--r-pill);background:var(--green);margin:0 auto}
.dot.now{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent)}
.dot.todo{background:var(--border)}
.dot.now{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 8%,transparent)}}
/* a pressed submit button while the next page loads (site.js): a spinner, and no second press */
[aria-busy="true"]{cursor:progress;pointer-events:none;opacity:.85}
[aria-busy="true"]::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.5em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex:none}
.btn[aria-busy="true"]::after{margin-left:0}
@keyframes spin{to{transform:rotate(360deg)}}
/* A list reloading behind a pressed link (site.js data-busy): dimmed, with its wait line shown. */
.wait-line{display:none}
[data-loading] .wait-line{display:inline-flex;align-items:center}
[data-loading] [data-busy-list]{opacity:.4;pointer-events:none;transition:opacity .15s}
.run-lost{color:var(--amber)}
/* the starting screen's wait: no count to show, so a stripe that keeps moving */
.bar.wait .fill{width:30%;animation:wait 1.4s ease-in-out infinite}
@keyframes wait{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.fill,.btn{transition:none}.dot.now{animation:none}[aria-busy="true"]::after{animation-duration:2.4s}.bar.wait .fill{animation-duration:3.5s}}

/* pro home */
.loc-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-5);align-items:center;padding:var(--s-6)}
@media (max-width:700px){.loc-row{grid-template-columns:minmax(0,1fr)}}
.score{display:flex;align-items:baseline;gap:var(--s-2)}
.loc{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);border:1px solid var(--border);color:var(--text);font-size:var(--fs-small);font-weight:var(--fw-semibold);min-height:44px}
a.loc:hover{border-color:var(--border-2);color:var(--text)}
.loc.on{border-color:color-mix(in srgb,var(--blue) 45%,transparent);background:var(--blue-t)}
.loc.add{border-style:dashed;color:var(--muted-2);font-weight:var(--fw-medium)}
a.loc.add:hover{color:var(--text)}
.loc .num{font-size:var(--fs-small)}
.term{height:10px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;position:relative}
.term i{position:absolute;left:0;top:0;bottom:0;background:var(--purple);border-radius:var(--r-pill)}

/* history: the run table, and the sparkline every score list shares */
.hist{width:100%;border-collapse:collapse;text-align:left}
.hist th{padding:var(--s-2) var(--s-3) var(--s-2) 0;border-bottom:1px solid var(--border);font-weight:var(--fw-semibold)}
.spark{display:block;max-width:100%;height:auto}

/* compare: grid (a card per practice on a phone), rank, field */
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:var(--s-4) var(--s-3);border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
.cmp thead th{padding-top:0;font-weight:var(--fw-semibold)}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp .cmp-name{white-space:normal;min-width:180px;max-width:240px}
.cmp tr.you>*{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.cmp tr.you>th{box-shadow:inset 3px 0 0 var(--blue)}
.cmp-v{font-size:var(--fs-body);color:var(--text)}
.cmp-v.big-v{display:block;font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:var(--tr-title);margin-bottom:var(--s-1)}
.cmp-spark .spark{margin-bottom:var(--s-1)}
@media (max-width:700px){
  .cmp-card{padding:0;background:none;border:0}
  .cmp-card>.tiny{padding:0 var(--s-1)}
  .cmp thead{display:none}
  .cmp,.cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--s-3);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--card);overflow:hidden}
  .cmp tr>*{display:block;border:0;padding:var(--s-3) var(--s-4);white-space:normal}
  .cmp tr>th.cmp-name,.cmp td.cmp-none{grid-column:1/-1;grid-row:1;max-width:none}
  .cmp tr>th.cmp-name{border-bottom:1px solid var(--border)}
  .cmp td.cmp-score{grid-column:1/3;grid-row:2}
  .cmp td.cmp-spark{grid-column:3;grid-row:2}
  .cmp td.cmp-none{grid-row:2}
  .cmp td[data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--s-1);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .cmp tr.you{background:color-mix(in srgb,var(--card) 94%,var(--blue));border-color:color-mix(in srgb,var(--blue) 40%,transparent)}
  .cmp tr.you>*{background:none}
  .cmp tr.you>th{box-shadow:none}
}
.rank-card{padding:var(--s-3) var(--s-6)}
.rank{list-style:none;margin:0;padding:0}
.rk{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s-4);align-items:start;padding:var(--s-5) 0;border-bottom:1px solid var(--border)}
.rk:last-child{border-bottom:0}
.rk-n{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--muted-2);padding-top:2px}
.rk-score{font-size:var(--fs-num);font-weight:var(--fw-black);letter-spacing:var(--tr-title);line-height:1;color:var(--text)}
/* The bar is inline SVG, like the sparkline: the fill's width and your marker's x are attributes, not styles. */
.rk-bar{display:block;width:100%;height:10px;overflow:visible}
.rk-bar .rail{fill:var(--border)}
.rk-bar .rk-fill{fill:var(--slate)}
.rk.you .rk-bar .rk-fill{fill:var(--blue)}
.rk.passed .rk-bar .rk-fill{fill:var(--amber)}
.rk-bar .rk-you{stroke:var(--text);stroke-width:2}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:baseline;gap:var(--s-1);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);font-size:var(--fs-small);color:var(--text);white-space:nowrap}
@media (max-width:700px){.rank-card{padding:var(--s-1) var(--s-4)}.rk{grid-template-columns:16px minmax(0,1fr) auto;gap:var(--s-3)}.rk-score{font-size:var(--fs-h2)}.chip{font-size:var(--fs-tiny);padding:var(--s-1) var(--s-2)}}
.fld{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.2fr);gap:var(--s-5);align-items:center;padding:var(--s-5) 0;border-bottom:1px solid var(--border)}
.fld:last-child{border-bottom:0}
.fld-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:0}
.fld-nums dt{margin:0;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.fld-nums dd{margin:2px 0 0;font-size:var(--fs-callout);font-weight:var(--fw-heavy);color:var(--text)}
/* The track is inline SVG too; the legend's swatches are <i> elements with the same class names. */
.fld-track{display:block;width:100%;height:16px;margin:var(--s-2) 0;overflow:visible}
.fld-track .rail{fill:var(--border)}
.fld-track .fld-you{fill:var(--blue);stroke:var(--card);stroke-width:2}
.fld-track .fld-best{fill:var(--text)}
.fld-track .fld-med{stroke:var(--muted-2);stroke-width:2}
.fld-key{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.fld-key i{display:inline-block;margin-left:var(--s-3)}
.fld-key i:first-child{margin-left:0}
.fld-key .fld-you{width:14px;height:14px;border-radius:var(--r-pill);background:var(--blue);box-shadow:0 0 0 2px var(--card)}
.fld-key .fld-best{width:12px;height:12px;border-radius:var(--r-pill);background:var(--text)}
.fld-key .fld-med{width:2px;height:16px;background:var(--muted-2)}
@media (max-width:700px){.fld{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}}

/* the front page (design canvas, Marketing-Home): full-bleed sections on the
   app's cards, pills, buttons and type. Its motion is CSS alone: a build-in on
   first paint, then reveals driven by scroll where the browser has them;
   nothing moves after it has arrived but the dot field's slow drift. */
.mk-sec{padding:var(--mk-sec) var(--wrap-px)}
.mk-sec .wrap,.mk-footer .wrap{padding:0 var(--wrap-px)}
.mk-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-gap{gap:var(--mk-gap)}
.mk-grow{flex:1}
/* Home's instrument: the stats beside the ring drop under it when the card is narrower than both. */
.mk-side{flex:1 1 240px;min-width:0}
@media (max-width:700px){.mk-sec{padding:var(--s-10) var(--s-4)}.mk-sec .wrap,.mk-footer .wrap{padding:0 var(--s-4)}}
/* the bar: section links, Sign in and the button */
.mk-nav{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap}
.mk-nav a{color:var(--text-3);font-size:var(--fs-small);font-weight:var(--fw-semibold);min-height:44px;display:inline-flex;align-items:center}
.mk-nav a:hover{color:var(--text)}
.mk-nav a.btn{color:white;min-height:44px;padding:0 18px;font-size:calc(var(--fs-body)*.92)}
.topbar:has(.mk-nav) .wrap{min-height:68px}
.topbar:has(.mk-nav) .logo{width:100px}
/* the page's own sizes for the app's eyebrow, pill and price */
.mk-sec .eyebrow{font-size:calc(var(--fs-body)*.7)}
.mk-sec .pill{padding:6px var(--s-3);font-size:12px;font-weight:var(--fw-bold)}
.topbar .pill.plain{font-size:11px;font-weight:var(--fw-bold);padding:6px var(--s-3)}
.mk-sec .price{font-size:calc(var(--fs-body)*3.2)}
/* below 900 px the section links and Sign in live in the menu (site/assets/menu.css); the button and the menu's icon stay */
@media (max-width:899px){
  .mk-nav{gap:var(--s-4)}
  .mk-nav a:not(.btn){display:none}
  .topbar:has(.mk-nav) .wrap{flex-wrap:nowrap}
  .topbar:has(.mk-nav) .tiny,.topbar:has(.mk-nav) .pill{display:none}
}
/* the narrowest phones: the logo, the button and the menu's icon still on one line */
@media (max-width:360px){
  .topbar:has(.mk-nav) .logo{width:84px}
  .topbar:has(.mk-nav) .vm-right{gap:var(--s-2)}
  .mk-nav a.btn{padding:0 var(--s-3)}
}
/* type */
.mk-display{margin:0;font-size:clamp(2.9rem,6.6vw,5.8rem);font-weight:var(--fw-black);letter-spacing:-.045em;line-height:var(--lh-display)}
.mk-h2{margin:0;font-size:clamp(2rem,4.2vw,3.4rem);font-weight:var(--fw-black);letter-spacing:-.04em;line-height:.98}
.mk-h2.sm{font-size:clamp(1.6rem,3vw,2.4rem)}
.lead{margin:0;font-size:calc(var(--fs-body)*1.2);line-height:1.55;color:var(--text-2)}
.mk-motto{font-weight:var(--fw-semibold);font-style:italic}
/* the larger buttons and cards the page is drawn with */
.btn.lg{min-height:54px;padding:0 26px;font-size:calc(var(--fs-body)*1.05)}
.card.lg{padding:var(--s-7)}
.card.lifted{border-color:var(--border-2)}
a.card{color:inherit}
.logo.lg{width:120px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:var(--s-5)}
.mk-herogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:var(--mk-gap);align-items:center}
/* hero and door: a lit ground and the dot field */
.mk-hero{background:linear-gradient(180deg,var(--bg) 0%,var(--card-2) 55%,var(--bg) 100%);position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.mk-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 78% 30%,color-mix(in srgb,var(--blue) 10%,transparent),transparent 70%),radial-gradient(40% 50% at 20% 90%,color-mix(in srgb,var(--purple) 6%,transparent),transparent 70%);pointer-events:none}
.mk-hero .wrap{position:relative;z-index:1}
.mk-top{padding-top:var(--mk-sec-top);padding-bottom:var(--mk-sec-top)}
.mk-door{border-top:1px solid var(--border);border-bottom:0;padding-top:var(--mk-sec-door);padding-bottom:var(--mk-sec-door)}
.mk-door .stack{align-items:flex-start}
.mk-dots{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 16%,transparent) 1px,transparent 1.6px),radial-gradient(circle,color-mix(in srgb,var(--blue) 22%,transparent) 1px,transparent 1.8px);background-size:34px 34px,89px 89px;mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%)}
/* the instrument: the sample's score ring and five meters, each with the nearby median as a tick */
.mk-ring{flex:none}
.mk-ring circle{fill:none;stroke-width:12}
.mk-ring .rail{stroke:var(--border)}
.mk-ring .arc{stroke:currentColor;stroke-linecap:round}
.mk-ring .v{fill:var(--text);font-size:40px;font-weight:var(--fw-black);letter-spacing:-2px}
.mk-ring .of{fill:var(--muted-2);font-size:9px;font-weight:var(--fw-bold);letter-spacing:1.4px}
.mk-meter{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:var(--s-3);align-items:center}
.mk-meter .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);font-size:calc(var(--fs-body)*.9);font-weight:var(--fw-semibold);color:var(--text)}
.mk-meter .wt{font-size:calc(var(--fs-body)*.72);color:var(--muted-2);font-weight:var(--fw-bold);letter-spacing:.06em}
.mk-meter .val{font-size:calc(var(--fs-body)*1.1);font-weight:var(--fw-heavy);text-align:right;letter-spacing:-.02em}
.mk-bar{display:block;width:100%;height:8px;margin-top:6px;overflow:visible}
.mk-bar .rail{fill:var(--border)}
.mk-bar .bar-fill{fill:var(--blue)}.mk-bar .bar-fill.green{fill:var(--green)}.mk-bar .bar-fill.amber{fill:var(--amber)}
.mk-bar .med{stroke:var(--text);stroke-width:2;stroke-linecap:round;opacity:.7}
.mk-rule{border-top:1px solid var(--border);padding-top:var(--s-4)}
/* the five factors: a weight bar and a row each */
.mk-wbar{display:grid;grid-template-columns:30fr 20fr 20fr 15fr 15fr;gap:3px;height:18px;border-radius:var(--r-pill);overflow:hidden}
.mk-wbar .seg{border-radius:4px;transform-origin:left center}
:is(.mk-wbar,.mk-frow) .blue{--tone:var(--blue)}:is(.mk-wbar,.mk-frow) .green{--tone:var(--green)}:is(.mk-wbar,.mk-frow) .cyan{--tone:var(--cyan)}:is(.mk-wbar,.mk-frow) .purple{--tone:var(--purple)}:is(.mk-wbar,.mk-frow) .amber{--tone:var(--amber)}
.mk-wbar .seg,.mk-frow .dot{background:var(--tone)}
.mk-frow{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--border)}
.mk-frow:last-child{border-bottom:0}
.mk-frow .dot{width:10px;height:10px;margin:0;position:relative;top:1px}
.mk-frow b{color:var(--text);font-weight:var(--fw-heavy);font-size:calc(var(--fs-body)*1.02)}
.mk-frow .f{color:var(--text-3);font-size:var(--fs-small)}
.mk-frow .w{font-size:var(--fs-lg);font-weight:var(--fw-black);letter-spacing:-.04em}
/* the line-up: peers as dots, their median as a bar, the sample practice in blue */
.mk-strip{display:block;width:100%;height:72px;overflow:visible}
.mk-strip .base{stroke:var(--border-2);stroke-width:1}
.mk-strip .peer{fill:color-mix(in srgb,var(--slate) 45%,var(--border-2))}
.mk-strip .med{stroke:var(--text);stroke-width:2}
.mk-strip .you{fill:var(--blue);stroke:color-mix(in srgb,var(--blue) 18%,transparent);stroke-width:12;paint-order:stroke}
.mk-strip .cap{fill:var(--muted-2);font-size:calc(var(--fs-body)*.74);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.mk-strip .cap.c-blue{fill:var(--blue)}
/* the report's four parts */
.mk-qn{font-size:calc(var(--fs-body)*2.4);font-weight:var(--fw-black);letter-spacing:-.05em;line-height:1;align-self:flex-start}
.mk-fact{font-size:calc(var(--fs-body)*.86);color:var(--text-3);border-top:1px solid var(--border);padding-top:var(--s-3);line-height:1.5}
/* how it works: numbered steps, and the check's steps lighting as the reader scrolls */
.mk-n{width:44px;height:44px;border-radius:var(--r-pill);background:var(--blue-t);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 25%,transparent);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-heavy);font-size:calc(var(--fs-body)*1.05);flex:none}
.mk-checks li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s-4);align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:calc(var(--fs-body)*.95);font-weight:var(--fw-semibold);color:var(--text)}
.mk-checks li:last-child{border-bottom:0}
.mk-checks i{display:block;width:10px;height:10px;border-radius:var(--r-pill);background:var(--border)}
.mk-footer{border-top:1px solid var(--border);padding:var(--s-8) var(--wrap-px) var(--s-9)}
@media (max-width:700px){.mk-footer{padding:var(--s-7) var(--s-4)}.mk-sec .btn{white-space:normal;text-align:center}}
@keyframes mk-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mk-growx{from{transform:scaleX(0)}}
@keyframes mk-dash{from{stroke-dasharray:0 100}}
@keyframes mk-pop{from{transform:scale(0);opacity:0}}
@keyframes mk-lit{to{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}}
@keyframes mk-drift{to{background-position:68px 102px,-89px 178px}}
@media (prefers-reduced-motion:no-preference){
  .in{animation:mk-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .in.d1{animation-delay:.08s}.in.d2{animation-delay:.16s}.in.d3{animation-delay:.24s}.in.d4{animation-delay:.32s}
  .mk-ring .arc{animation:mk-dash 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
  .mk-bar .bar-fill{transform-box:fill-box;transform-origin:left center;animation:mk-growx .9s cubic-bezier(.2,.7,.2,1) both}
  .m1 .bar-fill{animation-delay:.45s}.m2 .bar-fill{animation-delay:.55s}.m3 .bar-fill{animation-delay:.65s}.m4 .bar-fill{animation-delay:.75s}.m5 .bar-fill{animation-delay:.85s}
  .mk-dots{animation:mk-drift 160s linear infinite}
  @supports (animation-timeline:view()){
    .rv{animation:mk-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .rv.l1{animation-range:entry 10% entry 70%}.rv.l2{animation-range:entry 20% entry 80%}.rv.l3{animation-range:entry 30% entry 90%}
    .mk-wbar .seg{animation:mk-growx linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .mk-wbar .s2{animation-range:entry 10% entry 65%}.mk-wbar .s3{animation-range:entry 20% entry 75%}.mk-wbar .s4{animation-range:entry 30% entry 85%}.mk-wbar .s5{animation-range:entry 40% entry 95%}
    .mk-strip .peer,.mk-strip .you{transform-box:fill-box;transform-origin:center}
    .mk-strip .peer{animation:mk-pop linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .mk-strip .med{transform-box:fill-box;transform-origin:center bottom;animation:mk-growx linear both;animation-timeline:view();animation-range:entry 30% entry 80%}
    .mk-strip .you{animation:mk-pop linear both;animation-timeline:view();animation-range:entry 50% cover 10%}
    .mk-checks i{animation:mk-lit linear both;animation-timeline:view();animation-range:entry 20% entry 35%}
    .mk-checks li:nth-child(2) i{animation-range:entry 30% entry 45%}.mk-checks li:nth-child(3) i{animation-range:entry 40% entry 55%}.mk-checks li:nth-child(4) i{animation-range:entry 50% entry 65%}.mk-checks li:nth-child(5) i{animation-range:entry 60% entry 75%}.mk-checks li:nth-child(6) i{animation-range:entry 70% entry 85%}.mk-checks li:nth-child(7) i{animation-range:entry 80% entry 95%}
  }
}

/* utilities, last so they win over a base class of the same specificity:
   the spacing scale as gaps and margins, the flex and width fixes the screens
   had set in place, measure, and colour that encodes a direction or a state */
.gap-0{gap:0}.gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-5{gap:var(--s-5)}.gap-6{gap:var(--s-6)}.gap-7{gap:var(--s-7)}.gap-8{gap:var(--s-8)}
.m-0{margin:0}.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mb-3{margin-bottom:var(--s-3)}.mt-auto{margin-top:auto}
.flex-wrap{flex-wrap:wrap}.between{justify-content:space-between}.items-end{align-items:flex-end}.items-base{align-items:baseline}.items-start{align-items:flex-start}.items-center{align-items:center}
.self-start{align-self:flex-start}.min-0{min-width:0}.center{text-align:center}.right{text-align:right}
.max-14ch{max-width:14ch}.max-24ch{max-width:24ch}.max-36ch{max-width:36ch}.max-48ch{max-width:48ch}.max-52ch{max-width:52ch}.max-60ch{max-width:60ch}.max-64ch{max-width:64ch}.max-72ch{max-width:72ch}
.list{list-style:none;margin:0;padding:0}.bullets{margin:0;padding-left:var(--s-5)}
.scroll-x{overflow-x:auto}
.tabs-x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--s-4));padding:0 var(--s-4) var(--s-1)}.tabs-x::-webkit-scrollbar{display:none}.tabs-x>*{flex:none}
.bold{font-weight:var(--fw-bold)}.heavy{font-weight:var(--fw-heavy)}.spaced{letter-spacing:var(--tr-label)}.fs-body{font-size:var(--fs-body)}.fs-lg{font-size:var(--fs-lg)}
.ink{color:var(--text)}.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-blue{color:var(--blue)}.c-cyan{color:var(--cyan)}.c-purple{color:var(--purple)}.c-muted{color:var(--muted-2)}

/* --- claim & public screens (audit 2026-10-27) --- */
/* Sign-in and the sample gate: below 900 px the form comes before the pitch, so a phone meets it first. */
@media (max-width:900px){.two-hero>.hero-form{order:-1}}
/* A radio's or a tick's words and their hint wrap as one block beside the box, not as ragged columns. */
.opt>input{flex:none}
.opt>span{flex:1;min-width:0}
/* The claim's developer card keeps its own height beside the taller review card. */
.g2>.claim-dev{align-self:start}
/* The website check's values: one tap selects the whole value; the Copy button beside it shows once site.js can copy. */
.copy-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;min-width:0}
.copy-row>.copy-all{flex:1 1 12ch;min-width:0}
.copy-all{user-select:all;-webkit-user-select:all;cursor:text;overflow-wrap:anywhere}
.kv .copy-all.mono{font-size:var(--fs-small)}
.copy-row>[data-copy][hidden]{display:none}
/* The practice-email code in the code box's own type: Inter heavy, spaced, tabular. */
.code-show{font-size:var(--fs-num-md);font-weight:var(--fw-heavy);letter-spacing:.5em;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--text);overflow-wrap:anywhere}
/* --- end claim & public screens --- */
/* The admin dashboard (src/admin_console.ts): tiles, bar charts drawn as inline SVG, tables, the funnel.
   ops-, never ad-: ad blockers hide .ad-tile, .ad-flag and the like, and the tiles vanished on staging. */
.ops-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--s-3)}
.ops-tile{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.ops-tile .v{font-size:var(--fs-num);font-weight:var(--fw-heavy);letter-spacing:var(--tr-title);line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ops-tile .v.c-green{color:var(--green)}.ops-tile .v.c-amber{color:var(--amber)}
.ops-chart{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.ops-chart svg{display:block;width:100%;height:180px}
.ops-peak{margin:0;font-size:var(--fs-small);color:var(--muted-2);font-variant-numeric:tabular-nums}.ops-peak b{color:var(--text);font-weight:var(--fw-bold)}
.ops-axis{display:flex;justify-content:space-between;font-size:var(--fs-tiny);color:var(--muted-2);font-variant-numeric:tabular-nums}.ops-axis.one{justify-content:center}
.ops-chart .grid{stroke:var(--chart-grid,var(--border));stroke-width:1}
.ops-chart .b-blue{fill:var(--blue)}.ops-chart .b-green{fill:var(--green)}.ops-chart .b-amber{fill:var(--amber)}.ops-chart .b-purple{fill:var(--purple)}.ops-chart .b-cyan{fill:var(--cyan)}.ops-chart .b-slate{fill:var(--muted-2)}
.ops-chart rect:hover{opacity:.8}
.ops-key{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-tiny);color:var(--muted-2)}
.ops-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--s-1);vertical-align:-1px}
.ops-key .k-blue{background:var(--blue)}.ops-key .k-green{background:var(--green)}.ops-key .k-amber{background:var(--amber)}.ops-key .k-purple{background:var(--purple)}.ops-key .k-cyan{background:var(--cyan)}.ops-key .k-slate{background:var(--muted-2)}
.ops-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.ops-tbl th{text-align:left;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--border);white-space:nowrap}
.ops-tbl td{padding:var(--s-3);border-bottom:1px solid var(--border-2);color:var(--text-2);vertical-align:top}
.ops-tbl td.r,.ops-tbl th.r{text-align:right}
.ops-tbl td strong,.ops-tbl td a.ink{color:var(--text)}
.ops-tbl tr:last-child td{border-bottom:0}
.ops-funnel{display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--fs-small)}
.ops-frow{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 8ch 6ch;gap:var(--s-3);align-items:center}
.ops-funnel .bar{height:10px;border-radius:var(--r-pill);background:var(--border-2);overflow:hidden}
.ops-funnel .bar>span{display:block;height:100%;background:var(--blue);border-radius:inherit}
.ops-funnel .n{font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.ops-funnel .pc{color:var(--muted-2);font-variant-numeric:tabular-nums;text-align:right;min-width:4ch}
.ops-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-5)}
.ops-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:var(--s-5)}
.ops-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--s-4)}
.ops-acts form{display:flex;flex-direction:column;gap:var(--s-2)}
.ops-flag{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);font-size:var(--fs-small)}
.ops-flag.hot{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--text)}
.ops-flag b{font-variant-numeric:tabular-nums;color:var(--text)}
@media (max-width:700px){.ops-frow{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-1) var(--s-3)}.ops-frow .bar{grid-column:1/-1;grid-row:2}
  .ops-chart svg{height:140px}
  .ops-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-tile{padding:var(--s-3)}.ops-tile .v{font-size:var(--fs-lg)}}

/* /notifications (screens/notifications.ts): one line and a link each, the new ones marked. */
.inbox-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inbox-item+.inbox-item{border-top:1px solid var(--border)}
.inbox-link{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-1) var(--s-3);padding:var(--s-3) 0;color:var(--muted-2);text-decoration:none;font-size:var(--fs-small);line-height:1.5}
.inbox-link:hover .inbox-text{color:white;text-decoration:underline}
.inbox-new .inbox-text{color:var(--text);font-weight:var(--fw-semibold)}
.inbox-meta{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-tiny);white-space:nowrap}
.inbox-pill{font-size:var(--fs-tiny)}
.inbox-mark{margin:0}
.inbox-actions{align-items:center}
/* The profile's notification settings (screens/alerts.ts grid): each kind against Email and Bell. */
.inbox-prefs{width:100%;border-collapse:collapse}
.inbox-prefs th,.inbox-prefs td{padding:var(--s-3) 0;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.inbox-prefs tbody tr:last-child th,.inbox-prefs tbody tr:last-child td{border-bottom:0}
.inbox-prefs thead th{font-size:var(--fs-tiny);font-weight:var(--fw-bold);color:var(--muted-2);padding-top:0}
.inbox-prefs thead th+th,.inbox-prefs td{width:64px;text-align:center}
.inbox-cell{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}