/* hub.css — the client hub (/c and /c/<token>) and /design-system.
   Stands alone: it does not sit on quotes.css or myjobs.css, so My Jobs, hiring
   and the staff tools keep their own look. Every value below comes from the
   tokens in the first block (DESIGN.md, "Client hub"): the landing page's sky,
   navy and soft shadow, on the hub's own one-column structure. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.hub{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font-inter),"Inter",system-ui,sans-serif;
  /* Headings and big numbers: the landing page's face. */
  --font-display:var(--font-nunito),'Nunito',var(--font);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type: rem, so the phone's text-size setting scales it. */
  --t-large:1.875rem;   /* 30 display 900 */
  --t-title2:1.375rem;  /* 22 display 800 */
  --t-body:1.0625rem;   /* 17/22 */
  --t-sub:.9375rem;     /* 15/20 */
  --t-foot:.8125rem;    /* 13/18 */
  --t-cap:.75rem;       /* 12/16 */

  /* Space: 4/8 grid. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s11:44px;--s16:64px;

  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-pill:999px;
  --hair:1px;
  --ease:cubic-bezier(.32,.72,0,1);

  --brand-dot:#F9B233;
  --gold:#F9B233;--on-gold:#3A2600;
  --on-accent:#FFFFFF;
  --on-hero:#FFFFFF;--on-hero-2:#C9D8F7;--hero-sep:rgba(255,255,255,.18);
  --bad-fill:#D70015;
}
/* Light: the landing page's sky and navy (public/css/variables.css). The
   secondary label is darker than the landing page's --tmu, which fails 4.5:1
   as text on the sky ground. */
.hub,.hub[data-theme="light"]{
  color-scheme:light;
  --ground:#EEF5FD;--card:#FFFFFF;--sheet:#EEF5FD;--sheet-card:#FFFFFF;
  --fill:rgba(26,46,110,.07);--raised:#FFFFFF;
  --label:#1A2346;--label-2:#4A5A80;
  --sep:rgba(26,46,110,.13);
  --accent:#1A2E6E;--accent-text:#2D4FA3;--accent-tint:#DDEAF9;
  --hero:#1A2E6E;
  --ok:#1D7A34;--ok-bg:#E1F3E6;
  --warn:#A84A00;--warn-bg:#FFF0DC;
  --bad:#C4001A;--bad-bg:#FDE8EA;
  --info:#2D4FA3;--info-bg:#DDEAF9;
  --material:rgba(238,245,253,.82);
  --scrim:rgba(15,29,74,.45);
  --shadow:0 1px 2px rgba(26,46,110,.04),0 6px 22px rgba(26,46,110,.08);
}
@media (prefers-color-scheme:dark){
  .hub:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0A1022;--card:#151D38;--sheet:#151D38;--sheet-card:#1E2848;
    --fill:rgba(160,180,230,.14);--raised:#2A3660;
    --label:#EEF2FC;--label-2:#AAB5D2;
    --sep:rgba(160,180,230,.2);
    --accent:#3F61C9;--accent-text:#A8C1FF;--accent-tint:#1E2A55;
    --hero:#22357D;
    --ok:#4CD471;--ok-bg:#12301C;
    --warn:#FFAC33;--warn-bg:#38260A;
    --bad:#FF8A84;--bad-bg:#3A1418;
    --info:#A8C1FF;--info-bg:#1E2A55;
    --material:rgba(10,16,34,.82);
    --scrim:rgba(0,0,0,.6);
    --shadow:0 0 0 1px rgba(160,180,230,.1);
  }
}
.hub[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0A1022;--card:#151D38;--sheet:#151D38;--sheet-card:#1E2848;
  --fill:rgba(160,180,230,.14);--raised:#2A3660;
  --label:#EEF2FC;--label-2:#AAB5D2;
  --sep:rgba(160,180,230,.2);
  --accent:#3F61C9;--accent-text:#A8C1FF;--accent-tint:#1E2A55;
  --hero:#22357D;
  --ok:#4CD471;--ok-bg:#12301C;
  --warn:#FFAC33;--warn-bg:#38260A;
  --bad:#FF8A84;--bad-bg:#3A1418;
  --info:#A8C1FF;--info-bg:#1E2A55;
  --material:rgba(10,16,34,.82);
  --scrim:rgba(0,0,0,.6);
  --shadow:0 0 0 1px rgba(160,180,230,.1);
}

