@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:optional;
  src:url(/fonts/ibmplexmono-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:optional;
  src:url(/fonts/ibmplexmono-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:optional;
  src:url(/fonts/ibmplexmono-700.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:optional;
  src:url(/fonts/inter-variable.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:optional;
  src:url(/fonts/schibstedgrotesk-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --pu-ink-950:#18181B; --pu-ink-900:#27272A; --pu-ink-700:#3F3F46;
  --pu-ink-500:#62626B; --pu-paper:#F8F8FA; --pu-paper-dim:#F0F0F3;
  --pu-line:#E2E2E7; --pu-green-700:#3F3F46; --pu-green-800:#18181B;
  --pu-signal:#71717A; --pu-green-tint:#E9E9EF; --pu-danger:#D92D20;
  --pu-selection-bg:#C9C9D2;
  --pu-danger-800:#B8241A; --pu-danger-text:#D92D20; --pu-danger-tint:#FBEAE8;
  /* Keep existing accent names for components that already reference them.
     Solid selection fills stay dark; primary buttons follow the text/surface
     pair so they remain prominent in both light and dark themes. */
  --pu-green-fill:#3F3F46; --pu-green-fill-hover:#18181B;
  --pu-button-bg:var(--pu-ink-950); --pu-button-hover:var(--pu-ink-700);
  --pu-button-text:var(--pu-paper);
  /* Warn — added for the semantic layer below. Fill/border stays one
     value across themes, same discipline as --pu-green-fill above; a
     separate -text variant is redefined per theme below because #F5A623
     itself is ~1.9:1 on light paper (fine as a small border/icon, fails AA
     as text) and ~9:1 on dark paper (fine either way), so light mode needs a
     darkened amber for readable text while dark mode can stay near the
     brand hue. */
  --pu-warn:#F5A623; --pu-warn-text:#92400E; --pu-warn-tint:#FCEFD9;
  --pu-font-display:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --pu-font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pu-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pu-radius:10px; --pu-radius-lg:16px;
  --pu-shadow-sm:0 1px 2px rgba(24,24,27,.06);
  --pu-ring:0 0 0 3px color-mix(in srgb,var(--pu-green-700) 25%,transparent);
  /* Code blocks (docs pages): deliberately NOT redefined under the dark-mode
     media query or [data-theme=dark] below — a code panel that's always a
     dark "terminal" surface reads clearly against either a light or dark
     page background, which is simpler and more reliable than trying to keep
     a code block's syntax contrast correct across two flipped palettes. */
  --pu-code-bg:#18181B; --pu-code-fg:#F4F4F5; --pu-code-line:#3F3F46;

  /* ---------------------------------------------------------------------
   * Semantic layer. Product UI states, one level above the raw
   * palette above — components should reach for these, not for
   * --pu-ink-*, --pu-green-*, --pu-danger or --pu-warn directly, so a future
   * repaint of the brand only ever touches this block.
   *
   * Every value here is a var() onto a primitive already defined above
   * (or, where a state needs a light/dark-specific reading and the flipped
   * primitive doesn't fit, a literal redefined per theme below — never a
   * color that exists ONLY inside a dark-mode block).
   * ------------------------------------------------------------------- */

  /* Surface: canvas < raised < sunken, by how far off the base page a thing
     sits. "raised" is the same fill as canvas on light (elevation reads via
     --pu-shadow-sm/border, exactly how .pu-card already works) but goes
     lighter than canvas in dark mode below, because a drop shadow barely
     reads against a near-black page — dark-mode elevation has to come from
     value contrast instead. "overlay" is new: nothing in the product uses a
     modal/backdrop yet, but a scrim still needs to read as "a wash over
     content" on either theme, so it is a plain ink-tinted rgba() in light
     mode and a plain black rgba() in dark mode below — not composed from
     any other token, since nothing else in the palette is meant to be used
     at partial opacity over arbitrary content. */
  --pu-surface-canvas:var(--pu-paper);
  --pu-surface-raised:var(--pu-paper);
  --pu-surface-sunken:var(--pu-paper-dim);
  /* Segmented controls (.pu-thumbseg, .pu-seg, My hours' .mh-seg): the option
     you are on is a thumb clearly lifted off its track, as on iOS. */
  --pu-seg-track:rgba(118,118,128,.12); --pu-seg-thumb:#FFFFFF;
  --pu-seg-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.04);
  --pu-surface-overlay:rgba(24,24,27,.45);

  /* Text: primary/secondary track --pu-ink-950/--pu-ink-500 verbatim — they
     already flip for dark mode below the same way. "muted" and "disabled"
     are new, both ink-500 with alpha baked in (not the bare token plus a
     sibling opacity rule) so a single custom property is the full color
     in either theme. "disabled" alpha (.45) matches the treatment
     .pu-day[aria-disabled] already shipped; "muted" (.72) is one step above
     it — dim enough to read as decoration, e.g. table timestamps, not body
     copy — deliberately sub-AA at 3.2:1 (large-text tier only), same trade
     already accepted for e.g. .pu-cal-head. */
  --pu-text-primary:var(--pu-ink-950);
  --pu-text-secondary:var(--pu-ink-500);
  --pu-text-muted:rgba(98,98,107,.72);
  --pu-text-on-accent:#FFFFFF;
  --pu-text-disabled:rgba(98,98,107,.45);

  /* Border: subtle = --pu-line's existing job. strong = a border with more
     presence than a hairline but no status meaning (e.g. a divider that
     needs to read on its own, not next to a card's shadow) — set to
     --pu-ink-500 rather than a new hex, so "strong border" and "secondary
     text" are always the same value by construction. focus reuses
     --pu-green-700, matching :focus-visible's existing outline color below
     — a11y focus indication is expected to borrow the accent; that is a
     different thing from rule 1's "system states don't get the accent",
     which is about background/fill states like held/booked, not the
     global focus ring. */
  --pu-border-subtle:var(--pu-line);
  --pu-border-strong:var(--pu-ink-500);
  --pu-border-focus:var(--pu-green-700);

  /* Status: independent decisions, not aliases of whatever the marketing
     palette (docs/branding/assets/tokens.css) happens to alias.
     - success reuses --pu-green-700, NOT --pu-signal. --pu-signal is a
       fixed, always-vivid accent meant for a small dot (the wordmark colon,
       a status pip) and is never contrast-managed for use as text — using
       it here would mean unreadable status text the day someone sets it as
       a label color. --pu-green-700 already does the light/dark contrast
       flip a status text color needs (5.0:1 light, 7.8:1 dark — see
       styles.ts's own note above on why fills stay pinned but this token
       doesn't).
     - danger/warning follow the same shape: a text-safe color plus a light
       tint for a badge/callout background.
     - info deliberately has NO owned hue. The brand system is one green +
       conventional danger/warn — a blue "info" would be a hue the
       brand doesn't own and no page currently needs one. .pu-docs-callout
       already renders informational asides in neutral ink-on-sunken-surface
       with no color at all; --pu-status-info/-bg codify that as the
       intentional choice rather than leaving it undocumented. */
  --pu-status-success:var(--pu-green-700);
  --pu-status-success-bg:var(--pu-green-tint);
  --pu-status-danger:var(--pu-danger-text);
  --pu-status-danger-bg:var(--pu-danger-tint);
  --pu-status-warning:var(--pu-warn-text);
  --pu-status-warning-bg:var(--pu-warn-tint);
  --pu-status-info:var(--pu-text-secondary);
  --pu-status-info-bg:var(--pu-surface-sunken);

  /* Field: a text input's resting border, and the surface of the read-only
     .pu-url box. In light mode both are the ordinary line and sunken
     surface. In dark mode the card, the input and the URL box all sat
     within a few shades of each other, so an editable field and a
     read-only box were told apart only by the Copy button — the dark
     override lifts the input's border and drops the URL box below the
     canvas so each reads as what it is. */
  --pu-field-border:var(--pu-line);
  --pu-url-bg:var(--pu-surface-sunken);

  /* Slot: the booking flow's own state machine (see src/core/slot-state.ts).
     Rule: held/booked are visually distinct from available
     WITHOUT the accent — the accent is the guest's own current pick
     (hover/selected), never a system state. held borrows the warning hue
     (in flux, someone else is mid-booking, may free up); booked borrows the
     neutral surface/border family (settled, permanently gone — distinct
     hue from held on purpose, so the two read as different kinds of
     unavailable, not different intensities of the same one). past and
     outside-notice-window are both neutral too, and stay distinguishable
     from booked and each other structurally (see .pu-slot-past/
     .pu-slot-outside-notice border-style/opacity in BASE_CSS below), not
     just by color, so the distinction survives greyscale. */
  --pu-slot-available-bg:var(--pu-surface-raised);
  --pu-slot-available-border:var(--pu-border-subtle);
  --pu-slot-available-text:var(--pu-text-primary);
  --pu-slot-hover-bg:var(--pu-green-tint);
  --pu-slot-hover-border:var(--pu-green-700);
  --pu-slot-hover-text:var(--pu-text-primary);
  --pu-slot-selected-bg:var(--pu-green-tint);
  --pu-slot-selected-border:var(--pu-green-700);
  --pu-slot-selected-text:var(--pu-text-primary);
  --pu-slot-held-bg:var(--pu-warn-tint);
  --pu-slot-held-border:var(--pu-warn);
  --pu-slot-held-text:var(--pu-warn-text);
  --pu-slot-booked-bg:var(--pu-surface-sunken);
  --pu-slot-booked-border:var(--pu-border-subtle);
  --pu-slot-booked-text:var(--pu-text-disabled);
  --pu-slot-past-bg:var(--pu-surface-canvas);
  --pu-slot-past-border:transparent;
  --pu-slot-past-text:var(--pu-text-muted);
  --pu-slot-outside-notice-bg:var(--pu-surface-raised);
  --pu-slot-outside-notice-border:var(--pu-border-subtle);
  --pu-slot-outside-notice-text:var(--pu-text-muted);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --pu-paper:#18181B; --pu-paper-dim:#27272A; --pu-line:#3F3F46;
    --pu-ink-950:#F8F8FA; --pu-ink-700:#D4D4D8; --pu-ink-500:#A1A1AA; --pu-green-700:#E4E4E7;
    --pu-green-800:#FAFAFA; --pu-green-tint:#27272D; --pu-danger-text:#FF6B5B;
    --pu-selection-bg:#5B5B66;
    --pu-danger-tint:#3A1A16; --pu-warn-text:#FBBF24; --pu-warn-tint:#3A2C12;
    --pu-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --pu-surface-raised:#27272A;
    --pu-text-muted:rgba(161,161,170,.72); --pu-text-disabled:rgba(161,161,170,.45);
    --pu-surface-overlay:rgba(0,0,0,.6);
    --pu-field-border:#45454D; --pu-url-bg:#0C0C0F;
    --pu-seg-track:rgba(0,0,0,.32); --pu-seg-thumb:#3F3F46;
    --pu-seg-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 .5px 0 rgba(255,255,255,.08);
  }
}
:root[data-theme=dark]{
  --pu-paper:#18181B; --pu-paper-dim:#27272A; --pu-line:#3F3F46;
  --pu-ink-950:#F8F8FA; --pu-ink-700:#D4D4D8; --pu-ink-500:#A1A1AA; --pu-green-700:#E4E4E7;
  --pu-green-800:#FAFAFA; --pu-green-tint:#27272D; --pu-danger-text:#FF6B5B;
  --pu-selection-bg:#5B5B66;
  --pu-danger-tint:#3A1A16; --pu-warn-text:#FBBF24; --pu-warn-tint:#3A2C12;
  --pu-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --pu-surface-raised:#27272A;
  --pu-text-muted:rgba(161,161,170,.72); --pu-text-disabled:rgba(161,161,170,.45);
  --pu-surface-overlay:rgba(0,0,0,.6);
  --pu-field-border:#45454D; --pu-url-bg:#0C0C0F;
  --pu-seg-track:rgba(0,0,0,.32); --pu-seg-thumb:#3F3F46;
  --pu-seg-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 .5px 0 rgba(255,255,255,.08);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--pu-surface-canvas);color:var(--pu-text-primary);
  font-family:var(--pu-font-ui);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--pu-font-display);font-weight:600;line-height:1.2;margin:0 0 .5rem}
h1{font-size:1.5rem} h2{font-size:1.125rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
a{color:var(--pu-green-700)}
time,.pu-time{font-family:var(--pu-font-mono);font-variant-numeric:tabular-nums}
/* Its own token: the green tint is a surface colour, and on the page
   background it made selected text look unselected. */
::selection{background:var(--pu-selection-bg);color:var(--pu-green-800)}

.pu-wrap{max-width:900px;margin:0 auto;padding:1.5rem 1rem 4rem}
.pu-card{background:var(--pu-surface-raised);border:1px solid var(--pu-border-subtle);
  border-radius:var(--pu-radius-lg);padding:1.375rem;box-shadow:var(--pu-shadow-sm)}
.pu-muted{color:var(--pu-text-secondary)}
/* Host identity block atop a booking page — a person, not a label, so the
   name is set in the display face at text size (never uppercase/tracked:
   this is who the guest is meeting, not a section heading). The company gets
   its own muted line rather than a comma splice, so the two facts read at
   different weights the way they matter differently. */
.pu-host{display:flex;align-items:center;gap:.875rem;margin:0 0 1.25rem}
.pu-host-name{margin:0;font-family:var(--pu-font-display);font-size:1.0625rem;
  font-weight:600;line-height:1.3;color:var(--pu-text-primary)}
.pu-host-org{margin:.1rem 0 0;font-size:.875rem;line-height:1.35;color:var(--pu-text-secondary)}
.pu-host-link{color:var(--pu-green-700);text-decoration:none}
.pu-host-link:hover{text-decoration:underline}
.pu-hosts{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem}
.pu-hosts-stack{display:flex;align-items:center}
.pu-hosts-stack>*{margin-left:-8px;box-shadow:0 0 0 2px var(--pu-paper);border-radius:50%}
.pu-hosts-stack>:first-child{margin-left:0}
.pu-hosts-count{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--pu-paper-dim);color:var(--pu-ink-500);font-family:var(--pu-font-mono);font-size:.75rem}
.pu-hosts-text{margin:0;font-size:.9375rem;line-height:1.4;color:var(--pu-text-secondary)}
.pu-hosts-text strong{color:var(--pu-ink-950);font-weight:600}
.pu-hosts-team{color:var(--pu-text-secondary);font-weight:400}
.pu-home-hero{display:grid;gap:2rem;align-items:start;padding:.5rem 0 2rem;border-bottom:1px solid var(--pu-line)}
.pu-home-hero-split{grid-template-columns:minmax(0,1.2fr) minmax(18rem,1fr)}
@media (max-width:720px){.pu-home-hero-split{grid-template-columns:1fr}}
.pu-home-hero-text h1{margin:.25rem 0 0}
.pu-home-intro{margin-top:.9rem;max-width:38rem}
.pu-home-intro p{margin:.5rem 0 0;line-height:1.55;color:var(--pu-text-secondary)}
.pu-home-intro a,.pu-home-contacts a,.pu-home-foot a{color:var(--pu-ink-950);text-decoration:underline;text-decoration-color:var(--pu-line);text-underline-offset:.15em}
.pu-home-intro a:hover,.pu-home-contacts a:hover,.pu-home-foot a:hover{text-decoration-color:var(--pu-green-fill)}
.pu-home-contacts{margin:1rem 0 0;font-size:.9375rem;color:var(--pu-text-secondary)}
.pu-home-featured{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem 1.35rem;border:1px solid var(--pu-line);border-radius:14px;background:var(--pu-surface-raised);color:inherit;text-decoration:none}
.pu-home-featured:hover,.pu-home-featured:focus-visible{border-color:var(--pu-green-fill);outline:0}
.pu-home-featured-who{display:flex;align-items:center;gap:.6rem;font-size:.9375rem;line-height:1.3}
.pu-home-featured-title{font-family:var(--pu-font-display);font-weight:600;font-size:1.375rem;line-height:1.2;margin-top:.25rem}
.pu-home-featured-cta{align-self:flex-start;margin-top:.5rem}
.pu-home-group{padding:1.75rem 0 0}
.pu-home-group-head{display:flex;align-items:center;gap:.75rem;margin:0 0 .9rem}
.pu-home-group-head h2{margin:0;font-size:1.125rem}
.pu-home-group-head p{margin:.1rem 0 0;font-size:.875rem}
.pu-home-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.pu-home-item{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;border:1px solid var(--pu-line);border-radius:12px;background:var(--pu-surface-raised);color:inherit;text-decoration:none;min-height:100%}
.pu-home-item:hover,.pu-home-item:focus-visible{border-color:var(--pu-green-fill);outline:0}
.pu-home-item-title{font-family:var(--pu-font-display);font-weight:600;font-size:1.0625rem}
.pu-home-item-meta{display:flex;align-items:center;gap:.4rem;font-size:.875rem;color:var(--pu-text-secondary)}
.pu-home-item-desc{font-size:.9375rem;color:var(--pu-text-secondary);line-height:1.4}
.pu-home-foot{max-width:56rem;margin:2.5rem auto 2rem;padding:1.25rem 1.25rem 0;border-top:1px solid var(--pu-line);font-size:.875rem;color:var(--pu-text-secondary)}
.pu-home-foot p{margin:.25rem 0}
.pu-home-foot-by{font-size:.8125rem}
.pu-channel-add summary{cursor:pointer;font-weight:500}
.pu-channel-add{margin-top:.25rem}
.pu-ins-kpis{display:grid;gap:1rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(6.75rem,1fr))}
.pu-ins-kpi{display:flex;flex-direction:column;gap:.15rem}
.pu-ins-kpi-value{font-family:var(--pu-font-mono);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums}
.pu-ins-kpi-label{font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-ins-chart{margin:1.25rem 0 0}
.pu-ins-chart svg{display:block;width:100%;height:120px}
.pu-ins-bar-views{fill:var(--pu-green-tint)}
.pu-ins-bar-booked{fill:var(--pu-green-fill)}
.pu-ins-chart figcaption{font-size:.8125rem;margin-top:.4rem}
.pu-ins-key{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;vertical-align:-1px;margin:0 .2rem 0 .4rem}
.pu-ins-key-views{background:var(--pu-green-tint)}
.pu-ins-key-booked{background:var(--pu-green-fill)}
.pu-ins-table .pu-num,.pu-dash-table .pu-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Seven columns: on a phone the wrapper scrolls, so the names must not fold into a column of single words. */
.pu-ins-table{min-width:46rem}
.pu-ins-table td:first-child,.pu-ins-table th:first-child{white-space:nowrap}
.pu-hosts-more{display:inline}
.pu-hosts-more summary{display:inline;cursor:pointer;color:var(--pu-green-700);list-style:none}
.pu-hosts-more summary::-webkit-details-marker{display:none}
.pu-hosts-more[open] summary{display:none}
.pu-mark{font-family:var(--pu-font-mono);font-weight:600;letter-spacing:-.02em;
  text-decoration:none;color:var(--pu-text-primary)}
.pu-mark span{color:var(--pu-signal)}

.pu-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:780px){.pu-grid{grid-template-columns:300px 1fr}}