/* The page behind the app, so an overscroll never flashes white in dark mode. */
html:has(.hub-app),html:has(.hub-app) body{background:#EEF5FD}
@media (prefers-color-scheme:dark){html:has(.hub-app),html:has(.hub-app) body{background:#0A1022}}

/* ── Base ───────────────────────────────────────────────────────────────── */
.hub{font-family:var(--font);font-size:var(--t-body);line-height:1.3;color:var(--label);background:var(--ground);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.hub *{box-sizing:border-box}
/* :where keeps this reset below every class in this file. */
.hub :where(h1,h2,h3,p){margin:0;font-family:inherit}
.hub button,.hub input,.hub textarea{font-family:inherit}
.hub b{font-weight:600}
.hub a{color:var(--accent-text)}
.hub a.hub-row{color:var(--label)}
.hub :focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.hub .tnum{font-variant-numeric:tabular-nums}
.hub-app{min-height:100vh;min-height:100dvh}

/* ── Top bar: frosted, with the title appearing once the large one scrolls away ── */
.hub-bar{position:sticky;top:0;z-index:20;background:var(--material);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:var(--hair) solid transparent;transition:border-color .2s}
.hub-bar[data-scrolled="true"]{border-bottom-color:var(--sep)}
.hub-bar-in{max-width:640px;margin:0 auto;min-height:var(--s11);padding:0 var(--s2) 0 var(--s5);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2)}
.hub-bar-in > :last-child{justify-self:end}
.hub-bar-actions{display:flex;align-items:center;gap:var(--s1)}
.hub-bar-actions .hub-icon-btn{position:relative;color:var(--accent-text)}
.hub-dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--ground)}
.hub-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:800;font-size:var(--t-sub)}
.hub-brand{font-family:var(--font-nunito),'Nunito',var(--font);font-weight:900;font-size:var(--t-body);color:var(--label);text-decoration:none}
.hub .hub-brand{color:var(--label)}
.hub-brand span{color:var(--brand-dot)}
.hub-bar-title{font-size:var(--t-body);font-weight:600;opacity:0;transition:opacity .2s}
.hub-bar[data-scrolled="true"] .hub-bar-title{opacity:1}

.hub-page{max-width:640px;margin:0 auto;padding:var(--s2) var(--s5) calc(var(--s16) + var(--s8) + env(safe-area-inset-bottom))}
.hub-title{font-family:var(--font-display);font-size:var(--t-large);line-height:1.15;font-weight:900;letter-spacing:-.015em;margin-bottom:var(--s4);text-wrap:balance}
.hub-back{display:inline-flex;align-items:center;gap:2px;min-height:var(--s11);margin-left:calc(var(--s2) * -1);padding:0 var(--s2);border:none;background:none;color:var(--accent-text);font-size:var(--t-body);font-weight:600;cursor:pointer;border-radius:var(--r-sm)}
.hub-lead{font-size:var(--t-body);color:var(--label-2);margin:var(--s1) 0 var(--s5)}
.hub-lead b{color:var(--label)}
.hub-stack > * + *{margin-top:var(--s3)}

/* ── Buttons: filled / tinted / plain, three sizes ──────────────────────── */
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--s11);padding:var(--s2) var(--s4);border:none;border-radius:var(--r-md);font-size:var(--t-body);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),opacity .15s,background-color .15s}
.hub-btn.filled{background:var(--accent);color:var(--on-accent)}
.hub-btn.tinted{background:var(--accent-tint);color:var(--accent-text)}
.hub-btn.plain{background:transparent;color:var(--accent-text);padding-left:var(--s2);padding-right:var(--s2)}
.hub-btn.danger.filled{background:var(--bad-fill);color:var(--on-accent)}
.hub-btn.danger.tinted{background:var(--bad-bg);color:var(--bad)}
.hub-btn.danger.plain{color:var(--bad)}
.hub-btn.sm{font-size:var(--t-sub);border-radius:var(--r-sm);padding:var(--s1) var(--s3)}
.hub-btn.lg{min-height:52px;padding:var(--s3) var(--s5)}
.hub-btn.block{display:flex;width:100%}
@media (hover:hover){
  .hub-btn:hover:not(:disabled){opacity:.88}
  .hub-btn.plain:hover:not(:disabled){background:var(--fill);opacity:1}
}
.hub-btn[data-state="hover"]{opacity:.88}
.hub-btn:active:not(:disabled),.hub-btn[data-state="pressed"]{transform:scale(.97);opacity:.7}
.hub-btn[data-state="focus"]{outline:2px solid var(--accent-text);outline-offset:2px}
.hub-btn:disabled{background:var(--fill);color:var(--label-2);cursor:not-allowed}
.hub-btn.plain:disabled{background:transparent}
/* Busy is working, not unavailable: it keeps its colour. */
.hub-btn.filled[aria-busy="true"]{background:var(--accent);color:var(--on-accent);cursor:progress}
.hub-btn.tinted[aria-busy="true"]{background:var(--accent-tint);color:var(--accent-text);cursor:progress}
.hub-btn.danger.filled[aria-busy="true"]{background:var(--bad-fill);color:var(--on-accent)}
.hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.hub-actions .hub-btn{padding-left:var(--s3);padding-right:var(--s3)}

/* ── Cards, grouped lists, rows ─────────────────────────────────────────── */
.hub-card{background:var(--card);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--shadow)}
.hub-h{font-size:var(--t-foot);line-height:1.4;font-weight:600;color:var(--label-2);margin:var(--s6) var(--s4) var(--s2)}
.hub-group{background:var(--card);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.hub-row{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--s11);padding:var(--s3) var(--s4);border:none;background:transparent;color:var(--label);font-size:var(--t-body);text-align:left;text-decoration:none;position:relative}
.hub-row + .hub-row::before{content:'';position:absolute;top:0;left:var(--s4);right:0;border-top:var(--hair) solid var(--sep)}
button.hub-row{cursor:pointer}
@media (hover:hover){button.hub-row:hover:not(:disabled){background:var(--fill)}}
button.hub-row:active:not(:disabled){background:var(--fill)}
button.hub-row:disabled{cursor:not-allowed}
button.hub-row:disabled .hub-row-body{opacity:.5}
button.hub-row:focus-visible{outline-offset:-2px;border-radius:var(--r-md)}
.hub-row-body{flex:1;min-width:0}
.hub-row-title{font-size:var(--t-body);font-weight:600;line-height:1.3}
.hub-row-title.icon{display:flex;align-items:center;gap:var(--s2)}
.hub-row-sub{font-size:var(--t-sub);line-height:1.35;color:var(--label-2);margin-top:2px;overflow-wrap:anywhere;white-space:pre-line}
.hub-row-trail{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);color:var(--label-2)}
.hub-row-trail.check{color:var(--accent-text)}
.hub-amt{font-size:var(--t-body);font-weight:600;color:var(--label);font-variant-numeric:tabular-nums}
.hub-chev{flex:none;color:var(--label-2);opacity:.6}
.hub-date{flex:none;width:var(--s11);text-align:center}
.hub-date-k{font-size:var(--t-foot);font-weight:600;color:var(--label-2)}
.hub-date-v{font-family:var(--font-display);font-size:var(--t-title2);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.hub-kv{padding:var(--s3) var(--s4);position:relative}
.hub-kv + .hub-kv::before{content:'';position:absolute;top:0;left:var(--s4);right:0;border-top:var(--hair) solid var(--sep)}
.hub-kv-k{font-size:var(--t-foot);color:var(--label-2)}
.hub-kv-v{font-size:var(--t-body);margin-top:2px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.hub-kv.warn .hub-kv-v{color:var(--warn);font-weight:600}

/* ── The next visit ─────────────────────────────────────────────────────── */
.hub-eyebrow{font-size:var(--t-foot);font-weight:600;color:var(--label-2)}
.hub-eyebrow.live{color:var(--ok)}
.hub-hero-date{font-family:var(--font-display);font-size:var(--t-title2);line-height:1.25;font-weight:800;margin-top:var(--s1)}
.hub-hero-time{font-size:var(--t-body);font-weight:600;margin-top:2px}
.hub-meta{font-size:var(--t-sub);line-height:1.35;color:var(--label-2);margin-top:var(--s1);overflow-wrap:anywhere}
.hub-hero .hub-actions{margin-top:var(--s4)}

/* ── Status pill ────────────────────────────────────────────────────────── */
.hub-pills{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.hub-pills:empty{display:none}
.hub-pill{display:inline-flex;align-items:center;font-size:var(--t-foot);font-weight:600;line-height:1.4;padding:2px var(--s2);border-radius:var(--r-pill);background:var(--fill);color:var(--label)}
.hub-pill.ok{background:var(--ok-bg);color:var(--ok)}
.hub-pill.warn{background:var(--warn-bg);color:var(--warn)}
.hub-pill.bad{background:var(--bad-bg);color:var(--bad)}
.hub-pill.info{background:var(--info-bg);color:var(--info)}

/* ── Balance owed: above the tabs, never behind one ─────────────────────── */
.hub-due{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.hub-due-k{font-size:var(--t-sub);color:var(--label-2)}
.hub-due-k.over{color:var(--bad);font-weight:600}
.hub-due-v{font-family:var(--font-display);font-size:var(--t-title2);font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}

/* ── Tabs: an iOS tab bar on a phone, a segmented control from 720px ─────── */
.hub-tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));background:var(--material);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:var(--hair) solid var(--sep)}
.hub-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--s11);padding:var(--s1) 2px;border:none;border-radius:var(--r-sm);background:transparent;font-size:var(--t-cap);font-weight:500;color:var(--label-2);cursor:pointer;white-space:nowrap}
.hub-tab[aria-selected="true"]{color:var(--accent-text);font-weight:700}
.hub-tab:active{opacity:.7}
.hub-tab-i{position:relative;display:flex}
.hub-badge{position:absolute;top:-4px;left:calc(100% - 6px);min-width:16px;padding:0 var(--s1);border-radius:var(--r-pill);background:var(--bad-fill);color:var(--on-accent);font-size:var(--t-cap);font-weight:700;line-height:16px;text-align:center}
@media (min-width:720px){
  .hub-page{padding-bottom:var(--s16)}
  .hub-tabs{position:static;padding:2px;margin-bottom:var(--s5);background:var(--fill);border:none;border-radius:var(--r-pill);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hub-tab{flex-direction:row;gap:var(--s2);min-height:36px;border-radius:var(--r-pill);font-size:var(--t-sub);color:var(--label)}
  .hub-tab[aria-selected="true"]{background:var(--raised);color:var(--label);font-weight:600;box-shadow:var(--shadow)}
  .hub-tab-i svg{display:none}
  .hub-badge{position:static}
}

/* ── Segmented control (also the time-of-day choice in a move request) ──── */
.hub-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;background:var(--fill);border-radius:var(--r-pill)}
.hub-seg button{min-height:40px;padding:var(--s1) var(--s2);border:none;border-radius:var(--r-pill);background:transparent;font-size:var(--t-sub);font-weight:500;color:var(--label);cursor:pointer}
.hub-seg button[aria-pressed="true"]{background:var(--raised);font-weight:600;box-shadow:var(--shadow)}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.hub-field{margin-top:var(--s5)}
.hub-label{display:block;font-size:var(--t-body);font-weight:600;margin:0 var(--s1) 2px}
.hub-hint{font-size:var(--t-sub);line-height:1.35;color:var(--label-2);margin:0 var(--s1)}
.hub-input,.hub-textarea{display:block;width:100%;min-height:var(--s11);margin-top:var(--s2);padding:var(--s3);border:var(--hair) solid var(--sep);border-radius:var(--r-sm);background:var(--card);color:var(--label);font-size:var(--t-body);line-height:1.3}
.hub-textarea{min-height:88px;resize:vertical}
.hub-input::placeholder,.hub-textarea::placeholder{color:var(--label-2);opacity:.8}
.hub-input:focus-visible,.hub-textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:0;border-color:transparent}
.hub-input:disabled,.hub-textarea:disabled{background:var(--fill);color:var(--label-2)}
.hub-count{font-size:var(--t-foot);color:var(--label-2);text-align:right;margin:var(--s1) var(--s1) 0;font-variant-numeric:tabular-nums}
.hub-fine{font-size:var(--t-sub);line-height:1.4;color:var(--label-2);margin:var(--s3) var(--s1) 0}
.hub-link{background:none;border:none;min-height:var(--s11);padding:0 var(--s1);font-size:var(--t-body);font-weight:500;color:var(--accent-text);cursor:pointer;border-radius:var(--r-sm)}
.hub-link.danger{color:var(--bad)}
.hub-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s11);height:var(--s11);border:none;border-radius:var(--r-pill);background:transparent;color:var(--label-2);cursor:pointer}
.hub-icon-btn:active{opacity:.6}
.hub-opt{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:center}
.hub-opt .hub-input{margin-top:0}
.hub-opt .hub-seg{grid-column:1 / -1}
.hub-code{font-family:var(--font-mono);font-size:var(--t-title2);font-weight:700;letter-spacing:.08em;text-align:center;user-select:all}