.pu-event-header{padding:0 0 1.5rem;margin:0 0 1.5rem;border-bottom:1px solid var(--pu-line)}
.pu-event-header h1{font-size:1.75rem;margin:0 0 .5rem}
.pu-event-header .pu-meta{margin-top:.85rem}

.pu-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pu-cal-head{font-size:.75rem;font-weight:600;text-align:center;color:var(--pu-text-secondary);padding:.25rem 0}
.pu-day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--pu-radius);background:none;
  font:inherit;font-family:var(--pu-font-mono);font-size:.9375rem;cursor:pointer;
  color:var(--pu-text-primary);text-decoration:none;transition:all .12s ease}
.pu-day[data-has-slots="1"]{background:var(--pu-green-tint);color:var(--pu-green-700);font-weight:700}
.pu-day[aria-disabled="true"]{color:var(--pu-text-disabled);cursor:default}
.pu-day[aria-current="date"]{box-shadow:inset 0 0 0 2px var(--pu-border-focus);font-weight:700}
.pu-day[aria-selected="true"]{background:var(--pu-green-700);color:var(--pu-paper);font-weight:700}
.pu-day:hover[data-has-slots="1"]{background:var(--pu-green-700);color:var(--pu-paper);transform:translateY(-1px)}
.pu-day:focus-visible,.pu-slot:focus-visible,.pu-btn:focus-visible{
  outline:2px solid var(--pu-border-focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--pu-border-focus);outline-offset:1px;box-shadow:var(--pu-ring)}

.pu-slots{display:grid;gap:.625rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  max-height:60vh;overflow-y:auto;padding:2px}
/* Base .pu-slot is layout/typography only — every color comes from the
   .pu-slot-* state modifier (see src/core/slot-state.ts's
   slotStateClassName, which always pairs "pu-slot" with exactly one of
   these) so a slot's appearance is never a color chosen ad hoc at a call
   site. */
.pu-slot{padding:.75rem .5rem;border:1px solid var(--pu-line);border-radius:var(--pu-radius);
  font-family:var(--pu-font-mono);font-size:.9375rem;font-weight:600;
  text-align:center;text-decoration:none;display:block;transition:all .12s ease}
.pu-slot-available{background:var(--pu-slot-available-bg);border-color:var(--pu-slot-available-border);
  color:var(--pu-slot-available-text);cursor:pointer}
.pu-slot-available:hover{background:var(--pu-slot-hover-bg);border-color:var(--pu-slot-hover-border);
  color:var(--pu-slot-hover-text);box-shadow:var(--pu-shadow-sm);transform:translateY(-1px)}
.pu-slot-available:active{background:var(--pu-green-fill);border-color:var(--pu-green-fill);
  color:var(--pu-text-on-accent);transform:translateY(0)}
.pu-slot-selected{background:var(--pu-slot-selected-bg);border-color:var(--pu-slot-selected-border);
  color:var(--pu-slot-selected-text)}
/* held/booked/past/outside-notice-window are never links (see
   isInteractiveSlotState) — cursor/pointer-events say so even if a caller
   ever renders one as an <a> by mistake. Distinguished from each other by
   more than hue alone: held keeps a solid border (still "there", just not
   yours to take right now), booked adds a strikethrough on the time
   (settled, gone), past drops its border to blend into the canvas and dims
   further (simply elapsed, nothing to look at), outside-notice-window
   keeps a full card but switches to a dashed border (exists, just not
   bookable yet) — so the four read as different reasons, not four
   opacities of the same greyed-out slot. */
.pu-slot-held,.pu-slot-booked,.pu-slot-past,.pu-slot-outside-notice{cursor:not-allowed;pointer-events:none}
.pu-slot-held{background:var(--pu-slot-held-bg);border-color:var(--pu-slot-held-border);
  color:var(--pu-slot-held-text)}
.pu-slot-booked{background:var(--pu-slot-booked-bg);border-color:var(--pu-slot-booked-border);
  color:var(--pu-slot-booked-text)}
.pu-slot-booked time{text-decoration:line-through}
.pu-slot-past{background:var(--pu-slot-past-bg);border-color:var(--pu-slot-past-border);
  color:var(--pu-slot-past-text);opacity:.7}
.pu-slot-outside-notice{background:var(--pu-slot-outside-notice-bg);
  border-color:var(--pu-slot-outside-notice-border);border-style:dashed;
  color:var(--pu-slot-outside-notice-text)}

.pu-slot-chosen{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;
  padding:.85rem 1rem;border:1px solid var(--pu-slot-selected-border);border-radius:var(--pu-radius);
  background:var(--pu-slot-selected-bg)}
.pu-slot-chosen .pu-dot-lg{flex:0 0 auto;width:.65rem;height:.65rem;border-radius:99px;
  background:var(--pu-green-700)}

.pu-btn{display:inline-block;padding:.7rem 1.1rem;border-radius:var(--pu-radius);
  background:var(--pu-button-bg);color:var(--pu-button-text);border:1px solid var(--pu-button-bg);
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;
  transition:all .12s ease}
.pu-btn:hover{background:var(--pu-button-hover);border-color:var(--pu-button-hover)}
/* Pressed: gives a little under the finger, like a native button. */
.pu-btn:active{transform:scale(.97);transition-duration:.08s}
.pu-btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.pu-btn-ghost{background:none;color:var(--pu-text-primary);border-color:var(--pu-border-subtle)}
.pu-btn-ghost:hover{background:var(--pu-surface-sunken);border-color:var(--pu-border-strong);color:var(--pu-text-primary)}
.pu-back{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  color:var(--pu-text-primary);font-size:.875rem;font-weight:600;text-decoration:none}
.pu-back-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--pu-surface-sunken);transition:background-color .15s ease}
.pu-back:hover .pu-back-icon{background:var(--pu-border-subtle)}
/* --pu-danger, not --pu-status-danger: a solid fill behind white text needs
   the same "pinned across themes" treatment as --pu-green-fill above —
   --pu-status-danger tracks --pu-danger-text, which deliberately brightens
   in dark mode for readability as TEXT and would drop this button's
   white-on-fill contrast the same way sharing --pu-green-700 would have. */
.pu-btn-danger{background:var(--pu-danger);border-color:var(--pu-danger);color:var(--pu-text-on-accent)}
.pu-btn-danger:hover{background:var(--pu-danger-800);border-color:var(--pu-danger-800)}

label{display:block;font-size:.875rem;font-weight:600;margin:1rem 0 .35rem}
input,select,textarea{width:100%;padding:.65rem .75rem;border:1px solid var(--pu-field-border);
  border-radius:var(--pu-radius);background:var(--pu-paper);color:var(--pu-ink-950);
  font:inherit;transition:border-color .12s ease}
/* Without this the browser paints ticks and radios in its own accent — a
   blue that is the one hue the brand never uses. --pu-green-fill, not
   --pu-green-700: the tick is white on the fill, same contrast rule as
   .pu-btn. width:auto undoes the 100% every other input gets. */
input[type=checkbox],input[type=radio]{accent-color:var(--pu-green-fill);width:auto}
/* The phone field (pages/dashboard/phone-field.ts): flag and calling code
   shown over an invisible native picker, so a phone opens its own wheel. */
.pu-phone{display:flex;gap:.5rem}
.pu-phone input{flex:1;min-width:0}
.pu-phone-email .pu-phone-cc{display:none}
.pu-phone-cc{position:relative;flex:none;display:flex;align-items:center;gap:.25rem;margin:0;
  padding:0 .75rem;border:1px solid var(--pu-field-border);border-radius:var(--pu-radius);
  background:var(--pu-paper);font-weight:500;font-size:1rem;white-space:nowrap;cursor:pointer}
.pu-phone-cc::after{content:'';width:.4rem;height:.4rem;margin-left:.2rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5}
.pu-phone-cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:1rem}
.pu-phone-cc:focus-within{border-color:var(--pu-border-focus,var(--pu-field-border));box-shadow:var(--pu-ring,none)}
/* Our own tick boxes and radios (controls.ts has the rest of the custom
   controls): bigger, rounded, the brand fill when on. The day switch's
   input is visually hidden and keeps its own rules. */
input[type=checkbox]:not(.pu-switch-input),input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;
  width:1.375rem;min-width:1.375rem;height:1.375rem;margin:0;padding:0;border:1.5px solid var(--pu-field-border);
  border-radius:6px;background:var(--pu-paper) no-repeat center/70%;cursor:pointer;vertical-align:middle;
  transition:background-color .12s ease,border-color .12s ease}
input[type=radio]{border-radius:50%}
input[type=checkbox]:not(.pu-switch-input):checked{background-color:var(--pu-green-fill);border-color:var(--pu-green-fill);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
input[type=radio]:checked{border-color:var(--pu-green-fill);
  background-image:radial-gradient(circle,var(--pu-green-fill) 0 45%,transparent 50%);background-size:100%}
input[type=checkbox]:not(.pu-switch-input):disabled,input[type=radio]:disabled{opacity:.45;cursor:default}
/* Text fields: a 44px tap target, and 16px type so iOS does not zoom in. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:44px}
@media(max-width:767px){input,select,textarea{font-size:1rem}}
/* Dropdowns (controls.ts cs): the timezone picker's look, sized like the
   field they replace. */
.pu-select{min-width:9rem}
.pu-zone-trigger.pu-tp-empty{color:var(--pu-text-secondary)}
.pu-zone-trigger.is-invalid{border-color:var(--pu-status-danger)}
.pu-zone-trigger:disabled{opacity:.5;cursor:default}
.pu-zone-option[aria-disabled=true]{opacity:.45;cursor:default}
.pu-zone-list:focus{outline:none}
td .pu-select{min-width:8rem}
.pu-add-cohost-row .pu-select{flex:1 1 12rem}
/* Number boxes (controls.ts ns): − field + in one rounded group. */
.pu-num{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--pu-field-border);
  border-radius:var(--pu-radius);background:var(--pu-paper);overflow:hidden}
.pu-num:focus-within{border-color:var(--pu-border-focus);box-shadow:var(--pu-ring)}
.pu-num input{border:0;border-radius:0;text-align:center;min-width:3.5rem;width:4.5rem;-moz-appearance:textfield;box-shadow:none}
.pu-num input:focus-visible{outline:none;box-shadow:none}
.pu-num input::-webkit-outer-spin-button,.pu-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pu-num-btn{flex:none;width:44px;border:0;background:var(--pu-surface-sunken);color:var(--pu-text-primary);
  font:inherit;font-size:1.25rem;font-weight:600;cursor:pointer}
.pu-num-btn:active{background:var(--pu-border-subtle)}
textarea{min-height:5rem;resize:vertical}
input:has(+ .pu-err),select:has(+ .pu-err),textarea:has(+ .pu-err){border-color:var(--pu-status-danger)}
.pu-err{display:flex;align-items:flex-start;gap:.4rem;color:var(--pu-status-danger);
  font-size:.8125rem;margin:.4rem 0 0}
/* An error waiting for script to fill it in stays out of sight: display:flex beats [hidden]. */
.pu-err[hidden]{display:none}
.pu-err::before{content:"!";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:1rem;height:1rem;margin-top:.0625rem;border-radius:99px;background:var(--pu-danger);
  color:var(--pu-text-on-accent);font-size:.6875rem;font-weight:700;line-height:1}
/* A standing caution, not a one-line field error — normal block text flow
   (not .pu-err's flex layout, which mangles a multi-sentence paragraph with
   inline <code> into separate flex items) with its own visual weight. */
.pu-callout{background:var(--pu-status-danger-bg);border:1px solid var(--pu-danger);
  border-radius:var(--pu-radius);padding:.75rem 1rem;font-size:.875rem;color:var(--pu-text-primary)}
.pu-badge{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.75rem;
  background:var(--pu-status-success-bg);color:var(--pu-status-success);font-weight:600}
.pu-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:99px;
  background:var(--pu-signal);vertical-align:middle}
/* align-items:center, not the default stretch: the timezone control is a
   bordered box taller than the text items, and without centering every
   plain-text item top-aligns against it — the whole line reads crooked. */
.pu-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.875rem;color:var(--pu-text-secondary);
  list-style:none;padding:0;margin:.5rem 0 0}
.pu-tz-form{display:inline-flex;align-items:center;max-width:100%}
/* A real control, not dotted-underline text a guest never notices is
   interactive: one bordered block — globe, zone, offset, chevron — on the
   system radius, not a pill (nothing else on the page is a pill). The
   border and focus state live on the WRAP so all four pieces read as a
   single control; the select inside is borderless and sized to the selected
   zone's name server-side (a bare <select> is otherwise as wide as its
   widest option, leaving dead space before the chevron). The chevron is a
   CSS-drawn corner, not a data-URI image, so it takes its color from a
   token and stays correct in both themes. Focus is shown by border color
   plus the shared input ring — an outline on top of a border reads as a
   clumsy double ring (and Chrome applies :focus-visible to selects even on
   mouse click).*/
.pu-tz-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%;
  border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius);
  background:var(--pu-surface-raised);transition:border-color .12s ease}