/* ── Notes, empty and loading states ────────────────────────────────────── */
.hub-note{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--t-sub);line-height:1.4}
.hub-note.info{background:var(--info-bg);color:var(--info)}
.hub-note.warn{background:var(--warn-bg);color:var(--warn)}
.hub-note.ok{background:var(--ok-bg);color:var(--ok)}
.hub-note a{color:inherit;font-weight:600}
.hub-empty{text-align:center;padding:var(--s11) var(--s4) var(--s6);font-size:var(--t-body);color:var(--label-2)}
.hub-empty b{display:block;font-family:var(--font-display);font-size:var(--t-title2);font-weight:800;color:var(--label);margin-bottom:var(--s1)}
.hub-empty .hub-btn{margin-top:var(--s5)}
.hub-skel{display:block;border-radius:var(--r-sm);background:var(--fill);animation:hub-pulse 1.4s ease-in-out infinite}
@keyframes hub-pulse{50%{opacity:.45}}

/* ── Sheet: rises from the bottom on a phone, a centred dialog from 720px ── */
.hub-scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;animation:hub-fade .25s ease-out}
.hub-sheet{--ground:var(--sheet);--card:var(--sheet-card);width:100%;max-width:640px;max-height:94vh;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--ground);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s2) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));animation:hub-rise .35s var(--ease)}
.hub-sheet:focus{outline:none}
.hub-grab{width:36px;height:5px;border-radius:var(--r-pill);background:var(--sep);margin:0 auto var(--s2)}
.hub-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.hub-sheet-head .hub-icon-btn{background:var(--fill);margin-right:calc(var(--s2) * -1)}
.hub-sheet-title{font-family:var(--font-display);font-size:var(--t-title2);line-height:1.25;font-weight:800}
.hub-sheet-sub{font-size:var(--t-sub);color:var(--label-2);margin-top:2px}
@keyframes hub-rise{from{transform:translateY(100%)}}
@keyframes hub-fade{from{opacity:0}}
@keyframes hub-pop{from{opacity:0;transform:scale(.97)}}
@media (min-width:720px){
  .hub-scrim{align-items:center}
  .hub-sheet{border-radius:var(--r-lg);max-height:88vh;padding-top:var(--s5);box-shadow:var(--shadow);animation:hub-pop .25s var(--ease)}
  .hub-grab{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hub-chip,.hub-star{transition:none}
  .hub-chip:active,.hub-star:active{transform:none}
  .hub-sheet{animation:hub-fade .2s ease-out}
  .hub-skel{animation:none}
  .hub-btn{transition:none}
  .hub-btn:active:not(:disabled){transform:none}
}

/* ── The pages without tabs: ask for a link, dead link, could not load ──── */
.hub-solo{max-width:440px;margin:0 auto;padding:var(--s11) var(--s5) var(--s16)}
.hub-solo .hub-card{padding:var(--s6) var(--s5)}
.hub-solo-icon{color:var(--label-2);margin-bottom:var(--s2)}

/* ── Action results (app/components/action/status.css), in hub tokens ────── */
.hub .act-line{border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s3) 0 0;font-size:var(--t-sub);line-height:1.4}
.hub .act-line b,.hub .act-line a{font-weight:600}
.hub .act-line.ok{background:var(--ok-bg);color:var(--ok)}
.hub .act-line.slow{background:var(--warn-bg);color:var(--warn)}
.hub .act-line.info{background:var(--fill);color:var(--label)}
.hub .act-line.bad{background:var(--bad-bg);color:var(--bad)}