.pu-tz-wrap:hover{border-color:var(--pu-border-strong)}
.pu-tz-wrap:focus-within{border-color:var(--pu-border-focus);box-shadow:var(--pu-ring)}
.pu-tz-globe{position:absolute;left:.6rem;color:var(--pu-text-secondary);pointer-events:none}
.pu-tz-wrap::after{content:"";position:absolute;right:.7rem;top:50%;width:.4rem;height:.4rem;
  border-right:1.5px solid var(--pu-text-secondary);border-bottom:1.5px solid var(--pu-text-secondary);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pu-tz-select{appearance:none;-webkit-appearance:none;max-width:100%;min-width:0;
  padding:.3rem 0 .3rem 2rem;border:0;border-radius:var(--pu-radius);outline:none;
  background:transparent;color:var(--pu-text-primary);font:inherit;font-size:.875rem;
  cursor:pointer;text-overflow:ellipsis}
/* Outranks the global select:focus-visible ring — focus indication for this
   control is the wrap's :focus-within border+ring above, and both firing at
   once is the double-ring this replaced. */
.pu-tz-select:focus-visible{outline:none;box-shadow:none}
/* Overlaid decoration, not a flex sibling: the SELECT spans the whole
   bordered control (its width and right padding reserve this label's space
   via the inline calc), so every pixel inside the border — offset and
   chevron included — opens the picker. A sibling taking its own flex space
   would leave the control's right half click-dead. */
.pu-tz-offset{position:absolute;right:1.7rem;top:50%;transform:translateY(-50%);
  font-size:.8125rem;color:var(--pu-text-secondary);white-space:nowrap;pointer-events:none}

.pu-confirm{text-align:center;padding:2rem 1.5rem}
.pu-confirm-icon{display:block;margin:0 auto .75rem;color:var(--pu-text-primary)}
.pu-ring-arc{stroke:currentColor}
.pu-ring-dot{fill:var(--pu-signal)}
.pu-confirm h1{margin:.15rem 0 .35rem}
.pu-confirm-details{text-align:left;list-style:none;margin:1.25rem 0;padding:1rem 1.25rem;
  background:var(--pu-surface-sunken);border-radius:var(--pu-radius);display:grid;gap:.6rem}
.pu-confirm-details div{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap}
.pu-confirm-details dt{color:var(--pu-text-secondary);font-size:.8125rem;font-weight:600;margin:0}
.pu-confirm-details dd{margin:0;text-align:right}

.pu-nav-link{text-decoration:none;color:var(--pu-text-secondary);font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent}
.pu-nav-link:hover{color:var(--pu-text-primary)}
.pu-nav-link[aria-current="page"]{color:var(--pu-text-primary);font-weight:600;
  border-bottom-color:var(--pu-green-700)}
/* Header: frosted glass, pinned on wide screens, content blurs under it. */
.pu-dash-header{width:100%;border-bottom:.5px solid var(--pu-border-subtle);
  background:color-mix(in srgb,var(--pu-surface-raised) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.pu-dash-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:.5rem 1.25rem;padding:.75rem 1.5rem;min-height:68px}
.pu-dash-header .pu-mark{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The tabs sit in one capsule track; a raised pill marks the current tab
   and glides to the next one when tapped (NAV_PILL in dashboard.ts sets
   --x/--y/--w/--h and .is-pill, and slides it there itself: no
   transition here). Without the script the current tab draws its own pill. */
.pu-dash-header .pu-nav{position:relative;isolation:isolate;justify-self:start;display:flex;align-items:center;
  gap:2px;padding:4px;border-radius:999px;font-size:.8125rem;min-width:0;
  background:color-mix(in srgb,var(--pu-surface-sunken) 85%,transparent)}
.pu-dash-header .pu-nav-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:36px;padding:.45rem .9rem;border:0;border-radius:999px;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:color .25s ease,transform .3s cubic-bezier(.32,.72,0,1)}
.pu-dash-header .pu-nav-link svg{width:18px;height:18px;flex:none;transition:transform .3s cubic-bezier(.32,.72,0,1)}
.pu-dash-header .pu-nav-link:hover{color:var(--pu-text-primary)}
.pu-dash-header .pu-nav-link:active{transform:scale(.95)}
.pu-dash-header .pu-nav-link[aria-current="page"],.pu-dash-header .pu-nav::before{
  color:var(--pu-text-primary);background:var(--pu-surface-raised);
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px var(--pu-border-subtle)}
.pu-dash-header .pu-nav.is-pill .pu-nav-link[aria-current="page"]{background:none;box-shadow:none}
.pu-dash-header .pu-nav.is-pill::before{content:"";position:absolute;z-index:-1;left:0;top:0;
  width:var(--w);height:var(--h);border-radius:999px;transform:translate(var(--x),var(--y))}
@media(prefers-reduced-motion:reduce){
  .pu-dash-header .pu-nav::before,.pu-dash-header .pu-nav-link,.pu-dash-header .pu-nav-link svg{transition:none}
}
/* You, top right: your photo or initial, opening Settings, where Sign out
   lives (as on a phone). */
.pu-dash-account{display:block;border-radius:50%;text-decoration:none;
  transition:box-shadow .2s,transform .2s cubic-bezier(.32,.72,0,1)}
.pu-dash-account:hover{box-shadow:0 0 0 3px var(--pu-border-subtle)}
.pu-dash-account:active{transform:scale(.94)}
/* Settings' Sign out: a full-width bar on a phone, a button on a desk. */
.pu-signout{margin-top:1.25rem}
@media(max-width:767px){.pu-signout .pu-btn{width:100%}}
.pu-dash-main{max-width:1280px;padding:2rem 1.5rem 4rem}
/* Seven icon links and a long brand name need about 1400px on one row. */
@media(min-width:768px) and (max-width:1399px){
  .pu-dash-header-admin{grid-template-columns:minmax(0,1fr) auto}
  .pu-dash-header-admin .pu-nav{grid-column:1/-1;grid-row:2;flex-wrap:wrap;border-radius:22px}
  .pu-dash-header-admin .pu-dash-account{grid-column:2;grid-row:1}
}
@media(min-width:768px){
  /* The current tab: a solid ink pill, not a white one on the pale track,
     so it reads at a glance. The phone tab bar keeps its own tint. */
  .pu-dash-header .pu-nav-link[aria-current="page"],.pu-dash-header .pu-nav-link[aria-current="page"]:hover{color:var(--pu-button-text)}
  .pu-dash-header .pu-nav-link[aria-current="page"],.pu-dash-header .pu-nav::before{
    background:var(--pu-button-bg);box-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 8px -2px rgba(0,0,0,.2)}
  .pu-dash-header{position:sticky;top:0;z-index:20}
  html:has(.pu-dash-header){scroll-padding-top:8rem}
}
/* On a phone there is no header: the brand is on the home screen icon and
   Sign out is in Settings. The tabs float in a glass capsule above the
   bottom edge, thumb-reachable like a native app, and the page scrolls on
   under it: four tabs for staff, six for an admin. */
@media(max-width:767px){
  :root{--pu-tabbar:62px;--pu-tabbar-gap:max(.75rem,env(safe-area-inset-bottom));
    --pu-tabbar-space:calc(var(--pu-tabbar) + var(--pu-tabbar-gap) + .75rem)}
  .pu-dash-header,.pu-dash-header-inner{display:contents}
  .pu-dash-header .pu-mark,.pu-dash-account{display:none}
  /* stretch: justify-self:start (above) shrinks a fixed box to its content
     in current browsers, clipping the end tabs' labels. */
  .pu-dash-header .pu-nav{position:fixed;z-index:20;left:.75rem;right:.75rem;bottom:var(--pu-tabbar-gap);justify-self:stretch;
    max-width:30rem;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;
    height:var(--pu-tabbar);padding:4px;border-radius:999px;
    background:color-mix(in srgb,var(--pu-surface-raised) 68%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
    border:.5px solid color-mix(in srgb,var(--pu-border-subtle) 70%,transparent);
    box-shadow:0 10px 30px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08),inset 0 .5px 0 color-mix(in srgb,#fff 40%,transparent)}
  /* A block, not a flex column: a flex item's text overflows both edges
     when centred ("Treatments" lost its T and s), a block's line clips
     at the end with an ellipsis. */
  .pu-dash-header .pu-nav .pu-nav-link{display:block;align-content:center;text-align:center;min-width:0;height:100%;
    min-height:0;padding:0 .15rem;font-size:.6875rem;font-weight:600;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pu-dash-header .pu-nav-link svg{display:block;width:24px;height:24px;margin:0 auto 2px}
  /* An admin's six tabs: a little more width and a smaller label, so
     "Treatments" and "Locations" fit on a 375px phone. */
  .pu-dash-header .pu-nav:has(>a:nth-of-type(6)){left:.5rem;right:.5rem}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(6)) .pu-nav-link{padding:0 1px;font-size:.625rem;letter-spacing:-.02em}
  /* Seven: the edges come in closer still, and a long label gives way to
     its short one (data-short). The label's font-size is 0, not the icon's. */
  .pu-dash-header .pu-nav:has(>a:nth-of-type(7)){left:.375rem;right:.375rem;padding:3px}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(7)) .pu-nav-link{padding:0;font-size:.59375rem;letter-spacing:-.02em}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(7)) .pu-nav-link[data-short]{font-size:0}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(7)) .pu-nav-link[data-short]::after{content:attr(data-short);font-size:.59375rem}
  /* A translation's own short tab label (shell.ts), at any count. */
  .pu-dash-header .pu-nav .pu-nav-link[data-tab-short][data-tab]{font-size:0}
  .pu-dash-header .pu-nav .pu-nav-link[data-tab-short]::after{content:attr(data-tab-short);font-size:.6875rem}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(6)) .pu-nav-link[data-tab-short]::after{font-size:.625rem}
  .pu-dash-header .pu-nav:has(>a:nth-of-type(7)) .pu-nav-link[data-tab-short]::after{font-size:.59375rem}
  .pu-dash-header .pu-nav-link:active{transform:none}
  .pu-dash-header .pu-nav-link:active svg{transform:scale(.86)}
  .pu-dash-header .pu-nav-link[aria-current="page"],.pu-dash-header .pu-nav::before{
    background:color-mix(in srgb,var(--pu-text-primary) 9%,transparent);box-shadow:none}
  /* The page scrolls inside body, full height, so it runs on under the
     glass tab bar and stops clear of it at the end. Positioned, so
     absolutely placed bits (a switch's hidden checkbox) scroll inside body
     too: anchored to the root instead, they gave the hidden-overflow root a
     page-long scroll range, and a script scrollTo (the after-save toast)
     slid the whole page away into a blank screen. */
  html:has(.pu-dash-header){height:100%;overflow:hidden}
  body:has(.pu-dash-header){position:relative;height:100dvh;overflow-y:auto;padding-bottom:var(--pu-tabbar-space)}
  .pu-dash-main{padding:1.25rem 1rem 1rem}
  .pu-btn-block{width:100%;min-height:48px}
  .pu-dash-main h1{font-size:1.5rem}
}
/* Unread customer messages (INBOX_BADGE): a count on a tab, and staff's
   Messages capsule on the Calendar tab. */
.pu-nav-link{position:relative}
.pu-nav-badge{position:absolute;top:2px;right:calc(50% - 1.35rem);min-width:1.1rem;height:1.1rem;padding:0 .3rem;border-radius:99px;
  background:var(--pu-status-danger);color:#fff;font-size:.625rem;font-weight:700;line-height:1.1rem;text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px var(--pu-surface-raised);animation:pu-badge-in .4s cubic-bezier(.3,1.5,.5,1)}
@media(min-width:768px){.pu-nav-badge{position:static;margin-left:.15rem;box-shadow:none}}
@keyframes pu-badge-in{from{transform:scale(.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.pu-nav-badge{animation:none}}
.pu-stack{display:grid;gap:.75rem;margin:0 0 2rem;scroll-margin-top:1rem}
.pu-stack>h2,.pu-stack>p{margin:0}
.pu-stack .pu-btn-block{margin-top:1rem}
.pu-link-list{display:grid;padding:0}
/* Settings → Signed-in devices (pages/dashboard/devices.ts). */
.pu-devices{list-style:none;margin:0;padding:0}
.pu-device{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--pu-line)}
.pu-device:last-child{border-bottom:0}
.pu-device-flag{flex:none;font-size:1.6rem;line-height:1}
.pu-device-text{flex:1;min-width:0;display:grid;gap:.15rem}
.pu-device-text .pu-muted{font-size:.8125rem}
.pu-device-ip{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pu-device form{margin:0;flex:none}
/* Week at a glance (weekStrip): day, a bar with the hours filled in, the
   hours in words. On a phone the words drop under the bar. */
.pu-wk{display:grid;gap:.4rem;margin:.75rem 0 0}
.pu-wk-row{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 9.5rem;align-items:center;gap:.75rem}
.pu-wk-day{font-weight:600;font-size:.875rem}
.pu-wk-track{position:relative;height:1.5rem;border-radius:6px;background:var(--pu-surface-sunken)}
.pu-wk-block{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--pu-green-fill)}
.pu-wk-hours{font-size:.8125rem;font-variant-numeric:tabular-nums}
.pu-wk-off .pu-wk-day,.pu-wk-off .pu-wk-hours{color:var(--pu-text-secondary);font-weight:400}
@media(max-width:519px){
  .pu-wk-row{grid-template-columns:2.5rem minmax(0,1fr);gap:.1rem .6rem}
  .pu-wk-hours{grid-column:2;font-size:.75rem}
  .pu-wk-track{height:1.25rem}
}
/* Per diem (scheduleForm): the dated strip needs room for "Tue 3 Nov". The
   mode switch shows one side's blocks only, no script needed. */
.pu-wk-dates .pu-wk-row{grid-template-columns:5rem minmax(0,1fr) 9.5rem}
.pu-wk-none{font-size:.875rem;margin:.75rem 0 0}
@media(max-width:519px){.pu-wk-dates .pu-wk-row{grid-template-columns:4.5rem minmax(0,1fr)}}
.pu-hours-editor:has(input[name=mode][value=perdiem]:checked) .pu-mode-week,
.pu-hours-editor:not(:has(input[name=mode][value=perdiem]:checked)) .pu-mode-days{display:none}
.pu-more{margin-top:1.5rem}
/* Floating save bar (scheduleForm): above the staff tab bar on a phone. */
.pu-savebar{position:fixed;z-index:31;left:50%;bottom:1rem;
  transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px));transition:transform .2s ease;touch-action:none;
  width:calc(100% - 2rem);max-width:32rem;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.6rem .6rem .6rem 1rem;border-radius:14px;background:var(--pu-button-bg);
  color:var(--pu-button-text);box-shadow:0 8px 28px rgba(0,0,0,.25);font-weight:600;font-size:.9375rem}
.pu-savebar[hidden]{display:none}
/* Rises in each time it shows, as the toast does. */
.pu-savebar:not([hidden]){animation:pu-toast-in .25s cubic-bezier(.2,.8,.2,1)}
.pu-savebar.pu-drag{transition:none}
/* "Saved" toast (TAB_MEMORY afterSave): where the save was made, then gone. */
.pu-toast{position:fixed;z-index:30;left:50%;bottom:1rem;
  transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px));touch-action:none;width:max-content;
  display:flex;align-items:center;gap:.75rem;max-width:calc(100% - 2rem);
  padding:.6rem .6rem .6rem 1rem;border-radius:14px;background:var(--pu-button-bg);
  color:var(--pu-button-text);box-shadow:0 8px 28px rgba(0,0,0,.25);font-weight:600;font-size:.9375rem;
  animation:pu-toast-in .2s ease;transition:opacity .4s ease,transform .4s ease}
.pu-toast-out{opacity:0;transform:translate(-50%,.5rem)}
.pu-toast.pu-drag{animation:none;transition:none}
@keyframes pu-toast-in{from{opacity:0;transform:translate(-50%,.5rem)}}
@media(max-width:767px){body:has(.pu-dash-header) .pu-toast{bottom:var(--pu-tabbar-space)}}
.pu-savebar>span,.pu-toast>span{flex:1}
.pu-savebar-x{flex:none;width:44px;height:44px;margin-left:-.25rem;border:0;border-radius:10px;background:none;
  color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.8}
.pu-savebar-x:hover{opacity:1}
body:has(.pu-savebar:not([hidden])) .pu-dash-main{padding-bottom:7rem}
.pu-savebar .pu-btn{background:var(--pu-button-text);color:var(--pu-button-bg);min-height:44px;min-width:5.5rem}
@media(max-width:767px){
  body:has(.pu-dash-header) .pu-savebar{bottom:var(--pu-tabbar-space)}
}
/* Time picker (weekPreviewScript): a big button per time, and a sheet of
   hour and minute taps, docked to the bottom of a phone screen. */
.pu-tp{flex:1 1 7rem;min-height:48px;padding:.6rem .9rem;border:1px solid var(--pu-line);
  border-radius:var(--pu-radius);background:var(--pu-surface-raised);color:var(--pu-text-primary);
  font:inherit;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:left;cursor:pointer}
.pu-tp-empty{color:var(--pu-text-secondary);font-weight:400}
.pu-tp:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:2px}
.pu-tp-sheet{padding:0;border:0;width:100%;max-width:26rem;border-radius:16px;
  background:var(--pu-surface-raised);color:var(--pu-text-primary);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.pu-tp-sheet::backdrop{background:rgba(0,0,0,.4)}
.pu-tp-body{padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom))}
.pu-tp-title{margin:0;font-size:.875rem;font-weight:600;color:var(--pu-text-secondary)}
.pu-tp-big{margin:.15rem 0 .5rem;font-size:2.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.pu-tp-label{margin:.6rem 0 .35rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pu-text-secondary)}
.pu-tp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}
.pu-tp-grid button{min-height:44px;padding:0;border:1px solid var(--pu-border-subtle);border-radius:10px;
  background:var(--pu-surface-sunken);color:inherit;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.pu-tp-grid button[aria-pressed=true]{background:var(--pu-button-bg);color:var(--pu-button-text);border-color:transparent}
.pu-tp-actions{display:flex;gap:.5rem;margin-top:1.25rem}
.pu-tp-actions [data-act=done]{margin-left:auto;min-width:6.5rem}
@media(max-width:600px){.pu-tp-sheet{margin:auto 0 0;max-width:none;border-radius:16px 16px 0 0}}
.pu-dp-big{font-size:1.5rem}
.pu-dp-head{display:flex;align-items:center;justify-content:space-between;margin:.25rem 0 .5rem}
.pu-dp-head .pu-btn{width:44px;height:44px;padding:0;font-size:1.5rem;line-height:1}
.pu-dp-month{font-weight:700}
.pu-tp-grid.pu-dp-grid,.pu-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.pu-dp-dow{margin-bottom:.3rem}
.pu-dp-dow span{text-align:center;font-size:.75rem;font-weight:600;color:var(--pu-text-secondary)}
.pu-dp-days .pu-dp-today{border-color:var(--pu-text-primary)}
.pu-dp-days button[disabled]{opacity:.3;cursor:default}
.pu-ovr-row .pu-dp{flex:1 1 100%}
@media(min-width:600px){.pu-ovr-row .pu-dp{flex:0 0 13rem}}
.pu-more>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;
  color:var(--pu-text-secondary)}
.pu-ovr-list{display:grid;gap:.5rem;margin-bottom:.5rem}
.pu-ovr-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pu-ovr-row input[type=date]{flex:1 1 100%}
.pu-ovr-row input[type=time]{flex:1 1 6rem;width:auto}
@media(min-width:600px){.pu-ovr-row input[type=date]{flex:0 0 11rem}}
.pu-link-list a{display:grid;gap:.15rem;padding:.9rem 1.25rem;min-height:56px;text-decoration:none;
  color:var(--pu-text-primary);border-bottom:1px solid var(--pu-border-subtle)}
.pu-link-list a:last-child{border-bottom:0}
.pu-link-list a span{font-size:.8125rem}

.pu-url{display:flex;align-items:center;gap:.5rem;background:var(--pu-url-bg);
  border:1px solid var(--pu-line);border-radius:var(--pu-radius);padding:.15rem .15rem .15rem .8rem}
.pu-url-input{flex:1;min-width:0;border:0;background:none;padding:.5rem 0;
  font-family:var(--pu-font-mono);font-size:.8125rem;color:var(--pu-text-primary);cursor:pointer}
/* Fixed width, so "Copy" -> "Copied" feedback doesn't shift the layout. */
.pu-copy{flex:none;min-width:4.5rem;padding:.4rem .6rem;font-size:.8125rem}

/* Settings: one profile panel — photo column left, identity fields right.
   The photo column is a fixed rail so the fields column defines the card's
   rhythm; on narrow screens the rail stacks on top, centred. */
.pu-profile{display:flex;gap:2rem;align-items:flex-start;margin-top:1rem}
.pu-profile-photo{flex:none;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:8.5rem}
.pu-profile-fields{flex:1;min-width:0}
.pu-profile-fields label:first-of-type{margin-top:0}
@media(max-width:540px){.pu-profile{flex-direction:column;align-items:stretch;gap:1rem}
  .pu-profile-fields{width:100%}
  /* Phones: photo as one compact row (avatar left, actions right) instead of
     a tall centred column above the fields. */
  .pu-profile-photo{width:auto;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.35rem;align-items:center;justify-items:start}
  .pu-profile-photo>:first-child{grid-row:1/span 4;width:56px!important;height:56px!important;font-size:24px!important}
  .pu-profile-photo>p{text-align:left!important}
  .pu-profile-photo .pu-file-btn{padding:.4rem .75rem;font-size:.8125rem}}
/* A <label> acting as the file-picker's whole visible control (the input
   itself is .pu-sr-hidden inside it) — button look, real keyboard path via
   the focused input within. */
.pu-file-btn{position:relative;cursor:pointer;text-align:center;white-space:nowrap}
.pu-file-btn:has(input:focus-visible){outline:2px solid var(--pu-border-focus);outline-offset:2px}
/* De-emphasised destructive text action ("Remove") — a full ghost button
   next to Upload would give deleting the photo equal billing with adding
   one. */
.pu-btn-plain{border:0;background:none;padding:0;font:inherit;font-size:.8125rem;
  color:var(--pu-text-secondary);text-decoration:underline;text-underline-offset:.2rem;cursor:pointer}
.pu-btn-plain:hover{color:var(--pu-status-danger)}

/* Weekly-hours editor: a switch per day, one or more native time-
   range rows underneath. The switch and the ranges are SIBLINGS inside
   .pu-day-row, not nested — :has() below reacts to the checkbox's :checked
   state to show/hide the ranges, which needs no JavaScript to work at all;
   an optional client-side layer only adds the open/close animation on top. */
.pu-week-editor{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}
.pu-day-row{padding:.6rem 0;border-bottom:1px solid var(--pu-border-subtle)}
.pu-day-row:last-child{border-bottom:0}
.pu-day-row:has(.pu-switch-input:not(:checked)) .pu-day-ranges{display:none}
.pu-switch{display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;user-select:none}
/* Same hidden-but-focusable convention as .pu-file-btn's inner <input> —
   .pu-sr, not display:none, so Tab and screen readers still reach it. */
.pu-switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pu-switch-track{position:relative;flex:0 0 auto;width:2.25rem;height:1.25rem;border-radius:99px;
  background:var(--pu-border-subtle);transition:background-color .15s ease}
.pu-switch-thumb{position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:50%;
  background:var(--pu-surface-raised);box-shadow:var(--pu-shadow-sm);transition:transform .15s ease}
.pu-switch-input:checked~.pu-switch-track{background:var(--pu-green-fill)}
.pu-switch-input:checked~.pu-switch-track .pu-switch-thumb{transform:translateX(1rem)}
.pu-switch-input:focus-visible~.pu-switch-track{outline:2px solid var(--pu-border-focus);outline-offset:2px}
.pu-switch-input:disabled~.pu-switch-track{opacity:.45}
.pu-push-switch{font-weight:600;margin-top:.25rem}
/* "Get notified on this phone": one line of text, its two buttons beside
   it, wrapping under it on a phone. */
.pu-push-nudge{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1rem;margin:0 0 1.25rem;
  padding:.85rem 1rem;border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius-lg);background:var(--pu-surface-raised)}
.pu-push-nudge[hidden]{display:none}
.pu-push-nudge p{margin:0;flex:1 1 14rem;display:flex;flex-direction:column;gap:.15rem}
.pu-push-nudge-actions{display:flex;align-items:center;gap:.75rem}
.pu-day-name{font-weight:600;font-size:.9375rem;min-width:5.5rem}
.pu-day-ranges{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0 0 2.9rem}
.pu-range-row{display:flex;align-items:center;gap:.5rem}
.pu-range-row input[type=time]{width:auto;max-width:8.5rem}
.pu-range-row span{color:var(--pu-text-secondary);font-size:.8125rem}
.pu-add-range{display:inline-block}
.pu-day-warn{margin:0;padding:.5rem .75rem;border-radius:var(--pu-radius);background:var(--pu-surface-sunken);
  border-left:3px solid var(--pu-status-danger);font-size:.8125rem}
.pu-day-warn[hidden]{display:none}
.pu-add-range:hover{color:var(--pu-green-700)}
@media(max-width:420px){
  .pu-day-ranges{margin-left:0}
  .pu-range-row{flex-wrap:wrap}
  .pu-range-row input[type=time]{max-width:none;flex:1 1 7rem}
}

.pu-skeleton{height:2.4rem;border-radius:var(--pu-radius);background:var(--pu-surface-sunken);
  animation:pu-pulse 1.2s ease-in-out infinite}
@keyframes pu-pulse{50%{opacity:.55}}
.pu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Booking-page footer is hidden at every width — the markup stays (it
   carries the attribution and, when embedded, sits beside the resize
   snippet) but no longer renders. */
.pu-foot{display:none}

.pu-dash-main{margin-bottom:2.5rem}
@media(max-width:767px){
  .pu-home-foot{display:none}
  .pu-dash-main{margin-bottom:1.5rem}
}

/* About: an app's About screen. A centred icon and name, then inset
   grouped lists like a phone's Settings: hairlines that stop short of
   the left edge, a small grey heading over each group. */
.pu-about{--ab-r:18px;--ab-ease:cubic-bezier(.2,.8,.2,1);max-width:600px;margin:0 auto}
.pu-about-hero{text-align:center;padding:1rem 0 2.25rem}
.pu-about-icon{display:block;margin:0 auto 1.1rem;width:104px;height:104px;border-radius:23px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 12px 32px -10px rgba(24,24,27,.35),0 2px 6px rgba(24,24,27,.08)}
.pu-about-hero h1{font-family:var(--pu-font-display);font-size:2rem;line-height:1.1;letter-spacing:-.02em;margin:0}
.pu-about-ver{margin:.45rem 0 0;color:var(--pu-text-secondary);font-size:.9375rem;font-variant-numeric:tabular-nums}
.pu-about-ver span{color:var(--pu-text-muted);font-family:var(--pu-font-mono);font-size:.8125rem}
.pu-about-group{margin:0 0 2rem}
.pu-about-group h2{font:500 .8125rem/1.3 var(--pu-font-ui);color:var(--pu-text-secondary);letter-spacing:0;
  margin:0 0 .5rem 1rem}
.pu-about-card{display:block;background:var(--pu-surface-raised);border-radius:var(--ab-r);
  box-shadow:0 0 0 1px var(--pu-border-subtle),0 1px 2px rgba(24,24,27,.04);overflow:hidden}
.pu-about-note{margin:.6rem 1rem 0;color:var(--pu-text-muted);font-size:.8125rem;line-height:1.45}

.pu-about-makers{display:grid;grid-template-columns:1fr 1fr}
.pu-about-maker{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:7.5rem;padding:1.25rem 1rem;color:var(--pu-text-primary);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s}
.pu-about-maker+.pu-about-maker{box-shadow:inset 1px 0 0 var(--pu-border-subtle)}
a.pu-about-maker:hover{background:var(--pu-surface-sunken)}
a.pu-about-maker:active .pu-about-mark-pitera,a.pu-about-maker:active picture{transform:scale(.96)}
.pu-about-maker picture{display:block;transition:transform .2s var(--ab-ease)}
.pu-about-mark-pitera{display:block;width:9rem;height:2.1rem;background:currentColor;transition:transform .2s var(--ab-ease);
  -webkit-mask:url(/brand/pitera-studio-wordmark.svg) center/contain no-repeat;
  mask:url(/brand/pitera-studio-wordmark.svg) center/contain no-repeat}
.pu-about-mark-epic{display:block;width:9.5rem;height:auto;max-width:100%}

.pu-about-source{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;color:var(--pu-text-primary);
  text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.pu-about-source:hover{background:var(--pu-surface-sunken)}
.pu-about-source:active{background:var(--pu-surface-sunken)}
.pu-about-gh{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:10px;
  background:var(--pu-ink-950);color:var(--pu-paper)}
.pu-about-source-text{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.pu-about-source-text strong{font-weight:600;font-size:.9375rem}
.pu-about-source-text span{color:var(--pu-text-secondary);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-about-source>svg{flex:none;color:var(--pu-text-muted)}

.pu-about-list{margin:0;padding:0 0 0 1rem}
.pu-about-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1rem .8rem 0;
  font-size:.9375rem}
.pu-about-row+.pu-about-row{box-shadow:inset 0 1px 0 var(--pu-border-subtle)}
.pu-about-row dt{color:var(--pu-text-primary);flex:none}
.pu-about-row dd{margin:0;color:var(--pu-text-secondary);text-align:right;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pu-about-copy{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.75rem;
  padding:.8rem 1rem;border:0;border-radius:14px;background:var(--pu-surface-sunken);color:var(--pu-text-primary);
  font:600 .9375rem var(--pu-font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s,transform .2s var(--ab-ease),color .2s}
.pu-about-copy[hidden]{display:none}
.pu-about-copy:hover{background:var(--pu-green-tint)}
.pu-about-copy:active{transform:scale(.98)}
.pu-about-copy.is-done{color:#1A7F37}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pu-about-copy.is-done{color:#4ADE80}}
:root[data-theme=dark] .pu-about-copy.is-done{color:#4ADE80}

/* The staff guide: the About frame, its topics a grouped list of rows
   that open in place, so a phone shows every title before any text. */
.pu-guide-item+.pu-guide-item{box-shadow:inset 0 1px 0 var(--pu-border-subtle)}
.pu-guide-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1rem;font-weight:600;font-size:.9375rem;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s}
.pu-guide-item summary::-webkit-details-marker{display:none}
.pu-guide-item summary::after{content:'';flex:none;width:.5rem;height:.5rem;margin-right:.2rem;
  border:solid var(--pu-text-muted);border-width:0 1.75px 1.75px 0;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ab-ease)}
.pu-guide-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pu-guide-item summary:hover{background:var(--pu-surface-sunken)}
.pu-guide-body{padding:0 1rem 1rem;color:var(--pu-text-secondary);font-size:.9375rem;line-height:1.55}
.pu-guide-body p{margin:0 0 .65rem}
.pu-guide-body ul,.pu-guide-body ol{margin:0 0 .65rem;padding-left:1.25rem}
.pu-guide-body li{margin:0 0 .4rem}
.pu-guide-body>:last-child{margin-bottom:0}
.pu-guide-body strong{color:var(--pu-text-primary);font-weight:600}

/* Arrives like a sheet settling: each block rises a little, in turn. */
.pu-about>*{animation:pu-about-in .55s var(--ab-ease) both}
.pu-about>:nth-child(2){animation-delay:.03s}
.pu-about>:nth-child(3){animation-delay:.08s}
.pu-about>:nth-child(4){animation-delay:.13s}
.pu-about>:nth-child(5){animation-delay:.18s}
.pu-about-icon{animation:pu-about-icon .7s var(--ab-ease) both}
@keyframes pu-about-in{from{opacity:0;transform:translateY(10px)}}
@keyframes pu-about-icon{from{opacity:0;transform:scale(.85)}}
@media(max-width:480px){
  .pu-about-hero{padding-top:.25rem}
  .pu-about-maker{min-height:6.5rem;padding:1rem .75rem}
  .pu-about-mark-pitera{width:7.5rem;height:1.75rem}
  .pu-about-mark-epic{width:8rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .pu-day:hover[data-has-slots="1"],.pu-slot-available:hover,.pu-slot-available:active{transform:none}
}

/* availability and teams */
/* A card is a grid item; without min-width:0 a wide table inside it grows
   the card past the viewport instead of scrolling inside .pu-docs-table-wrap
   (the landing stylesheet's rule for that wrapper is not loaded here). */
.pu-card{min-width:0}
.pu-docs-table-wrap{overflow-x:auto}
.pu-dash-table{width:100%;min-width:34rem}
.pu-badge{white-space:nowrap}
/* Business management: one task at a time, with compact expandable rows. */
.pu-business-manage{max-width:64rem}
/* Whose bookings: page-level tabs, underlined, so the segmented view
   switch below reads as the lesser choice. */
.pu-business-views{display:flex;gap:1.25rem;flex-wrap:wrap;margin:1rem 0 1.25rem;border-bottom:1px solid var(--pu-border-subtle)}
.pu-business-views a{margin-bottom:-1px;padding:.55rem 0;border-bottom:2px solid transparent;font-size:.875rem;font-weight:500;
  text-decoration:none;color:var(--pu-text-secondary)}
.pu-business-views a:hover{color:var(--pu-text-primary)}
.pu-business-views a[aria-current]{color:var(--pu-text-primary);font-weight:600;border-bottom-color:var(--pu-text-primary)}
.pu-business-section{scroll-margin-top:1.5rem}
.pu-team-heading h2{margin:0}
.pu-team-heading p.pu-muted{margin:0;font-size:.875rem}
.pu-team-toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 .5rem}
.pu-team-toolbar #add-team-member,.pu-team-toolbar .pu-add{display:inline-flex;align-items:center;gap:.4rem;flex:none;min-height:44px;margin:0;padding:.5rem 1rem;font-size:.875rem;white-space:nowrap}
@media(max-width:480px){.pu-team-add-long{display:none}}
/* Team table: avatar + name, state as text and badges, one options button per row. */
#business-team .pu-dash-table td{padding:.75rem .5rem;vertical-align:middle}
#business-team .pu-dash-table th:last-child,.pu-team-options{width:3rem;text-align:right}
.pu-team-person{display:flex;align-items:center;gap:.75rem;min-width:0}
.pu-team-person>div{min-width:0}
.pu-team-avatar{flex:none;display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--pu-surface-sunken);color:var(--pu-text-secondary);font-size:.75rem;font-weight:600;letter-spacing:.02em}
.pu-team-name{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pu-team-name strong{font-size:.875rem;font-weight:600}
.pu-team-name .pu-badge{font-size:.6875rem;padding:.1rem .45rem;font-weight:500}
.pu-team-name .pu-muted{font-size:.75rem}
.pu-team-detail{display:block;margin:.15rem 0 0;color:var(--pu-text-secondary);font-size:.75rem;overflow-wrap:anywhere}
.pu-team-switch{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0;border:0;background:none;
  color:var(--pu-text-primary);font:inherit;font-size:.8125rem;cursor:pointer}
.pu-team-switch[aria-checked=true] .pu-switch-track{background:var(--pu-green-fill)}
.pu-team-switch[aria-checked=true] .pu-switch-thumb{transform:translateX(1rem)}
.pu-team-switch[aria-checked=false]{color:var(--pu-text-secondary)}
.pu-team-switch:focus-visible{outline:none}
.pu-team-switch:focus-visible .pu-switch-track{outline:2px solid var(--pu-border-focus);outline-offset:2px}
#business-team form{margin:0}
.pu-team-more{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--pu-text-secondary);cursor:pointer}
.pu-team-more:hover{background:var(--pu-surface-sunken);color:var(--pu-text-primary)}
.pu-team-search{position:relative;flex:1 1 auto;min-width:0}
.pu-team-search[hidden]{display:none}
.pu-team-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--pu-text-secondary);pointer-events:none}
.pu-team-search input{width:100%;min-height:44px;padding-left:2.4rem;font-size:.875rem}
#business-team .pu-dash-table tr[hidden],[data-search][hidden],#treatment-list[hidden],#location-list[hidden]{display:none}
/* Team dialogs: add member and per-person options. Bottom sheets on phones. */
dialog.pu-team-dialog{width:min(30rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;text-align:left}
.pu-team-dialog h2{margin:0;font-size:1.125rem}
.pu-team-dialog>p.pu-muted{margin:.35rem 0 1.25rem;font-size:.875rem}
.pu-team-dialog form{margin:0}
.pu-team-dialog label{font-size:.8125rem;font-weight:600}
.pu-team-dialog .pu-team-choice{font-size:.875rem;font-weight:400}
.pu-team-dialog .pu-btn{font-size:.875rem;padding:.6rem 1rem;min-height:44px}
.pu-team-dialog .pu-dialog-actions{margin-top:1.5rem}
.pu-team-confirm{width:min(22rem,calc(100% - 2rem));text-align:center}
.pu-team-confirm h2{font-size:1.125rem}
.pu-team-confirm p{font-size:.875rem}
.pu-team-confirm .pu-dialog-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:1.25rem}
.pu-team-confirm .pu-btn{min-height:44px;font-size:.875rem}
#inv-email::-webkit-calendar-picker-indicator{display:none!important}
.pu-team-field,.pu-team-invite-form fieldset{border:0;padding:0;margin:1.25rem 0 0;min-width:0}
.pu-team-field legend,.pu-team-invite-form legend{font-size:.8125rem;font-weight:600;margin-bottom:.5rem;padding:0}
.pu-team-choices{display:grid;gap:.5rem}
.pu-team-choice{display:flex;align-items:center;gap:.75rem;min-height:48px;margin:0;padding:.65rem .85rem;
  border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius);font-size:.875rem;font-weight:400;cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease}
.pu-team-choice:hover{background:var(--pu-surface-sunken)}
.pu-team-choice:has(input:checked){border-color:var(--pu-green-fill);background:var(--pu-surface-sunken)}
.pu-team-choice:has(input:focus-visible){outline:2px solid var(--pu-border-focus);outline-offset:2px}
.pu-team-choice input{width:auto;margin:0}
.pu-team-role{align-items:flex-start}
.pu-team-role input{margin-top:.15rem}
.pu-team-role strong{display:block;font-weight:600}
.pu-team-role small{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:400;color:var(--pu-text-secondary)}
.pu-team-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}
.pu-team-dialog-head .pu-team-person{flex:1}
.pu-team-dialog-head p.pu-team-detail{margin:.15rem 0 0}
.pu-team-close{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin:-.5rem -.35rem 0 0;padding:0;border:0;border-radius:8px;
  background:none;color:var(--pu-text-secondary);cursor:pointer}
.pu-team-close:hover{background:var(--pu-surface-sunken);color:var(--pu-text-primary)}
.pu-team-more-content{display:grid;gap:.75rem}
.pu-team-more-content .pu-btn{width:100%}
.pu-team-note{margin:0;font-size:.875rem;color:var(--pu-text-secondary)}
.pu-team-more-danger{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--pu-border-subtle);gap:.35rem}
.pu-team-dialog-head+.pu-team-more-danger{margin-top:0;padding-top:0;border-top:0}
.pu-team-more-danger .pu-help{text-align:center;margin:0 0 .5rem}
.pu-team-invite-form{display:grid;gap:.4rem}
.pu-team-invite-form .pu-btn{margin-top:1rem}
.pu-team-disclosure>summary{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;cursor:pointer;
  list-style:none;font-size:.875rem;font-weight:500;color:var(--pu-text-secondary)}