/* ── /design-system ─────────────────────────────────────────────────────── */
.hub-ds{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:900px){.hub-ds{grid-template-columns:1fr 1fr}}
.hub-ds > .hub{padding:var(--s6) var(--s5) var(--s16)}
.hub-ds-in{max-width:520px;margin:0 auto}
.hub-ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.hub-ds-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2)}
.hub-ds-sw div{font-size:var(--t-cap);color:var(--label-2)}
.hub-ds-sw i{display:block;height:var(--s11);border-radius:var(--r-sm);border:var(--hair) solid var(--sep);margin-bottom:var(--s1)}
.hub-ds .hub-tabs{position:static}
.hub-ds .hub-scrim{position:static;padding:var(--s5) var(--s5) 0;border-radius:var(--r-md);animation:none}
.hub-ds .hub-sheet{animation:none}

/* ── Chips: little on/off buttons (extras on a visit) ───────────────────── */
.hub-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hub-chip{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--s11);padding:var(--s2) var(--s4);box-shadow:var(--shadow);border:none;border-radius:var(--r-pill);background:var(--card);color:var(--label);font-size:var(--t-sub);font-weight:500;cursor:pointer;transition:transform .15s var(--ease),background-color .15s}
.hub-chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.hub-chip:active{transform:scale(.97)}