.pu-team-disclosure>summary::-webkit-details-marker{display:none}
.pu-team-disclosure>summary::after{content:'';width:.45rem;height:.45rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translateY(-2px) rotate(45deg);transition:transform .12s ease}
.pu-team-disclosure[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.pu-team-disclosure>summary:hover{color:var(--pu-text-primary)}
.pu-team-disclosure[open]>.pu-team-invite-form{padding:.25rem 0 .5rem}
html:has(.pu-team-dialog:modal),body:has(.pu-team-dialog:modal){overflow:hidden}
@media(max-width:600px){
  dialog.pu-team-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:16px 16px 0 0;border-bottom:0;
    max-height:calc(100dvh - 1.5rem);padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom))}
  .pu-team-dialog .pu-dialog-actions{display:grid;grid-template-columns:1fr 2fr}
}
.pu-business-section>h2{font-size:1.125rem}
.pu-business-section>p.pu-muted{font-size:.875rem;margin-bottom:1.25rem}
.pu-business-treatment-list{margin-top:1.25rem;border-top:1px solid var(--pu-border-subtle)}
.pu-business-treatment{border-bottom:1px solid var(--pu-border-subtle)}
.pu-business-treatment>summary{display:flex;align-items:center;gap:1rem;min-height:80px;padding:1rem .25rem;cursor:pointer;list-style:none}
.pu-business-treatment>summary::-webkit-details-marker{display:none}
.pu-business-treatment>summary::after{content:'+';font-size:1.25rem;color:var(--pu-text-secondary)}
.pu-business-treatment[open]>summary::after{content:'−'}
.pu-business-treatment>summary:hover{background:var(--pu-surface-sunken)}
.pu-business-treatment-name{flex:1;min-width:0;overflow-wrap:anywhere}
.pu-business-treatment-name h3{font-size:.9375rem;line-height:1.4;margin:0 0 .2rem}
.pu-business-treatment-name>span,.pu-business-treatment-locations{font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-business-treatment-locations{max-width:10rem;text-align:right}
.pu-business-treatment-body{padding:.25rem .75rem 1.25rem;max-width:44rem}
.pu-business-offerings{list-style:none;padding:0;margin:0}
.pu-business-offerings li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 0;border-bottom:1px solid var(--pu-border-subtle)}
.pu-business-offerings li>div{min-width:0;overflow-wrap:anywhere;font-size:.875rem}
.pu-business-offerings li>div>span{display:block;font-size:.75rem;margin-top:.25rem}
.pu-business-offerings a{display:flex;flex-direction:column;gap:.15rem;text-decoration:none}
.pu-business-offerings a:hover{text-decoration:underline}
.pu-business-edit{font-size:.75rem;color:var(--pu-text-secondary)}
.pu-business-offerings .pu-btn{font-size:.75rem;padding:.4rem .65rem;white-space:nowrap;min-height:44px}
.pu-business-add-locations{margin-top:1.25rem}
.pu-business-treatment-grid{display:grid;gap:.5rem;margin-bottom:1rem}
.pu-business-location{display:block;border-bottom:1px solid var(--pu-border-subtle);padding:1rem 0;text-decoration:none;color:var(--pu-text-primary);overflow-wrap:anywhere}
.pu-business-location:hover h3{text-decoration:underline}
.pu-business-treatment-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.pu-business-treatment-top h3{font-size:.9375rem;margin:0}
.pu-business-location>p{font-size:.8125rem;margin:.25rem 0 .5rem}
.pu-business-location-meta{display:flex;gap:1rem;font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-business-location-arrow{margin-left:auto}
.pu-business-count{font-size:.75rem;color:var(--pu-text-secondary);margin-left:.5rem}
.pu-business-disclosure{border-top:1px solid var(--pu-border-subtle);margin-top:1.25rem}
.pu-business-disclosure>summary{cursor:pointer;min-height:48px;padding:.8rem 0;font-size:.875rem;font-weight:500}
.pu-business-disclosure[open]>summary{margin-bottom:.5rem}
.pu-business-disclosure form{max-width:44rem;margin-bottom:1rem}
.pu-business-disclosure input,.pu-business-disclosure select{min-width:0}
.pu-business-empty{padding:1rem 0;font-size:.875rem}
.pu-business-manage .pu-dash-table{font-size:.8125rem}
.pu-business-manage .pu-dash-table th{font-size:.6875rem;color:var(--pu-text-secondary);font-weight:500}
@media(max-width:767px){
  .pu-business-section{padding:1rem}
  .pu-business-treatment-locations{max-width:6rem;font-size:.75rem}
  .pu-business-treatment-body{padding:0 0 1rem}
  #business-team .pu-dash-table,#business-team .pu-dash-table tbody{display:block;min-width:0!important}
  #business-team .pu-dash-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #business-team .pu-dash-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.5rem;padding:.85rem 0;border-bottom:1px solid var(--pu-border-subtle)}
  #business-team .pu-dash-table td{display:block;border:0;padding:0;overflow-wrap:anywhere}
  #business-team .pu-dash-table td:nth-child(2),#business-team .pu-dash-table td:nth-child(3){grid-column:1/-1;padding-left:3rem;font-size:.8125rem}
  #business-team .pu-dash-table td:nth-child(2){margin-top:.35rem;color:var(--pu-text-secondary)}
  #business-team .pu-dash-table td:nth-child(3):has(.pu-muted){margin-top:.35rem}
  #business-team .pu-dash-table td:nth-child(3) .pu-muted::before{content:'Online booking: '}
  #business-team .pu-dash-table td:last-child{grid-column:2;grid-row:1}
  #business-team .pu-team-switch>span:last-child::before{content:'Online booking: '}
  .pu-business-manage button.pu-btn{min-height:44px}
}
.pu-menu-editor{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:.75rem;max-width:44rem}
.pu-menu-locations{max-width:44rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--pu-border-subtle)}
.pu-menu-delete{max-width:44rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--pu-border-subtle)}
.pu-menu-locations fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:0 1rem}
.pu-menu-locations legend{padding:0;margin:0 0 .25rem;font-size:.875rem;font-weight:600}
.pu-menu-locations .pu-help{margin:.5rem 0 .75rem}
.pu-menu-editor .pu-menu-wide,.pu-menu-editor>[role=alert]{grid-column:1/-1}
@media(max-width:600px){
  .pu-menu-editor{grid-template-columns:minmax(0,1fr)}
}
/* Provenance, not success: a creator badge must not read like the green
   "Default" state. */
.pu-badge-neutral{background:var(--pu-paper-dim);color:var(--pu-ink-500)}
.pu-card-title{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
.pu-card-title h2{margin:0}
.pu-card-title .pu-card-title-action{margin-left:auto}
/* "Managing Bob · Support Crew": persistent context, not a warning — the
   danger palette would make every on-behalf page look like an error. */
.pu-context-strip{display:block;margin:0 0 1rem;padding:.55rem .85rem;font-size:.875rem;
  background:var(--pu-paper-dim);border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius)}
/* A button that reads as an inline link (the timezone card's "this device is in …"). */
.pu-linklike{background:none;border:0;padding:0;font:inherit;color:var(--pu-green-700);
  text-decoration:underline;cursor:pointer}
/* Treatments page: a whole row is the checkbox's label, thumb-sized. */
.pu-offer-row{display:flex;gap:.65rem;align-items:center;min-height:44px;margin:0;font-weight:400;
  border-bottom:1px solid var(--pu-line)}
.pu-offer-row:last-of-type{border-bottom:0}
.pu-offer-row input{width:1.15rem;height:1.15rem;margin:0;flex-shrink:0}
/* Breaks page: one row per treatment; the name takes its own line on a phone. */
.pu-break-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0;padding:.6rem 0;
  border-bottom:1px solid var(--pu-line)}
.pu-break-row:last-child{border-bottom:0}
.pu-break-name{flex:1 1 14rem;margin:0}
.pu-break-input{display:inline-flex;align-items:center;gap:.35rem}
.pu-break-input input{width:5.5rem;margin:0}
.pu-break-row>p{flex-basis:100%;margin:0}
/* My services (servicesPage): a phone's settings list. Grouped rows on a
   raised card, small caps label above, footnote below; switches at phone
   size; a chip per location; the break slides open under a treatment once
   it is on (:has, so it works without script too). */
.pu-svc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 0 1.5rem}
.pu-svc-head h1{margin:0 0 .25rem}
.pu-svc-sum{margin:0;font-size:.9375rem}
.pu-svc-sum b{color:var(--pu-text-primary);font-variant-numeric:tabular-nums}
/* Saving / Saved: a floating capsule where the toast shows, so it is in
   view however far down the change was made. Taps pass through it. */
.pu-svc-status{position:fixed;z-index:32;left:50%;bottom:1.25rem;display:inline-flex;align-items:center;gap:.45rem;
  max-width:calc(100vw - 2rem);padding:.55rem 1rem;border-radius:99px;pointer-events:none;
  font-size:.875rem;font-weight:600;white-space:nowrap;
  background:color-mix(in srgb,var(--pu-surface-raised) 82%,transparent);color:var(--pu-text-primary);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border:1px solid var(--pu-border-subtle);box-shadow:0 8px 28px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08);
  opacity:0;transform:translate(-50%,.75rem) scale(.94);
  transition:opacity .25s ease,transform .38s cubic-bezier(.3,1.35,.55,1)}
@media(max-width:767px){body:has(.pu-dash-header) .pu-svc-status{bottom:var(--pu-tabbar-space)}}
.pu-svc-status.is-saving,.pu-svc-status.is-saved,.pu-svc-status.is-error{opacity:1;transform:translate(-50%,0)}
.pu-svc-status.is-saving::before{content:"";width:.75rem;height:.75rem;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:pu-spin .7s linear infinite}
.pu-svc-status.is-saved::before{content:"";width:1.1rem;height:1.1rem;border-radius:50%;background:var(--pu-green-fill) no-repeat center/70%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  animation:pu-pop .3s cubic-bezier(.3,1.35,.55,1)}
.pu-svc-status.is-error{color:var(--pu-status-danger);white-space:normal;text-align:center}
@keyframes pu-spin{to{transform:rotate(360deg)}}
.pu-svc{margin:0}
.pu-svc-section{margin:0 0 2rem;scroll-margin-top:1rem}
.pu-svc-label{font-family:var(--pu-font-ui);font-size:.75rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pu-text-secondary);margin:0 0 .5rem 1rem}
.pu-svc-hint{font-size:.8125rem;color:var(--pu-text-secondary);margin:.6rem 1rem 0;line-height:1.45}
.pu-svc-foot{margin:-.75rem 1rem 1.5rem}
.pu-svc-list{list-style:none;margin:0;padding:0;background:var(--pu-surface-raised);
  border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius-lg);box-shadow:var(--pu-shadow-sm);overflow:hidden}
.pu-svc-item{position:relative;padding:0 1rem}
.pu-svc-item+.pu-svc-item::before{content:"";position:absolute;top:0;left:1rem;right:0;border-top:1px solid var(--pu-border-subtle)}
.pu-svc-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem;
  padding:.7rem 0;margin:0;font-weight:400;cursor:default;-webkit-tap-highlight-color:transparent}
label.pu-svc-row{cursor:pointer;margin:0 -1rem;padding:.7rem 1rem;transition:background-color .2s ease}
label.pu-svc-row:active{background:var(--pu-surface-sunken);transition:none}
.pu-svc-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pu-svc-name{font-weight:600;font-size:1rem;line-height:1.3;margin:0;overflow-wrap:anywhere;transition:color .2s ease}
.pu-svc-meta{font-size:.8125rem;color:var(--pu-text-secondary);font-weight:400}
.pu-svc-item[data-svc-item]:not(.is-on) .pu-svc-name{color:var(--pu-text-secondary)}
/* Phone-sized switch with a little overshoot, like the real thing. */
.pu-svc .pu-switch-track{width:3.125rem;height:calc(1.75rem + 4px)}
.pu-svc .pu-switch-thumb{width:1.75rem;height:1.75rem;box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);
  transition:transform .32s cubic-bezier(.3,1.35,.55,1),width .2s ease}
.pu-svc .pu-switch-track{transition:background-color .25s ease}
.pu-svc .pu-switch-input:checked~.pu-switch-track .pu-switch-thumb{transform:translateX(calc(3.125rem - 1.75rem - 4px))}
.pu-svc label.pu-svc-row:active .pu-switch-thumb{width:2.1rem}
.pu-svc label.pu-svc-row:active .pu-switch-input:checked~.pu-switch-track .pu-switch-thumb{transform:translateX(calc(3.125rem - 2.1rem - 4px))}
/* Chips: one per location (or room); the whole pill is the tap target. */
.pu-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 .9rem}
.pu-chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;margin:0;padding:.45rem .95rem .45rem .7rem;
  border:1px solid var(--pu-field-border);border-radius:99px;background:var(--pu-surface-canvas);
  color:var(--pu-text-primary);font-size:.9375rem;font-weight:500;white-space:nowrap;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .18s cubic-bezier(.3,1.35,.55,1)}
.pu-chip:active{transform:scale(.95)}
.pu-chip input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;opacity:0;cursor:pointer;
  border:0;background:none;appearance:none;-webkit-appearance:none}
.pu-chip-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;
  border:1.5px solid var(--pu-field-border);color:transparent;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.3,1.35,.55,1)}
.pu-chip-icon svg{opacity:0;transform:scale(.4);transition:transform .3s cubic-bezier(.3,1.35,.55,1),opacity .15s ease}
.pu-chip-sub{font-size:.75rem;opacity:.75;font-weight:400}
.pu-chip:has(input:checked){background:var(--pu-green-fill);border-color:var(--pu-green-fill);color:var(--pu-text-on-accent)}
.pu-chip:has(input:checked) .pu-chip-icon{background:var(--pu-text-on-accent);border-color:var(--pu-text-on-accent);color:var(--pu-green-fill)}
.pu-chip:has(input:checked) .pu-chip-icon svg{opacity:1;transform:none}
.pu-chip:has(input:focus-visible){outline:2px solid var(--pu-border-focus);outline-offset:2px}
/* A room to avoid reads as a warning, not a pick. */
.pu-chip-avoid:has(input:checked){background:var(--pu-status-warning-bg);border-color:var(--pu-warn);color:var(--pu-status-warning);
  text-decoration:line-through;text-decoration-thickness:1.5px}
.pu-chip-avoid:has(input:checked) .pu-chip-icon{background:none;border-color:transparent;color:var(--pu-status-warning)}
/* Several locations: the chips fold out under the treatment's switch. Without
   script the switch cannot drive them, so it hides and they stay out. */
.pu-svc:not(.is-live) [data-svc-all]+.pu-switch-track{display:none}
.pu-svc-places{display:grid;grid-template-rows:1fr;opacity:1;margin-top:-4px;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .3s ease .06s,visibility 0s}
.pu-svc.is-live .pu-svc-item:not(:has([data-svc-all]:checked)) .pu-svc-places{grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear .34s}
/* First paint: rows land already folded, no closing animation. */
.pu-svc.is-boot .pu-svc-places,.pu-svc.is-boot .pu-svc-break{transition:none!important}
.pu-svc-places-in{min-height:0;overflow:hidden;margin:0 -4px}
.pu-svc-places .pu-chips{padding:4px 4px .9rem}
/* The break, folded away until the treatment is on somewhere. */
.pu-svc-break{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear .34s}
.pu-svc-item:has(input[name=offer]:checked) .pu-svc-break{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .3s ease .06s,visibility 0s}
.pu-svc-break-in{min-height:0;overflow:hidden}
.pu-svc-break-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem .75rem;flex-wrap:wrap;
  margin:0 0 .85rem;padding:.6rem .75rem;border-radius:var(--pu-radius);background:var(--pu-surface-sunken)}
.pu-svc-break-row label{display:flex;flex-direction:column;flex:1 1 7rem;min-width:0;margin:0;font-weight:400}
.pu-svc-break-label{font-size:.9375rem;font-weight:600}
.pu-svc-break-field{display:inline-flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap}
.pu-svc-break-field .pu-num{background:var(--pu-surface-raised)}
.pu-svc-break-field input{width:3.5rem;min-width:3rem;margin:0;font-variant-numeric:tabular-nums}
.pu-svc-break-field .pu-num-btn{width:40px}
.pu-svc-note{font-size:.8125rem;color:var(--pu-text-secondary);margin:-.4rem 0 .85rem .25rem}
.pu-svc-err:empty{display:none}
.pu-svc-err .pu-err{margin:0 0 .85rem}
.pu-svc.is-live .pu-svc-save{display:none}
/* No script, no search: it could not filter anything. */
.pu-svc:not(.is-live) .pu-svc-search{display:none}
/* Search (servicesPage): a soft pill above the list, clear button inside. */
.pu-svc-search{position:relative;display:flex;align-items:center;margin:0 0 .75rem;color:var(--pu-text-secondary)}
.pu-svc-search>svg{position:absolute;left:.8rem;pointer-events:none}
.pu-svc-search input[type=search]{min-height:42px;padding:.55rem 2.5rem .55rem 2.4rem;border:0;border-radius:12px;
  background:var(--pu-surface-sunken);color:var(--pu-text-primary);-webkit-appearance:none;appearance:none;
  transition:box-shadow .2s ease,background-color .2s ease}
.pu-svc-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.pu-svc-search input[type=search]::placeholder{color:var(--pu-text-secondary)}
.pu-svc-search input[type=search]:focus{outline:none;background:var(--pu-surface-raised);box-shadow:var(--pu-ring),inset 0 0 0 1px var(--pu-border-focus)}
.pu-svc-search-x{position:absolute;right:.55rem;display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--pu-text-muted);color:var(--pu-surface-raised);animation:pu-pop .2s cubic-bezier(.3,1.35,.55,1)}
.pu-svc-search-x::after{content:"";position:absolute;inset:-10px}
.pu-svc-search-x[hidden]{display:none}
@keyframes pu-pop{from{transform:scale(.4);opacity:0}}
.pu-svc-item[hidden]{display:none}
.pu-svc-item.is-first::before{display:none}
.pu-svc-nomatch-text{margin:0;padding:1.1rem 0;text-align:center;font-size:.9375rem}
.pu-svc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:2.25rem 1.5rem;
  background:var(--pu-surface-raised);border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius-lg)}
.pu-svc-empty p{margin:0}
.pu-svc-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-bottom:.4rem;
  border-radius:50%;background:var(--pu-surface-sunken);color:var(--pu-text-secondary)}
@media(max-width:519px){
  .pu-svc-head{margin-bottom:1.25rem}
  .pu-svc-label,.pu-svc-hint{margin-left:.75rem;margin-right:.75rem}
}
@media(prefers-reduced-motion:reduce){
  .pu-svc *,.pu-svc-status,.pu-svc-status::before{transition:none!important;animation:none!important}
}
/* One location (clinicPage): the My services settings list, for an admin.
   Field rows put the label left and a borderless field in the rest; a
   form's Save sits under its group, greyed until something changes. */
.pu-cl{max-width:44rem}
.pu-cl .pu-svc-section{margin-bottom:2.25rem}
.pu-cl form,.pu-cl-fieldset{margin:0;min-width:0}
.pu-cl-fieldset{border:0;padding:0}
.pu-cl-fieldset:disabled .pu-svc-row{opacity:.55}
.pu-cl .pu-svc-list+.pu-svc-label{margin-top:1.75rem}
.pu-cl-save{display:flex;justify-content:flex-end;margin:.75rem 0 0}
.pu-cl-save .pu-btn:disabled{opacity:.4}
.pu-cl-callout{margin:0 0 .85rem}
.pu-cl-callout p{margin:0}
.pu-cl-callout form{margin-top:.6rem}
.pu-cl-empty{margin:0;padding:1rem 0;color:var(--pu-text-secondary)}
.pu-cl .pu-err{margin:0 0 .75rem}
.pu-cl-field{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:.75rem;min-height:3.25rem}
.pu-cl-field>label{margin:0;font-weight:500;color:var(--pu-text-primary)}
.pu-cl-field>input{width:100%;min-height:44px;margin:0;padding:.5rem 0;border:0;border-radius:0;background:transparent;
  box-shadow:none;font-size:1rem;color:var(--pu-text-primary)}
.pu-cl-field>input::placeholder{color:var(--pu-text-muted)}
.pu-cl-field>input:focus{outline:none;box-shadow:none}
.pu-cl-field:has([aria-invalid=true])>label{color:var(--pu-status-danger)}
.pu-cl-zone .pu-zone-trigger,.pu-cl-zone select{border:0;background-color:transparent;padding-left:0}
.pu-cl-zone .pu-zone-device{grid-column:2;margin:-.6rem 0 .6rem;font-size:.8125rem}
.pu-cl-field>.pu-num{justify-self:start}
/* Focus shows as a bar down the row's leading edge, as the field itself has no border. */
.pu-cl .pu-svc-item:has(.pu-cl-field input:focus-visible,.pu-cl-room input:focus-visible)::after{content:"";position:absolute;
  left:0;top:.5rem;bottom:.5rem;width:3px;border-radius:0 3px 3px 0;background:var(--pu-border-focus)}
/* A treatment: its switch row, and an (i) to its settings here. */
.pu-cl-treat{display:flex;align-items:center}
.pu-cl-treat>label.pu-svc-row{flex:1;min-width:0;margin-right:0}
.pu-cl-info{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 -.6rem 0 .1rem;border-radius:50%;
  color:var(--pu-green-fill);-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.3,1.35,.55,1)}
.pu-cl-info:active{transform:scale(.88);opacity:.6}
.pu-cl-i{display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;border:1.5px solid currentColor;border-radius:50%;
  font-size:.625rem;font-weight:700;font-style:normal;vertical-align:.05em}
/* Rows that go somewhere. */
.pu-cl-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;margin:0 -1rem;padding:0 1rem;
  color:var(--pu-text-primary);text-decoration:none;font-weight:500;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.pu-cl-nav:active{background:var(--pu-surface-sunken);transition:none}
.pu-cl-nav>span{display:inline-flex;align-items:center;gap:.6rem}
.pu-cl-nav>svg{flex:none;color:var(--pu-text-muted)}
.pu-cl-accent{color:var(--pu-green-fill)}
.pu-cl-danger{justify-content:center;color:var(--pu-status-danger)}
.pu-cl-link{display:inline-flex;align-items:center;gap:.15rem;flex:none;min-height:44px;color:var(--pu-text-secondary);
  text-decoration:none;font-size:.9375rem}
.pu-cl-link svg{color:var(--pu-text-muted)}
.pu-cl-link:active{opacity:.6}
/* A therapist: name, schedule, a chip per treatment, remove. */
.pu-cl-person .pu-team-person{min-width:0}
.pu-cl-sched{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .85rem;padding:.35rem .35rem .35rem .75rem;
  border-radius:var(--pu-radius);background:var(--pu-surface-sunken)}
.pu-cl-sched label{margin:0;font-size:.9375rem;font-weight:600;white-space:nowrap}
.pu-cl-sched select{width:auto;max-width:60%;min-height:36px;margin:0;background-color:var(--pu-surface-raised);font-size:.875rem}
.pu-cl-person .pu-chips{padding-bottom:.35rem}
.pu-cl-person-foot{display:flex;justify-content:flex-end;margin:0 0 .35rem}
.pu-cl-remove{min-height:36px;padding:0;border:0;background:none;color:var(--pu-status-danger);font:inherit;font-size:.8125rem;cursor:pointer}
.pu-cl-remove:active{opacity:.6}
.pu-cl-addlist{margin-top:.85rem}
button.pu-cl-nav{width:calc(100% + 2rem);border:0;background:none;font:inherit;font-weight:500;text-align:left;cursor:pointer}
button.pu-cl-nav:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-cl-count{color:var(--pu-text-muted);font-weight:400;font-variant-numeric:tabular-nums;gap:.15rem!important}
/* Add existing staff: a sheet of people, one tap each. A card in the
   middle on a computer, docked to the bottom on a phone. */
.pu-cl-sheet{width:min(26rem,calc(100% - 2rem));max-height:min(36rem,calc(100vh - 4rem));padding:0;border:0;border-radius:20px;
  background:var(--pu-surface-raised);color:var(--pu-text-primary);box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;
  animation:pu-cl-sheet-in .32s cubic-bezier(.32,.72,0,1)}
.pu-cl-sheet[open]{display:flex}
.pu-cl-sheet::backdrop{background:rgba(0,0,0,.4);animation:pu-cl-fade-in .32s ease}
.pu-cl-sheet.is-closing{animation:pu-cl-sheet-out .2s ease-in forwards}
.pu-cl-sheet.is-closing::backdrop{animation:pu-cl-fade-out .2s ease-in forwards}
.pu-cl-sheet form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.pu-cl-sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:.8rem 1rem .4rem}
.pu-cl-sheet-head h2{margin:0;font-size:1.0625rem;font-weight:600;text-align:center;white-space:nowrap}
.pu-cl-sheet-btn{justify-self:start;min-height:44px;padding:0 .25rem;border:0;background:none;color:var(--pu-green-fill);
  font:inherit;font-size:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pu-cl-sheet-btn:active{opacity:.5}
.pu-cl-sheet-sub{margin:0 1.25rem .6rem;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--pu-text-secondary)}
.pu-cl-sheet-find{padding:0 1rem .5rem}
.pu-cl-sheet-find input{width:100%;min-height:40px;margin:0;padding:.45rem .85rem .45rem 2.1rem;border:0;border-radius:12px;
  background:var(--pu-surface-sunken) no-repeat .75rem center/1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A918C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E")}
.pu-cl-sheet-find input:focus{outline:none;box-shadow:var(--pu-ring)}
.pu-cl-pick{flex:1;min-height:0;margin:0;padding:0 .5rem calc(.75rem + env(safe-area-inset-bottom));list-style:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pu-cl-pick li[hidden]{display:none}
.pu-cl-pickrow{display:flex;align-items:center;gap:.75rem;width:100%;min-height:3.75rem;padding:.55rem .75rem;border:0;border-radius:14px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.pu-cl-pickrow:hover{background:var(--pu-surface-sunken)}
.pu-cl-pickrow:active{background:var(--pu-surface-sunken);transition:none}
.pu-cl-pickrow:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-cl-pickrow .pu-svc-text{flex:1}
.pu-cl-pickrow .pu-svc-name{font-size:.9375rem}
.pu-cl-pickrow .pu-svc-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-cl-pickrow .pu-cl-plus{transition:transform .18s cubic-bezier(.3,1.35,.55,1)}
.pu-cl-pickrow:active .pu-cl-plus{transform:scale(.85)}
.pu-cl-sheet form.is-busy .pu-cl-pickrow{pointer-events:none}
.pu-cl-sheet form.is-busy .pu-cl-pickrow:not(.is-adding){opacity:.45}
.pu-cl-pickrow.is-adding .pu-cl-plus{background:none;color:var(--pu-green-fill)}
.pu-cl-pickrow.is-adding .pu-cl-plus svg{display:none}
.pu-cl-pickrow.is-adding .pu-cl-plus::before{content:"";width:1rem;height:1rem;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:pu-spin .7s linear infinite}
.pu-cl-sheet-none{margin:1.5rem 1rem 2rem;text-align:center;color:var(--pu-text-secondary)}
@keyframes pu-cl-sheet-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes pu-cl-sheet-out{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes pu-cl-fade-in{from{opacity:0}}
@keyframes pu-cl-fade-out{to{opacity:0}}
@media(max-width:600px){
  .pu-cl-sheet{width:100%;max-width:none;max-height:85vh;margin:auto 0 0;border-radius:20px 20px 0 0;
    box-shadow:0 -6px 40px rgba(0,0,0,.2)}
  .pu-cl-sheet-head{padding-top:1.1rem;position:relative}
  /* The grabber, as on any iOS sheet. */
  .pu-cl-sheet-head::before{content:"";position:absolute;top:.4rem;left:50%;width:2.25rem;height:5px;margin-left:-1.125rem;
    border-radius:3px;background:var(--pu-border-subtle)}
  @keyframes pu-cl-sheet-in{from{transform:translateY(100%)}}
  @keyframes pu-cl-sheet-out{to{transform:translateY(100%)}}
}
@media(prefers-reduced-motion:reduce){.pu-cl-sheet,.pu-cl-sheet::backdrop{animation:none}}
/* Rooms: rename in place, Rename shows once the name changes. */
.pu-cl-room{display:flex;align-items:center;gap:.5rem;min-height:3.25rem}
.pu-cl-room-name{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}
.pu-cl-room input{flex:1;min-width:0;min-height:44px;margin:0;padding:.5rem 0;border:0;border-radius:0;background:transparent;
  box-shadow:none;font-size:1rem}
.pu-cl-room input:focus{outline:none;box-shadow:none}
.pu-cl-room-name .pu-btn:disabled{display:none}
.pu-cl-trash{display:grid;place-items:center;width:40px;height:40px;margin-right:-.5rem;padding:0;border:0;border-radius:50%;
  background:none;color:var(--pu-text-muted);cursor:pointer;transition:color .2s ease,background-color .2s ease}
.pu-cl-trash:hover{color:var(--pu-status-danger);background:var(--pu-status-danger-bg)}
.pu-cl-trash:active{transform:scale(.9)}
.pu-cl-plus{display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--pu-green-fill);color:var(--pu-text-on-accent)}
.pu-cl-plus svg{width:12px;height:12px}
.pu-cl-room-add .pu-btn{transition:opacity .2s ease}
.pu-cl-room-add:has(input:placeholder-shown) .pu-btn{opacity:0;pointer-events:none}
/* Booking link only matters when customers book elsewhere. */
.pu-cl-details:not(:has(input[name=booking_mode][value=external]:checked)) .pu-cl-ext:not(:has([aria-invalid=true])){display:none}
.pu-cl .pu-seg{flex:none;width:auto;margin-left:auto}
.pu-cl .pu-seg+*,.pu-cl .pu-svc-row>.pu-svc-name{flex:none;white-space:nowrap}
.pu-cl .pu-seg span{padding:.4rem .9rem}
@media(max-width:519px){
  .pu-cl-field{grid-template-columns:5.75rem minmax(0,1fr);gap:.5rem}
  .pu-cl-save{margin-right:.25rem}
}
.pu-members{border-collapse:collapse;font-size:.9375rem}
.pu-members th,.pu-members td{text-align:left;padding:.55rem .6rem;vertical-align:middle;
  border-bottom:1px solid var(--pu-border-subtle)}
.pu-members th{font-family:var(--pu-font-display);font-size:.8125rem;font-weight:600}
.pu-members td:first-child{padding-left:0}
.pu-members th:first-child{padding-left:0}
.pu-member-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* Bookings toolbar (businessBookingsPage): search, a segmented view
   switch, the date range and a Filters pop-over on one quiet row, the
   filters in use as removable chips beneath it. */
.pu-btn-sm{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.4rem .75rem;font-size:.8125rem;font-weight:600;white-space:nowrap}
.pu-btn-sm svg{flex:none;opacity:.8}
.pu-filterbar{display:grid;gap:.6rem;margin:0 0 .75rem}
.pu-filter-search{position:relative}
.pu-filter-search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--pu-text-secondary);pointer-events:none}
.pu-filterbar .pu-filter-search input{padding-left:2.4rem;min-height:42px;border-radius:var(--pu-radius);
  background:var(--pu-surface-sunken);border-color:transparent}
.pu-filterbar .pu-filter-search input:focus{background:var(--pu-paper);border-color:var(--pu-border-focus)}
.pu-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pu-filter-row label{margin:0}
.pu-seg{display:inline-flex;margin:0;padding:3px;border:0;border-radius:calc(var(--pu-radius) - 1px);
  background:var(--pu-seg-track);min-width:0}
.pu-seg label{position:relative;display:block;margin:0;font-weight:500}
.pu-seg input[type=radio]{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;opacity:0;cursor:pointer;border:0}
.pu-seg span{display:block;padding:.4rem .8rem;border-radius:calc(var(--pu-radius) - 3px);font-size:.8125rem;
  color:var(--pu-text-secondary);white-space:nowrap;transition:background-color .12s ease,color .12s ease}
.pu-seg label:hover span{color:var(--pu-text-primary)}
.pu-seg input:checked+span{background:var(--pu-seg-thumb);color:var(--pu-text-primary);font-weight:600;box-shadow:var(--pu-seg-shadow)}
.pu-seg input:focus-visible+span{outline:2px solid var(--pu-border-focus);outline-offset:1px}
.pu-seg a{display:block;text-decoration:none}
.pu-seg a:hover span{color:var(--pu-text-primary)}
.pu-seg a[aria-current] span{background:var(--pu-seg-thumb);color:var(--pu-text-primary);font-weight:600;box-shadow:var(--pu-seg-shadow)}
.pu-ctlbar{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap;margin:0 0 1.25rem}
.pu-ctlbar h1{margin:0;font-size:2rem;letter-spacing:-.025em;line-height:1.1}
.pu-ctlbar-sub{margin:.3rem 0 0;min-height:1.4em;color:var(--pu-text-secondary);font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.pu-ctlbar-sub p{margin:0}
.pu-ctlbar-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
@media(max-width:899px){
  .pu-ctlbar{margin-bottom:.85rem}
  .pu-ctlbar h1{font-size:1.75rem}
  .pu-ctlbar-sub{margin-top:.15rem;font-size:.875rem}
  .pu-ctlbar-tools{width:100%;justify-content:flex-end;flex-wrap:nowrap;gap:.4rem}
  .pu-ctlbar-tools .pu-viewswitch{order:-1;margin-right:auto}
  .pu-thumbseg a{padding:0 .8rem}
  .pu-viewswitch svg{display:none}
}
/* A segmented control whose thumb slides to the tapped option. */
.pu-thumbseg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:12px;
  background:var(--pu-seg-track);isolation:isolate}
.pu-thumbseg::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--count,2));
  border-radius:9px;background:var(--pu-seg-thumb);box-shadow:var(--pu-seg-shadow);
  transform:translateX(calc(100% * var(--i,0)));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pu-thumbseg a{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:36px;padding:0 .9rem;border-radius:9px;
  color:var(--pu-text-secondary);font-size:.8125rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .25s;
  -webkit-tap-highlight-color:transparent}
.pu-thumbseg a:hover{color:var(--pu-text-primary)}
.pu-thumbseg a[aria-current]{color:var(--pu-text-primary)}
/* "Just me" / "Everyone here" on the bookings list, as on the calendar. */
.pu-bk-with{margin:0 0 1rem}
.pu-bk-with a{gap:.45rem;min-width:8.5rem}
.pu-bk-with svg{flex:none;opacity:.7;transition:opacity .25s}
.pu-bk-with a[aria-current] svg{opacity:1}
@media(max-width:899px){.pu-bk-with{display:grid;width:100%}.pu-bk-with a{min-width:0;min-height:40px}}
/* Already there: tapping the option you are on does nothing. */
.pu-thumbseg a[aria-current],.pu-seg a[aria-current]{pointer-events:none;cursor:default}
@media(prefers-reduced-motion:reduce){.pu-thumbseg::before{transition:none}}
.pu-filter-field{min-width:0}
.pu-filter-row .pu-select{min-width:10.5rem}
.pu-filter-row .pu-zone-trigger,.pu-filter-row>.pu-filter-field>select{min-height:36px;padding-top:.4rem;padding-bottom:.4rem;font-size:.8125rem;font-weight:500}
.pu-filter-days{display:flex;align-items:center;gap:.4rem}
.pu-filter-days[hidden]{display:none}
.pu-filterbar .pu-filter-days input{width:5.5rem;min-height:36px;padding:.4rem .6rem;font-size:.8125rem}
.pu-filter-days .pu-muted{font-size:.8125rem}
.pu-filter-more{position:relative}
.pu-filter-more>summary{list-style:none;cursor:pointer}
.pu-filter-more>summary::-webkit-details-marker{display:none}
.pu-filter-more[open]>summary{background:var(--pu-surface-sunken)}
.pu-count{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;
  background:var(--pu-button-bg);color:var(--pu-button-text);font-size:.6875rem;font-weight:700}
.pu-filter-panel{position:absolute;z-index:25;top:calc(100% + .4rem);left:0;width:min(22rem,calc(100vw - 2rem));
  display:grid;gap:.75rem;padding:1rem;border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);
  background:var(--pu-surface-raised);box-shadow:0 16px 40px rgba(24,24,27,.16)}
.pu-filter-panel label{margin:0 0 .3rem;font-size:.75rem;font-weight:600;color:var(--pu-text-secondary)}
.pu-filter-panel .pu-select{min-width:0}
.pu-filterbar.is-live .pu-filter-apply{display:none}
.pu-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .75rem}
.pu-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .4rem .25rem .7rem;border-radius:999px;
  border:1px solid var(--pu-border-subtle);background:var(--pu-surface-raised);color:var(--pu-text-primary);
  font-size:.8125rem;font-weight:500;text-decoration:none;max-width:100%}
.pu-chip span{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;
  color:var(--pu-text-secondary);font-size:.9rem;line-height:1}
.pu-chip:hover{border-color:var(--pu-field-border)}
.pu-chip:hover span{background:var(--pu-surface-sunken);color:var(--pu-text-primary)}
.pu-chip-clear{font-size:.8125rem;color:var(--pu-text-secondary);margin-left:.25rem}
.pu-chip-clear:hover{color:var(--pu-text-primary)}
.pu-filter-meta{margin:0 0 .75rem;font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-filter-meta strong{color:var(--pu-text-primary);font-weight:600}
/* All bookings (businessBookingsPage): an agenda grouped by day. Each
   row is one link; on a wide screen its parts line up as columns, on a
   phone it is a two-line card: time, customer, status; then where and who. */
.pu-bk-group{margin:0 0 1.25rem}
.pu-bk-day{margin:0;padding:.5rem 0 .4rem;font-size:.75rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--pu-text-secondary)}
.pu-bk-rows{list-style:none;margin:0;padding:0;border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius-lg);
  background:var(--pu-surface-raised);overflow:hidden}
.pu-bk-rows li+li{border-top:1px solid var(--pu-border-subtle)}
.pu-bk-row{display:grid;grid-template-columns:4.25rem minmax(0,2fr) minmax(0,1.6fr) 6rem 9.5rem;align-items:center;
  gap:.25rem 1rem;padding:.8rem 1rem;color:var(--pu-text-primary);text-decoration:none;transition:background-color .1s ease}