/* ── Stars ──────────────────────────────────────────────────────────────── */
.hub-stars{display:flex;justify-content:center;gap:var(--s1)}
.hub-star{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--label-2);cursor:pointer}
.hub-star[data-on="true"]{color:var(--warn)}
.hub-star:active{transform:scale(.9)}

/* ── Receipt: one card that prints as a page ────────────────────────────── */
.hub-receipt{max-width:560px;margin:0 auto;padding:var(--s8) var(--s5) var(--s16)}
.hub-receipt-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s4);font-size:var(--t-title2);font-weight:700;font-variant-numeric:tabular-nums;position:relative}
.hub-receipt-total::before{content:'';position:absolute;top:0;left:var(--s4);right:0;border-top:var(--hair) solid var(--sep)}
@media print{
  html:has(.hub-app),html:has(.hub-app) body{background:#FFFFFF}
  .hub{--ground:#FFFFFF;--card:#FFFFFF;--label:#1A2346;--label-2:#4A5A80;--sep:rgba(26,46,110,.3);--shadow:none;color-scheme:light}
  .hub-noprint{display:none}
}

/* ── Tab bar: the centre tab (Book) is a raised button on a phone ─────────── */
@media (max-width:719.98px){
  .hub-tab.raised .hub-tab-i{display:grid;place-items:center;width:44px;height:44px;margin-top:-18px;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(26,46,110,.28)}
  .hub-tab.raised[aria-selected="true"] .hub-tab-i{outline:2px solid var(--gold);outline-offset:2px}
}

/* ── Hero: the one dark surface on a screen ─────────────────────────────── */
.hub-herocard{background:var(--hero);color:var(--on-hero);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.hub-herocard .hub-eyebrow{color:var(--on-hero-2)}
.hub-herocard .hub-eyebrow.live{color:var(--gold)}
.hub-herocard .hub-meta{color:var(--on-hero-2)}
.hub-herocard .hub-hero-date{font-size:1.625rem}
.hub-herostats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hero-sep)}
.hub-herostats div{min-width:0}
.hub-herostats span{display:block;font-size:var(--t-foot);color:var(--on-hero-2)}
.hub-herostats b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.hub-btn.onhero{background:var(--gold);color:var(--on-gold)}
.hub-herocard .hub-btn{margin-top:var(--s4)}

/* ── Quick actions: equal cards, two across ─────────────────────────────── */
.hub-quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.hub-quick button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-height:88px;padding:var(--s4);border:none;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);color:var(--label);font-size:var(--t-sub);font-weight:600;text-align:left;cursor:pointer;transition:transform .15s var(--ease)}
.hub-quick button:active{transform:scale(.97)}
.hub-tile{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--accent-tint);color:var(--accent-text)}

/* ── Visit progress: four steps, filled up to where the visit is ────────── */
.hub-track{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin:var(--s3) 0 0;padding:0;list-style:none}
.hub-track li{font-size:var(--t-cap);line-height:1.3;color:var(--label-2);text-align:center}
.hub-track li::before{content:'';display:block;height:5px;border-radius:var(--r-pill);background:var(--fill);margin-bottom:var(--s1)}
.hub-track li[data-on="true"]{color:var(--label);font-weight:600}
.hub-track li[data-on="true"]::before{background:var(--accent)}
.hub-herocard .hub-track li{color:var(--on-hero-2)}
.hub-herocard .hub-track li::before{background:var(--hero-sep)}
.hub-herocard .hub-track li[data-on="true"]{color:var(--on-hero)}
.hub-herocard .hub-track li[data-on="true"]::before{background:var(--gold)}