.pu-bk-row:hover{background:var(--pu-surface-sunken)}
.pu-bk-row:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-bk-time{display:grid;line-height:1.2}
.pu-bk-time strong{font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.pu-bk-time small,.pu-bk-main>span,.pu-bk-meta{font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-bk-main{display:grid;min-width:0;line-height:1.3}
.pu-bk-main>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-bk-main strong{font-weight:600}
.pu-bk-meta{display:grid;min-width:0;line-height:1.35}
.pu-bk-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-bk-meta>span:first-child{color:var(--pu-text-primary)}
.pu-bk-price{font-size:.875rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pu-bk-status{justify-self:end}
.pu-bk-row.is-off .pu-bk-main strong,.pu-bk-row.is-off .pu-bk-time strong{color:var(--pu-text-secondary)}
.pu-bk-row.is-off .pu-bk-price{text-decoration:line-through;color:var(--pu-text-secondary)}
.pu-bk-row.is-alert{box-shadow:inset 3px 0 0 var(--pu-status-warning);background:var(--pu-status-warning-bg)}
.pu-bk-alert{grid-column:2/-1;font-size:.8125rem;font-weight:600;color:var(--pu-status-warning)}
@media(max-width:767px){
  .pu-bk-rows{border-radius:var(--pu-radius)}
  .pu-bk-row{grid-template-columns:3.25rem minmax(0,1fr) auto;gap:.15rem .75rem;padding:.75rem .85rem;align-items:start}
  .pu-bk-time{grid-row:1/3}
  .pu-bk-main{grid-column:2/-1;grid-row:1;padding-right:4.5rem}
  .pu-bk-status{grid-column:3;grid-row:2;align-self:end}
  .pu-bk-meta{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:0 .4rem;min-width:0;align-self:end}
  .pu-bk-meta>span+span::before{content:"·";margin-right:.4rem;color:var(--pu-text-secondary)}
  .pu-bk-meta>span:first-child{color:var(--pu-text-secondary)}
  .pu-bk-price{grid-column:3;grid-row:1;font-size:.875rem;font-weight:600}
  .pu-bk-phone{display:none}
  .pu-bk-status .pu-badge{font-size:.6875rem;padding:.1rem .45rem}
}
.pu-empty{padding:2.5rem 1rem;text-align:center;border:1px dashed var(--pu-line);border-radius:var(--pu-radius-lg);color:var(--pu-text-secondary)}
.pu-empty p{margin:0 0 .5rem}
@media(max-width:640px){
  .pu-filter-row{gap:.4rem}
  .pu-seg{display:flex;width:100%}
  .pu-seg label,.pu-seg a{flex:1}
  .pu-seg span{text-align:center;padding:.5rem .25rem}
  .pu-filter-row .pu-filter-field:not(.pu-filter-days){flex:1 1 auto}
  .pu-filter-row .pu-select{min-width:0}
  .pu-filter-panel{position:fixed;left:1rem;right:1rem;top:auto;bottom:1rem;width:auto;max-height:70vh;overflow-y:auto}
  .pu-filter-export span{display:none}
  .pu-filter-export{min-width:36px;justify-content:center;padding:.4rem}
}
.pu-member-actions .pu-btn{padding:.3rem .6rem;font-size:.8125rem}
/* Statistics (businessStatsPage), after a phone's health summary: a large
   title over its controls, rounded cards on the grey canvas, numbers in
   the display face, bars that grow in, and a ranked inset list. */
.pu-st-top{display:grid;gap:.75rem;margin:0 0 1.25rem}
.pu-st-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem}
.pu-st-range{grid-column:1/-1}
.pu-st-title h1{margin:0;font-family:var(--pu-font-display);font-size:2.25rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.pu-st-range{margin:.3rem 0 0;color:var(--pu-text-secondary);font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.pu-st-export,.pu-st-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:36px;border:0;border-radius:999px;
  background:var(--pu-seg-track);color:var(--pu-text-primary);font-size:.8125rem;font-weight:600;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.3,1.4,.5,1),background-color .15s}
.pu-st-export{padding:0 .95rem 0 .8rem;flex:none}
.pu-st-icon-btn{position:relative;width:36px;padding:0;list-style:none}
.pu-st-icon-btn::-webkit-details-marker{display:none}
.pu-st-export:active,.pu-st-icon-btn:active{transform:scale(.92)}
.pu-st-icon-btn .pu-count{position:absolute;top:-3px;right:-3px;box-shadow:0 0 0 2px var(--pu-surface-canvas)}
.pu-st-form{display:grid;gap:.6rem}
.pu-st-form.is-live .pu-filter-apply{display:none}
.pu-st-form .pu-err{margin:0}
.pu-st-search{position:relative}
.pu-st-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--pu-text-secondary);pointer-events:none}
.pu-st-search input{width:100%;min-height:40px;padding:.5rem .75rem .5rem 2.25rem;border:0;border-radius:12px;
  background:var(--pu-seg-track);font-size:.9375rem;box-shadow:none}
.pu-st-search input:focus{outline:none;box-shadow:var(--pu-ring)}
.pu-st-when{display:flex;align-items:center;gap:.45rem}
.pu-st-seg{display:grid;flex:1;min-width:0;max-width:32rem}
.pu-st-short{display:none}
.pu-st-seg a{min-width:0;padding:0 .3rem}
.pu-st-seg.is-none::before{opacity:0}
.pu-st-more{flex:none}
.pu-st-more .pu-select,.pu-st-sort .pu-select{min-width:0}
.pu-st-more .pu-zone-trigger,.pu-st-sort .pu-zone-trigger{min-height:36px;padding:.35rem 1.75rem .35rem .85rem;border:0;border-radius:12px;
  background-color:var(--pu-seg-track);background-position:right .65rem center;font-size:.8125rem;font-weight:600;white-space:nowrap}
.pu-st-more .pu-zone-panel,.pu-st-sort .pu-zone-panel{left:auto;right:0;width:13.5rem;border-radius:14px}
.pu-st-filter{position:relative;flex:none}
.pu-st-filter>summary{list-style:none}
.pu-st-grab{display:none}
.pu-st-sheet{position:absolute;z-index:30;top:calc(100% + .5rem);right:0;width:23rem;--st-h:max(16rem,min(32rem,calc(100vh - 22rem)));overflow:hidden;
  border:.5px solid var(--pu-border-subtle);border-radius:18px;background:var(--pu-surface-raised);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.pu-st-form:not(.is-live) .pu-st-sheet{height:auto;max-height:80vh;overflow-y:auto}
.pu-st-track{display:flex;align-items:flex-start}
.pu-st-form:not(.is-live) .pu-st-track{display:block}
.is-live .pu-st-track{transition:transform .38s cubic-bezier(.32,.72,0,1)}
.is-live .pu-st-sheet{transition:height .38s cubic-bezier(.32,.72,0,1)}
.pu-st-pane.is-gone{display:none}
.pu-st-track.is-sub{transform:translateX(-100%)}
/* Each page as tall as it needs, up to the sheet's limit; a long list scrolls inside it. */
.pu-st-pane{flex:0 0 100%;display:flex;flex-direction:column;min-width:0;min-height:0;max-height:var(--st-h)}
.is-live .pu-st-pane:not(.pu-st-pane-main):not(.is-on){display:none}
.pu-st-sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:.75rem .9rem .65rem;
  border-bottom:.5px solid var(--pu-border-subtle)}
.pu-st-sheet-head h2{margin:0;font-size:1rem;font-weight:600;text-align:center;white-space:nowrap}
.pu-st-sheet-head>:last-child{justify-self:end}
.pu-st-sheet-btn{display:inline-flex;align-items:center;gap:.1rem;min-height:36px;padding:0 .3rem;border:0;background:none;
  color:var(--pu-text-primary);font:inherit;font-size:.9375rem;cursor:pointer;-webkit-tap-highlight-color:transparent;justify-self:start}
.pu-st-sheet-btn:active{opacity:.5}
.pu-st-done{font-weight:700}
.pu-st-back{margin-left:-.35rem}
.pu-st-form:not(.is-live) .pu-st-sheet-head button,.pu-st-form:not(.is-live) .pu-st-navrows{display:none}
.pu-st-navrows{padding:.35rem 1rem}
.pu-st-navrow{display:flex;align-items:center;gap:.75rem;width:100%;min-height:52px;padding:.5rem .1rem;border:0;border-bottom:.5px solid var(--pu-border-subtle);
  background:none;color:var(--pu-text-primary);font:inherit;font-size:.9375rem;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pu-st-navrow:last-child{border-bottom:0}
.pu-st-navrow:active{opacity:.6}
.pu-st-navrow>span:first-child{flex:none;font-weight:600}
.pu-st-navval{flex:1;min-width:0;text-align:right;color:var(--pu-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pu-st-navrow svg{flex:none;color:var(--pu-text-secondary)}
.pu-st-sheet-apply{margin:.5rem 1rem 1rem}
.is-live .pu-st-sheet-apply{display:none}
.pu-st-find{margin:.6rem .9rem .25rem}
.pu-st-find input{min-height:36px;font-size:.875rem}
.pu-st-choices{flex:1;min-height:0;margin:0;padding:.35rem .5rem .75rem;list-style:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pu-st-choices li[hidden]{display:none}
.pu-st-choices label{position:relative;display:flex;align-items:center;gap:.75rem;min-height:46px;margin:0;padding:.55rem .75rem;border-radius:12px;
  font-size:.9375rem;font-weight:400;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s}
.pu-st-choices label:hover{background:var(--pu-surface-sunken)}
.pu-st-choices label:active{background:var(--pu-seg-track)}
.pu-st-choices input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pu-st-choices span{flex:1;min-width:0;overflow-wrap:anywhere}
.pu-st-choices svg{flex:none;opacity:0;transform:scale(.6);transition:opacity .15s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.pu-st-choices input:checked~span{font-weight:600}
.pu-st-choices input:checked~svg{opacity:1;transform:none}
.pu-st-choices label:has(input:focus-visible){outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-st-nofind{margin:1.5rem 1rem;text-align:center;color:var(--pu-text-secondary);font-size:.875rem}
.pu-st-dates{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pu-st-dates[hidden]{display:none}
.pu-st-dates label{margin:0;font-size:.8125rem;color:var(--pu-text-secondary)}
.pu-st-dates input,.pu-st-dates .pu-dp{width:auto;min-height:36px;padding:.35rem .8rem;border:0;border-radius:12px;
  background:var(--pu-seg-track);color:var(--pu-text-primary);font-size:.8125rem;font-weight:600;white-space:nowrap}
.pu-st-chips{margin:0}
.pu-st-groups{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:1.5rem;
  margin:0 -1.5rem;padding:.1rem 1.5rem;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.pu-st-groups::-webkit-scrollbar{display:none}
.pu-st-group{flex:none;scroll-snap-align:start;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--pu-border-subtle);
  color:var(--pu-text-secondary);font-size:.8125rem;font-weight:600;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s cubic-bezier(.3,1.4,.5,1)}
.pu-st-group:hover{color:var(--pu-text-primary)}
.pu-st-group:active{transform:scale(.94)}
.pu-st-group[aria-current]{background:var(--pu-text-primary);border-color:var(--pu-text-primary);color:var(--pu-surface-canvas);pointer-events:none}
.pu-st-hero,.pu-st-tile,.pu-st-list,.pu-st-link{background:var(--pu-surface-raised);border:.5px solid var(--pu-border-subtle);border-radius:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 28px rgba(0,0,0,.04)}
.pu-st-summary{display:grid;gap:.75rem}
@media(min-width:900px){.pu-st-summary{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.pu-st-hero,.pu-st-tile{min-width:0;padding:1.05rem 1.15rem 1.1rem}
.pu-st-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.pu-st-label{display:flex;align-items:center;gap:.35rem;margin:0;color:var(--pu-text-secondary);font-size:.8125rem;font-weight:600}
.pu-st-label svg{flex:none;opacity:.85}
.pu-st-num{margin:.4rem 0 .15rem;font-family:var(--pu-font-display);font-size:1.625rem;font-weight:700;letter-spacing:-.025em;line-height:1.1;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pu-st-num-xl{font-size:2.5rem;letter-spacing:-.035em}
.pu-st-cap{margin:0;color:var(--pu-text-secondary);font-size:.8125rem;line-height:1.35}
.pu-st-chart{margin:1.1rem 0 0}
.pu-st-plot{position:relative;height:9rem;margin-top:1.4rem}
.pu-st-max{position:absolute;top:-1.25rem;right:0;font-size:.6875rem;color:var(--pu-text-secondary);font-variant-numeric:tabular-nums}
.pu-st-bars{position:absolute;inset:0;display:flex;align-items:stretch;gap:3px;touch-action:pan-y;cursor:crosshair}
.pu-st-bars[data-dense]{gap:1px}
.pu-st-bars>span{flex:1;min-width:0;display:flex;flex-direction:column-reverse;transform-origin:50% 100%;
  animation:pu-st-grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 360ms);transition:opacity .15s}
.pu-st-bars b{display:block;background:var(--pu-text-primary);border-radius:3px 3px 1px 1px}
.pu-st-bars i{display:block;background:var(--pu-green-tint);border-radius:3px 3px 0 0;box-shadow:inset 0 0 0 1px var(--pu-border-subtle)}
.pu-st-bars:has(.is-on)>span:not(.is-on){opacity:.3}
.pu-st-avg{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed color-mix(in srgb,var(--pu-text-secondary) 70%,transparent);pointer-events:none;z-index:1}
.pu-st-avg em{position:absolute;left:0;bottom:.2rem;padding:0 .3rem;border-radius:4px;background:var(--pu-surface-raised);
  font-style:normal;font-size:.6875rem;font-weight:600;color:var(--pu-text-secondary);white-space:nowrap}
.pu-st-tip{position:absolute;z-index:2;top:-.35rem;transform:translate(-50%,-100%);padding:.35rem .6rem;border-radius:9px;
  background:var(--pu-text-primary);color:var(--pu-surface-canvas);font-size:.75rem;font-weight:600;white-space:nowrap;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pu-st-axis{display:flex;justify-content:space-between;margin-top:.45rem;font-size:.6875rem;color:var(--pu-text-secondary)}
.pu-st-section{margin-top:1.75rem}
.pu-st-listhead{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .65rem}
.pu-st-listhead h2{margin:0;font-family:var(--pu-font-display);font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
.pu-st-listhead h2 span{margin-left:.2rem;color:var(--pu-text-secondary);font-size:1rem;font-weight:500}
.pu-st-sort{display:flex;align-items:center;gap:.4rem}
.pu-st-list{list-style:none;margin:0;padding:0;overflow:hidden}
.pu-st-list>li[hidden]{display:none}
.pu-st-list>li+li>.pu-st-row::before{content:"";display:block;height:.5px;margin-left:4.4rem;background:var(--pu-border-subtle)}
.pu-st-row>summary{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto 1rem;align-items:center;gap:.5rem .85rem;
  padding:.8rem 1rem .85rem;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.pu-st-row>summary::-webkit-details-marker{display:none}
.pu-st-row>summary:active{background:var(--pu-surface-sunken)}
.pu-st-row>summary:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-st-badge{grid-row:1/span 2;align-self:start;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--pu-seg-track);color:var(--pu-text-primary);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.pu-st-cal{border-radius:12px;font-family:var(--pu-font-display);font-size:.875rem;font-variant-numeric:tabular-nums}
.pu-st-rank{background:none;box-shadow:inset 0 0 0 1px var(--pu-border-subtle);color:var(--pu-text-secondary);font-variant-numeric:tabular-nums}
.pu-st-main{min-width:0}
.pu-st-main strong{display:block;font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pu-st-main small{display:block;margin-top:.1rem;color:var(--pu-text-secondary);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pu-st-val{text-align:right}
.pu-st-val strong{display:block;font-family:var(--pu-font-display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pu-st-val small{display:block;color:var(--pu-text-secondary);font-size:.6875rem;font-weight:500}
.pu-st-chev{display:grid;place-items:center;color:var(--pu-text-disabled,var(--pu-text-secondary));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pu-st-row[open] .pu-st-chev{transform:rotate(90deg)}
.pu-st-share{grid-column:2/-1;height:5px;border-radius:3px;background:var(--pu-seg-track);overflow:hidden}
.pu-st-share i{display:block;height:100%;border-radius:3px;background:var(--pu-text-primary);
  animation:pu-st-fill .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 35ms)}
.pu-st-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem;margin:0;padding:.15rem 1rem 1rem 4.35rem;
  animation:pu-st-in .3s cubic-bezier(.2,.8,.2,1) both}
@media(min-width:900px){.pu-st-detail{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pu-st-detail dt{color:var(--pu-text-secondary);font-size:.75rem}
.pu-st-detail dd{margin:.1rem 0 0;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.pu-st-open{display:inline-flex;align-items:center;gap:.2rem;margin:0 1rem 1rem 4.35rem;color:var(--pu-text-primary);font-size:.875rem;font-weight:600;text-decoration:none}
.pu-st-none,.pu-st-empty{padding:2.25rem 1rem;text-align:center;color:var(--pu-text-secondary)}
.pu-st-empty{border-radius:20px;background:var(--pu-surface-raised);border:.5px solid var(--pu-border-subtle)}
.pu-st-empty p{margin:0 0 .5rem}
.pu-st-foot{margin:.8rem .25rem 0;color:var(--pu-text-secondary);font-size:.75rem;line-height:1.45}
.pu-st-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:.9rem 1rem;
  color:var(--pu-text-primary);text-decoration:none;-webkit-tap-highlight-color:transparent}
.pu-st-link:active{background:var(--pu-surface-sunken)}
.pu-st-link strong{display:block;font-size:.9375rem;font-weight:600}
.pu-st-link small{display:block;color:var(--pu-text-secondary);font-size:.8125rem}
.pu-st-link svg{color:var(--pu-text-secondary)}
@keyframes pu-st-grow{from{transform:scaleY(0)}}
@keyframes pu-st-fill{from{width:0}}
@keyframes pu-st-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes pu-st-sheet{from{opacity:0;transform:translateY(24px)}}
@keyframes pu-st-fade{from{opacity:0}}
@media(max-width:640px){
  .pu-st-title h1{font-size:2rem}
  .pu-st-groups{margin:0 -1rem;padding:.1rem 1rem;scroll-padding-inline:1rem}
  .pu-st-long{display:none}
  .pu-st-short{display:inline}
  .pu-st-num{font-size:1.375rem}
  .pu-st-num-xl{font-size:2.125rem}
  .pu-st-hero,.pu-st-tile{padding:.95rem 1rem 1rem}
  .pu-st-detail{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem .75rem;padding-left:1rem}
  .pu-st-detail dd{font-size:.875rem}
  .pu-st-open{margin-left:1rem}
  /* On a phone the filters are a sheet from the bottom, over the tab bar. */
  .pu-st-sheet{position:fixed;z-index:41;left:.5rem;right:.5rem;top:auto;bottom:max(.5rem,env(safe-area-inset-bottom));width:auto;
    --st-h:min(80vh,40rem);border-radius:24px;box-shadow:0 -6px 40px rgba(0,0,0,.2);animation:pu-st-sheet .36s cubic-bezier(.32,.72,0,1) backwards}
  .pu-st-grab{display:block;position:absolute;z-index:2;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:99px;
    background:var(--pu-text-muted);opacity:.45;touch-action:none}
  .pu-st-sheet .pu-st-sheet-head{padding-top:1.15rem;touch-action:none}
  .pu-st-filter[open]::before{content:"";position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.32);animation:pu-st-fade .2s ease both}
  body:has(.pu-st-filter[open]){overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .pu-st-bars>span,.pu-st-share i,.pu-st-detail,.pu-st-sheet,.pu-st-filter[open]::before{animation:none}
  .pu-st-track,.is-live .pu-st-sheet{transition:none}
}
.pu-location-card{overflow-wrap:anywhere}
@media(max-width:640px){
  .pu-location-card{padding:1rem}
  .pu-location-card .pu-docs-table-wrap{overflow-x:visible}
  .pu-location-card .pu-members{display:block;min-width:0}
  .pu-location-card .pu-members thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pu-location-card .pu-members tbody{display:block}
  .pu-location-card .pu-members tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:.5rem .75rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--pu-border-subtle)}
  .pu-location-card .pu-members td{padding:0;border:0;min-width:0}
  .pu-location-card .pu-members td:last-child{grid-column:1/-1}
  .pu-location-card .pu-members td:empty{display:none}
  .pu-location-card .pu-member-actions .pu-btn{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:.55rem .75rem}
  .pu-location-card .pu-team-settings>summary{min-height:44px;padding:.65rem 0}
}
/* The two no-JS range controls are small ghost buttons, left-aligned under
   their row — a stretched flex item centred its own label before. */
.pu-add-range,.pu-remove-range{align-self:flex-start;padding:.25rem .6rem;font-size:.8125rem}
.pu-add-range:hover{color:var(--pu-text-primary)}
.pu-remove-range{flex:0 0 auto}
@media(min-width:600px){
  .pu-day-row{display:flex;align-items:flex-start;gap:1rem}
  .pu-day-row .pu-switch{flex:0 0 11rem;min-height:2.75rem}
  .pu-day-ranges{flex:1 1 auto;margin:0}
}
.pu-zone{position:relative}
.pu-zone-trigger{display:flex;align-items:center;width:100%;min-height:44px;padding:.65rem 2.25rem .65rem .75rem;
  border:1px solid var(--pu-field-border);border-radius:var(--pu-radius);background-color:var(--pu-paper);
  color:var(--pu-ink-950);font:inherit;text-align:left;cursor:pointer;
  background-repeat:no-repeat;background-position:right .8rem center;background-size:.7rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235C6660' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pu-zone-trigger:focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:1px;box-shadow:var(--pu-ring)}
.pu-zone-trigger[aria-expanded="true"]{border-color:var(--pu-border-focus)}
.pu-zone-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + .35rem);padding:.5rem;
  border:1px solid var(--pu-line);border-radius:var(--pu-radius);background:var(--pu-surface-raised);
  box-shadow:0 12px 32px rgba(24,24,27,.16)}
.pu-zone-search{margin:0 0 .4rem}
.pu-zone-list{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;overscroll-behavior:contain}
.pu-zone-group{position:sticky;top:0;padding:.45rem .6rem .25rem;font-size:.75rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--pu-ink-500);background:var(--pu-surface-raised)}
.pu-zone-option{padding:.5rem .6rem;border-radius:calc(var(--pu-radius) - 4px);cursor:pointer;font-size:.9375rem}
.pu-zone-option.is-active{background:var(--pu-surface-sunken)}
.pu-zone-option[aria-selected="true"]{font-weight:600}
.pu-zone-empty{margin:.5rem .6rem;color:var(--pu-ink-500);font-size:.875rem}
.pu-zone-device{font-size:.8125rem;margin:.35rem 0 0}
.pu-overrides{font-family:var(--pu-font-mono);font-size:.875rem}
/* event-type form and cards */
/* Home list: a card is scanned, not read, so it is three short rows —
   title with badges and actions, the meta line, the link. The link row
   is 13px in a tighter box than the booking page's .pu-url. */
.pu-et-card{padding:.875rem 1.125rem}
.pu-et-head{display:flex;align-items:center;justify-content:space-between;gap:.35rem 1rem;flex-wrap:wrap}
.pu-et-head h2{margin:0;font-size:1.0625rem}
.pu-et-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pu-et-actions .pu-btn{padding:.3rem .65rem;font-size:.8125rem}
.pu-et-meta{margin:.15rem 0 0}
.pu-et-url{margin-top:.5rem;padding:.1rem .1rem .1rem .65rem}
.pu-et-url .pu-url-input{padding:.3rem 0;font-size:.8125rem}
.pu-et-url .pu-copy{padding:.25rem .5rem;min-width:4rem}
/* Form groups: a bold legend on a hairline, nothing else — the browser's
   boxed fieldset would frame every group, and a border on the fieldset
   itself runs THROUGH the legend rather than under it. min-width:0
   matters: a fieldset defaults to min-content width, which stops the
   numeric grid from shrinking to fit a phone. */
.pu-fs{border:0;padding:0;margin:1.5rem 0 0;min-width:0}
.pu-fs:first-of-type{margin-top:.5rem}
.pu-fs>legend{width:100%;font-weight:600;padding:0 0 .35rem;margin:0;
  border-bottom:1px solid var(--pu-border-subtle)}
.pu-fs>legend+label{margin-top:.75rem}
.pu-fs .pu-fs{margin-top:1.25rem}
.pu-fs .pu-fs>legend{font-size:.875rem;border-bottom:0;padding-bottom:0}
.pu-help{font-size:.8125rem;color:var(--pu-text-secondary);margin:.25rem 0 0}
.pu-help code{font-family:var(--pu-font-mono);font-size:.8125rem}
.pu-form-errors{margin:.25rem 0 .75rem}
/* The seven numbers: two columns on a 390px phone (8rem each fits), and
   never more than four, so the two rows the labels are written for hold.
   Each cell is a subgrid of label / input / error / help rows shared
   across the row, so a label that wraps in one cell does not push its
   input out of line with its neighbours'. */
.pu-num-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(8rem,calc(25% - .75rem)),1fr));gap:0 1rem}
.pu-num-grid>div{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
.pu-num-grid>div>label{align-self:end}
/* Conditional fields without a script: the scheduling column only means
   something for a team owner, and location details only for a location
   that has some. Hidden here, ignored by the server either way
   (readEventTypeForm), so an old browser that shows them loses nothing. */
form:has(#owner option[value=""]:checked) .pu-sched-wrap{display:none}
form:has(#locationType option[value="google_meet"]:checked) .pu-loc-wrap{display:none}
/* Hosts: one grid row per host — name, attendance or weight, schedule —
   stacking to a single column on a phone, where three table columns
   squeeze each control to a few characters. */
.pu-host-row{display:grid;grid-template-columns:minmax(10rem,1fr) 9rem 1fr;gap:.5rem 1rem;align-items:center;
  padding:.4rem 0;border-top:1px solid var(--pu-border-subtle)}
.pu-host-row:last-of-type{border-bottom:1px solid var(--pu-border-subtle)}
.pu-host-head{font-size:.8125rem;font-weight:600;color:var(--pu-text-secondary);border-top:0;padding-top:0}
.pu-host-name{display:flex;align-items:center;gap:.6rem;margin:0;font-weight:400;min-width:0}
.pu-host-name input{width:auto;margin:0}
.pu-host-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .pu-host-row{grid-template-columns:1fr;gap:.4rem;padding:.6rem 0}
  .pu-host-head{display:none}
}
/* shell, calendars, keys */
/* A status strip that is not a success: "Calendar connected." and "add your
   name" wore the success badge's green, which made every notice look like
   praise. Info tokens, one quiet accent edge, ordinary text. */
.pu-notice{display:block;margin:0 0 1.25rem;padding:.5rem .75rem;border-radius:var(--pu-radius);
  background:var(--pu-status-info-bg);border-left:3px solid var(--pu-status-info);
  color:var(--pu-text-primary);font-size:.875rem}
.pu-notice a{font-weight:600}
/* Badge states, in the brand's own vocabulary: a filled dot is "confirmed",
   a ring is "open" — so Connected vs Needs reconnect reads without colour
   as well as with it. The danger badge keeps a pill background in dark mode
   because the tokens carry one; the old inline colour did not. */
.pu-badge-dot::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin:0 .35rem .1rem 0;
  border-radius:99px;background:currentColor;vertical-align:middle}
.pu-badge-danger{background:var(--pu-status-danger-bg);color:var(--pu-status-danger)}
.pu-badge-success{padding:0;background:transparent;color:#15803D}
:root[data-theme=dark] .pu-badge-success{color:#86EFAC}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pu-badge-success{color:#86EFAC}}
.pu-badge-warn{background:var(--pu-status-warning-bg);color:var(--pu-status-warning)}
/* Phone confirmed by a texted code (business/phone-verification.ts): a filled check circle after the guest's name. */
.pu-verified{display:inline-flex;align-items:center;gap:.25rem;margin-left:.3rem;vertical-align:-.125em;color:#1F9D55;--pu-verified-on:#FFFFFF}
.pu-verified svg{display:block;flex:none;width:.95em;height:.95em}
.pu-verified path{stroke:var(--pu-verified-on)}
.pu-verified.is-labelled{margin:0;vertical-align:baseline;font-size:.75rem;font-weight:600;white-space:nowrap}
.pu-verified.is-labelled svg{width:13px;height:13px;align-self:center}
:root[data-theme=dark] .pu-verified{color:#4ADE80;--pu-verified-on:#0B2E1A}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pu-verified{color:#4ADE80;--pu-verified-on:#0B2E1A}}
/* A booking awaiting the host (migrations/0025): its Confirm sits beside the row's link, not inside it. */
.pu-booking-row:has(.pu-booking-confirm){display:flex;align-items:center;gap:.5rem}
.pu-booking-row:has(.pu-booking-confirm) .pu-booking-link{flex:1 1 auto;min-width:0}
.pu-booking-confirm{margin:0;flex-shrink:0}
.pu-confirm-callout{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0 0 1rem}
.pu-confirm-callout>div{flex:1 1 18rem}
.pu-confirm-callout form{margin:0}
/* Decline / Cancel confirmation (confirmActionForm): the browser's modal dialog, styled. */
.pu-confirm-form{margin:0}
.pu-dialog{width:min(28rem,calc(100% - 2rem));padding:1.5rem;border:1px solid var(--pu-line);
  border-radius:var(--pu-radius-lg);background:var(--pu-surface-raised);color:var(--pu-ink-950);
  box-shadow:0 24px 64px rgba(24,24,27,.24)}
.pu-dialog::backdrop{background:var(--pu-surface-overlay)}
.pu-dialog h2{margin:0 0 .5rem;font-size:1.25rem}
.pu-dialog p{margin:0 0 .5rem}
.pu-dialog textarea{min-height:4.5rem}
.pu-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}
.pu-confirm-callout>.pu-confirm-actions{display:flex;flex-wrap:wrap;gap:.5rem;flex:0 0 auto;margin-left:auto}
.pu-badge-danger::before{background:none;border:1.5px solid currentColor;box-sizing:border-box}
/* A destructive action that is not the card's purpose: text in the danger
   colour on a ghost frame, so Save stays the only solid button in the row. */
.pu-btn-ghost-danger{background:none;color:var(--pu-status-danger);border-color:var(--pu-border-subtle)}
.pu-btn-ghost-danger:hover{background:var(--pu-status-danger-bg);border-color:var(--pu-status-danger);
  color:var(--pu-status-danger)}
.pu-form-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
/* A checkbox with its label on one line, and the label at body weight: the
   heading above the group carries the emphasis, not every option. */
.pu-check{display:flex;align-items:flex-start;gap:.5rem;font-weight:400;margin:.35rem 0;font-size:.9375rem}
.pu-check input{margin-top:.25rem;flex:none}
/* The one-time key, shown whole: a mono block that breaks anywhere rather
   than a single-line input that clips the tail on a phone. */
.pu-key{display:block;margin:0;padding:.75rem .9rem;background:var(--pu-url-bg);border:1px solid var(--pu-line);
  border-radius:var(--pu-radius);font-family:var(--pu-font-mono);font-size:.8125rem;
  word-break:break-all;white-space:pre-wrap;user-select:all;-webkit-user-select:all}

/* first-run, settings, admin */
/* The empty-home checklist. Each step's mark is the slot vocabulary in
   miniature: an open ring while the step is still to do, the filled green
   dot once it is done — the same two states a guest sees on the booking
   page, so the dashboard and the product share one language. */
.pu-setup-steps{list-style:none;margin:1rem 0 1.25rem;padding:0;display:grid;gap:.85rem}
.pu-setup-step{display:flex;align-items:flex-start;gap:.75rem}
.pu-setup-step a{font-weight:600;color:var(--pu-text-primary);text-decoration:none}
.pu-setup-step a:hover{color:var(--pu-green-700);text-decoration:underline}
.pu-setup-mark{flex:none;width:.875rem;height:.875rem;margin-top:.3rem;border-radius:99px;
  border:2px solid var(--pu-border-strong);background:transparent}
.pu-setup-done .pu-setup-mark{background:var(--pu-green-700);border-color:var(--pu-green-700)}
.pu-setup-done a{color:var(--pu-text-secondary);font-weight:500}
/* A standing caution that is not an error: the base .pu-callout is the
   danger tint, which is right for "this will break links" and wrong for
   "this is probably not what you meant" — a page that shouts at both
   teaches the host to scroll past both. */
.pu-callout-warn{background:var(--pu-status-warning-bg);border-color:var(--pu-warn)}

/* logos and team settings */
.pu-logo-panel{display:flex;flex-direction:row;align-items:flex-start;gap:1rem;width:auto;max-width:none;margin:0 0 1.25rem;text-align:left}
.pu-logo-panel>div{flex:1 1 auto;min-width:0}
.pu-logo-panel .pu-file-btn{margin-top:0}
.pu-team-settings{margin-top:1.25rem;border-top:1px solid var(--pu-line);padding-top:.75rem}
.pu-team-settings>summary{cursor:pointer;font-weight:600;padding:.25rem 0}
.pu-team-settings[open]>summary{margin-bottom:.75rem}
.pu-note-photo{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.pu-note-photo img{display:block;max-width:100%;max-height:9rem;border-radius:12px;object-fit:cover}
.pu-note-photo-actions{display:flex;align-items:center;gap:.75rem}
.pu-note-photo-actions form{margin:0}
/* hosts editor */
/* The Hosts block: move buttons, a note under each schedule select and the
   guest-facing preview line. Under 640px the row still stacks; the move
   buttons share the name line, right-aligned, since a stacked row with
   its arrows at the bottom reads as belonging to the row below. */
.pu-host-row{grid-template-columns:minmax(10rem,1fr) 9rem 1fr auto}
.pu-host-row-rotation{grid-template-columns:minmax(10rem,1fr) 1fr auto}
.pu-host-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .5rem}
.pu-host-tools .pu-btn{padding:.3rem .6rem;font-size:.8125rem}
.pu-host-move{display:flex;gap:.25rem;justify-content:flex-end}
.pu-host-move-btn{width:2rem;height:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius);
  color:var(--pu-text-secondary);font-size:.625rem;line-height:1;cursor:pointer}
.pu-host-move-btn:hover:not(:disabled){border-color:var(--pu-green-700);color:var(--pu-green-700)}
.pu-host-move-btn:disabled{opacity:.35;cursor:default}
.pu-host-sched-note{display:block;margin-top:.2rem;font-size:.75rem;line-height:1.35;color:var(--pu-text-secondary);overflow-wrap:anywhere}
.pu-host-sched-note:empty{display:none}
.pu-host-preview{margin:.75rem 0 0;font-size:.9375rem;line-height:1.45;color:var(--pu-text-secondary);overflow-wrap:anywhere}
.pu-host-preview strong{color:var(--pu-text-primary);font-weight:600}
@media(max-width:640px){
  .pu-host-row{grid-template-columns:1fr auto}
  .pu-host-row>.pu-host-name{grid-column:1;grid-row:1}
  .pu-host-row>.pu-host-move{grid-column:2;grid-row:1}
  .pu-host-row>div:not(.pu-host-move){grid-column:1/-1}
}
/* bookings */
/* The list's tabs reuse the nav-link underline so "which view am I on"
   reads the same way "which page am I on" does above it. */
.pu-tabs{display:flex;gap:1.25rem;flex-wrap:wrap;border-bottom:1px solid var(--pu-line);margin:0 0 1rem}
.pu-tab{text-decoration:none;color:var(--pu-text-secondary);font-weight:500;padding:.5rem 0;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pu-tab:hover{color:var(--pu-text-primary)}
.pu-tab[aria-current="page"]{color:var(--pu-text-primary);font-weight:600;border-bottom-color:var(--pu-green-700)}
/* Rows are cards, not a table: three facts and a badge fit a phone without
   a scrolling wrapper, and the whole card is one tap target. */
.pu-bookings{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pu-booking-row{background:var(--pu-surface-raised);border:1px solid var(--pu-border-subtle);border-radius:var(--pu-radius)}
.pu-booking-link{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;padding:.85rem 1rem;
  color:inherit;text-decoration:none}
.pu-booking-link:hover{color:inherit}
.pu-booking-row:hover{border-color:var(--pu-green-700)}
.pu-booking-link .pu-time{flex:0 0 auto;font-size:.9375rem}
.pu-booking-main{flex:1 1 14rem;min-width:0}
.pu-booking-link .pu-badge{margin-left:auto}
.pu-bookings-empty{padding:1.5rem 0}
/* The home's next-bookings rows: the same link, laid out as the list it sits in. */
.pu-upcoming .pu-booking-link{display:block;padding:0}
/* Facts on the booking page: a label column on wide screens, stacked on a
   phone. The mono time gets its own line so the zone note under it wraps
   without splitting the timestamp. */
.pu-booking-facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:1rem 0 0;font-size:.9375rem}
.pu-booking-facts dt{font-family:var(--pu-font-display);font-weight:600;font-size:.8125rem;color:var(--pu-text-secondary);padding-top:.1rem}
.pu-booking-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pu-booking-facts dd .pu-time{display:block}
.pu-booking-facts dd .pu-muted{font-size:.8125rem}
@media(max-width:519px){.pu-booking-facts{grid-template-columns:1fr;gap:.15rem 0}
  .pu-booking-facts dd{margin-bottom:.6rem}}
.pu-participants{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pu-participant{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.pu-participant-name{flex:1 1 10rem;min-width:0;overflow-wrap:anywhere}
.pu-participant-badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.pu-participant-action{margin:0;margin-left:auto}
.pu-add-cohost{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--pu-line)}
.pu-add-cohost-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pu-add-cohost-row select{flex:1 1 12rem;width:auto}
.pu-day-heading{font-size:.9375rem;margin:1.25rem 0 .5rem}
.pu-day-heading:first-of-type{margin-top:.75rem}
/* The language switch (pages/lang-switch.ts): .pu-thumbseg with round flags.
   Buttons in Settings, links elsewhere, styled alike. */
.pu-lang{margin:0}
.pu-lang button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:40px;padding:0 1rem;border:0;
  border-radius:9px;background:none;color:var(--pu-text-secondary);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:color .25s;-webkit-tap-highlight-color:transparent}
.pu-lang a{min-height:40px;gap:.5rem;font-size:.875rem}
.pu-lang button:hover,.pu-lang button[aria-current]{color:var(--pu-text-primary)}
.pu-lang [aria-current]{pointer-events:none;cursor:default}
.pu-lang :focus-visible{outline:2px solid var(--pu-border-focus);outline-offset:-2px}
.pu-flag{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 .5px rgba(0,0,0,.18);
  filter:saturate(.55) opacity(.75);transition:filter .25s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.pu-lang [aria-current] .pu-flag{filter:none;transform:scale(1.08)}
.pu-lang :active .pu-flag{transform:scale(.92)}
.pu-lang-card .pu-lang{display:grid;width:100%;max-width:22rem}
.pu-lang-foot{display:flex;justify-content:center;margin:1.5rem 0 .5rem}
.pu-lang-foot .pu-lang a{min-height:34px;padding:0 .8rem;font-size:.8125rem}
.pu-lang-foot .pu-flag{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.pu-flag{transition:none}}