/* ── Meter (points toward a free clean) and the booking stepper ─────────── */
.hub-meter{height:10px;border-radius:var(--r-pill);background:var(--fill);overflow:hidden;margin:var(--s3) 0 var(--s2)}
.hub-meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--gold)}
/* ── Tier card (Rewards): the medal is the only place tier colours appear ─── */
.hub-tier{display:flex;align-items:flex-start;gap:var(--s3)}
.hub-tier > div{min-width:0}
.hub-tier-promise{gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--sep)}
.hub-tier-promise .hub-btn{align-self:flex-start}
.hub-medal{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:var(--accent-tint);color:var(--accent-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.hub-medal[data-tier="bronze"]{background:linear-gradient(145deg,#D39A6A,#9C6337);color:#2E1A0B}
.hub-medal[data-tier="silver"]{background:linear-gradient(145deg,#E6E9EE,#A9B1BC);color:#1A2346}
.hub-medal[data-tier="gold"]{background:linear-gradient(145deg,#F7D27A,#D19A2A);color:#3A2600}
.hub-medal[data-tier="platinum"]{background:linear-gradient(145deg,#F4F5F7,#BFC6D2);color:#1A2E6E}
.hub-medal[data-tier="titanium"]{background:linear-gradient(145deg,#8A929C,#4A525C);color:#FFFFFF}
.hub-medal[data-tier="elite"]{background:linear-gradient(145deg,#2D4FA3,#101C49);color:#F9B233}
.hub-steps{display:flex;gap:var(--s1);margin-bottom:var(--s2)}
.hub-steps i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--fill)}
.hub-steps i[data-on="true"]{background:var(--accent)}
.hub-big{font-family:var(--font-display);font-weight:800;font-size:var(--t-title2);line-height:1.2;font-variant-numeric:tabular-nums}
.hub-price{flex:none;font-size:var(--t-sub);font-weight:600;color:var(--label);font-variant-numeric:tabular-nums;text-align:right}
.hub-price.none{font-weight:400;color:var(--label-2);max-width:92px}
.hub-row[aria-pressed="true"]{background:var(--accent-tint)}
.hub-sum{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s1) 0;font-size:var(--t-sub);font-variant-numeric:tabular-nums}
.hub-sum.total{margin-top:var(--s2);padding-top:var(--s3);border-top:var(--hair) solid var(--sep);font-size:var(--t-body);font-weight:700}
.hub-sum .hub-price.none{max-width:none}
/* Up to three small actions under one row: Skip, Move, Add extras. */
.hub-row-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.hub-row-actions .hub-btn{padding-left:var(--s2);padding-right:var(--s2)}
.hub-row-actions.two{grid-template-columns:repeat(2,1fr)}
/* A sentence to agree to: the box and the words are one target. */
.hub-check{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--accent-tint);font-size:var(--t-sub);line-height:1.4;cursor:pointer}
.hub-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent)}
/* Stripe's card form sits in its own frame; this is only the room for it. */
.hub-stripe{min-height:var(--s11);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--card);border:var(--hair) solid var(--sep)}
.hub-stripe[hidden]{display:none}
/* A link inside a sentence that does something on this page rather than leaving it. */
.hub-inline{background:none;border:none;padding:0;font:inherit;font-weight:600;color:inherit;text-decoration:underline;cursor:pointer}
.hub-faq{padding:var(--s3) var(--s4);position:relative}
.hub-faq + .hub-faq::before{content:'';position:absolute;top:0;left:var(--s4);right:0;border-top:var(--hair) solid var(--sep)}
.hub-faq summary{font-weight:600;cursor:pointer;min-height:28px}
.hub-faq p{font-size:var(--t-sub);line-height:1.4;color:var(--label-2);margin-top:var(--s2)}

/* ── Utilities: last, so they win over a piece's own margin ─────────────── */
.hub-gap{margin-top:var(--s2)}
.hub-gap-lg{margin-top:var(--s3)}
.hub-center{text-align:center}