/* Design tokens and component appearance: media, colour, type and
 * decoration. Placement, spacing and the type scale are generated into
 * layout.css. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-a20dcb75261cefb6.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/static/fonts/instrument-serif-latin-60c06664b5a95c7d.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/static/fonts/instrument-serif-italic-latin-6ee678c33f388dd7.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("/static/fonts/albert-sans-latin-da8688506b698bc9.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Registered so getComputedStyle() returns a resolved time. */
@property --morph-duration {
  syntax: "<time>";
  initial-value: 200ms;
  inherits: true;
}

@property --navigation-offset-inline {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --navigation-offset-block {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --surface-edge {
  syntax: "<length>";
  initial-value: 8px;
  inherits: true;
}

@property --surface-foot {
  syntax: "<length>";
  initial-value: 8px;
  inherits: true;
}

@property --surface-headroom {
  syntax: "<length>";
  initial-value: 48px;
  inherits: true;
}

@property --surface-measure {
  syntax: "<length>";
  initial-value: 512px;
  inherits: true;
}

/* Surface motion channels, written by the runtime. Non-inheriting, so
 * frames don't restyle large subtrees. */
@property --dim { syntax: "<number>"; initial-value: 0; inherits: false; }
/* The front page photo's top colour, also the body's. Registered so it
 * transitions. */
@property --stage-top { syntax: "<color>"; initial-value: transparent; inherits: true; }
@property --stage-top-spread { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --page-shown { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --p { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dy { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dx { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dc { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --morph { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --scrub { syntax: "<number>"; initial-value: 0; inherits: false; }

@property --surface-progress { syntax: "*"; inherits: false; }
@property --surface-width { syntax: "*"; inherits: false; }
@property --surface-height { syntax: "*"; inherits: false; }
@property --surface-bottom { syntax: "*"; inherits: false; }
@property --surface-radius { syntax: "*"; inherits: false; }
@property --surface-pull { syntax: "*"; inherits: false; }
@property --surface-pull-y { syntax: "*"; inherits: false; }
@property --surface-pull-scale { syntax: "*"; inherits: false; }
@property --photo-pull { syntax: "*"; inherits: false; }
@property --photo-gone { syntax: "*"; inherits: false; }

@property --surface-width-collapsed { syntax: "*"; inherits: false; }
@property --surface-width-expanded { syntax: "*"; inherits: false; }
@property --surface-height-collapsed { syntax: "*"; inherits: false; }
@property --surface-height-expanded { syntax: "*"; inherits: false; }
@property --surface-bottom-collapsed { syntax: "*"; inherits: false; }
@property --surface-bottom-expanded { syntax: "*"; inherits: false; }
@property --surface-radius-collapsed { syntax: "*"; inherits: false; }
@property --surface-radius-expanded { syntax: "*"; inherits: false; }
@property --surface-left-collapsed { syntax: "*"; inherits: false; }
@property --surface-left-expanded { syntax: "*"; inherits: false; }
@property --surface-top-collapsed { syntax: "*"; inherits: false; }
@property --surface-top-expanded { syntax: "*"; inherits: false; }
@property --surface-drop { syntax: "*"; inherits: false; }
@property --surface-lift { syntax: "*"; inherits: false; }
@property --surface-rise { syntax: "*"; inherits: false; }
@property --surface-grow { syntax: "*"; inherits: false; }
@property --surface-anchor-x { syntax: "*"; inherits: false; }
@property --surface-anchor-y { syntax: "*"; inherits: false; }
@property --surface-grow-y { syntax: "*"; inherits: false; }
@property --surface-grown-x { syntax: "*"; inherits: false; }
@property --surface-grown-y { syntax: "*"; inherits: false; }
@property --surface-cover-scale { syntax: "*"; inherits: false; }
@property --surface-resting-scale { syntax: "*"; inherits: false; }
@property --surface-open-scale { syntax: "*"; inherits: false; }
@property --surface-leaving { syntax: "*"; inherits: false; }
@property --surface-arriving { syntax: "*"; inherits: false; }
@property --surface-resting-opacity { syntax: "*"; inherits: false; }
@property --surface-open-opacity { syntax: "*"; inherits: false; }

:root {
  --font-body: "Albert Sans", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  /* The front page's slogan alone. */
  --font-hero: "Instrument Serif", Georgia, serif;
  --font-mono: ui-monospace, monospace;
  /* The logotype keeps its nav-size letterforms (`--wordmark-size`) when
   * drawn larger. */
  --wordmark-optical-size: 18;
  /* The ground is a cool near-white, and opaque greys share its hue and
   * chroma. Surfaces are white with a quarter of the ground. Translucent
   * inks stay black. Mixes use oklab, since oklch's white hue of 0 skews
   * the result. */
  --ground: oklch(0.99 0.004 250);
  --text: oklch(from var(--ground) 0.16 c h);
  --text-muted: oklch(from var(--ground) 0.48 c h);
  --text-disabled: oklch(from var(--ground) 0.7 c h);
  /* A dark in the ground's hue at five times its chroma. */
  --ink: oklch(from var(--ground) 0.24 0.02 h);
  --ink-hover: oklch(from var(--ground) 0.3 0.02 h);
  --surface: color-mix(in oklab, oklch(1 0 0), var(--ground) 25%);
  --fill: oklch(from var(--ground) 0.892 c h);
  --line: oklch(0.1 0 0 / 0.2);
  --accent: oklch(0.7 0.15 210);
  --accent-strong: oklch(0.625 0.14 210);
  --accent-text: oklch(1 0 0);
  --interactive-wash: oklch(0.16 0 0 / 0.07);
  --accent-wash: oklch(0.7 0.15 210 / 0.1);
  /* The invitation's warm paper, brown-black ink and red stamp. */
  --paper: oklch(0.985 0.012 85);
  --paper-ink: oklch(0.25 0.03 50);
  --paper-stamp: oklch(0.52 0.17 28);
  /* Handwriting on the paper, and tape. */
  --paper-pen: oklch(0.5 0.14 255);
  --paper-tape: oklch(0.93 0.04 95 / 0.7);
  /* Font weights. A title is a step lighter and tighter than a heading. */
  --weight-light: 350;
  --weight-regular: 400;
  --weight-book: 450;
  --weight-medium: 500;
  --weight-title: 550;
  --weight-semibold: 600;
  --tracking-title: -0.012em;
  --control-radius: calc(var(--increment) * 4);
  /* A fully rounded end. */
  --radius-pill: 999px;
  --control-fill: color-mix(in oklab, var(--surface), var(--ground) 55%);
  --control-line: oklch(0.1 0 0 / 0.14);
  --control-line-hover: oklch(0.1 0 0 / 0.26);
  --control-focus-line: color-mix(in oklab, var(--accent-strong), var(--text) 12%);
  --control-focus-halo: color-mix(in oklch, transparent, var(--accent) 12%);
  --control-recess: inset 0 1px 1px oklch(0 0 0 / 0.035),
    inset 0 -1px 0 oklch(1 0 0 / 0.78);
  --minimum-target-size: calc(var(--increment) * 11);
  /* The focus ring's width and offsets, outside or inside when clipped. One
   * :focus-visible rule draws it, and contexts set only its colour or
   * offset. */
  --focus-ring-color: var(--accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-inset: -2px;
  /* Page layers, lowest first. Stacking inside a component uses plain
   * numbers. */
  --layer-back-room: 4;
  --layer-header: 5;
  --layer-action: 20;
  --layer-action-summoned: 30;
  --layer-sheet: 40;
  --layer-flight: 41;
  --layer-dialog: 50;
  /* A shorter shadow for fixed surfaces at the window's foot, reaching 12px
   * below and 8px to the sides, within their margins, since phone browsers
   * clip shadows at the viewport. */
  --shadow-foot-geometry: 0 var(--increment) calc(var(--increment) * 3)
    calc(var(--increment) * -1);
  --shadow-contact-geometry: 0 1px 2px;
  --shadow-contact-color: oklch(0 0 0 / 0.1);
  --shadow-contact: var(--shadow-contact-geometry) var(--shadow-contact-color);
  --shadow-ambient-geometry: 0 8px 24px -4px;
  --shadow-ambient-color: oklch(0 0 0 / 0.12);
  --shadow-ambient: var(--shadow-ambient-geometry) var(--shadow-ambient-color);
  /* Elevation levels for parts whose shadow follows their state, such as a
   * hover lift or a dragged block. Static surfaces take the
   * `surface-elevation` classes, built from the same shadows. */
  --elevation-resting: var(--shadow-contact);
  --elevation-raised: var(--shadow-contact), var(--shadow-ambient);
  /* The faint ring that holds a light surface's edge on a light ground
   * (`surface-elevation-outline`). */
  --elevation-outline-color: oklch(0.1 0 0 / 0.08);
  /* A hairline is one device pixel, and a thin line one CSS pixel. */
  --border-width-hairline: 1px;
  --hairline-scale: 1;
  --border-width-thin: 1px;
  --booking-button-text: var(--accent-text);
  --booking-button-fill: rgb(0 178 212);
  --booking-button-inner-light: rgb(0 235 255 / 0.72);
  --booking-button-inner-dark: rgb(0 110 139 / 0.38);
  --booking-button-shadow: rgb(0 77 99 / 0.2);
  /* Free time in green, and its mix with the chosen fill. */
  --availability-fill: oklch(0.945 0.05 150);
  --availability-ink: oklch(0.34 0.07 152);
  --availability-selected: oklch(0.5 0.12 150);
  --availability-covered: oklch(0.9 0.08 150);
  /* Lane colours on the hours page (`seller::hours`), distinct from the
   * availability green and the accent. */
  --hours-lane-1: oklch(0.52 0.1 255);
  --hours-lane-1-fill: oklch(0.93 0.035 255);
  --hours-lane-2: oklch(0.52 0.14 315);
  --hours-lane-2-fill: oklch(0.94 0.04 315);
  --hours-lane-3: oklch(0.55 0.12 60);
  --hours-lane-3-fill: oklch(0.94 0.045 70);
  /* Attention, such as a failed payment or a refused form. */
  --attention: oklch(0.48 0.19 28);
  /* A colour per report kind. */
  --kind-bug: oklch(0.55 0.17 27);
  --kind-feedback: oklch(0.52 0.13 250);
  --kind-idea: oklch(0.62 0.13 75);
  /* A person's disc ink and wash, by hue. */
  --avatar-ink-lightness: 0.35;
  --avatar-ink-chroma: 0.08;
  --avatar-wash-lightness: 0.92;
  --avatar-wash-chroma: 0.05;
  /* A recess a shade darker than the page. */
  --well: color-mix(in oklab, var(--ground), var(--text) 4%);
  /* A text-coloured fill under a pointer. */
  --text-hover: oklch(from var(--ground) 0.23 c h);
  /* Colours over photos and maps. */
  --on-photo: oklch(1 0 0);
  --on-photo-hover: #e8ebe9;
  --photo-ground: #171a18;
  --photo-scrim: oklch(0.08 0 0 / 0.3);
  /* Shadow strengths, darker over photos. */
  --shadow-ink: oklch(0 0 0);
  /* A recessed pocket lit from above (`.surface-pocket`). */
  --recess-floor-open: oklch(0 0 0 / 0.015);
  --recess-floor-walled: oklch(0 0 0 / 0.055);
  --recess-shade: oklch(0 0 0 / 0.22);
  --recess-shade-shallow: oklch(0 0 0 / 0.16);
  --recess-shade-deep: oklch(0 0 0 / 0.3);
  --recess-lip: oklch(1 0 0 / 0.95);
  --recess-lit: oklch(1 0 0 / 0.25);
  --shadow-on-photo-contact: 0 1px 2px color-mix(in oklch, var(--shadow-ink) 24%, transparent);
  --shadow-on-photo-ambient:
    0 4px 12px -2px color-mix(in oklch, var(--shadow-ink) 24%, transparent);

  /* Surface and text paint. Brand sites (`static/sites/`) override these
   * and the palette, so rules must read them here. */
  --card-fill: var(--surface);
  --card-fill-hover: color-mix(in oklab, var(--surface), var(--text) 4%);
  --card-backdrop: none;
  --card-picture-fill: var(--fill);
  --card-band-fill: var(--surface);
  /* The header bar's and foot action's glass. */
  --chrome-glass-fill: oklch(from var(--surface) l c h / 0.74);
  --chrome-glass-blur: 12px;
  --chrome-glass-saturation: 3.6;
  --chrome-glass-contrast: 1;
  --chrome-glass-brightness: 1.15;
  /* Raised glass for presses and cards on glass, slightly translucent to
   * take its tint. */
  --chrome-glass-raised-fill: oklch(1 0 0 / 0.78);
  /* Hovered, it turns opaque instead of greying. */
  --chrome-glass-raised-fill-hover: oklch(1 0 0);
  /* A round head button's fill by material (`.surface-press`; light glass
   * overrides it). Cards take `--card-fill`. */
  --surface-press-fill: var(--control-fill);
  --surface-press-fill-hover: color-mix(in oklab, var(--control-fill), var(--text) 6%);
  /* How much of what lies under a surface (`--surface-ground`) tints its
   * opaque parts, matching how much shows through its material. */
  --surface-ground-share: 0%;
  /* How far below the band's centre a head's content and the close's X sit.
   * The surface's rounded top takes mass from the band's upper part, so
   * content centred on the band looks high. */
  --surface-head-optical: calc(var(--increment) / 2);
  /* Darker glass over photos. */
  --photo-glass-fill: oklch(0.08 0 0 / 0.46);
  --photo-glass-blur: 8px;
  --photo-glass-saturation: 2.8;
  --photo-glass-contrast: 1.12;
  --photo-glass-brightness: 0.76;
  /* A lifted surface's edge light. */
  --edge-light-fill: oklch(1 0 0 / 0.12);
  --edge-light-saturation: 3.6;
  /* Seller prose, and how secondary text blends. Dark sites use
   * plus-lighter. */
  --text-prose: var(--text);
  --text-secondary-blend: normal;
  /* A disabled press. */
  --control-disabled-fill: var(--fill);
  /* Map tile treatment, and how the location card's map meets its copy. */
  --map-tile-filter: none;
  --veil-display: block;
  --location-map-fade-stacked: none;
  --location-map-fade-beside: none;
  /* Light or dark form controls and scrollbars. */
  --color-scheme: light;
  /* How drawings such as floor plans are shown. */
  --drawing-filter: none;
  /* How much black darkens a photo ground. */
  --ground-image-shade: 66%;
  /* The ground's shade colour. */
  --ground-shade-ink: black;

  /* Motion timing, read by the runtime. */
  --interaction-duration: 200ms;
  --morph-duration: var(--interaction-duration);
  --number-input-debounce-delay: 1000ms;
  --navigation-feedback-delay: 80ms;
  --navigation-progress-delay: 1500ms;
  --navigation-stalled-delay: 8000ms;
  --navigation-exit-duration: 120ms;
  --foot-action-entrance-duration: calc(1.5 * var(--interaction-duration));
  /* Height glides. A calendar fold's halves each take a press's time, since
   * at the glide's tempo a fold took about 0.95s (measured 2026-10-31). */
  --resize-duration: calc(1.25 * var(--interaction-duration));
  --resize-easing: cubic-bezier(0.2, 0, 0, 1);
  --calendar-fold-duration: var(--interaction-duration);
  --calendar-fold-easing: var(--resize-easing);
  --foot-action-entrance-delay: 300ms;
  --navigation-feedback-duration: 600ms;
  --navigation-feedback-transition-delay: 300ms;
  --navigation-offset-inline: calc(var(--increment) * 4);
  --navigation-offset-block: 0px;
  --pressed-opacity: 0.64;
  --navigation-pending-opacity: 0.76;
  --navigation-stalled-opacity: 0.28;

  /* The elements that read the surface channels. New hooks must join these
   * lists, since setting them on :root would make them inherit. */
  --reads-endpoints: [data-part="foot-action"], [data-foot-action-content],
    [data-sheet], [data-sheet] [data-surface-content];
  --reads-p: body, [data-part="page"], [data-part="foot-action"],
    [data-foot-action-surface], [data-foot-action-content],
    [data-sheet], [data-sheet] [data-surface-content];
  --reads-dy: body, [data-part="page"], [data-part="foot-action"],
    [data-sheet] [data-surface-content], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next];
  --reads-dx: body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next];
  --reads-dc: [data-part="foot-action"], [data-sheet] [data-surface-content];
  --reads-morph: body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next],
    [data-gallery-flight-chrome];
  --reads-scrub: [data-lightbox-thumbnails];

  --p: 0;
  --dy: 0;
  --dx: 0;
  --dc: 0;
  --morph: 0;
  --scrub: 0;
  --spring-k: 380;
  --spring-zeta: 0.82;
  /* How a summoned surface's resting face hands over to its open face.
   * Both faces scale and stay pinned with the shell, so they cross at
   * matching sizes. The resting face leaves over progress 0 to `--surface-leave`,
   * fading by the square of its window so it doesn't hold near solid. The
   * open face arrives over `--surface-arrive-from` to `--surface-arrive-to`
   * on a smoothstep. */
  --surface-leave: 0.3;
  --surface-arrive-from: 0.1;
  --surface-arrive-to: 0.6;
  --drag-limit: 48;
  --drag-commit: 32;
  /* Unitless pixels. Five is the clearance before browser chrome treats the
   * edge as viewport-spanning, tested on device. */
  --pull-edge: 5;
  --drag-catch: 80ms;
  --drag-coast: 100ms;
  --drag-carry: 1;
  --drag-glide: 500ms;
  /* The hero photo crossfade (`static/search-examples.js`). */
  --hero-crossfade: 900ms;
  --pull-size-down: -0.12;
  --pull-size-up: 0.15;
  --pull-t-down: 0.2;
  --pull-t-up: 1;
  --surface-landing-distance: max(
    calc(var(--increment) * 30),
    100dvh - calc(var(--increment) * 36)
  );
  --dim-sheet: 0.4;
  --dim-lightbox: 0.97;
  --lightbox-room: 0px;
}

@media (color-gamut: p3) {
  :root {
    --booking-button-fill: color(display-p3 0 0.68 0.815);
    --booking-button-inner-light: color(display-p3 0.3 0.9075 0.985 / 0.72);
    --booking-button-inner-dark: color(display-p3 0 0.4225 0.5325 / 0.38);
    --booking-button-shadow: color(display-p3 0 0.295 0.38 / 0.2);
  }
}

@media (min-resolution: 2dppx) {
  :root {
    --border-width-hairline: 0.5px;
    --hairline-scale: 0.5;
  }
}

@media (min-resolution: 3dppx) {
  :root {
    --border-width-hairline: 0.333333px;
    --hairline-scale: 0.333333;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --interaction-duration: 0ms;
    --navigation-exit-duration: 0ms;
    --navigation-feedback-duration: 0ms;
    --navigation-feedback-transition-delay: 0ms;
    --foot-action-entrance-delay: 0ms;
    --drag-glide: 0ms;
    --hero-crossfade: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  overflow-anchor: none;
}

html:has([data-rt-summoned]) {
  overflow: hidden;
}

/* `hidden` wins over any display rule (notes/visual.md). */
[hidden],
[data-rt-hidden] {
  display: none !important;
}

/* Page components travel on navigation. The header isn't one. */
[data-page-component] {
  transition: opacity var(--interaction-duration);
}

footer[data-page-component] {
  --navigation-offset-inline: 0px;
  --navigation-offset-block: calc(var(--increment) * 2);
}

:where(a, button)[data-rt-pressed] {
  opacity: var(--pressed-opacity);
  transition: opacity var(--interaction-duration);
}

/* Pending components dim, or only the part a press moves
 * (`data-rt-pending-part`). A held footer (`data-rt-holding`) doesn't. */
[data-region] {
  transition: opacity var(--interaction-duration);
}

html[data-rt-nav-active]:not([data-rt-pending-part]) [data-page-component]:not([data-rt-holding]),
html[data-rt-nav-active] [data-rt-pending] {
  opacity: var(--navigation-pending-opacity);
  transition-duration: var(--navigation-feedback-duration);
  transition-delay: var(--navigation-feedback-transition-delay);
}

html[data-rt-nav-slow] {
  cursor: progress;
}

html[data-rt-nav-stalled] [data-rt-pressed] {
  animation: navigation-stalled 1200ms ease-in-out infinite;
}

@keyframes navigation-stalled {
  50% {
    opacity: var(--navigation-stalled-opacity);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-rt-nav-stalled] [data-rt-pressed] {
    animation: none;
  }
}

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--ground), var(--text) calc(var(--dim) * 100%));
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* The dim is an ink layer in normal flow, not a fixed scrim, which changes
 * iOS Safari's chrome. One channel drives the dim, the chrome tint and the
 * surface. */
body,
.page {
  transition: --dim var(--interaction-duration);
}

/* How much the page shows, on the body, so Safari's edge tint from the
 * body follows travels and the pending state. */
body {
  transition:
    --dim var(--interaction-duration),
    --page-shown var(--interaction-duration);
}

html[data-rt-nav-active]:not([data-rt-pending-part]) body {
  --page-shown: var(--navigation-pending-opacity);
  transition:
    --dim var(--interaction-duration),
    --page-shown var(--navigation-feedback-duration) var(--navigation-feedback-transition-delay);
}

.backdrop {
  min-block-size: 100dvh;
  background: var(--text);
}

.page {
  min-block-size: 100dvh;
  overflow-x: clip;
  background: var(--ground);
  opacity: calc(1 - var(--dim));
}

html:has([data-rt-summoned]) .page {
  pointer-events: none;
}

/* No default margins. Spacing is the layout's or the component's. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, hr) {
  margin: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  appearance: none;
}

/* Links take the accent, at zero specificity so components override it. */
:where(a:not([class])) {
  color: var(--accent-strong);
  text-underline-offset: 0.18em;
}

/* Alternatives, longest first. The runtime shows the first that fits
 * (`fitForms`). Without it the first shows, clipped. */
[data-fit]:not([data-rt-fit]) > [data-fit-form]:not(:first-child),
[data-fit][data-rt-fit] > [data-fit-form]:not([data-rt-chosen]) {
  display: none;
}

/* No tap highlight. Presses use `data-rt-pressed`. */
:where(a, button, summary, label, input, select, textarea, [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

/* No scrollbar on swipe strips. */
:where(.venue-gallery-track, .venue-lightbox-strip, .calendar-rail,
  [data-sheet][data-rt-summoned] [data-surface-content]) {
  scrollbar-width: none;
}

:where(.venue-gallery-track, .venue-lightbox-strip, .calendar-rail,
  [data-sheet][data-rt-summoned] [data-surface-content])::-webkit-scrollbar {
  display: none;
}

/* Component summaries draw their own markers. */
summary[class] {
  list-style: none;
}

summary[class]::-webkit-details-marker {
  display: none;
}

h1,
h2,
h3,
h4,
legend,
.wordmark,
.text-display,
.text-title,
.text-subtitle {
  font-family: var(--font-display);
}

h1,
h2,
h3,
h4,
legend {
  font-weight: var(--weight-semibold);
}

.visually-hidden,
.visually-hidden-on-phones,
.day-book-steps :is(.field-label, .field-legend),
.flow-summary-bar .flow-continue > :not(.flow-continue-short) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The label shows from the first split rung up, and below it only the
 * glyph. */
@media (min-width: 688px) {
  .visually-hidden-on-phones {
    all: revert;
  }
}

/* The focus ring. Components set only `--focus-ring-color` or offset. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* The skip link: hidden until focused, then a pill above all layers. */
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: calc(var(--layer-dialog) + 1);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  translate: 0 calc(-100% - 16px);
}

/* The shadow only while shown, since it otherwise reached into the screen
 * under the Dynamic Island (reported 2026-10-16). */
.skip-link:focus-visible {
  box-shadow: var(--elevation-raised);
  translate: 0;
  --focus-ring-color: var(--text);
  outline-offset: var(--focus-ring-offset);
}

/* The stand-in field holding the iPhone keyboard (`holdKeyboard`): in view
 * to take focus, invisible, and 16px so iOS doesn't zoom. */
.keyboard-stand-in {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  pointer-events: none;
}

/* The skip link's target takes focus without a ring. */
main:focus {
  outline: none;
}

/* Secondary text beside what it qualifies. */
.muted {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A label in the body face, a step heavier than its content. */
.label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
}

/* Enlarges an inline control's hit area without changing layout. */
.minimum-hit-area {
  position: relative;
}

.minimum-hit-area::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: max(100%, var(--minimum-target-size));
  block-size: max(100%, var(--minimum-target-size));
  transform: translate(-50%, -50%);
}

/* A cropped photo over its blurred placeholder. Uses set the aspect and
 * corner. */
.photo {
  display: block;
  overflow: hidden;
  background-color: var(--fill);
  background-position: center;
  background-size: cover;
}

.photo > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A card: a lifted surface of the material it stands on (`--card-fill`),
 * clipped to its elevation's corner. Its height and rim come from the
 * `surface-elevation` classes. */
.card {
  overflow: hidden;
  border-radius: var(--surface-elevation-radius);
  background: var(--card-fill);
  -webkit-backdrop-filter: var(--card-backdrop);
  backdrop-filter: var(--card-backdrop);
  transition: background-color var(--interaction-duration);
}

@media (hover: hover) {
  :is(a, summary).card:hover {
    background: var(--card-fill-hover);
  }
}

/* Summoned surface geometry, interpolated between endpoints by the
 * progress, plus the pull. Surfaces set their endpoints. */
:where(
  [data-modal] :is([data-modal-shell], [data-modal-trigger], [data-surface-content]),
  [data-part="foot-action"],
  [data-foot-action-content],
  [data-sheet],
  [data-sheet] [data-surface-content]
) {
  --surface-progress: max(0, var(--p));
  /* Size moves by equal ratios, so both axes keep pace in proportion and
   * the shape changes evenly. Moving by equal steps, the axis that grows
   * more would trail far behind its end at the start of an open and the end
   * of a close. */
  --surface-grown-x: pow(var(--surface-grow), var(--surface-progress));
  --surface-grown-y: pow(var(--surface-grow-y), var(--surface-progress));
  --surface-width: calc(var(--surface-width-collapsed) * var(--surface-grown-x));
  --surface-height: calc(var(--surface-height-collapsed) * var(--surface-grown-y));
  /* The shell grows around its anchor point, which moves in equal steps
   * from the resting box's to the open box's. The faces are pinned there. */
  --surface-left: calc(
    (1 - var(--surface-progress))
      * (var(--surface-left-collapsed)
        + var(--surface-anchor-x, 0.5) * var(--surface-width-collapsed))
      + var(--surface-progress)
      * (var(--surface-left-expanded)
        + var(--surface-anchor-x, 0.5) * var(--surface-width-expanded))
      - var(--surface-anchor-x, 0.5) * var(--surface-width)
  );
  --surface-top: calc(
    (1 - var(--surface-progress))
      * (var(--surface-top-collapsed)
        + var(--surface-anchor-y, 0.5) * var(--surface-height-collapsed))
      + var(--surface-progress)
      * (var(--surface-top-expanded)
        + var(--surface-anchor-y, 0.5) * var(--surface-height-expanded))
      - var(--surface-anchor-y, 0.5) * var(--surface-height)
  );
  --surface-bottom: calc(
    (1 - var(--surface-progress)) * var(--surface-bottom-collapsed)
      + var(--surface-progress) * var(--surface-bottom-expanded)
  );
  --surface-radius: calc(
    (1 - var(--surface-progress)) * var(--surface-radius-collapsed)
      + var(--surface-progress) * var(--surface-radius-expanded)
  );
  /* The resting face is fitted inside the shell, growing by the lesser
   * growth, so a narrow trigger isn't blown up. The open face covers the
   * shell (`--surface-cover-scale`), the greater of the shell's shares of
   * the open box, so no glass stands empty beside it and it is clipped only
   * on the side the shell is still growing toward. `--surface-open-scale`
   * is the width share alone. */
  --surface-resting-scale: min(var(--surface-grown-x), var(--surface-grown-y));
  --surface-open-scale: calc(var(--surface-grown-x) / var(--surface-grow));
  --surface-cover-scale: max(
    var(--surface-open-scale),
    var(--surface-grown-y) / var(--surface-grow-y)
  );
  --surface-leaving: clamp(0, 1 - var(--p) / var(--surface-leave), 1);
  --surface-resting-opacity: calc(var(--surface-leaving) * var(--surface-leaving));
  --surface-arriving: clamp(
    0,
    (var(--p) - var(--surface-arrive-from))
      / (var(--surface-arrive-to) - var(--surface-arrive-from)),
    1
  );
  --surface-open-opacity: calc(
    var(--surface-arriving) * var(--surface-arriving) * (3 - 2 * var(--surface-arriving))
  );
  --surface-pull: calc(var(--dy) + var(--dc));
  --surface-pull-y: calc(
    clamp(0, var(--surface-pull), var(--drag-limit)) * var(--pull-t-down)
      + clamp(-1 * var(--drag-limit), var(--surface-pull), 0) * var(--pull-t-up)
  );
  --surface-pull-scale: calc(
    1
      + clamp(0, var(--surface-pull), var(--drag-limit)) / var(--drag-limit)
        * var(--pull-size-down)
      + clamp(0, -1 * var(--surface-pull), var(--drag-limit)) / var(--drag-limit)
        * var(--pull-size-up)
  );
}

/* Materials: how a surface mixes what is behind it. */
:where(.glass-material) {
  /* `--glass-solid` from 0 (glass) to 1 (opaque). The backdrop filter stays
   * constant. */
  --glass-material-solid: 0;
  --glass-material-solid-fill: var(--surface);

  background-color: color-mix(
    in srgb,
    var(--glass-material-fill),
    var(--glass-material-solid-fill) calc(var(--glass-material-solid) * 100%)
  );
  -webkit-backdrop-filter:
    blur(var(--glass-material-blur))
    saturate(var(--glass-material-saturation))
    contrast(var(--glass-material-contrast))
    brightness(var(--glass-material-brightness));
  backdrop-filter:
    blur(var(--glass-material-blur))
    saturate(var(--glass-material-saturation))
    contrast(var(--glass-material-contrast))
    brightness(var(--glass-material-brightness));
}

.glass-material-light {
  --card-fill: var(--chrome-glass-raised-fill);
  --card-fill-hover: var(--chrome-glass-raised-fill-hover);
  --surface-press-fill: var(--chrome-glass-raised-fill);
  --surface-press-fill-hover: var(--chrome-glass-raised-fill-hover);
  --surface-ground-share: 5%;
  --glass-material-fill: var(--chrome-glass-fill);
  --glass-material-blur: var(--chrome-glass-blur);
  --glass-material-saturation: var(--chrome-glass-saturation);
  --glass-material-contrast: var(--chrome-glass-contrast);
  --glass-material-brightness: var(--chrome-glass-brightness);
}

.glass-material-dark {
  --glass-material-fill: var(--photo-glass-fill);
  --glass-material-blur: var(--photo-glass-blur);
  --glass-material-saturation: var(--photo-glass-saturation);
  --glass-material-contrast: var(--photo-glass-contrast);
  --glass-material-brightness: var(--photo-glass-brightness);
}

/* Elevation: shadow, edge light and optional reflected colour. */
:where(.surface-elevation) {
  --surface-elevation-strength: 1;
  --surface-elevation-contact-shadow: 0 0 0 transparent;
  --surface-elevation-ambient-shadow: 0 0 0 transparent;
  --surface-elevation-outline: 0 0 0 0 transparent;
  --surface-elevation-edge-light-width: 0px;
  --surface-elevation-edge-light-fill: var(--edge-light-fill);
  --surface-elevation-edge-light-saturation: var(--edge-light-saturation);
  --surface-elevation-edge-light-contrast: 1.12;
  --surface-elevation-edge-light-brightness: 1.08;
  --surface-elevation-radius: 0px;

  position: relative;
  isolation: isolate;
  border-radius: var(--surface-elevation-radius);
}

:where(.surface-elevation.round) {
  --surface-elevation-radius: var(--corner-radius);
}

.surface-elevation-raised {
  --surface-elevation-contact-shadow:
    var(--shadow-contact-geometry)
    color-mix(
      in oklch,
      transparent,
      var(--shadow-contact-color) calc(var(--surface-elevation-strength) * 100%)
    );
  --surface-elevation-ambient-shadow:
    var(--surface-elevation-ambient-geometry, var(--shadow-ambient-geometry))
    color-mix(
      in oklch,
      transparent,
      var(--shadow-ambient-color) calc(var(--surface-elevation-strength) * 100%)
    );
}

/* Lying on its surface: the contact shadow alone. */
.surface-elevation-resting {
  --surface-elevation-contact-shadow:
    var(--shadow-contact-geometry)
    color-mix(
      in oklch,
      transparent,
      var(--shadow-contact-color) calc(var(--surface-elevation-strength) * 100%)
    );
}

/* Rims: the glass's saturating edge light, or a faint outline for an
 * opaque surface on a light ground. */
.surface-elevation-edge-light {
  --surface-elevation-edge-light-width: var(--border-width-hairline);
}

.surface-elevation-outline {
  --surface-elevation-outline: 0 0 0 var(--border-width-hairline)
    color-mix(
      in oklch,
      transparent,
      var(--elevation-outline-color) calc(var(--surface-elevation-strength) * 100%)
    );
}

:where(.surface-elevation-reflection) {
  --surface-elevation-reflection-blur: calc(var(--increment) * 5);
  --surface-elevation-reflection-scale: 1.01;
  --surface-elevation-reflection-opacity: 0.3;
  --surface-elevation-reflection-saturation: 1.7;
  --surface-elevation-reflection-contrast: 1.04;
  --surface-elevation-reflection-brightness: 1;

  position: relative;
  z-index: -1;
  opacity: var(--surface-elevation-reflection-opacity);
  filter:
    blur(var(--surface-elevation-reflection-blur))
    saturate(var(--surface-elevation-reflection-saturation))
    contrast(var(--surface-elevation-reflection-contrast))
    brightness(var(--surface-elevation-reflection-brightness));
  transform: scale(var(--surface-elevation-reflection-scale));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

/* The edge light, a filtered ring with corners and bands sharing one
 * ramp. */
.surface-elevation-edge-light::before {
  --surface-elevation-edge-light-band: calc(
    var(--surface-elevation-edge-light-width) + var(--surface-elevation-edge-light-width)
  );
  --surface-elevation-edge-light-mask:
    radial-gradient(
        circle at bottom right,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      top left / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at bottom left,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      top right / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at top left,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      bottom right / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at top right,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      bottom left / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    linear-gradient(
      to bottom,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) top center / calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius))
      var(--surface-elevation-edge-light-band) no-repeat,
    linear-gradient(
      to top,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) bottom center / calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius))
      var(--surface-elevation-edge-light-band) no-repeat,
    linear-gradient(
      to right,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) center left / var(--surface-elevation-edge-light-band)
      calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius)) no-repeat,
    linear-gradient(
      to left,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) center right / var(--surface-elevation-edge-light-band)
      calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius)) no-repeat;

  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--surface-elevation-edge-light-fill);
  -webkit-backdrop-filter:
    saturate(var(--surface-elevation-edge-light-saturation))
    contrast(var(--surface-elevation-edge-light-contrast))
    brightness(var(--surface-elevation-edge-light-brightness));
  backdrop-filter:
    saturate(var(--surface-elevation-edge-light-saturation))
    contrast(var(--surface-elevation-edge-light-contrast))
    brightness(var(--surface-elevation-edge-light-brightness));
  -webkit-mask: var(--surface-elevation-edge-light-mask);
  mask: var(--surface-elevation-edge-light-mask);
  pointer-events: none;
}

.surface-elevation-surface {
  position: relative;
  z-index: 0;
  box-shadow:
    var(--surface-elevation-outline),
    var(--surface-elevation-contact-shadow),
    var(--surface-elevation-ambient-shadow);
}

/* The venue gallery and its overlays. */
.venue-gallery {
  --gallery-slide: 0;
}

.venue-gallery-track {
  border-radius: inherit;
}

/* A wider glow, saturated and lightened, since a wider blur greys and
 * darkens it (measured 2026-10-19: 7 levels darker instead of 13, fading
 * by about 50px). */
.venue-gallery > .venue-gallery-reflection {
  --surface-elevation-reflection-blur: calc(var(--increment) * 10);
  --surface-elevation-reflection-saturation: 2.2;
  --surface-elevation-reflection-brightness: 1.6;
  --surface-elevation-reflection-opacity: 0.35;

  overflow: hidden;
  background: transparent;
  scroll-snap-type: none;
  overscroll-behavior: auto;
}

.venue-gallery-track:focus-visible {
  --focus-ring-color: var(--on-photo);
  outline-offset: -4px;
}

/* A `.photo` frame. */
.venue-gallery-item {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

.venue-gallery-reflection .venue-gallery-item {
  cursor: default;
}

.venue-gallery-item:focus-visible {
  z-index: 1;
  --focus-ring-color: var(--on-photo);
  outline-offset: -4px;
}

.venue-gallery-photo-count {
  --surface-elevation-radius: calc(var(--increment) * 4);
  --surface-elevation-contact-shadow: var(--shadow-on-photo-contact);
  --surface-elevation-ambient-shadow: var(--shadow-on-photo-ambient);

  display: var(--gallery-photo-count-display);
  position: absolute;
  inset-inline-end: calc(var(--increment) * 3);
  inset-block-end: calc(var(--increment) * 3);
  z-index: 2;
  color: var(--on-photo);
  pointer-events: none;
}

.venue-gallery-photo-count-surface {
  display: flex;
  align-items: center;
  block-size: calc(var(--increment) * 8);
  padding-inline: calc(var(--increment) * 3);
  overflow: hidden;
  border-radius: inherit;
}

.venue-gallery-photo-count-label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

.venue-gallery-pagination {
  --gallery-dot-size: 8;
  --gallery-pill-size: 24;
  --gallery-dot-gap: 4;
  --gallery-dot-step: calc(var(--gallery-dot-size) + var(--gallery-dot-gap));
  --gallery-dot-extra: calc(var(--gallery-pill-size) - var(--gallery-dot-size));
  --gallery-dot-window: 9;
  --gallery-visible-dots: min(var(--gallery-photo-count), var(--gallery-dot-window));
  --gallery-dot-shift: clamp(
    0,
    var(--gallery-slide) - (var(--gallery-dot-window) - 1) / 2,
    var(--gallery-photo-count) - var(--gallery-dot-window)
  );
  --gallery-dot-fade-start: clamp(0, var(--gallery-dot-shift), 1);
  --gallery-dot-fade-end: clamp(
    0,
    var(--gallery-photo-count) - var(--gallery-dot-window) - var(--gallery-dot-shift),
    1
  );
  --gallery-pagination-width: calc(
    var(--gallery-visible-dots) * var(--gallery-dot-step)
    - var(--gallery-dot-gap)
    + var(--gallery-dot-extra)
  );
  --surface-elevation-radius: calc(var(--increment) * 3);
  --surface-elevation-contact-shadow: var(--shadow-on-photo-contact);
  --surface-elevation-ambient-shadow: var(--shadow-on-photo-ambient);

  display: var(--gallery-pagination-display);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(var(--increment) * 3);
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
}

.venue-gallery-pagination-surface {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  inline-size: calc(var(--gallery-pagination-width) * 1px);
  gap: calc(var(--gallery-dot-gap) * 1px);
  padding: calc(var(--increment) * 2);
  overflow: hidden;
  border-radius: inherit;
}

.venue-gallery-pagination-dot {
  --gallery-dot-lead: clamp(
    0,
    var(--gallery-dot-index) - var(--gallery-slide),
    1
  );
  --gallery-dot-x: calc(
    (var(--gallery-dot-index) - var(--gallery-dot-shift)) * var(--gallery-dot-step)
    + var(--gallery-dot-lead) * var(--gallery-dot-extra)
  );
  --gallery-dot-nearness: clamp(
    0,
    1 - abs(var(--gallery-dot-index) - var(--gallery-slide)),
    1
  );
  --gallery-dot-midpoint: calc(var(--gallery-dot-x) + var(--gallery-dot-size) / 2);
  --gallery-dot-fit: min(
    1 - var(--gallery-dot-fade-start)
      * clamp(
        0,
        (var(--gallery-dot-step) - var(--gallery-dot-midpoint)) / var(--gallery-dot-step),
        1
      ),
    1 - var(--gallery-dot-fade-end)
      * clamp(
        0,
        (
          var(--gallery-dot-midpoint) - var(--gallery-pagination-width)
          + var(--gallery-dot-step)
        ) / var(--gallery-dot-step),
        1
      )
  );

  flex: none;
  inline-size: calc(
    (var(--gallery-dot-size) + var(--gallery-dot-nearness) * var(--gallery-dot-extra)) * 1px
  );
  block-size: calc(var(--gallery-dot-size) * 1px);
  border-radius: var(--radius-pill);
  background: color-mix(
    in oklch,
    var(--on-photo) calc((0.5 + 0.5 * var(--gallery-dot-nearness)) * 100%),
    transparent
  );
  scale: var(--gallery-dot-fit);
}

.venue-gallery-pagination-dot:first-child {
  margin-inline-start: calc(var(--gallery-dot-shift) * var(--gallery-dot-step) * -1px);
}

[data-gallery-flight-chrome][data-rt-lifted] {
  position: fixed;
  inset: auto;
  inset-inline-start: calc(var(--gallery-chrome-x) * 1px);
  inset-block-start: calc(var(--gallery-chrome-y) * 1px);
  z-index: var(--layer-flight);
  display: block;
  transform: none;
  /* Gallery chrome fades out during the lightbox flight. */
  opacity: clamp(0, 2 * var(--morph) - 1, 1);
}

/* Summoned surfaces drop the browser's popover and dialog box styles. */
:where(.venue-lightbox, .modal-shell, [data-sheet]) {
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  color: inherit;
  background: transparent;
  max-inline-size: none;
  max-block-size: none;
}

/* A sheet part stays in the page until summoned. */
:where([data-sheet]:not([data-rt-summoned])) {
  position: relative;
  inline-size: auto;
  block-size: auto;
}

/* The lightbox has no scrim. Its photo, chrome and the page dim share
 * channels, so pulling the photo reveals the page. */
.venue-lightbox {
  display: none;
  color: var(--on-photo);
}

.venue-lightbox[data-rt-summoned] {
  position: fixed;
  inset:
    max(calc(var(--increment) * 2), env(safe-area-inset-top))
    env(safe-area-inset-right)
    max(calc(var(--increment) * 2), env(safe-area-inset-bottom))
    env(safe-area-inset-left);
  z-index: var(--layer-sheet);
  display: grid;
  inline-size: auto;
  block-size: auto;
  place-items: center;
}

.venue-gallery-track [data-rt-away] {
  opacity: 0;
}

.venue-lightbox-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: 100%;
  inline-size: 100%;
  block-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  touch-action: pan-x;
}

.venue-lightbox-slide {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  scroll-snap-align: center;
}

.venue-lightbox-image {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: calc(100% - 2 * var(--lightbox-room));
  max-block-size: calc(100% - 2 * var(--lightbox-room));
  object-fit: contain;
  background-position: center;
  background-size: cover;
}

.venue-lightbox-image[data-rt-flight] {
  --held-scale: calc(1 + var(--photo-pull) * var(--photo-shrink));
  --flight-x: calc(var(--dx) + var(--morph) * (var(--morph-to-x) - var(--dx)));
  --flight-y: calc(var(--dy) + var(--morph) * (var(--morph-to-y) - var(--dy)));

  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: calc(-50% + var(--flight-x) * 1px) calc(-50% + var(--flight-y) * 1px);
  scale: var(--flight-scale);
}

.venue-lightbox-image[data-rt-flight="cell"] {
  --flight-k: max(
    calc(var(--morph-to-w) / var(--morph-w)),
    calc(var(--morph-to-h) / var(--morph-h))
  );
  --flight-scale: calc(var(--held-scale) + var(--morph) * (var(--flight-k) - var(--held-scale)));
  --flight-r: calc(var(--morph) / var(--flight-scale) * 1px);

  clip-path: inset(
    calc(var(--morph) * (var(--morph-h) - var(--morph-to-h) / var(--flight-k)) / 2 * 1px)
    calc(var(--morph) * (var(--morph-w) - var(--morph-to-w) / var(--flight-k)) / 2 * 1px)
    round calc(var(--morph-r-tl) * var(--flight-r))
      calc(var(--morph-r-tr) * var(--flight-r))
      calc(var(--morph-r-br) * var(--flight-r))
      calc(var(--morph-r-bl) * var(--flight-r))
  );
}

.venue-lightbox-image[data-rt-flight="point"] {
  --flight-scale: calc(var(--held-scale) * (1 - var(--morph)));
  opacity: calc(1 - var(--morph));
}

.venue-lightbox-close,
.venue-lightbox-previous,
.venue-lightbox-next,
.venue-lightbox-thumbnails {
  position: absolute;
  z-index: 1;
  opacity: calc(1 - var(--photo-gone, 0));
}

.venue-lightbox-close,
.venue-lightbox-previous,
.venue-lightbox-next {
  display: grid;
  inline-size: var(--minimum-target-size);
  block-size: var(--minimum-target-size);
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--on-photo);
  background: transparent;
  cursor: pointer;
}

.venue-lightbox-close .icon,
.venue-lightbox-previous .icon,
.venue-lightbox-next .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.venue-lightbox-close {
  inset-block-start: max(calc(var(--increment) * 3), env(safe-area-inset-top));
  inset-inline-end: max(calc(var(--increment) * 3), env(safe-area-inset-right));
}

.venue-lightbox-previous,
.venue-lightbox-next {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.venue-lightbox-previous {
  inset-inline-start: calc(var(--increment) * 4);
}

.venue-lightbox-next {
  inset-inline-end: calc(var(--increment) * 4);
}

.venue-lightbox-thumbnails {
  --slide: 0;
  --thumbnail-width: 56;
  --thumbnail-height: 40;
  --thumbnail-gap: 6;
  --thumbnail-growth: 0.12;
  --thumbnail-step: calc(var(--thumbnail-width) + var(--thumbnail-gap));
  --thumbnail-position: calc(var(--slide) + var(--scrub));

  inset-inline: 0;
  inset-block-end: max(calc(var(--increment) * 2), env(safe-area-inset-bottom));
  block-size: calc(
    var(--thumbnail-height) * (1 + var(--thumbnail-growth)) * 1px
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black calc(var(--thumbnail-step) * 1px),
    black calc(100% - var(--thumbnail-step) * 1px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black calc(var(--thumbnail-step) * 1px),
    black calc(100% - var(--thumbnail-step) * 1px),
    transparent
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: calc(1 - var(--photo-gone, 0));
  pointer-events: none;
}

.venue-lightbox-thumbnail-track {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: flex;
  inline-size: calc(
    (var(--thumbnail-count) * var(--thumbnail-step) - var(--thumbnail-gap)) * 1px
  );
  align-items: center;
  gap: calc(var(--thumbnail-gap) * 1px);
  translate:
    calc(
      -50%
        + ((var(--thumbnail-count) - 1) / 2 - var(--thumbnail-position))
          * var(--thumbnail-step) * 1px
    )
    -50%;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.venue-lightbox-thumbnail {
  --thumbnail-nearness: clamp(
    0,
    1 - abs(var(--thumbnail-index) - var(--thumbnail-position)),
    1
  );

  flex: 0 0 calc(var(--thumbnail-width) * 1px);
  inline-size: calc(var(--thumbnail-width) * 1px);
  block-size: calc(var(--thumbnail-height) * 1px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--increment) * 2);
  background: transparent;
  opacity: calc(0.42 + 0.58 * var(--thumbnail-nearness));
  scale: calc(1 + var(--thumbnail-nearness) * var(--thumbnail-growth));
  cursor: pointer;
}

.venue-lightbox-thumbnail img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.venue-lightbox :is(button, [tabindex]):focus-visible {
  --focus-ring-color: var(--on-photo);
}

html:has(.venue-lightbox[data-rt-summoned]) {
  --drag-limit: 420;
  --drag-commit: 96;
  --photo-shrink: -0.25;
  /* The foot action ignores the lightbox's pull. */
  --pull-t-down: 0;
  --pull-t-up: 0;
  --pull-size-down: 0;
  --pull-size-up: 0;
}

html:has(.venue-lightbox[data-rt-summoned])
  :is(body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next]) {
  --photo-pull: clamp(0, hypot(var(--dx), var(--dy)) / var(--drag-limit), 1);
  --photo-gone: calc(var(--photo-pull) + var(--morph) * (1 - var(--photo-pull)));
}

html:has(.venue-lightbox[data-rt-summoned]) :is(body, [data-part="page"]) {
  --dim: calc(var(--dim-lightbox) * (1 - var(--photo-gone)));
  transition-duration: 0s;
}

@media (max-width: 687.98px) {
  .venue-lightbox-previous,
  .venue-lightbox-next {
    display: none;
  }
}

@media (min-width: 688px) {
  :root {
    --lightbox-room: calc(var(--increment) * 8);
  }
}

/* A page's stage (`pages::Stage`): a full-width top area under the header,
 * which the content overlaps at its foot. The layout places it
 * (`stage-page-grid`), and this sets its size, breakout, motion and top
 * colour. Its ground is a photo (`stage-photo`) or a map (`stage-map`), and
 * its tone is dark or light. */
:root {
  /* The stage's height: 80% of the window, capped by a slowly growing
   * ceiling, with a floor fitting the slogan, search box, masthead room and
   * overlap. Constants tuned by eye. */
  --stage-block-size: max(
    var(--stage-overlap) + var(--home-stage-title-space, 0px) + var(--increment) * (16 + 40),
    min(80svh, 560px + 10vw)
  );
  /* How far the content overlaps the stage. */
  --stage-overlap: var(--radius);
  /* The search box rests mid-hero: 2 + 2 + 8 increments plus the drop. */
  --search-drop: calc(
    (var(--stage-block-size) - var(--stage-overlap)) / 2 - var(--increment) * 12
      + var(--home-stage-title-space, 0px) / 2
  );
}

/* The body takes the stage's top colour, since Safari tints the status
 * bar from the body. Dark stages are darkened for the masthead's white
 * text. */
body:has(.stage) {
  /* An uneven top (`--stage-top-spread`) is drawn darker: a sky at 0.08
   * keeps three quarters of its lightness, and 0.26 under half. Tuned by
   * eye. */
  --stage-top-shown: oklch(
    from var(--stage-top)
    calc(min(l, 0.5) * clamp(0.4, 0.88 - var(--stage-top-spread) * 1.6, 0.8)) c h
  );

  /* The window's top edge colour, fading to the ground during travel. */
  --stage-edge: color-mix(
    in srgb,
    var(--stage-top-shown),
    var(--ground) calc((1 - var(--page-shown)) * 100%)
  );

  background-color: color-mix(in srgb, var(--stage-edge), var(--text) calc(var(--dim) * 100%));
}

body:has(.stage[data-stage-tone="light"]) {
  --stage-top-shown: var(--stage-top);
}

/* The edge colour stands fixed behind the parallax stage
 * (`stage-parallax`), so what the stage uncovers under the Dynamic Island
 * matches. */
body:has(.stage) [data-part="page"] {
  position: relative;
}

body:has(.stage) [data-part="page"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -100svh;
  block-size: calc(100svh + var(--stage-block-size));
  background: var(--stage-edge);
  pointer-events: none;
}

body:has(.stage)[data-rt-nearer-bottom] {
  background-color: color-mix(in srgb, var(--ground), var(--text) calc(var(--dim) * 100%));
}

.stage {
  /* Full window width and over the top padding. The root clips scrollbar
   * overflow from 100vw. */
  margin-inline: calc(50% - 50vw);
  margin-block-start: calc(var(--increment) * -2);
  block-size: var(--stage-block-size);
  /* Fades in place on travel. */
  --navigation-offset-inline: 0px;
  /* Never faded by opacity, which desynced from the body's colour and
   * showed a hairline at the top on iOS (2026-10-26). The veil (`::after`)
   * fades it instead. Important to override the runtime's fade. */
  opacity: 1 !important;
  transition: none;
  position: relative;
  /* The ground fills the stage, since an auto row stops at the photo's
   * height. */
  grid-auto-rows: 100%;
}

.stage[data-stage-tone="dark"] {
  color: var(--on-photo);
}

/* The stage scrolls at half speed, on a scroll timeline. The whole stage
 * moves, veil included. */
@supports (animation-timeline: scroll()) {
  .stage {
    animation: stage-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 var(--stage-block-size);
  }
}

@keyframes stage-parallax {
  to {
    transform: translateY(calc(var(--stage-block-size) / 2));
  }
}

/* The slogan's parts scroll at different depths: the lead line furthest,
 * then the italic, then the wordmark. `--home-stage-depth` is each part's
 * speed relative to its container. Each fades out by `--home-stage-fade-by`
 * before the part below reaches it. */
.home-stage-title-lead {
  --home-stage-depth: 0.15;
  --home-stage-fade-by: calc(var(--home-stage-title-size) * 1.5);
}

.home-stage-title-line {
  --home-stage-depth: 0.22;
  --home-stage-fade-by: calc(var(--home-stage-title-size) * 2.8);
}

.home-stage-title-wordmark {
  --home-stage-depth: 0.08;
  --home-stage-fade-by: calc(var(--home-stage-title-size) * 3.4);

  display: inline-block;
}

@supports (animation-timeline: scroll()) {
  :is(.home-stage-title-lead, .home-stage-title-line, .home-stage-title-wordmark) {
    animation:
      home-stage-depth linear both,
      home-stage-fade ease-in both;
    animation-timeline: scroll(root), scroll(root);
    animation-range:
      0 var(--stage-block-size),
      0 var(--home-stage-fade-by);
  }
}

@keyframes home-stage-fade {
  to {
    opacity: 0;
  }
}

@keyframes home-stage-depth {
  to {
    transform: translateY(calc(var(--stage-block-size) * -1 * var(--home-stage-depth)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  :is(.home-stage-title-lead, .home-stage-title-line, .home-stage-title-wordmark) {
    animation: none;
  }
}

/* The stage's fade: the ground over it by `--page-shown`, which also mixes
 * the body's colour in the same frame. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ground) calc((1 - var(--page-shown)) * 100%), transparent);
  pointer-events: none;
}

.stage-photo {
  position: relative;
  /* Above the photos and below the masthead. */
  isolation: isolate;
  min-inline-size: 0;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background-color: transparent;
  background-position: center;
  background-size: cover;
}

/* The photo fades into the body's colour, its darkened top average
 * (`images.ground_top`), easing by a smoothstep. On phones the fade follows
 * a wide ellipse below the hero. `::before` blurs the top rows. */
.stage-photo {
  --stage-fade-at: 50% 130%;
  --stage-fade-size: 200% 130%;
  --stage-fade-from: 0.58;
  --stage-fade:
    radial-gradient(
      var(--stage-fade-size) at var(--stage-fade-at),
      transparent calc(var(--stage-fade-from) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.028)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.1) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.104)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.2) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.216)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.3) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.352)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.4) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.5)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.5) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.648)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.6) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.784)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.7) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.896)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.8) * 100%),
      oklch(from var(--stage-top-shown) l c h / 0.972)
    calc((var(--stage-fade-from) + (1 - var(--stage-fade-from)) * 0.9) * 100%),
      var(--stage-top-shown) 100%
    );
  background-color: var(--stage-top-shown);
}

/* Wide screens cap the photo at `--stage-photo-max`, with the colour
 * beyond. Top and side fades overlap into superelliptic corners. The side
 * fade slides in as the window approaches the cap. */
@media (min-width: 1024px) {
  .stage-photo {
    --stage-photo-max: 2560px;
    --stage-fade-top: 36%;
    --stage-fade-side-reach: 560px;
    --stage-fade-side: calc(
      (100% - min(100%, var(--stage-photo-max))) / 2
        - max(0px, var(--stage-photo-max) - 100%)
    );
    --stage-fade:
      linear-gradient(
        to bottom,
        var(--stage-top-shown) 0,
        oklch(from var(--stage-top-shown) l c h / 0.972) calc(var(--stage-fade-top) * 0.1),
        oklch(from var(--stage-top-shown) l c h / 0.896) calc(var(--stage-fade-top) * 0.2),
        oklch(from var(--stage-top-shown) l c h / 0.784) calc(var(--stage-fade-top) * 0.3),
        oklch(from var(--stage-top-shown) l c h / 0.648) calc(var(--stage-fade-top) * 0.4),
        oklch(from var(--stage-top-shown) l c h / 0.5) calc(var(--stage-fade-top) * 0.5),
        oklch(from var(--stage-top-shown) l c h / 0.352) calc(var(--stage-fade-top) * 0.6),
        oklch(from var(--stage-top-shown) l c h / 0.216) calc(var(--stage-fade-top) * 0.7),
        oklch(from var(--stage-top-shown) l c h / 0.104) calc(var(--stage-fade-top) * 0.8),
        oklch(from var(--stage-top-shown) l c h / 0.028) calc(var(--stage-fade-top) * 0.9),
        transparent var(--stage-fade-top)
      ),
      linear-gradient(
        to right,
        var(--stage-top-shown) var(--stage-fade-side),
        oklch(from var(--stage-top-shown) l c h / 0.972) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.1),
        oklch(from var(--stage-top-shown) l c h / 0.896) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.2),
        oklch(from var(--stage-top-shown) l c h / 0.784) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.3),
        oklch(from var(--stage-top-shown) l c h / 0.648) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.4),
        oklch(from var(--stage-top-shown) l c h / 0.5) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.5),
        oklch(from var(--stage-top-shown) l c h / 0.352) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.6),
        oklch(from var(--stage-top-shown) l c h / 0.216) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.7),
        oklch(from var(--stage-top-shown) l c h / 0.104) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.8),
        oklch(from var(--stage-top-shown) l c h / 0.028) calc(var(--stage-fade-side) + var(--stage-fade-side-reach) * 0.9),
        transparent calc(var(--stage-fade-side) + var(--stage-fade-side-reach)),
        transparent calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach)),
        oklch(from var(--stage-top-shown) l c h / 0.028) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.9),
        oklch(from var(--stage-top-shown) l c h / 0.104) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.8),
        oklch(from var(--stage-top-shown) l c h / 0.216) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.7),
        oklch(from var(--stage-top-shown) l c h / 0.352) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.6),
        oklch(from var(--stage-top-shown) l c h / 0.5) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.5),
        oklch(from var(--stage-top-shown) l c h / 0.648) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.4),
        oklch(from var(--stage-top-shown) l c h / 0.784) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.3),
        oklch(from var(--stage-top-shown) l c h / 0.896) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.2),
        oklch(from var(--stage-top-shown) l c h / 0.972) calc(100% - var(--stage-fade-side) - var(--stage-fade-side-reach) * 0.1),
        var(--stage-top-shown) calc(100% - var(--stage-fade-side))
      );
  }
}

.stage-photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  block-size: calc(var(--increment) * 28);
  -webkit-backdrop-filter: blur(calc(var(--increment) * 2));
  backdrop-filter: blur(calc(var(--increment) * 2));
  -webkit-mask-image: linear-gradient(to bottom, black 0 30%, transparent);
  mask-image: linear-gradient(to bottom, black 0 30%, transparent);
  pointer-events: none;
}

.stage-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the scrim, to match the body. */
  background:
    var(--stage-fade),
    linear-gradient(to bottom, var(--photo-scrim) 0 54%, transparent 82%);
  pointer-events: none;
}

.stage-photo-image {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--stage-photo-max, none);
  margin-inline: auto;
  block-size: 100%;
  object-fit: cover;
}

.home-stage-copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* The heading above the search box, clear of the masthead. */
  inset-block-end: auto;
  block-size: calc(
    var(--increment) * 4 + var(--search-drop) - var(--home-stage-title-gap, var(--increment) * 6)
  );
  padding: calc(var(--increment) * 18) calc(var(--increment) * 4) 0;
}

/* The content overlaps the stage's foot (`--stage-overlap`) on a
 * full-width ground surface running to the page end, rounded on top below
 * the desktop rungs. Its upward shadow fades with the stage. */
.stage + main {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--stage-overlap));
}

body:has(.stage) [data-part="page"]::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--stage-block-size) - var(--stage-overlap)) 0;
  inset-inline: calc(50% - 50vw);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  background: var(--ground);
  box-shadow: 0 calc(var(--increment) * -1) calc(var(--increment) * 6)
    color-mix(in oklch, var(--shadow-ink) calc(var(--page-shown) * 18%), transparent);
  pointer-events: none;
}

/* No shadow on a light stage. */
body:has(.stage[data-stage-tone="light"]) [data-part="page"]::after {
  box-shadow: none;
}

@media (min-width: 1024px) {
  body:has(.stage) [data-part="page"]::after {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
}

body:has(.stage) footer[data-page-component] {
  position: relative;
  z-index: 1;
}

.home-stage-title {
  inline-size: min(calc(var(--increment) * 140), 100%);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 16px color-mix(in oklch, var(--shadow-ink) 42%, transparent);
}

.home-stage-title-mark {
  color: var(--accent);
}

/* The slogan lockup: an upright lead line and a smaller italic line ending
 * on the wordmark, drawn at the nav's optical size. Lines don't wrap, so
 * the height is known (`--home-stage-title-space`). Sizes are fractions of
 * `--home-stage-title-size`. */
:root {
  --home-stage-title-size: clamp(42px, 4.6vw, 68px);
  --home-stage-title-lead: 0.5;
  --home-stage-title-italic: 0.66;
  --home-stage-title-mark: 0.8;
  --home-stage-title-leading: 1.05;
  --home-stage-title-lead-leading: 1.3;
  /* The gap to the search box. */
  --home-stage-title-gap: calc(var(--increment) * 14);
}

.home-stage-title:has(.home-stage-title-wordmark) {
  inline-size: auto;
  font-family: var(--font-hero);
  font-size: var(--home-stage-title-size);
  font-weight: var(--weight-regular);
  text-box: none;
  padding-block: 0;
}

.home-stage-title-lead,
.home-stage-title-line {
  display: block;
  white-space: nowrap;
}

.home-stage-title-lead {
  font-size: calc(var(--home-stage-title-lead) * 1em);
  line-height: var(--home-stage-title-lead-leading);
}

/* The italic's size, with the wordmark's height. */
.home-stage-title-line {
  font-size: calc(var(--home-stage-title-italic) * 1em);
  font-style: italic;
  line-height: calc(
    var(--home-stage-title-size) * var(--home-stage-title-mark) * var(--home-stage-title-leading)
  );
}

.home-stage-title-wordmark {
  font-family: var(--font-display);
  font-size: calc(var(--home-stage-title-size) * var(--home-stage-title-mark));
  font-style: normal;
  /* Lighter, to match the italic. */
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" var(--wordmark-optical-size);
  margin-inline-start: 0.12em;
}

/* With a lockup, the search box moves down to centre both. */
:root:has(.home-stage-title-lead) {
  --home-stage-title-space: calc(
    var(--home-stage-title-size)
      * (var(--home-stage-title-lead) * var(--home-stage-title-lead-leading)
        + var(--home-stage-title-mark) * var(--home-stage-title-leading))
      + var(--home-stage-title-gap)
  );
}

.home-collection-note {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  text-wrap: balance;
}

.venue-card {
  min-inline-size: 0;
  color: var(--text);
  text-decoration: none;
}

.venue-card-media {
  aspect-ratio: 3 / 2;
}

.venue-card-image {
  transition: scale var(--interaction-duration) ease-out;
}

.venue-card-name {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.venue-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.venue-card-facts {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-card-facts > span {
  white-space: nowrap;
}

.venue-card-price {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.venue-card:focus-visible {
  outline: none;
}

.venue-card:focus-visible .venue-card-media {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--increment) * 2);
}

@media (hover: hover) {
  .venue-card:hover .venue-card-image {
    scale: 1.015;
  }
}

/* The account dashboard, in the account dialog. */
.dash {
  color: var(--text);
}

/* Each tile, and the groups of places, their rows parted by hairlines, are
 * outlined cards (`yours::dashboard`). */
.dash-tile,
.dash-place-rows {
  --surface-elevation-radius: var(--control-radius);
}

/* Hairlines between rows are scaled one-pixel strips, since WebKit can
 * lose a fractional border on animated surfaces (`.link-rows`). */
.dash-place + .dash-place {
  position: relative;
}

.dash-place + .dash-place::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--line);
  scale: 1 var(--hairline-scale);
  transform-origin: center top;
  pointer-events: none;
}

/* Hover states. */
.dash-place {
  transition: background-color var(--interaction-duration);
}

.dash-tile,
.dash-place-home,
.dash-next-card {
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.dash-tile {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
}

.dash-tile > .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  color: var(--accent-strong);
}

.dash-tile-label {
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-section-name {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.dash-place-words > span {
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-place-name {
  font-weight: var(--weight-book);
}

.dash-place-role {
  font-weight: var(--weight-light);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* An upcoming booking: photo, time, title and place. */
.dash-next-photo {
  aspect-ratio: 1;
  border-radius: calc(var(--surface-elevation-radius) - var(--increment) * 2);
}

.dash-next-words > span {
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-next-when {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

.dash-next-title {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.dash-next-where {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}


/* A place is a row of its card, so it takes the card's hover. */
@media (hover: hover) {
  .dash-place:has(> .dash-place-home:hover) {
    background-color: var(--card-fill-hover);
  }
}

/* A card pile (`swipe_stack`). Cards behind the front are lower and
 * smaller, sharing two peeks of depth over `--stack-count`. The runtime
 * sets each card's depth and the pile's channels:
 *   --stack-dx       the front card's drag, in pixels
 *   --stack-out      the card going round to the back or coming from it
 *   --stack-advance  the rest stepping forward from where they stood, 1 or
 *                    -1 down to 0
 * Without the runtime the depths come from the cards' order. */
[data-stack] {
  --reads-stack-dx: [data-stack];
  --reads-stack-out: [data-stack];
  --reads-stack-advance: [data-stack];
  --stack-dx: 0;
  --stack-out: 0;
  --stack-advance: 0;
  --stack-peek: calc(var(--increment) * 2);
  --stack-count: 1;
  --stack-clear: 1;
  /* The release distance or speed that shuffles, in px. */
  --drag-commit: 72;
}

.swipe-stack-pile {
  /* Vertical scrolling stays native (`crossScroller`). */
  touch-action: pan-y;
}

.swipe-stack-card {
  /* An outlined card (`swipe_stack`), but opaque, so cards hide one
   * another, and tinted by what lies under the surface
   * (`--surface-ground`) as its glass is. */
  --stack-card-fill: color-mix(
    in oklab,
    var(--card-fill-hover),
    var(--surface-ground, var(--card-fill-hover)) var(--surface-ground-share)
  );
  --surface-elevation-radius: var(--control-radius);
  --stack-depth: 0;
  --stack-travel: 0;
  --stack-at: clamp(0, var(--stack-depth) + var(--stack-advance), var(--stack-count) - 1);
  --stack-shown: calc(var(--stack-at) * min(1, 2 / max(1, var(--stack-count) - 1)));
  z-index: calc(10 - var(--stack-depth));
  translate: calc(var(--stack-travel) * 1px) calc(var(--stack-shown) * var(--stack-peek));
  rotate: calc(var(--stack-travel) * 0.02deg);
  scale: calc(1 - var(--stack-shown) * 0.05);
  transform-origin: 50% 100%;
  /* A shade darker per depth. */
  background: color-mix(in oklab, var(--stack-card-fill), var(--text) calc(var(--stack-shown) * 5%));
  user-select: none;
  -webkit-user-select: none;
}

.swipe-stack-card > * {
  border-radius: inherit;
}

.swipe-stack-card:nth-child(2) {
  --stack-depth: 1;
}

.swipe-stack-card:nth-child(3) {
  --stack-depth: 2;
}

.swipe-stack-card:nth-child(4) {
  --stack-depth: 3;
}

.swipe-stack-card:nth-child(n + 5) {
  --stack-depth: 4;
}

.swipe-stack-card[data-rt-front] {
  --stack-travel: var(--stack-dx);
  cursor: grab;
}

@media (hover: hover) {
  .swipe-stack-card:hover {
    --stack-card-fill: var(--card-fill-hover);
  }
}

/* A card moving over the pile is lifted by how far out it is. */
.swipe-stack-card[data-rt-shuffling="over"] {
  --stack-travel: var(--stack-out);
  --stack-at: 0;
  z-index: 20;
  scale: calc(
    1 + 0.02 * min(1, max(var(--stack-out), -1 * var(--stack-out)) / var(--stack-clear))
  );
}

/* A card moving under the pile scales between the bottom and front
 * sizes. */
.swipe-stack-card[data-rt-shuffling="under"] {
  --stack-travel: var(--stack-out);
  --stack-at: calc(
    (var(--stack-count) - 1)
      * (1 - min(1, max(var(--stack-out), -1 * var(--stack-out)) / var(--stack-clear)))
  );
}

.swipe-stack-heading {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.swipe-stack-position {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

:root:not([data-rt-js]) [data-stack-step] {
  display: none;
}

/* Link rows: grouped rows with a glyph, label, detail, count and chevron.
 * The detail clips with an ellipsis instead of widening the group. */
.link-rows {
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-fill);
}

.link-rows form {
  display: contents;
}

.link-row {
  position: relative;
  inline-size: 100%;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.link-row {
  min-block-size: calc(var(--increment) * 13);
}

/* Separators start at the labels. A scaled one-pixel strip, since WebKit
 * can lose a fractional border on animated surfaces. */
.link-rows > .link-row:not(:first-child)::before,
.link-rows > :is(form, details):not(:first-child) > .link-row::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--column-2-start) 0;
  block-size: 1px;
  background: var(--line);
  scale: 1 var(--hairline-scale);
  transform-origin: center top;
}

/* The glyph fills its column. */
.link-row > .icon:first-child {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
}

/* The chevron keeps its column with or without a count. */
.link-row-on {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.link-row-on .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

/* An expandable row's chevron turns while open. */
.unfold {
  transition: rotate var(--interaction-duration);
}

details[open] > summary .unfold {
  rotate: 180deg;
}

.link-row-label {
  min-inline-size: 0;
}

.link-row-detail {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row-count {
  display: grid;
  place-items: center;
  min-inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  padding-inline: calc(var(--increment) * 2);
  border-radius: calc(var(--increment) * 3);
  color: var(--accent-strong);
  background: var(--accent-wash);
  font-weight: var(--weight-medium);
  text-align: center;
}

/* A fact row isn't a link. */
.link-row-fact {
  cursor: auto;
}

@media (hover: hover) {
  .link-row:not(.link-row-fact):hover {
    background: var(--interactive-wash);
  }
}

/* A booking's map stage (`location` treatment), fading at the foot, the
 * top, and on wide windows the card's side. Its stacking context keeps
 * Leaflet's panes under the veil. */
.stage-map {
  /* The pin's point, left of centre for the name and in the visible strip
   * above the card. */
  --venue-location-map-focus-x: 0.36;
  --venue-location-map-focus-y: 0.4;
  --stage-map-fade:
    linear-gradient(to bottom, transparent, #000 calc(var(--increment) * 12),
      #000 calc(100% - var(--stage-overlap) - var(--increment) * 36),
      transparent calc(100% - var(--stage-overlap)));

  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  background: var(--control-fill);
  -webkit-mask-image: var(--stage-map-fade);
  mask-image: var(--stage-map-fade);
}

@media (min-width: 1024px) {
  .stage-map {
    --venue-location-map-focus-x: 0.64;
    --venue-location-map-focus-y: 0.5;

    -webkit-mask-image: var(--stage-map-fade), linear-gradient(to right, transparent 10%, #000 55%);
    -webkit-mask-composite: source-in;
    mask-image: var(--stage-map-fade), linear-gradient(to right, transparent 10%, #000 55%);
    mask-composite: intersect;
  }
}

/* The destination marker: a large accent pin with a white rim, a slow
 * pulse ring, and the name on light glass. Its box is the point. */
.map-place {
  position: absolute;
  inset: 0;
  inline-size: 0;
  block-size: 0;
}

.map-place-pin {
  position: absolute;
  inset-inline-start: -22px;
  inset-block-start: -58px;
  z-index: 1;
  inline-size: 44px;
  block-size: 44px;
  border: 3px solid var(--accent-text);
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  rotate: -45deg;
  box-shadow:
    0 2px 4px color-mix(in oklch, var(--shadow-ink) 30%, transparent),
    0 12px 24px -6px color-mix(in oklch, var(--accent-strong) 55%, transparent);
}

.map-place-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--accent-text);
}

.map-place-pulse {
  position: absolute;
  inset-inline-start: -28px;
  inset-block-start: -28px;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 35%, transparent);
  animation: map-place-pulse 2.6s ease-out infinite;
}

@keyframes map-place-pulse {
  from {
    scale: 0.3;
    opacity: 0.9;
  }

  to {
    scale: 2.2;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-place-pulse {
    animation: none;
    scale: 1;
    opacity: 0.5;
  }
}

.map-place-name {
  position: absolute;
  inset-inline-start: 34px;
  inset-block-start: -56px;
  padding: calc(var(--increment) * 2) calc(var(--increment) * 4);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-title);
  background: var(--chrome-glass-fill);
  -webkit-backdrop-filter: blur(var(--chrome-glass-blur)) saturate(var(--chrome-glass-saturation));
  backdrop-filter: blur(var(--chrome-glass-blur)) saturate(var(--chrome-glass-saturation));
  box-shadow: var(--elevation-raised);
}

/* A booking's stage is lower than the front page's, and the invitation
 * overlaps it more (`--booking-stage-rise`). On a phone the card's top is a
 * share of the stage's height, so the map's open part and pin scale with
 * it. On wider windows the card is beside the map. Tuned by eye. */
:root:has(.booking-stage) {
  --stage-block-size: clamp(440px, 58svh, 540px);
  --booking-stage-rise: calc(
    var(--stage-block-size) * 0.5 - var(--stage-overlap)
  );
}

@media (min-width: 1024px) {
  :root:has(.booking-stage) {
    --stage-block-size: max(680px, min(90svh, 680px + 10vw));
    --booking-stage-rise: calc(
      var(--stage-block-size) - var(--stage-overlap) - var(--increment) * 36
    );
  }
}

.booking-invitation-staged {
  margin-block-start: calc(-1 * var(--booking-stage-rise));
}

/* No glow over the map. */
.booking-invitation.booking-invitation-staged::before {
  content: none;
}

/* The booking's invitation: a printed card, slightly rotated, on a glow of
 * the venue photo's colours. The day is the largest type, and sender and
 * signature are in italic.
 *
 * The glow uses the photo's top and bottom colours at one lightness with
 * raised chroma, top-left and bottom-right. */
.booking-invitation {
  --invitation-light-top: oklch(from var(--invitation-top, var(--ground)) 0.86 min(calc(c * 1.8 + 0.02), 0.15) h);
  --invitation-light-bottom: oklch(from var(--invitation-bottom, var(--ground)) 0.84 min(calc(c * 1.8 + 0.02), 0.15) h);

  position: relative;
  isolation: isolate;
}

.booking-invitation::before {
  content: "";
  position: absolute;
  inset: 0 10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 38% 40%, var(--invitation-light-top), transparent),
    radial-gradient(closest-side at 62% 64%, var(--invitation-light-bottom), transparent);
  filter: blur(36px);
  opacity: 0.85;
  pointer-events: none;
}

.booking-invitation-card {
  position: relative;
  text-align: center;
  color: var(--paper-ink);
  background: var(--paper);
  border-radius: calc(var(--increment) * 1.5);
  box-shadow:
    0 1px 1px oklch(0 0 0 / 0.08),
    0 30px 60px -30px oklch(0.3 0.06 50 / 0.45);
  transform: rotate(-1deg);
}

.booking-invitation-photo {
  inline-size: 132px;
  block-size: 132px;
  margin-block-end: calc(var(--increment) * 4);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px oklch(from var(--paper-ink) l c h / 0.25);
}

.booking-invitation-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.booking-invitation-from,
.booking-invitation-sign {
  font-family: var(--font-hero);
  font-style: italic;
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  opacity: 0.8;
}

.booking-invitation-sign::before {
  content: "— ";
}

.booking-invitation-day {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  text-wrap: balance;
}

.booking-invitation-date {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  opacity: 0.7;
}

.booking-invitation-hours {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  font-variant-numeric: tabular-nums;
}

.booking-invitation-place {
  opacity: 0.75;
}

/* A divider with a small star cut out. */
.booking-invitation-rule {
  position: relative;
  inline-size: 120px;
  block-size: 1px;
  margin-block: calc(var(--increment) * 5);
  background: oklch(from var(--paper-ink) l c h / 0.3);
}

.booking-invitation-rule::after {
  content: "✦";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -55%;
  padding-inline: calc(var(--increment) * 2.5);
  font-size: 12px;
  background: var(--paper);
}

.booking-invitation-words {
  text-wrap: balance;
}

/* The door code on a dashed slip, large. */
.booking-invitation-code {
  margin-block-start: calc(var(--increment) * 5);
  padding: calc(var(--increment) * 3) calc(var(--increment) * 7);
  border: 1px dashed oklch(from var(--paper-ink) l c h / 0.35);
  border-radius: calc(var(--increment) * 2);
}

.booking-invitation-code-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.booking-invitation-code-figures {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.booking-invitation-sign {
  margin-block-start: calc(var(--increment) * 4);
}

/* A red stamp in the top corner for unconfirmed or cancelled bookings. */
.booking-invitation-stamp {
  position: absolute;
  inset-block-start: calc(var(--increment) * 10);
  inset-inline-end: calc(var(--increment) * 4);
  padding: calc(var(--increment) * 1.5) calc(var(--increment) * 3);
  border: 3px double var(--paper-stamp);
  border-radius: calc(var(--increment) * 1.5);
  color: var(--paper-stamp);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  rotate: 12deg;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* Past bookings lose the glow and some colour, and cancelled ones all of
 * it. */
.booking-invitation[data-moment="over"] .booking-invitation-photo img {
  filter: saturate(0.4);
}

.booking-invitation:is([data-moment="over"], [data-moment="cancelled"], [data-moment="no-show"])::before {
  opacity: 0;
}

.booking-invitation:is([data-moment="cancelled"], [data-moment="no-show"]) .booking-invitation-photo img {
  filter: grayscale(1);
}

.booking-invitation:is([data-moment="cancelled"], [data-moment="no-show"]) .booking-invitation-card {
  color: oklch(from var(--paper-ink) l c h / 0.6);
}

@media (max-width: 560px) {
  .booking-invitation-photo {
    inline-size: 104px;
    block-size: 104px;
  }

  .booking-invitation-day {
    font-size: 48px;
  }

  .booking-invitation-code-figures {
    font-size: 40px;
  }
}

/* A booking's sheet: photo, time and place, link rows, then actions. */
.booking-sheet {
  min-inline-size: 0;
}

.booking-photo {
  aspect-ratio: 2 / 1;
}

/* The time, then the status and countdown, quiet. */
.booking-when {
  font-family: var(--font-body);
}

.booking-status {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.booking-said {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

/* A booking's tiles: payment or cancellation, and the door. */
.booking-tile-frame {
  min-inline-size: 0;
}

/* The amount due now and how to pay (`pay`). */

.pay-amount {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  font-variant-numeric: tabular-nums;
}

/* The door code, large, beside the venue's instructions, which wrap below
 * when narrow and take a leading rule beside it (`--wider`). Before the
 * code arrives, the tile says when it will. */
.booking-door-instructions {
  border-inline-start: calc(var(--border-width-hairline) * var(--wider)) solid var(--line);
}

.booking-door-code {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* The booking card: photo, what was booked, actions and terms. */
.booking-card {
  min-inline-size: 0;
}

.booking-card-photo {
  aspect-ratio: 16 / 9;
}

/* The transfer row expands its form in place. */
.booking-transfer {
  position: relative;
}

/* The booking's terms as small print. */
.booking-terms {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.booking-cancel {
  border-radius: var(--control-radius);
  background: var(--control-fill);
}

/* The receipt on a white sheet. */
.booking-paper-sheet {
  border-radius: var(--radius-card, calc(var(--increment) * 6));
  background: var(--surface);
  box-shadow: var(--elevation-resting);
}

/* A paid receipt on the invitation's paper, marked paid or refunded in
 * pen. */
.booking-paper-slip {
  justify-self: center;
  inline-size: min(100%, calc(var(--increment) * 86));
  rotate: 0.8deg;
}

.booking-paper-slip .booking-paper-sheet {
  position: relative;
  border-radius: calc(var(--increment) * 1);
  color: var(--paper-ink);
  background: var(--paper);
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.08), 0 22px 40px -26px oklch(from var(--paper-ink) l c h / 0.5);
}

.booking-paper-slip :is(.booking-receipt-meta, .booking-receipt-party, .text-caption, .muted) {
  color: oklch(from var(--paper-ink) l c h / 0.7);
  mix-blend-mode: normal;
}

/* The heading is for screen readers only. */
.booking-paper-slip .booking-receipt-head .card-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.booking-receipt-venue {
  font-family: var(--font-hero);
  font-size: var(--text-title);
  line-height: 1;
}

.booking-paper-slip .booking-receipt-lines {
  font-variant-numeric: tabular-nums;
}

.booking-paper-slip .receipt-total {
  padding-block-start: calc(var(--increment) * 2);
  border-block-start: var(--border-width-hairline) solid oklch(from var(--paper-ink) l c h / 0.25);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-semibold);
}

.booking-paper-slip a {
  color: inherit;
}

.booking-receipt-stamp {
  display: none;
}

.booking-paper-slip .booking-receipt-stamp {
  display: block;
  position: absolute;
  inset-block-start: calc(var(--increment) * 4);
  inset-inline-end: calc(var(--increment) * 5);
  color: var(--paper-pen);
  font-family: var(--font-hero);
  font-style: italic;
  font-size: var(--text-title);
  rotate: -6deg;
}

.booking-paper-slip .booking-receipt-stamp:is([data-tone="refunded"], [data-tone="owed"]) {
  color: var(--paper-stamp);
}

/* From 688px, where the booking flow's columns sit side by side
 * (`booking-flow` in the layout crate), the receipt column rises onto the
 * map's foot. */
@media (min-width: 688px) {
  .booking-invitation-staged:has(.booking-actions) + .booking-flow > .flow-summary {
    margin-block-start: calc(var(--increment) * -40);
  }
}

/* Tape across a paper's top edge. */
.taped::before {
  position: absolute;
  inset-block-start: calc(var(--increment) * -3.5);
  inset-inline-start: 50%;
  inline-size: calc(var(--increment) * 30);
  block-size: calc(var(--increment) * 7.5);
  translate: -50% 0;
  rotate: -3deg;
  background: var(--paper-tape);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
  mask:
    linear-gradient(90deg, #0000, #000 4px calc(100% - 4px), #0000),
    repeating-linear-gradient(0deg, #000 0 3px, #000a 3px 5px);
  mask-composite: intersect;
  content: "";
}

/* A booking's timeline, coloured where it is past. */
.timeline-point {
  position: relative;
}

.timeline-point::before {
  position: absolute;
  inset-block: calc(var(--increment) * 6) 0;
  inset-inline-start: calc(var(--increment) * 23 - 1px);
  inline-size: 2px;
  background: var(--line);
  content: "";
}

.timeline-point:last-child::before {
  content: none;
}

.timeline-point[data-state="done"]::before {
  background: var(--accent);
}

.timeline-when {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  text-align: end;
  font-variant-numeric: tabular-nums;
  padding-block-start: 2px;
}

.timeline-mark {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--ground);
}

.timeline-point[data-state="done"] .timeline-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.timeline-point[data-state="done"] .timeline-mark::after {
  inline-size: 5px;
  block-size: 9px;
  margin-block-start: -2px;
  border: solid var(--accent-text);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  content: "";
}

.timeline-point[data-state="now"] .timeline-mark {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-wash);
}

.timeline-point[data-state="now"] .timeline-mark::after {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.timeline-title {
  font-weight: var(--weight-medium);
}

.timeline-point[data-state="done"] .timeline-title {
  color: var(--text-muted);
}

.timeline-point[data-chief] .timeline-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-title);
}

.timeline-detail {
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* The access link, in the card's ink. */
.booking-invitation-help {
  color: var(--paper-ink);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: oklch(from var(--paper-ink) l c h / 0.35);
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}

.booking-invitation-help::-webkit-details-marker {
  display: none;
}

/* The booking's actions: a glass bar of glyphs and labels, with quieter
 * text actions below. */
.booking-actions {
  position: relative;
  margin-block-start: calc(var(--increment) * 4);
}

.booking-actions-main {
  border-radius: calc(var(--increment) * 6);
  background: var(--chrome-glass-fill);
  backdrop-filter: blur(var(--chrome-glass-blur)) saturate(var(--chrome-glass-saturation));
  box-shadow: var(--elevation-raised);
}

.booking-action {
  border-radius: calc(var(--increment) * 5);
  color: var(--text);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-medium);
  text-align: center;
  text-decoration: none;
}

.booking-action svg {
  inline-size: 24px;
  block-size: 24px;
}

@media (hover: hover) {
  .booking-action:hover {
    background: var(--interactive-wash);
  }
}

.booking-change {
  min-block-size: var(--minimum-target-size);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.booking-change::-webkit-details-marker {
  display: none;
}

.booking-change svg {
  inline-size: 18px;
  block-size: 18px;
}

@media (hover: hover) {
  .booking-change:hover {
    color: var(--text);
  }
}

.booking-receipt-meta,
.booking-receipt-party {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-style: normal;
}

.booking-receipt-lines {
  font-variant-numeric: tabular-nums;
}

/* The receipt document: an A4 sheet in print units, the same on screen
 * and paper, headed by the seller. */
.receipt-document {
  display: grid;
  gap: calc(var(--increment) * 4);
}

.receipt-document-actions {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--increment) * 4);
}

.receipt-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-self: center;
  inline-size: min(100%, 210mm);
  min-block-size: 297mm;
  padding: 20mm 18mm;
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  color: var(--text);
  font: 10pt/1.45 var(--font-body);
}

.receipt-quiet,
.receipt-label,
.receipt-foot {
  color: var(--text-muted);
}

.receipt-label {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.receipt-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4mm 10mm;
  align-items: start;
  padding-block-end: 8mm;
  border-block-end: 1.5pt solid var(--text);
}

.receipt-issuer {
  font: var(--weight-title) 20pt/1.15 var(--font-display);
  letter-spacing: -0.01em;
}

.receipt-head .receipt-quiet {
  margin-block-start: 2mm;
}

.receipt-number {
  text-align: end;
}

.receipt-no {
  margin-block-start: 1mm;
  font-size: 16pt;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.receipt-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6mm;
  padding-block: 7mm;
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.receipt-parties dt {
  margin-block-end: 1mm;
}

.receipt-what {
  padding-block: 7mm 2mm;
}

.receipt-what-title {
  font: var(--weight-title) 14pt/1.25 var(--font-display);
}

.receipt-what .receipt-quiet {
  margin-block-start: 1mm;
}

.receipt-lines,
.receipt-totals {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.receipt-lines {
  margin-block-start: 5mm;
}

.receipt-lines th {
  padding: 0 0 2mm 4mm;
  border-block-end: 0.5pt solid var(--text);
  color: var(--text-muted);
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: end;
  text-transform: uppercase;
}

.receipt-lines td {
  padding: 2.5mm 0 2.5mm 4mm;
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: end;
  vertical-align: top;
}

.receipt-lines :is(th, td):first-child {
  padding-inline-start: 0;
  text-align: start;
}

.receipt-lines td:not(:first-child) {
  white-space: nowrap;
}

/* No page breaks inside a line. */
.receipt-lines tr,
.receipt-totals,
.receipt-note {
  break-inside: avoid;
}

.receipt-totals {
  inline-size: min(100%, 82mm);
  margin: 4mm 0 0 auto;
}

.receipt-totals td {
  padding-block: 1.2mm;
}

.receipt-totals td:last-child {
  text-align: end;
  white-space: nowrap;
}

.receipt-totals .receipt-grand td {
  padding-block-start: 3mm;
  border-block-start: 1.5pt solid var(--text);
  font-size: 13pt;
  font-weight: 600;
}

.receipt-note {
  margin-block-start: 7mm;
  padding: 4mm 5mm;
  border-radius: 3mm;
  background: var(--ground);
}

.receipt-note p + p {
  margin-block-start: 1mm;
}

/* Invoice payment details. The virtual barcode may break anywhere. */
.receipt-payment {
  margin-block-start: 7mm;
  padding: 4mm 5mm;
  border: 1pt solid var(--text);
  border-radius: 3mm;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  break-inside: avoid;
}

.receipt-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10mm;
  margin-block-start: auto;
  padding-block-start: 10mm;
  font-size: 8pt;
}

.receipt-foot p {
  max-inline-size: 120mm;
}

.receipt-wordmark {
  color: var(--text);
  font: var(--weight-title) 11pt/1 var(--font-display);
  white-space: nowrap;
}

.receipt-wordmark span {
  color: var(--accent);
}

/* On a phone screen, no print margins. */
@media screen and (max-width: 700px) {
  .receipt-sheet {
    min-block-size: 0;
    padding: 8mm 6mm;
  }

  .receipt-head,
  .receipt-parties {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt-number {
    text-align: start;
  }
}

/* Wallet cards set their own radius, since the tile grid sets none. */
.wallet-place {
  --surface-elevation-radius: var(--control-radius);
  min-inline-size: 0;
}

.wallet-place-photo {
  aspect-ratio: 16 / 9;
}

/* A tally: filled for remaining servings, outlined for used. */

.tally-token {
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  border-radius: 50%;
  background: var(--accent-strong);
}

.tally-token-had {
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--text-disabled);
}

.wallet-place-foot {
  border-block-start: var(--border-width-hairline) solid var(--line);
}

/* A counter card to show staff: white, with the code as large as fits. */
.counter-card {
  --surface-elevation-radius: var(--control-radius);

  text-align: center;
}

.counter-card-qr {
  inline-size: min(100%, calc(var(--increment) * 52));
  color: var(--text);
}

.counter-card-qr .qr {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.counter-card-code {
  font-family: var(--font-mono);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* The give-away row expands into ways to send the code. */
.counter-give {
  justify-self: stretch;
  text-align: start;
}

/* In a dialog, counter cards stack without their own lift. */

.counter-stack > .counter-card {
  box-shadow: none;
}

.counter-stack > .counter-card + .counter-card {
  --surface-elevation-radius: 0px;

  border-block-start: var(--border-width-hairline) solid var(--line);
}

/* A row with a photo (`photo-row`): an outlined card while it's ahead,
 * flat once it's past (`yours/booking_row`). */
.photo-row {
  --surface-elevation-radius: var(--control-radius);

  color: var(--text);
  text-decoration: none;
}

@media (hover: hover) {
  .photo-row:not(.card):hover {
    background-color: var(--interactive-wash);
  }
}

.photo-row-photo {
  aspect-ratio: 1;
  border-radius: calc(var(--surface-elevation-radius) - var(--increment) * 3);
}

/* What's void, such as a cancellation or a used-up card, loses its colour. */
.photo-row-void .photo-row-photo {
  filter: grayscale(1);
  opacity: 0.6;
}

.photo-row-void .photo-row-name {
  color: var(--text-muted);
}

.photo-row-words {
  min-inline-size: 0;
}

.photo-row-time {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.photo-row:not(.card) .photo-row-time {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-regular);
}

.photo-row-name {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.photo-row:not(.card) .photo-row-name {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.photo-row-what,
.photo-row-end {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.photo-row-end {
  font-variant-numeric: tabular-nums;
}

/* A booking's one state: in green while it's good to go, in the accent
 * while it waits, in plain text once it's over. */
.booking-note {
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: var(--weight-medium);
}

.booking-note .icon {
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
}

.booking-note-now {
  color: var(--availability-ink);
  background: var(--availability-fill);
}

.booking-note-waiting {
  background: var(--accent-wash);
}

.booking-note-ended {
  padding-inline: 0;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

/* The bookings page's days and months. */
.bookings-day-word {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.bookings-day-date {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.bookings-day-name {
  margin: 0;
}

.bookings-past-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

/* Each year's receipts beside the bookings, a figure a row. */
.bookings-receipts h2,
.receipt-year h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.bookings-receipts-lead {
  margin: 0;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.receipt-year {
  padding-block-start: calc(var(--increment) * 4);
  border-block-start: var(--border-width-hairline) solid var(--line);
}

.receipt-year-sums {
  margin: 0;
}

.receipt-year-sum dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.receipt-year-sum dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.receipt-year-actions {
  margin: 0;
}

/* A year's receipts are only for the printer. */
.receipt-year-papers {
  display: none;
}

/* Hidden without the runtime, which they need. */
:root:not([data-rt-js]) :is([data-print], [data-surface-close], [data-calendar-step]) {
  display: none;
}

/* A receipt with a torn-paper rule before its small print. */
.receipt-paper {
  position: relative;
  border-radius: calc(var(--increment) * 2);
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  break-inside: avoid;
}

.receipt-paper-day {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-variant-numeric: tabular-nums;
}

.receipt-paper-head a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .receipt-paper-head a:hover {
    text-decoration: underline;
  }
}

.receipt-paper-lines {
  font-variant-numeric: tabular-nums;
}

.receipt-paper-foot {
  border-block-start: var(--border-width-hairline) dashed var(--line);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A cancelled receipt, faded under a stamp. */
.receipt-paper-void .receipt-paper-lines {
  opacity: 0.45;
}

.receipt-stamp {
  border: var(--border-width-thin) solid var(--availability-ink);
  border-radius: calc(var(--increment) * 1.5);
  color: var(--availability-ink);
  font-weight: var(--weight-medium);
  justify-self: start;
  rotate: -2deg;
}

/* A4 with the page's margins. */
@page {
  size: A4;
  margin: 12mm 14mm;
}

@media print {
  .site-header,
  .site-footer,
  .receipt-year-actions,
  .receipt-document-actions,
  [data-print] {
    display: none;
  }

  /* Full printable width on paper. */
  .receipt-document.content {
    grid-column: var(--bleed);
  }

  /* No forced height on paper, which spills onto a second page. */
  .receipt-sheet {
    justify-self: stretch;
    inline-size: auto;
    min-block-size: 0;
    padding: 0;
    box-shadow: none;
  }

  .receipt-foot {
    margin-block-start: 14mm;
  }

  .receipt-note {
    print-color-adjust: exact;
  }

  /* Printing a scope hides everything else and ungrids its ancestors, so it
   * spans the page. */
  [data-rt-printing] body :not([data-rt-printing-this], [data-rt-printing-this] *, :has([data-rt-printing-this])) {
    display: none;
  }

  [data-rt-printing] :has([data-rt-printing-this]) {
    display: block;
  }

  .receipt-paper {
    box-shadow: none;
    border: var(--border-width-hairline) solid var(--line);
  }

  [data-rt-printing-this] .receipt-year-papers {
    display: grid;
  }
}

/* Venue introduction and compact fact summary. */
.venue-short-description {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary {
  position: relative;
}

.venue-summary::before,
.venue-summary::after {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-summary::before {
  inset-block-start: 0;
}

.venue-summary::after {
  inset-block-end: 0;
}

.venue-summary-metrics,
.venue-summary-features {
  align-self: center;
}

.venue-summary dd {
  margin-inline: 0;
}

.venue-summary-metric,
.venue-summary-feature-copy {
  overflow-wrap: anywhere;
}

/* The seller's description. */
.venue-description,
.venue-summary-feature-copy {
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary-metric dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary-metric dd {
  font-weight: var(--weight-medium);
}

/* Venue amenities. */
.venue-fact-catalogue {
  position: relative;
}

.venue-fact-catalogue::before,
.venue-catalogue-section + .venue-catalogue-section::before {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-fact-catalogue ul {
  padding: 0;
  list-style: none;
}

.venue-catalogue-section + .venue-catalogue-section {
  position: relative;
  padding-block-start: calc(var(--increment) * 8);
}

.venue-catalogue-heading {
  align-self: start;
}

.venue-catalogue-heading h2 {
  font-weight: var(--weight-medium);
}

.venue-catalogue-description,
.venue-fact-value,
.venue-catalogue-group h3,
.venue-catalogue-group-meta {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-catalogue-group h3 {
  overflow-wrap: anywhere;
}

.venue-catalogue-group-meta {
  font-weight: var(--weight-regular);
}

.venue-catalogue-item,
.venue-fact-value {
  overflow-wrap: anywhere;
}

/* Inline text actions. The component places them. */
.text-button {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: calc(var(--increment) * 2);
  inline-size: max-content;
  align-content: start;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--accent-strong);
  background: transparent;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

/* The glyph is larger than the text. */
.text-button > .icon {
  inline-size: 1.5em;
  block-size: 1.5em;
}

/* An ink text action, such as save, accented once active. */
.text-button-ink {
  color: var(--text);
}

/* A quiet text action in secondary text, such as signing out. */
.text-button-quiet {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-regular);
}

.text-button-quiet > .icon {
  inline-size: 1.25em;
  block-size: 1.25em;
}

.text-button-next {
  padding-inline-end: calc(var(--increment) / 2);
}

.text-button-next::after {
  content: "";
  inline-size: calc(var(--increment) * 1.5);
  block-size: calc(var(--increment) * 1.5);
  border-block-start: var(--border-width-thin) solid currentColor;
  border-inline-end: var(--border-width-thin) solid currentColor;
  transform: rotate(45deg);
}

.text-button:focus-visible {
  --focus-ring-color: var(--text);
  outline-offset: 3px;
}

@media (hover: hover) {
  .text-button:hover {
    color: color-mix(in oklab, var(--accent-strong), var(--text) 18%);
  }

  .text-button-ink:hover,
  .text-button-quiet:hover {
    color: var(--text-hover);
  }
}

/* Sectioned pages. The layout handles the split and spacing, and this the
 * navigation's look. */
.section-navigation-title,
.section-pane-title {
  overflow-wrap: anywhere;
}

.section-navigation-title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-title);
}

.section-pane-title {
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.section-navigation-list {
  border-block-start: var(--border-width-hairline) solid var(--line);
}

/* A grouped list starts with its first group's name. */
.section-navigation-list:has(> .section-navigation-group:first-child) {
  border-block-start: 0;
}

.section-navigation-item {
  min-block-size: calc(var(--increment) * 15);
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.section-navigation-item-name {
  overflow-wrap: anywhere;
}

/* A section group's name. */
.section-navigation-group {
  padding-block: calc(var(--increment) * 6) calc(var(--increment) * 1);
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
}

.section-navigation-group:first-child {
  padding-block-start: 0;
}

.section-navigation-item-name .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.section-navigation-item > .icon {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.section-navigation-list:has([aria-current]) .section-navigation-item {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.section-navigation-list .section-navigation-item[aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.back-link {
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: var(--minimum-target-size);
  align-self: flex-start;
  margin-inline-start: calc(-1 * var(--increment));
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  text-decoration: none;
}

@media (hover: hover) {
  .section-navigation-item:hover,
  .back-link:hover {
    color: var(--text);
  }
}

/* Account settings cards, which are the dialog triggers. The tile grid
 * sizes them. */
.card-dialog {
  inline-size: 100%;
}

.edit-card {
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 20);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--surface);
  font-weight: var(--weight-regular);
  white-space: normal;
  text-align: start;
}

.edit-card-value {
  overflow-wrap: anywhere;
}

.edit-card-mark {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.edit-card-mark .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.edit-card-unset {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A card with a picture on top. */
.edit-card-picture {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--control-radius) - var(--increment) * 2);
  object-fit: cover;
}

.admin-photo-preview {
  display: block;
  inline-size: 100%;
  border-radius: var(--control-radius);
}

/* An add card, in the accent without a label. */
.edit-card-adds {
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
}

.edit-card:has(.edit-card-adds) {
  border-style: dashed;
  background: transparent;
}

.edit-card:has(.edit-card-adds) .edit-card-mark {
  color: var(--accent-strong);
}

/* A heading over cards in a pane. */
.edit-heading {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.edit-card:focus-visible {
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .edit-card:hover {
    border-color: var(--control-line-hover);
  }

  .edit-card:hover .edit-card-mark {
    color: var(--accent-strong);
  }
}

/* A fixed answer in place of a control. */
.field-fixed {
  color: var(--text);
}

/* Forms. The layout handles spacing, and these rules the controls. */
fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* No legend padding. */
legend {
  padding-inline: 0;
}

.field-label,
.field-legend {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.field-note,
.notice {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* Notes may hold long addresses. */
.field-note {
  overflow-wrap: anywhere;
}

.form-error,
.status {
  color: var(--attention);
  font-weight: var(--weight-medium);
}

/* A note on what only this reader sees, in the accent's wash, with the
   public-view switch at its end. */
.audience-strip {
  border-radius: var(--control-radius);
  background: var(--accent-wash);
  color: var(--text);
}

.audience-strip-switch {
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
}

.status-mark {
  display: grid;
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--surface);
  background: var(--text-muted);
}

.status-mark .icon {
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 3);
}

.status-mark-positive {
  background: var(--text);
}

.status-mark-ended {
  background: var(--text-disabled);
}

.status-mark-attention {
  background: var(--attention);
}

.status-label {
  min-inline-size: 0;
}

.form :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select, textarea) {
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 13);
  padding-inline: calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  outline: 3px solid transparent;
  outline-offset: 2px;
  background: var(--control-fill);
  box-shadow: var(--control-recess);
  caret-color: var(--accent-strong);
  appearance: none;
}

.form textarea {
  padding-block: calc(var(--increment) * 3);
  resize: vertical;
}

.form :is(input, textarea)::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.form :is(input, select, textarea):focus-visible {
  border-color: var(--control-focus-line);
  outline-color: var(--control-focus-halo);
  box-shadow: var(--control-recess);
}

/* Invalid fields, from the browser or the server (`markRefused`), have an
 * attention border until changed. */
.form :is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) {
  border-color: var(--attention);
}

@media (hover: hover) {
  .form
    :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select, textarea):hover:not(:focus) {
    border-color: var(--control-line-hover);
  }
}

.select-control {
  position: relative;
  display: block;
}

.select-control select {
  padding-inline-end: calc(var(--increment) * 10);
}

.select-control > .icon {
  position: absolute;
  inset-inline-end: calc(var(--increment) * 4);
  inset-block-start: 50%;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  translate: 0 -50%;
  pointer-events: none;
}

/* A unit suffix inside the field. */
.unit-control {
  position: relative;
  display: block;
}

.unit-control input {
  padding-inline-end: calc(var(--increment) * 10);
}

.unit-control > .unit-control-unit {
  position: absolute;
  inset-inline-end: calc(var(--increment) * 4);
  inset-block-start: 50%;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  translate: 0 -50%;
  pointer-events: none;
}

.field-row > * {
  flex: 1 1 calc(var(--increment) * 28);
}

.form input:is([type="radio"], [type="checkbox"]) {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
  flex: none;
  margin: calc(var(--increment) / 2) 0;
  border: var(--border-width-thin) solid var(--text-muted);
  background: var(--surface);
  appearance: none;
}

.form input[type="radio"] {
  border-radius: 50%;
}

.form input[type="checkbox"] {
  display: inline-grid;
  border-radius: calc(var(--increment) * 1.25);
}

/* The tick shows the surface through the fill. */
.form input[type="checkbox"]::before {
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.form input[type="checkbox"]:checked::before {
  background: var(--surface);
}

.form input[type="radio"]:checked {
  border-color: var(--text);
  box-shadow: inset 0 0 0 calc(var(--increment) * 1.25) var(--text);
}

.form input[type="checkbox"]:checked {
  border-color: var(--text);
  background: var(--text);
}

.form-section-title {
  padding: 0;
}

.form-fold-title {
  cursor: pointer;
}

.admin-section .form:not(.form-action-row) {
  inline-size: 100%;
  max-inline-size: 66ch;
}

.form-action-row {
  min-block-size: calc(var(--increment) * 13);
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.form-action-row > .field {
  flex: 1 1 calc(var(--increment) * 32);
}

.form-action-row > :first-child:not(.field, .form-actions) {
  flex: 1 1 calc(var(--increment) * 28);
  align-self: center;
}

.form-action-row > .form-actions {
  flex: none;
}

/* A button. */
:is(.form-submit, .form-cancel) {
  min-block-size: var(--form-action-block-size, var(--minimum-target-size));
  padding-inline: var(--form-action-padding-inline, calc(var(--increment) * 4));
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.form-submit-primary {
  --form-action-block-size: calc(var(--increment) * 12);
  --form-action-padding-inline: calc(var(--increment) * 6);

  color: var(--surface);
  background: var(--text);
}

.form-submit-secondary {
  color: var(--text);
  background: var(--interactive-wash);
}

/* Destructive buttons are outlined in the attention colour. */
.form-submit-dangerous {
  color: var(--attention);
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--attention);
}

.form-cancel {
  --form-action-padding-inline: calc(var(--increment) * 3);

  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: transparent;
}

.form-submit-quiet {
  --form-action-padding-inline: calc(var(--increment) * 2);

  color: var(--accent-strong);
  background: transparent;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.form input[type="file"] {
  padding: calc(var(--increment) * 1.5);
}

.form input[type="file"]::file-selector-button {
  min-block-size: calc(var(--increment) * 9);
  margin-inline-end: calc(var(--increment) * 3);
  padding-inline: calc(var(--increment) * 3);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--interactive-wash);
  font: inherit;
  cursor: pointer;
}

:is(.form-submit, .form-cancel):focus-visible {
  --focus-ring-color: var(--text);
}

:is(.form-submit, .form-cancel):disabled {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--interactive-wash);
  cursor: not-allowed;
}

@media (hover: hover) {
  .form-submit-primary:hover {
    background: var(--text-hover);
  }

  .form-cancel:hover,
  .form-submit-secondary:hover {
    color: var(--text);
    background: var(--interactive-wash);
  }
}

/* A feature collection row: a card with a full-bleed photo, the seller's
 * text and a price line. The card face is a separate layer, so it doesn't
 * flatten the photo. */
.feature-row {
  --surface-elevation-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.feature-row-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.feature-row-media,
.feature-row-copy {
  position: relative;
  z-index: 1;
}

/* The edge light covers the photo's corners. */
.feature-row.surface-elevation-edge-light::before {
  z-index: 2;
}

/* 3:2 when stacked, else the row's height. */
.feature-row-media {
  align-self: stretch;
  aspect-ratio: 3 / 2;
}

/* The image covers the whole subgrid column. */
.feature-row-image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale calc(2 * var(--interaction-duration)) ease-out;
}

.feature-row-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--increment) * 9);
  padding: calc(var(--increment) * 7) calc(var(--increment) * 2) calc(var(--increment) * 5);
}

.feature-row-head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--increment) * 3);
}

/* A kicker in tracked capitals. */
.feature-row-place {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.4em;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-row-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.feature-row-story {
  max-inline-size: 62ch;
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
  text-wrap: pretty;
}

.feature-row-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--increment) * 2) calc(var(--increment) * 6);
  margin-block-start: auto;
  padding-block-start: calc(var(--increment) * 4);
  border-block-start: var(--border-width-hairline) solid var(--line);
}

.feature-row-terms {
  flex: 1 1 0;
  min-inline-size: min(100%, 10em);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 1) calc(var(--increment) * 5);
  padding: 0;
  list-style: none;
}

.feature-row-term-name {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  white-space: pre;
}

.feature-row-terms strong,
.feature-row-go {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

.feature-row-go {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--increment) * 1.5);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.feature-row-go .icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  transition: translate var(--interaction-duration) ease-out;
}

.feature-row:focus-visible {
  outline-offset: calc(var(--increment) * 1);
}

@media (hover: hover) {
  .feature-row:hover .feature-row-image {
    scale: 1.03;
  }

  .feature-row:hover .feature-row-go .icon {
    translate: var(--increment) 0;
  }
}

/* How a search was understood (`search-understood`). */
.search-understood-terms > span {
  white-space: nowrap;
}

.search-understood-note,
.search-ranking {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A search result, like `.venue-card`. Fact parts wrap whole. */
.search-result {
  color: var(--text);
}

.search-result-media {
  aspect-ratio: 3 / 2;
}

.search-result-image {
  transition: scale var(--interaction-duration) ease-out;
}

.search-result-name {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.search-result-name a {
  color: inherit;
  text-decoration: none;
}

.search-result-offering,
.search-result-reasons {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.search-result-reasons > span,
.search-result-starts > a {
  white-space: nowrap;
}

.search-result-reason-lacking {
  color: var(--text-disabled);
}

.search-result-price {
  color: var(--text);
}

.search-result:has(.search-result-name a:focus-visible) .search-result-media {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--increment) * 2);
}

@media (hover: hover) {
  .search-result:has(.search-result-media:hover, .search-result-name a:hover) .search-result-image {
    scale: 1.015;
  }
}

/* A brand page's ground (`--ground-layers`, set by `pages::layout`),
 * shaded toward black, with flat top and bottom colours and a fade fixed
 * at the viewport's bottom. Only the body touches the viewport's top, since
 * Safari tints its toolbar from a fixed element there (found 2026-10-13). */
body[data-ground] {
  --page-top: color-mix(in srgb, var(--ground-top), var(--ground-shade-ink) var(--ground-shade));
  --page-bottom: color-mix(in srgb, var(--ground-bottom), var(--ground-shade-ink) var(--ground-shade));
  --page-bottom-fade: min(320px, 45svh);
  --page-bottom-edge: linear-gradient(
    to top,
    var(--page-bottom) 0,
    color-mix(in srgb, var(--page-bottom) 74%, transparent) calc(var(--page-bottom-fade) * 0.19),
    color-mix(in srgb, var(--page-bottom) 54%, transparent) calc(var(--page-bottom-fade) * 0.34),
    color-mix(in srgb, var(--page-bottom) 38%, transparent) calc(var(--page-bottom-fade) * 0.47),
    color-mix(in srgb, var(--page-bottom) 28%, transparent) calc(var(--page-bottom-fade) * 0.565),
    color-mix(in srgb, var(--page-bottom) 19%, transparent) calc(var(--page-bottom-fade) * 0.65),
    color-mix(in srgb, var(--page-bottom) 13%, transparent) calc(var(--page-bottom-fade) * 0.73),
    color-mix(in srgb, var(--page-bottom) 7.5%, transparent) calc(var(--page-bottom-fade) * 0.802),
    color-mix(in srgb, var(--page-bottom) 4%, transparent) calc(var(--page-bottom-fade) * 0.861),
    color-mix(in srgb, var(--page-bottom) 2%, transparent) calc(var(--page-bottom-fade) * 0.91),
    color-mix(in srgb, var(--page-bottom) 0.8%, transparent) calc(var(--page-bottom-fade) * 0.952),
    transparent var(--page-bottom-fade)
  );

  background:
    var(--page-bottom-edge) fixed,
    linear-gradient(
        color-mix(in srgb, var(--ground-shade-ink) var(--ground-shade), transparent),
        color-mix(in srgb, var(--ground-shade-ink) var(--ground-shade), transparent)
      )
      fixed,
    var(--ground-layers),
    var(--page-top);
}

/* Overscroll takes the nearer end's colour (`static/enhance.js`). */
body[data-ground][data-rt-nearer-bottom] {
  background-color: var(--page-bottom);
}

body[data-ground] :is(.backdrop, [data-part="page"]) {
  background: transparent;
}

/* A drawing among the photos. */
.drawing {
  filter: var(--drawing-filter);
}

.titled-page-lead {
  max-inline-size: 66ch;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-family: var(--font-body);
}

/* Prose at 66ch, with full-width tables (`notes/visual.md`). */
.document-body > * {
  max-inline-size: 66ch;
}

.document-body > h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
}

.document-body > :is(h3, h4) {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

/* Wide tables scroll with edge shadows where there is more. */
.document-body > table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background:
    linear-gradient(to right, var(--ground), transparent) left / calc(var(--increment) * 8) 100%
      no-repeat local,
    linear-gradient(to left, var(--ground), transparent) right / calc(var(--increment) * 8) 100%
      no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--text) 14%, transparent), transparent)
      left / calc(var(--increment) * 3) 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--text) 14%, transparent), transparent)
      right / calc(var(--increment) * 3) 100% no-repeat scroll;
}

.document-body :is(th, td) {
  padding: calc(var(--increment) * 2) calc(var(--increment) * 3);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: start;
  vertical-align: top;
}

.document-body :is(th, td):first-child {
  padding-inline-start: 0;
}

.document-body th {
  font-weight: var(--weight-medium);
}

.fact-list-row {
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.fact-list-label {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.fact-list-value {
  overflow-wrap: anywhere;
}

.fact-list-row a {
  color: var(--accent-strong);
  text-decoration: none;
}

.fact-list-row a[href^="tel:"] {
  white-space: nowrap;
}

/* A portal's page links, one scrolling line (`notes/visual.md`). */
.portal-nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.portal-nav::-webkit-scrollbar {
  display: none;
}

.portal-nav-link {
  flex: none;
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

@media (hover: hover) {
  .portal-nav-link:hover {
    color: var(--accent-strong);
  }
}

/* Seller admin. The layout handles alignment and spacing. */
.admin-section h2 {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

/* Admin links in the accent. */
.admin-section :where(a:not([class])) {
  text-decoration: none;
}

/* A row's side wraps below only when the main part would be under 24ch. */
.admin-row > :first-child:not(:only-child) {
  flex: 1 1 24ch;
  min-inline-size: 0;
}

.admin-row {
  min-block-size: calc(var(--increment) * 13);
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.admin-row-go {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.admin-row-go .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

@media (hover: hover) {
  .admin-row:hover .admin-row-go {
    color: var(--accent-strong);
  }
}

.admin-row-side {
  flex: none;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* One measure for admin rows and operations lists. */
.admin-rows,
.admin-section .link-rows,
.agents,
.controls,
.task-list,
.agenda,
.setting-rows,
.health-banner,
.all-clear {
  inline-size: 100%;
  max-inline-size: 72ch;
}

/* A figures table. */
.figures {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.figures :is(th, td) {
  padding: calc(var(--increment) * 2);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: end;
  white-space: nowrap;
}

.figures :is(th:first-child, thead th:first-child) {
  text-align: start;
  font-weight: var(--weight-regular);
}

.figures thead th {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

/* A table with a totals column. */
.figures.totalled td:last-child {
  font-weight: var(--weight-semibold);
}

/* Wide tables scroll inside their box. */
.figures-scroll {
  inline-size: 100%;
  overflow-x: auto;
}

/* A view switch (`pages::view_switch`). */
.view-switch a {
  padding: var(--increment) calc(var(--increment) * 2.5);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  text-decoration: none;
}

.view-switch a[aria-current] {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.view-switch-count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* A back office item's text and meta line. */
.admin-lead {
  max-inline-size: 66ch;
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.admin-meta {
  color: var(--text-muted);
}

/* A report kind tag. */
.kind-bug { --kind: var(--kind-bug); }
.kind-feedback { --kind: var(--kind-feedback); }
.kind-idea { --kind: var(--kind-idea); }

.kind-chip {
  border-radius: var(--radius-pill);
  color: var(--kind);
  background: color-mix(in oklch, var(--kind) 10%, transparent);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  white-space: nowrap;
}

/* A count pill. */
.group-count {
  padding: 0 calc(var(--increment) * 2);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--fill);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

/* List tabs with counts. */
.tabs {
  border-block-end: var(--border-width-hairline) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs a {
  padding: calc(var(--increment) * 2) 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.tabs a[aria-current] {
  border-color: var(--text);
  color: var(--text);
  font-weight: var(--weight-medium);
}

.tabs-count {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

/* A list toolbar: search, menus and a button. */
.search-box,
.toolbar select,
.toolbar button {
  box-sizing: border-box;
  block-size: calc(var(--increment) * 10);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-caption);
}

.search-box {
  flex: 1 1 calc(var(--increment) * 50);
  color: var(--text-muted);
}

.search-box:focus-within {
  border-color: var(--control-focus-line);
  box-shadow: 0 0 0 3px var(--control-focus-halo);
}

.search-box input {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
}

.toolbar select {
  max-inline-size: calc(var(--increment) * 60);
  padding-inline: calc(var(--increment) * 3);
}

.toolbar button {
  padding-inline: calc(var(--increment) * 4);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

@media (hover: hover) {
  .toolbar :is(select, button):hover,
  .search-box:hover:not(:focus-within) {
    border-color: var(--control-line-hover);
  }
}

.board-column {
  border-radius: var(--control-radius);
  background: var(--well);
}

.board-card .status-line {
  font-size: var(--text-caption);
}

.board-column-name {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.board-column > p {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.board-card {
  border-radius: calc(var(--increment) * 3);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  text-decoration: none;
}

@media (hover: hover) {
  .board-card:hover {
    box-shadow: var(--elevation-raised);
  }
}

.board-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* A report card's head and tags. */
.board-card-who {
  overflow: hidden;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-card-when,
.board-card-count {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.board-card-count .icon {
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
}

.side-panel {
  border-radius: var(--control-radius);
  background: var(--well);
}

.side-panel h2 {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
}

/* A report's status switch, with quieter close options below. */
.status-closed {
  font-size: var(--text-caption);
}

.status-switch .form-actions-switch {
  border-radius: var(--control-radius);
  background: var(--fill);
}

.status-switch .form-submit {
  --form-action-block-size: calc(var(--increment) * 9);
  --form-action-padding-inline: calc(var(--increment) * 2);

  border-radius: calc(var(--control-radius) - var(--increment));
  color: var(--text-muted);
  background: transparent;
  font-size: var(--text-caption);
}

.status-switch .form-submit:disabled {
  color: var(--text);
  mix-blend-mode: normal;
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  cursor: default;
}

@media (hover: hover) {
  .status-switch .form-submit:not(:disabled):hover {
    color: var(--text);
    background: var(--interactive-wash);
  }
}

.status-closing {
  font-size: var(--text-caption);
}

.status-closing > * {
  flex: none;
}

.admin-section .status-closing .form {
  inline-size: auto;
}

.status-closing .form-submit-quiet {
  --form-action-padding-inline: 0;
  --form-action-block-size: auto;
}

.status-closing .form-submit-quiet:disabled {
  background: transparent;
}

.side-muted {
  color: var(--text-muted);
}

/* Labelled facts, two per row. Wide ones take a row, truncated. */
.side-facts dt {
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.side-facts dd {
  overflow-wrap: break-word;
}

.side-facts .side-fact-wide dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Labels beside long wrapping values. */
.side-table dt {
  color: var(--text-muted);
}

.side-table dd {
  overflow-wrap: anywhere;
}

.person-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A reported page's log. */
.side-log {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  list-style: none;
}

.side-log .side-muted,
.side-section > p {
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.side-details {
  font-size: var(--text-caption);
}

.side-details summary {
  color: var(--text-muted);
  cursor: pointer;
}

.side-details[open] summary {
  margin-block-end: calc(var(--increment) * 3);
}

/* A scaled-down snapshot of a reported page. */
.page-thumb {
  position: relative;
  display: block;
  block-size: calc(var(--increment) * 50);
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--line);
  border-radius: calc(var(--increment) * 3);
  background: var(--surface);
}

.page-thumb iframe {
  inline-size: 400%;
  block-size: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
}

.side-panel .page-thumb + p {
  font-size: var(--text-caption);
}

/* A quote with a leading rule. */
.callout {
  border-inline-start: 3px solid var(--kind-idea);
  border-radius: 0 calc(var(--increment) * 3) calc(var(--increment) * 3) 0;
  background: color-mix(in oklch, var(--kind-idea) 8%, transparent);
}

.callout-title {
  color: var(--kind-idea);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}

/* An error callout. */
.callout-attention {
  border-inline-start-color: var(--attention);
  background: color-mix(in oklch, var(--attention) 6%, transparent);
}

.callout-attention .callout-title {
  color: var(--attention);
}

/* A message's text, preserving lines. */
.message-text {
  border-radius: var(--control-radius);
  background: var(--well);
  font-size: var(--text-caption);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* An item's history as a dotted timeline. */
.activity {
  position: relative;
  list-style: none;
}

.activity::before {
  position: absolute;
  inset-block: calc(var(--increment) * 2);
  inset-inline-start: calc(var(--increment) * 1.5);
  inline-size: 2px;
  background: var(--fill);
  content: "";
}

.activity-entry {
  position: relative;
}

.activity-entry::before {
  position: absolute;
  inset-block-start: calc(var(--increment) * 1.5);
  inset-inline-start: calc(var(--increment) * -5.5);
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 3);
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--text-muted);
  content: "";
}

.activity-when {
  color: var(--text-muted);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.activity-quote {
  border-radius: calc(var(--increment) * 3);
  background: var(--well);
}

/* Worker health and tasks. */
.health-banner {
  border-radius: var(--control-radius);
  background: var(--well);
}

.health-banner p {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.health-banner-trouble {
  background: color-mix(in oklch, var(--attention) 8%, transparent);
}

.task-row {
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.task-row-main {
  flex: 1;
  min-inline-size: 0;
}

.task-name {
  font-weight: var(--weight-medium);
}

.task-purpose {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.task-error {
  color: var(--attention);
  font-size: var(--text-caption);
}

.task-row-side {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-caption);
}


/* Scheduled sends by day. */
.day-head {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.agenda-line {
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.agenda-time {
  flex: none;
  inline-size: calc(var(--increment) * 12);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.channel {
  flex: none;
  color: var(--text-muted);
  vertical-align: middle;
}

.agenda-what {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-tries {
  flex: none;
  color: var(--attention);
  font-size: var(--text-caption);
}


/* A setting with its value on the right. */
.setting-row {
  border-block-end: var(--border-width-hairline) solid var(--line);
}

:is(.setting-row, .control-head) > div {
  flex: 1;
}

.setting-name {
  font-weight: var(--weight-medium);
}

.setting-meaning {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.setting-value {
  flex: none;
  padding: calc(var(--increment) * 0.5) calc(var(--increment) * 2);
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-size: var(--text-caption);
}


/* A control with its settings. */
.control {
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.control-setting {
  border-radius: var(--control-radius);
  background: color-mix(in oklch, var(--attention) 6%, transparent);
}

.control-setting > .form-action-row {
  border: 0;
}

/* A sent message row. */
.message-subject {
  color: var(--text);
  text-decoration: none;
}

.message-subject > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .message-subject:hover > span:last-child {
    text-decoration: underline;
  }
}

.agent-tokens {
  border-inline-start: 2px solid var(--fill);
}

/* An empty state. */
.all-clear {
  border-radius: var(--control-radius);
  background: var(--well);
}

.all-clear > .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  flex: none;
  color: var(--text);
}

.all-clear-title {
  font-weight: var(--weight-medium);
}

.all-clear p + p {
  color: var(--text-muted);
}

/* A growing comment box. */
.composer .form textarea {
  min-block-size: calc(var(--increment) * 22);
  field-sizing: content;
}

/* The statistics page. */

.statistics-about {
  max-inline-size: 72ch;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.statistics-totals dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-totals dd {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.statistics-chart {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--increment) * 30);
}

.statistics-bar {
  fill: var(--accent-strong);
}

.statistics-hit {
  fill: transparent;
}

@media (hover: hover) {
  g:hover > .statistics-bar {
    fill: var(--accent);
  }
}

.statistics-range {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-baseline {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.statistics-audience dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-audience dd {
  font-variant-numeric: tabular-nums;
}

.statistics-audience dd span {
  font-weight: var(--weight-semibold);
}

.settlement {
  inline-size: 100%;
  border-collapse: collapse;
}

.settlement :is(th, td) {
  padding: calc(var(--increment) * 2);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: start;
}

/* Dialogs read their own channels. Without the runtime they are inline
 * details elements. */
[data-modal] {
  --reads-endpoints: [data-modal-shell], [data-modal-trigger], [data-surface-content];
  --reads-p: [data-modal-shell], [data-modal-trigger], [data-surface-content];
  --reads-dy: [data-modal-shell];
  --reads-dc: [data-modal-shell];
  --p: 0;
  --dy: 0;
  --dc: 0;

  position: relative;
  inline-size: max-content;
  max-inline-size: 100%;
}

[data-modal] :is([data-modal-shell], [data-modal-trigger], [data-surface-content]) {
  --surface-width-collapsed: calc(var(--increment) * 24);
  --surface-width-expanded: calc(var(--increment) * 120);
  --surface-height-collapsed: var(--minimum-target-size);
  --surface-height-expanded: calc(var(--increment) * 100);
  --surface-left-collapsed: 0px;
  --surface-left-expanded: 0px;
  --surface-top-collapsed: 0px;
  --surface-top-expanded: 0px;
  --surface-drop: 8;
  --surface-rise: 0;
  --surface-lift: 0;
  --surface-radius-collapsed: calc(var(--increment) * 4);
  --surface-radius-expanded: var(--surface-open-radius, var(--radius));
  --surface-grow: 5;
  --surface-grow-y: 5;
  --surface-anchor-x: 0.5;
  --surface-anchor-y: 0.5;
}

/* Values derived from `--p`, which doesn't inherit, for the shell's
 * pseudo-elements. */
[data-modal] .modal-shell {
  --surface-elevation-radius: var(--surface-radius);
  --surface-chrome: clamp(0, 2 * var(--p), 1);
  --surface-edge-light: clamp(0, 2 * var(--p) - 1, 1);

  display: grid;
  inline-size: auto;
  block-size: auto;
  place-items: center;
  translate: 0 calc(var(--surface-pull-y) * 1px);
  scale: var(--surface-pull-scale);
}

[data-modal] .modal-shell.surface-elevation-edge-light::before {
  opacity: var(--surface-chrome);
}

[data-modal] .modal-shell[open] {
  inset-inline-start: var(--surface-left);
  inset-block-start: var(--surface-top);
  inline-size: var(--surface-width);
  block-size: var(--surface-height);
  overflow: clip;
}

/* A fetched dialog's shell is a plain element, so like a closed details it
 * renders nothing but its trigger until opened. */
[data-modal] .modal-shell:not([open]) > .modal-expanded {
  display: none;
}

/* A fetched dialog's trigger is a link, drawn as a summary would be. Zero
 * specificity, so the trigger's own class styles it. */
:where([data-modal] a.modal-collapsed) {
  display: block;
  color: inherit;
  text-decoration: none;
}

[data-modal] .modal-collapsed {
  grid-area: 1 / 1;
  margin: 0;
  opacity: var(--surface-resting-opacity);
  scale: var(--surface-resting-scale);
  transform-origin: center;
  cursor: pointer;
}

/* While open, both faces keep their measured sizes and are pinned at the
 * anchor: each face's point there stays on the shell's point there. At rest
 * the trigger's box is the shell's, so it doesn't move when it leaves the
 * flow. */
[data-modal] .modal-shell[open] .modal-collapsed {
  position: absolute;
  inset-inline-start: calc(var(--surface-anchor-x) * 100%);
  inset-block-start: calc(var(--surface-anchor-y) * 100%);
  inline-size: var(--surface-width-collapsed);
  block-size: var(--surface-height-collapsed);
  translate: calc(var(--surface-anchor-x) * -100%) calc(var(--surface-anchor-y) * -100%);
  transform-origin: calc(var(--surface-anchor-x) * 100%) calc(var(--surface-anchor-y) * 100%);
}

[data-modal] .modal-expanded {
  position: absolute;
  inset-inline-start: calc(var(--surface-anchor-x) * 100%);
  inset-block-start: calc(var(--surface-anchor-y) * 100%);
  inline-size: var(--surface-width-expanded);
  block-size: var(--surface-height-expanded);
  overflow: hidden;
  border-radius: var(--surface-radius-expanded);
  opacity: var(--surface-open-opacity);
  translate: calc(var(--surface-anchor-x) * -100%) calc(var(--surface-anchor-y) * -100%);
  scale: var(--surface-cover-scale);
  transform-origin: calc(var(--surface-anchor-x) * 100%) calc(var(--surface-anchor-y) * 100%);
  pointer-events: none;
  /* The panel uses surface colours, not its trigger's. */
  color: var(--text);
}

[data-modal] .modal-shell[open] .modal-expanded {
  pointer-events: auto;
}

:root[data-rt-js] [data-modal] .modal-shell[open] .modal-collapsed {
  pointer-events: none;
}

[data-modal]:has(> .modal-shell[open])
  :is([data-modal-shell], [data-modal-trigger], [data-surface-content]) {
  --p: 1;
}

/* Surface opening parameters, read by `openBox`. Presentations override
 * as needed:
 *   --surface-edge          the clearance it keeps from the window's sides
 *   --surface-foot          and from its foot, the home indicator's at least
 *   --surface-headroom      and from its top, which a tall surface stops at
 *   --surface-measure       the width it opens to where the window allows
 *   --surface-max-measure   the width it never passes
 *   --surface-open-radius   its corner open, concentric with the page's
 *   --surface-open-at       where it opens: at its trigger's top (`trigger`),
 *                           with its heading on the trigger's label
 *                           (`heading`), centred (`center`), or standing on
 *                           the window's foot (`bottom`)
 * A part that rests at a trigger elsewhere (the foot action) reads them too,
 * since its rest is measured against the same window. */
:is([data-modal], [data-sheet], [data-part="foot-action"]) {
  --surface-edge: var(--grid-edge-track-width);
  --surface-foot: max(var(--surface-edge), env(safe-area-inset-bottom));
  --surface-headroom: max(calc(var(--increment) * 22), env(safe-area-inset-top));
  --surface-measure: calc(var(--increment) * 120);
  --surface-max-measure: var(--grid-contained-max-inline-size);
  --surface-open-radius: calc(var(--radius) - var(--surface-edge));
  --surface-open-at: center;
}

/* Dialogs open at the trigger on phones and centred on desktops. The inner
 * grid picks its rung from the width. */
[data-modal] {
  --surface-open-at: trigger;
  --surface-inset: var(--grid-contained-content-inset-inline);
  --pull-size-down: -0.12;
  --pull-size-up: -0.12;
}

[data-modal].modal-wide {
  --surface-measure: calc(var(--increment) * 180);
}

@media (min-width: 768px) {
  [data-modal] {
    --surface-open-at: center;
  }
}

[data-modal] .modal-shell::backdrop {
  display: none;
}

[data-modal] .modal-shell {
  --surface-elevation-strength: var(--surface-chrome);
  --pull-t-down: min(
    1,
    max(0, (var(--surface-drop) - var(--pull-edge)) / var(--drag-limit))
  );
  /* Upward the edge follows the finger until the allowance, then only
   * shrinks. */
  --pull-t-up: min(
    1 + var(--surface-lift) / var(--drag-limit),
    max(0, (var(--surface-rise) - var(--pull-edge)) / var(--drag-limit))
  );
  background: color-mix(
    in srgb,
    transparent,
    var(--surface) calc(var(--surface-chrome) * 100%)
  );
}

/* A glass dialog fades its glass and backdrop filter in as it opens, since
 * its trigger may already be on glass. Open, the fill is denser over the
 * dim. The glass is a `::after` layer, since a filter on the shell would
 * hide its edge light (`::before`). */
[data-modal] .modal-shell.glass-material {
  --glass-material-fill-dimmed: oklch(from var(--glass-material-fill) l c h / calc(alpha + 0.12));

  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-modal] .modal-shell.glass-material[open]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: color-mix(
    in srgb,
    transparent,
    var(--glass-material-fill-dimmed) calc(var(--surface-chrome) * 100%)
  );
  pointer-events: none;
  -webkit-backdrop-filter:
    blur(calc(var(--glass-material-blur) * var(--surface-chrome)))
    saturate(calc(1 + (var(--glass-material-saturation) - 1) * var(--surface-chrome)))
    contrast(calc(1 + (var(--glass-material-contrast) - 1) * var(--surface-chrome)))
    brightness(calc(1 + (var(--glass-material-brightness) - 1) * var(--surface-chrome)));
  backdrop-filter:
    blur(calc(var(--glass-material-blur) * var(--surface-chrome)))
    saturate(calc(1 + (var(--glass-material-saturation) - 1) * var(--surface-chrome)))
    contrast(calc(1 + (var(--glass-material-contrast) - 1) * var(--surface-chrome)))
    brightness(calc(1 + (var(--glass-material-brightness) - 1) * var(--surface-chrome)));
}

[data-modal] .modal-shell.surface-elevation-edge-light::before {
  /* The shell's edge light fades in over the second half. */
  opacity: var(--surface-edge-light);
}

[data-modal] .modal-shell[open] {
  position: fixed;
  z-index: var(--layer-dialog);
  pointer-events: auto;
}

[data-modal] .modal-expanded {
  display: block;
  overflow: hidden auto;
  background: transparent;
  overscroll-behavior: none;
  touch-action: pan-y;
}

/* A landed dialog that doesn't scroll stops clipping (`data-rt-landed`,
 * `data-rt-scrolls`). */
[data-modal] .modal-shell[data-rt-landed]:not([data-rt-scrolls]),
[data-modal] .modal-shell[data-rt-landed]:not([data-rt-scrolls]) .modal-expanded {
  overflow: visible;
}

/* The document rises above the edge light while a card moves past it. */
[data-modal] .modal-shell:has([data-rt-moving]) .modal-expanded {
  z-index: 2;
}

/* A dialog's frame (`pages::dialog`): the close, the grid with the head and
 * body, and for a form the foot. The frame is the form when there is one.
 * When the content scrolls, the foot sticks to its end as the close sticks
 * to its top. Otherwise the foot stays in flow: a landed dialog that doesn't
 * scroll stops clipping, and a sticky foot would then stick to the page's
 * scroller. */
.surface-frame {
  /* Content stands at the contained grid's content line. */
  --surface-inset: var(--grid-contained-content-inset-inline);

  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  border-start-end-radius: inherit;
}

.surface-frame > .modal-grid {
  flex: 1 0 auto;
  min-block-size: 0;
}

/* A foot may have its own fill and top spacing (`--surface-foot-fill`,
 * `--surface-foot-space`). */
.surface-frame .surface-foot {
  inset-block-end: 0;
  padding: var(--surface-foot-space, 0px) var(--surface-inset) var(--surface-inset);
  background: var(--surface-foot-fill, transparent);
}

/* While the body scrolls under it, the foot is opaque. */
[data-rt-scrolls] .surface-frame .surface-foot {
  position: sticky;
  z-index: 3;
  background: var(--surface-foot-fill, var(--surface));
}

/* A dangerous commit and the way back stand at equal width, and the way
 * back reads as a button. */
.surface-foot .form-actions:has(> .form-submit-dangerous):not(:has(> .form-submit-primary)) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.surface-foot .form-actions:has(> .form-submit-dangerous):not(:has(> .form-submit-primary))
  > .form-cancel {
  color: var(--text);
  mix-blend-mode: normal;
  background: var(--interactive-wash);
}

/* A lone press fills the foot. */
.surface-foot .form-actions:not(:has(> :nth-child(2))) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The measuring state drops percentage minimums, which WebKit resolves
 * against the fallback size. */
[data-surface-content][data-rt-measuring] .surface-frame,
[data-surface-content][data-rt-measuring].surface-frame {
  min-block-size: 0;
}

.modal-body {
  min-inline-size: 0;
}

/* A surface head (`listalla_core::surface`, `surface-head`). */
.surface-head-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.surface-head-heading {
  min-inline-size: 0;
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-head-heading > * {
  min-inline-size: 0;
  overflow-x: clip;
  text-overflow: ellipsis;
}

/* Outside a surface the lead is a head button's size, centred on the band
 * (`SurfaceMetrics::lead`). */
.surface-head-lead {
  margin-block-start: var(--surface-lead-offset);
}

/* In a surface the lead mirrors the close pocket: it fills the band's top
 * start corner, reaching from the content line to the surface's edge, and
 * curves in at its inner corner. */
[data-rt-detached] .surface-head-lead {
  --surface-lead: var(--surface-band);

  align-self: start;
  margin-block-start: 0;
  margin-inline-start: calc(-1 * var(--grid-contained-content-inset-inline));
  overflow: hidden;
  border-start-start-radius: var(--surface-open-radius);
  border-end-end-radius: var(--surface-pocket-curve);
}

[data-rt-detached] .surface-head-lead :is(.avatar, img) {
  border-radius: 0;
}

/* A head's content sits optically centred, without moving its box. */
.surface-head-title,
.surface-head-actions,
.surface-pocket .icon {
  translate: 0 var(--surface-head-optical);
}

/* A head press with a form of its own (`HeadPress::posts_to`) stands as
 * the button alone. */
.surface-press-form {
  display: contents;
}

/* A round head button (`--surface-press`). `.surface-press-quiet` fills
 * only on hover. */
.surface-press {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--surface-press);
  block-size: var(--surface-press);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background-color: var(--surface-press-fill);
  cursor: pointer;
  transition:
    background-color var(--interaction-duration),
    box-shadow var(--interaction-duration),
    scale var(--interaction-duration);
}

.surface-press-quiet {
  background-color: transparent;
}

.surface-press .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.surface-press:active:not(:disabled) {
  scale: 0.92;
}

.surface-press:disabled {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  cursor: default;
}

@media (hover: hover) {
  .surface-press:not(:disabled):hover {
    background-color: var(--surface-press-fill-hover);
    box-shadow: var(--elevation-resting);
  }
}

/* The head's lead image size (`--surface-lead`). */
.surface-head-lead .avatar {
  --avatar-size: var(--surface-lead);
}

.surface-head-lead img {
  display: block;
  inline-size: var(--surface-lead);
  block-size: var(--surface-lead);
  object-fit: cover;
  border-radius: var(--control-radius);
}

/* A detached surface's head leaves room for the close pocket, less
 * `--surface-inset`. */
[data-rt-detached] .surface-head {
  padding-inline-end: max(0px, var(--surface-pocket-room) - var(--surface-inset, 0px));
}

/* A part standing in the head is raised content, so it stands a gutter from
 * the pocket as from the surface's edge. */
[data-rt-detached] .surface-head:has(> .surface-head-part) {
  padding-inline-end: var(--surface-pocket-inline);
}

/* The close pocket (`listalla_core::surface::pocket`), recessed into the
 * top right corner. It is the content's sticky first child and takes no
 * room. */
.surface-pocket {
  /* Reaches the corner through side padding
   * (`--surface-pocket-inset-inline`). */
  position: sticky;
  z-index: 3;
  inset-block-start: 0;
  /* Only while detached. */
  display: none;
  place-items: center;
  inline-size: var(--surface-pocket-inline);
  block-size: var(--surface-band);
  margin-block-end: calc(-1 * var(--surface-band));
  margin-inline: auto calc(-1 * var(--surface-pocket-inset-inline, 0px));
  padding: 0;
  border: 0;
  /* The dialog's corner. */
  border-start-end-radius: inherit;
  border-end-start-radius: var(--surface-pocket-curve);
  color: var(--text);
  /* Shading only, no blur, which drew the page into the pocket once the
   * dialog stopped clipping. */
  --surface-pocket-lit: transparent;
  background:
    linear-gradient(var(--surface-pocket-lit), var(--surface-pocket-lit)),
    radial-gradient(130% 130% at 100% 0%, var(--recess-floor-open) 35%, var(--recess-floor-walled) 100%);
  box-shadow:
    inset 4px -4px 10px -6px var(--recess-shade),
    -1px 1px 0 var(--recess-lip);
  cursor: pointer;
  transition: box-shadow var(--interaction-duration);
}

[data-rt-detached] .surface-pocket {
  display: grid;
}

/* In a grid, the pocket shares the first row. */
.surface-pocket {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: end;
}


.surface-pocket + * {
  grid-row: 1;
}

.surface-pocket .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  transition: scale var(--interaction-duration);
}

.surface-pocket:active {
  box-shadow:
    inset 6px -6px 14px -6px var(--recess-shade-deep),
    -1px 1px 0 var(--recess-lip);
}

.surface-pocket:active .icon {
  scale: 0.88;
}

@media (hover: hover) {
  .surface-pocket:hover {
    --surface-pocket-lit: var(--recess-lit);
    box-shadow:
      inset 3px -3px 8px -6px var(--recess-shade-shallow),
      -1px 1px 0 var(--recess-lip);
  }
}

.modal-expanded .form-actions {
  justify-content: flex-end;
  gap: var(--increment);
}

.modal-expanded .form-submit-primary {
  border-radius: calc(var(--surface-open-radius) - var(--surface-inset));
}

html:has([data-modal] [data-modal-shell][data-rt-summoned])
  :is(body, [data-part="page"]) {
  --dim: var(--dim-sheet);
}

/* Without the runtime, dialogs open inline. */
:root:not([data-rt-js]) [data-modal] .modal-shell[open] {
  position: static;
  inline-size: auto;
  block-size: auto;
  justify-items: stretch;
  overflow: visible;
  translate: none;
  scale: 1;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open] .modal-collapsed {
  position: static;
  inline-size: auto;
  block-size: auto;
  opacity: 1;
  translate: none;
  scale: 1;
  pointer-events: auto;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open] .modal-expanded {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  opacity: 1;
  translate: none;
  scale: 1;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open] {
  background: transparent;
  box-shadow: none;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open]::before {
  display: none;
}

/* Without the runtime, a header action's dialog hangs below the bar's end
 * (`.site-actions`). */
:root:not([data-rt-js]) [data-modal].site-header-dialog,
:root:not([data-rt-js]) .site-header-dialog .modal-shell[open] {
  position: static;
  scale: none;
}

:root:not([data-rt-js]) .site-header-dialog .modal-shell[open] .modal-expanded {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: auto 0;
  inline-size: min(var(--surface-measure), 100vw - var(--increment) * 8);
  max-block-size: calc(100svh - var(--surface-headroom));
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--surface-elevation-contact-shadow), var(--surface-elevation-ambient-shadow);
}

/* Venue policies. */
.venue-fact-policies {
  position: relative;
}

.venue-fact-policies::before,
.venue-fact-policies::after {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-fact-policies::before {
  inset-block-start: 0;
}

.venue-fact-policies::after {
  inset-block-end: 0;
}

.venue-policy-heading .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.venue-policy-copy {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* The venue location card. The outer element is the container query and
 * the inner one the surface. */
.venue-location {
  container: venue-location / inline-size;
  min-inline-size: 0;
}

.venue-location-elevation {
  --surface-elevation-radius: var(--corner-radius);
}

/* A veil over a picture for the copy: a gradient (`::before`) and a haze
 * (`::after`). Uses set the ink, strengths and reach. */
.veiled-panel {
  --veil-direction: to top;
  --veil-inset: auto 0 0;
  --veil-saturation: 1;
  --haze-saturation: 1;

  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  min-inline-size: 0;
  border-radius: inherit;
}

.veiled-panel::before,
.veiled-panel::after {
  display: var(--veil-display);
  content: "";
  position: absolute;
  inset: var(--veil-inset);
  z-index: 1;
  pointer-events: none;
}

.veiled-panel::before {
  inline-size: var(--veil-inline-size, auto);
  block-size: var(--veil-block-size, auto);
  background: linear-gradient(
    var(--veil-direction),
    color-mix(in oklch, var(--veil-ink) var(--veil-near), transparent) 0 var(--veil-hold),
    color-mix(in oklch, var(--veil-ink) var(--veil-far), transparent) var(--veil-fade),
    transparent 100%
  );
  -webkit-backdrop-filter: blur(6px) saturate(var(--veil-saturation));
  backdrop-filter: blur(6px) saturate(var(--veil-saturation));
  -webkit-mask-image: linear-gradient(var(--veil-direction), black 0 var(--veil-mask), transparent 100%);
  mask-image: linear-gradient(var(--veil-direction), black 0 var(--veil-mask), transparent 100%);
}

.veiled-panel::after {
  inline-size: var(--haze-inline-size, auto);
  block-size: var(--haze-block-size, auto);
  background: color-mix(in oklch, var(--veil-ink) var(--haze), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(var(--haze-saturation));
  backdrop-filter: blur(14px) saturate(var(--haze-saturation));
  -webkit-mask-image: linear-gradient(var(--veil-direction), black 0 var(--haze-mask), transparent 100%);
  mask-image: linear-gradient(var(--veil-direction), black 0 var(--haze-mask), transparent 100%);
}

.veiled-copy {
  z-index: 2;
  align-self: end;
  display: grid;
  min-inline-size: 0;
}

/* The veil uses the page's surface. */
.venue-location-panel {
  --veil-ink: var(--surface);
  --veil-near: 68%;
  --veil-hold: 34%;
  --veil-far: 16%;
  --veil-fade: 70%;
  --veil-block-size: 74%;
  --veil-saturation: 0.82;
  --veil-mask: 58%;
  --haze: 12%;
  --haze-block-size: 50%;
  --haze-saturation: 0.74;
  --haze-mask: 44%;

  min-block-size: calc(var(--increment) * 84);
  background: var(--card-picture-fill);
  -webkit-backdrop-filter: var(--card-backdrop);
  backdrop-filter: var(--card-backdrop);
}

.venue-location-copy {
  max-inline-size: 38rem;
  row-gap: calc(var(--increment) * 3);
  padding: calc(var(--increment) * 6);
}

/* A card's title, the same everywhere. */
.card-label {
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
}

.venue-location-address {
  font-style: normal;
}

.venue-location-city,
.venue-location-street {
  display: block;
}

.venue-location-city {
  font-weight: var(--weight-semibold);
}

.venue-location-street {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-book);
}

.venue-location-map {
  --venue-location-map-focus-x: 0.5;
  --venue-location-map-focus-y: 0.24;

  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  min-inline-size: 0;
  background-color: var(--card-picture-fill);
  -webkit-mask-image: var(--location-map-fade-stacked);
  mask-image: var(--location-map-fade-stacked);
}

.venue-location-map .leaflet-tile-pane {
  filter: var(--map-tile-filter);
}

.venue-location-map-marker {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 20px;
  block-size: 20px;
  border: var(--border-width-thin) solid var(--accent-text);
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-ink) 30%, transparent);
}

.venue-location-map-marker-dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: 6px;
  block-size: 6px;
  border: var(--border-width-thin) solid var(--accent-text);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 50%);
}

@container venue-location (min-width: 32rem) {
  .venue-location-panel {
    min-block-size: calc(var(--increment) * 64);
  }

  .venue-location-map {
    --venue-location-map-focus-x: 0.75;
    --venue-location-map-focus-y: 0.5;
    -webkit-mask-image: var(--location-map-fade-beside);
    mask-image: var(--location-map-fade-beside);
  }

  .venue-location-copy {
    align-self: stretch;
    inline-size: 46%;
    max-inline-size: none;
    align-content: center;
  }

  /* Side by side, the veil runs horizontally. */
  .venue-location-panel {
    --veil-direction: to right;
    --veil-inset: 0 auto 0 0;
    --veil-near: 62%;
    --veil-hold: 30%;
    --veil-fade: 68%;
    --veil-inline-size: 70%;
    --veil-block-size: auto;
    --veil-saturation: 0.8;
    --veil-mask: 54%;
    --haze: 14%;
    --haze-inline-size: 50%;
    --haze-block-size: auto;
    --haze-saturation: 0.72;
    --haze-mask: 42%;
  }
}

/* Booking by date. The rail is a surface's frame, so its parts stand at the
 * frame's inset. */
.booking-form {
  --booking-inset: var(--surface-inset);
  --booking-section-space: calc(var(--increment) * 4);
}

/* A summoned sheet at the window's foot, at phone width. */
[data-sheet],
[data-part="foot-action"] {
  --surface-open-at: bottom;
  --surface-headroom: max(calc(var(--increment) * 12), env(safe-area-inset-top));
  --surface-measure: 32rem;
}

/* Placed by the split, or summoned as a sheet. */
.booking-panel {
  inline-size: 100%;
}

[data-sheet]::backdrop {
  display: none;
}

[data-sheet]:focus,
.venue-lightbox:focus {
  outline: none;
}



.booking-widget-elevation {
  min-inline-size: 0;
}

.booking-widget {
  display: grid;
  /* Full width, since the calendar contributes none. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  min-inline-size: 0;
}

.availability-calendar {
  container: availability-calendar / inline-size;
  --calendar-inset: var(--booking-inset);
  --calendar-column-gap: var(--increment);
  --calendar-day-radius: calc(var(--increment) * 3);
  /* Every month is six rows tall, shared among its weeks, so paging never
   * resizes the calendar. */
  --calendar-row-size: calc(var(--increment) * 12);
  --calendar-rows: 6;
  --calendar-padding-end: calc(var(--increment) * 2);
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* The calendar's head (`surface-head`), inset as the days are. */
.calendar-header {
  --surface-inset: var(--calendar-inset);

  grid-column: 1 / -1;
  margin-inline: var(--calendar-inset);
}

.calendar-month {
  display: flex;
  flex-direction: column;
  align-items: start;
  border-radius: var(--control-radius);
}

/* The week view's label unfolds to months. */
.calendar-month:is(button) {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.calendar-month:is(button):focus-visible {
  outline-offset: 0;
}

/* Capitalize month titles. */
.calendar-month-name {
  display: block;
}

.calendar-month-name::first-letter {
  text-transform: uppercase;
}

/* Show the anchored page's label
 * (`[data-calendar-page][data-group-anchor]`), else the first. */
[data-calendar-label-first] {
  display: none;
}

@supports not (scroll-initial-target: nearest) {
  :root:not([data-rt-js]) [data-calendar-label]:has(+ [data-calendar-label-first]) {
    display: none;
  }

  :root:not([data-rt-js]) [data-calendar-label-first] {
    display: grid;
  }
}

.calendar-weekdays {
  column-gap: var(--calendar-column-gap);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0 var(--calendar-inset) var(--increment);
}

.calendar-weekdays span {
  text-align: center;
}

.calendar-rail {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: inline mandatory;
  overflow-anchor: none;
}

/* Without the runtime, open on the shown page. Chrome supports it, Safari
 * not yet. Off with the runtime, which places rails itself. */
:root:not([data-rt-js]) [data-calendar-rail] > [data-calendar-page][data-group-anchor] {
  scroll-initial-target: nearest;
}

/* Off-screen pages skip layout and paint, which took a press's layout
 * from about 11ms to 5 (measured 2026-10-12, Chrome). */
.calendar-rail > [data-calendar-page]:not([data-rt-shown]) {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--minimum-target-size) * 6);
}

.calendar-page {
  flex: 0 0 100%;
  display: grid;
  grid-auto-rows: 1fr;
  block-size: calc(var(--calendar-rows) * var(--calendar-row-size) + var(--calendar-padding-end));
  padding: 0 var(--calendar-inset) var(--calendar-padding-end);
  scroll-snap-align: start;
}

.availability-calendar.calendar-weeks {
  --calendar-rows: 1;
}

/* Hide `<noscript>` week text (`calendar::DRAWN_PAGES`) with scripting. */
.calendar-page > noscript {
  display: none;
}

@media (scripting: none) {
  .calendar-page > noscript {
    display: contents;
  }
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--calendar-column-gap);
}

/* Calendar days and hours: free in green, chosen in deep green, a choice's
 * span between, and unavailable bare and muted. All dates use one weight.
 * Free days don't join, and unavailable numbers aren't struck through. */
.calendar-day[data-availability="open"] {
  color: var(--availability-ink);
}

.calendar-day[data-availability="open"] .calendar-day-number {
  background: var(--availability-fill);
}

.calendar-day {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  color: var(--text);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

/* The date's input covers its cell, overriding `.form input[type=radio]`. */
:is(.form, .availability-calendar) .calendar-day input {
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--calendar-column-gap) / -2);
  inline-size: calc(100% + var(--calendar-column-gap));
  block-size: 100%;
  margin: 0;
  border: 0;
  background: none;
  appearance: none;
  opacity: 0;
  cursor: inherit;
}

/* Date tiles fill their cells, less the gap. */
.calendar-day-number {
  pointer-events: none;
  position: relative;
  z-index: 1;
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: calc(100% - var(--calendar-column-gap));
  place-items: center;
  border-radius: var(--calendar-day-radius);
}

/* Without the runtime, selection follows `:checked`, since
 * `data-selected` isn't redrawn. */
.calendar-day:has(input:checked) .calendar-day-number,
.calendar-day[data-selected]:not(:has(input)) .calendar-day-number,
:root[data-rt-js] .calendar-day[data-selected] .calendar-day-number {
  color: var(--surface);
  background: var(--availability-selected);
}

.calendar-day:has(input:checked),
.calendar-day[data-selected]:not(:has(input)),
:root[data-rt-js] .calendar-day[data-selected] {
  mix-blend-mode: normal;
}

/* A month day opening the week view, styled as a cell. */
.calendar-day:is(a, button) {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: none;
}

.calendar-day:focus-visible {
  outline: 0;
}

.calendar-day:focus-visible .calendar-day-number,
.calendar-day:has(input:focus-visible) .calendar-day-number {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* A dot under today. */
.calendar-day[data-today] .calendar-day-number::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--increment) * 1.5);
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: currentColor;
}

.calendar-day[data-availability="past"],
.calendar-day[data-availability="unbookable"] {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  cursor: default;
}

.calendar-day:is([data-availability="reserved"], [data-availability="alternative"]) {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.calendar-day[data-availability="alternative"] .calendar-day-number {
  outline: var(--border-width-thin) dashed var(--text-muted);
  outline-offset: -1px;
}

.calendar-day[data-availability="alternative"]:has(input:focus-visible) .calendar-day-number {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* The week strip: free days green over a dot, the shown day on a green
 * disc. */
.calendar-weeks .calendar-day[data-availability] .calendar-day-number {
  inline-size: calc(var(--increment) * 10);
  block-size: calc(var(--increment) * 10);
  max-inline-size: 100%;
  border-radius: 50%;
  background: transparent;
}

.calendar-weeks .calendar-day[data-availability="open"] .calendar-day-number::before {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--increment) * 1.25);
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: currentColor;
}

.calendar-weeks .calendar-day[data-today] .calendar-day-number::after {
  display: none;
}

.calendar-weeks .calendar-day[data-selected] .calendar-day-number {
  color: var(--surface);
  background: var(--availability-selected);
}

.calendar-key {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--increment) calc(var(--increment) * 3);
  padding: 0 var(--calendar-inset) calc(var(--increment) * 2);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.calendar-key > span {
  display: inline-flex;
  align-items: center;
  gap: var(--increment);
}


.calendar-key > span::before {
  content: "";
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 3);
  border-radius: 50%;
}

.calendar-key-alternative::before {
  border: var(--border-width-thin) dashed var(--text-muted);
}

/* Sized by its container, not the viewport. */
@container availability-calendar (max-width: 340px) {
  .availability-calendar > * {
    --calendar-inset: calc(var(--increment) * 2);
    --calendar-day-radius: calc(var(--increment) * 2);
  }

  /* Smaller dates in narrow tiles, to fit "1.12.". */
  .calendar-day-number > .text-body {
    font-size: var(--text-caption);
  }
}

@media (forced-colors: active) {
  .calendar-day:has(input:disabled) {
    color: GrayText;
  }

  .calendar-day:has(input:checked) .calendar-day-number,
  .calendar-day[data-selected] .calendar-day-number {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
  }
}

/* The panel's card is the container. */
.time-booking-form,
.time-booking-widget {
  container: time-booking / inline-size;
}

.time-booking-widget {
  overflow: hidden;
}

.time-picker {
  display: grid;
  min-inline-size: 0;
}

.time-picker-days {
  min-inline-size: 0;
  overflow: hidden;
}

/* A pixel clear at the edges, since fractional page widths showed a sliver
 * of the next page (found 2026-10-31). */
.time-picker-day-page {
  flex: 0 0 100%;
  display: grid;
  min-inline-size: 0;
  align-content: start;
  row-gap: calc(var(--increment) * 3);
  padding: 0 max(var(--booking-inset), 1px);
  scroll-snap-align: start;
}

/* The start and length (`TimeGrid::values`): steppers around native
 * selects. */
.time-picker-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--increment) * 2);
  padding: calc(var(--increment) * 3) var(--booking-inset) 0;
}

/* Hidden with the runtime, where the line sets both. An experiment. */
:root[data-rt-js] .time-picker-values {
  display: none;
}

/* Compact, with steppers enlarged by their hit area. */
.time-picker-value {
  --value-row: calc(var(--increment) * 8);
  display: grid;
  grid-template-columns: var(--minimum-target-size) minmax(0, 1fr) var(--minimum-target-size);
  align-items: center;
  padding-block: calc(var(--increment) * 1.5) var(--increment);
  border-radius: var(--control-radius);
  background: var(--interactive-wash);
}

/* Sizes set here, since the type classes' trim moved text off centre. */
.time-picker-value > label {
  grid-column: 1 / -1;
  justify-self: center;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* Overrides `.form select`. */
:is(.form, .time-picker) .time-picker-value > select {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--value-row);
  padding: 0;
  border: 0;
  appearance: none;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--text-body);
  line-height: 1;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.time-picker-step {
  display: grid;
  place-items: center;
  block-size: var(--value-row);
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: var(--text-subtitle);
  line-height: 1;
  cursor: pointer;
}

.time-picker-step > .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.time-picker-step:disabled {
  color: var(--text-disabled);
  cursor: default;
}

/* The price under the line. */
.time-picker-rate {
  margin: 0;
  padding: calc(var(--increment) * 2) var(--booking-inset) calc(var(--increment) * 4)
    calc(var(--booking-inset) + var(--timeline-scale-width));
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-variant-numeric: tabular-nums;
}

/* A day's timeline (`TimeGrid::timeline`), `--timeline-hour` per hour,
 * items placed by `--at` and sized by `--span` in hours. With the runtime
 * every day has one window height (`fitTimelineWindows`), scrolling long
 * days and spreading short ones. Without it the whole day shows at the
 * minimum hour height. */
.time-picker {
  --timeline-scale-width: calc(var(--increment) * 9);
  /* The minimum hour height for a readable booking. */
  --timeline-hour-least: calc(var(--increment) * 14);
  /* Room for the first and last hour labels (`.day-timeline-body`). */
  --timeline-ends: calc(var(--increment) * 6);
}

/* Declared on the rail, where the runtime sets `--timeline-window`. */
:root[data-rt-js] .time-picker-days {
  --timeline-window-size: var(--timeline-window, calc(var(--timeline-hour-least) * 9));
}

.day-timeline {
  --timeline-hour: var(--timeline-hour-least);
  padding-block-start: var(--increment);
}

:root[data-rt-js] .day-timeline {
  --timeline-hour: max(
    var(--timeline-hour-least),
    (var(--timeline-window-size) - var(--timeline-ends)) / var(--hours)
  );
}

:root[data-rt-js] .day-timeline-window {
  block-size: var(--timeline-window-size);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* Every day page has the window's height, even without a line, since a
 * skipped page otherwise takes a taller placeholder height. */
:root[data-rt-js] .time-picker-day-page {
  block-size: calc(var(--timeline-window-size) + var(--increment));
}

/* Only edges with more day beyond fade. */
:root[data-rt-js] .day-timeline-window {
  --fade-above: 0px;
  --fade-below: 0px;
  -webkit-mask-image: linear-gradient(
    transparent,
    #000 var(--fade-above),
    #000 calc(100% - var(--fade-below)),
    transparent
  );
  mask-image: linear-gradient(
    transparent,
    #000 var(--fade-above),
    #000 calc(100% - var(--fade-below)),
    transparent
  );
}

:root[data-rt-js] .day-timeline-window[data-rt-above] {
  --fade-above: calc(var(--increment) * 6);
}

:root[data-rt-js] .day-timeline-window[data-rt-below] {
  --fade-below: calc(var(--increment) * 6);
}

/* Room for labels centred on the first and last rules. */
.day-timeline-body {
  display: grid;
  grid-template-columns: var(--timeline-scale-width) minmax(0, 1fr);
  padding-block: calc(var(--timeline-ends) / 2);
}

.day-timeline-scale {
  position: relative;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.day-timeline-scale > span {
  position: absolute;
  inset-block-start: calc(var(--at) * var(--timeline-hour));
  inset-inline-end: calc(var(--increment) * 2);
  translate: 0 -50%;
}

/* The line scrolls on swipe. Only the booking captures touch. */
.day-timeline-track {
  position: relative;
  block-size: calc(var(--hours) * var(--timeline-hour));
  overflow: hidden;
  border-radius: calc(var(--increment) * 3);
  background: var(--fill);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Hour rules, between availability and the booking. */
.day-timeline-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--timeline-hour) - 1px),
    var(--surface) calc(var(--timeline-hour) - 1px) var(--timeline-hour)
  );
  pointer-events: none;
}

.day-timeline-zone {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--at) * var(--timeline-hour));
  block-size: calc(var(--span) * var(--timeline-hour));
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.day-timeline-zone[data-state="free"] {
  background: var(--availability-fill);
}

.day-timeline-zone[data-state="taken"] {
  background: repeating-linear-gradient(
    135deg,
    var(--interactive-wash) 0 calc(var(--increment) * 1.5),
    transparent calc(var(--increment) * 1.5) calc(var(--increment) * 3)
  );
}

/* A hint where the first booking would go. */
.day-timeline-prompt {
  position: absolute;
  inset-inline: calc(var(--increment) * 2);
  inset-block-start: calc(var(--at) * var(--timeline-hour) + 1px);
  block-size: calc(var(--span) * var(--timeline-hour) - 2px);
  display: grid;
  place-items: center;
  border: var(--border-width-thin) dashed var(--availability-selected);
  border-radius: calc(var(--increment) * 3);
  color: var(--availability-ink);
  pointer-events: none;
}

/* The booking, with a grip and a resize bar. */
.day-timeline-booking {
  position: absolute;
  z-index: 1;
  inset-inline: calc(var(--increment) * 2);
  inset-block-start: calc(var(--at) * var(--timeline-hour) + 1px);
  block-size: calc(var(--span) * var(--timeline-hour) - 2px);
  min-block-size: var(--minimum-target-size);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: baseline;
  gap: var(--increment) calc(var(--increment) * 2);
  padding: calc(var(--increment) * 2.5) calc(var(--increment) * 3);
  border-radius: calc(var(--increment) * 3);
  color: var(--surface);
  background: var(--availability-selected);
  box-shadow: var(--elevation-raised);
  cursor: grab;
  touch-action: none;
  outline-offset: 3px;
  transition:
    inset-block-start var(--interaction-duration) var(--resize-easing),
    block-size var(--interaction-duration) var(--resize-easing);
}

.day-timeline-booking[data-rt-dragging] {
  cursor: grabbing;
  transition: none;
}

.day-timeline-booking > strong {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Span and length on one row, with the grip at the end. */
.day-timeline-length {
  opacity: 0.85;
}

.day-timeline-move {
  grid-column: 3;
  align-self: center;
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 4.5);
  background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 6px 6px;
  opacity: 0.75;
}

.day-timeline-stretch {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--increment) * -2);
  block-size: calc(var(--increment) * 7);
  display: grid;
  place-items: center;
  cursor: ns-resize;
  touch-action: none;
}

.day-timeline-stretch::before {
  content: "";
  inline-size: calc(var(--increment) * 8);
  block-size: var(--increment);
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.8;
  translate: 0 calc(var(--increment) * -1.5);
}

/* Longer lengths that fit, as pale labelled segments. */
.day-timeline-more {
  position: absolute;
  inset-inline: calc(var(--increment) * 2);
  inset-block-start: calc(var(--at) * var(--timeline-hour) + 2px);
  block-size: calc(var(--span) * var(--timeline-hour) - 4px);
  display: grid;
  align-items: end;
  justify-items: end;
  padding: var(--increment) calc(var(--increment) * 3);
  border: 0;
  border-radius: calc(var(--increment) * 2.5);
  color: var(--availability-ink);
  background: color-mix(in oklch, var(--availability-selected) 14%, transparent);
  font-family: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  touch-action: manipulation;
}

.day-timeline [data-rt-refused] {
  animation: day-timeline-refuse 260ms;
}

@keyframes day-timeline-refuse {
  25% { translate: calc(var(--increment) * -1) 0; }
  75% { translate: var(--increment) 0; }
}

.booking-control-options {
  min-inline-size: 0;
  margin: 0;
  padding: 0 var(--booking-inset);
  border: 0;
}

/* The rail's foot (`surface-foot`), a band under the questions. */
.booking-control-footer {
  --surface-foot-space: var(--booking-section-space);
  --surface-foot-fill: var(--card-band-fill);

  display: block;
  border: 0;
}

.booking-control-submit {
  display: grid;
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 12);
  place-items: center;
  padding: 0 calc(var(--increment) * 5);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* The book button. The P3 fill isn't on a border, which Safari
 * desaturates. */
.booking-button-glass {
  color: var(--booking-button-text);
  background: var(--booking-button-fill);
  box-shadow:
    inset 0 4px 6px -6px var(--booking-button-inner-light),
    inset 0 -4px 6px -6px var(--booking-button-inner-dark),
    0 2px 4px var(--booking-button-shadow);
}

.booking-button-glass:focus-visible {
  --focus-ring-color: var(--text);
  outline-offset: var(--focus-ring-offset);
}

.booking-button-glass:disabled {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--control-disabled-fill);
  box-shadow: none;
  cursor: default;
}

.booking-button-label {
  font-weight: var(--weight-book);
  letter-spacing: 0.015em;
}

/* The foot action and its sheet are two layers on one shell. The action
 * draws the shell, and the sheet's content fades in once it leaves rest.
 * The layout decides when they show (`SplitSummons`). */
[data-part="foot-action"],
[data-foot-action-content],
[data-sheet],
[data-sheet] [data-surface-content] {
  /* The spacing token as a unitless number. */
  --surface-drop: calc(var(--surface-foot) / 1px);
  --pull-t-down: max(
    0,
    (var(--surface-drop) - var(--pull-edge)) / var(--drag-limit)
  );
}

/* The foot action's size and position, and the page's end clearance
 * (`--page-end-clearance`). A leaving action keeps no clearance. */
:root {
  --foot-action-block-size: calc(var(--increment) * 18);
  --foot-action-block-inset: max(calc(var(--increment) * 4), env(safe-area-inset-bottom));
  --foot-action-room: calc(var(--foot-action-block-size) + var(--foot-action-block-inset));
}

.foot-action {
  --surface-elevation-radius: calc(var(--increment) * 10);
  --surface-elevation-ambient-geometry: var(--shadow-foot-geometry);
  --foot-action-max-width: calc(var(--increment) * 68);
  --foot-action-inline-inset: calc(var(--increment) * 2);
  --foot-action-down-y: calc(var(--drag-limit) * var(--pull-t-down) * 1px);
  --foot-action-down-scale: calc(1 + var(--pull-size-down));

  position: fixed;
  inset-inline: auto;
  inset-inline-start: 50%;
  inset-block-end: var(--foot-action-block-inset);
  z-index: var(--layer-action);
  /* Only where the layout shows it (`SplitSummons`). */
  display: none;
  inline-size: min(
    var(--foot-action-max-width),
    calc(100% - var(--foot-action-inline-inset) - var(--foot-action-inline-inset))
  );
  block-size: var(--foot-action-block-size);
  translate: -50% calc(var(--surface-pull-y) * 1px);
  scale: var(--surface-pull-scale);
  transform-origin: 50% 100%;
  touch-action: none;
  animation: foot-action-arrive var(--foot-action-entrance-duration) ease-out
    var(--foot-action-entrance-delay) backwards;
}

@keyframes foot-action-arrive {
  from {
    opacity: 0;
    translate: -50% var(--foot-action-down-y);
    scale: var(--foot-action-down-scale);
  }
}

.foot-action[data-rt-in-session] {
  animation-duration: var(--interaction-duration);
  animation-delay: 0ms;
}

.foot-action[data-rt-leaving] {
  transition:
    opacity var(--navigation-exit-duration) ease-in,
    translate var(--navigation-exit-duration) ease-in,
    scale var(--navigation-exit-duration) ease-in;
  opacity: 0;
  translate: -50% var(--foot-action-down-y);
  scale: var(--foot-action-down-scale);
}

.foot-action[data-rt-arrived] {
  animation: none;
}

.foot-action-surface {
  --glass-material-solid: clamp(0, var(--p), 1);

  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.foot-action-content {
  position: relative;
  z-index: 1;
  display: flex;
  block-size: 100%;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--increment) * 4);
  padding: calc(var(--increment) * 2);
  padding-inline-start: calc(var(--increment) * 5);
  overflow: hidden;
  border-radius: inherit;
}

/* The space page's foot action: the from price and the book button. */
.booking-sticky-price {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--increment);
  font-variant-numeric: tabular-nums;
}

.booking-sticky-price .text-caption {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.booking-sticky-price strong {
  font-weight: var(--weight-semibold);
}

.booking-sticky-trigger {
  display: grid;
  min-inline-size: calc(var(--increment) * 24);
  min-block-size: calc(var(--increment) * 12);
  place-items: center;
  padding-inline: calc(var(--increment) * 5);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

/* Without a price the button fills the bar. */
.booking-sticky-trigger:only-child {
  flex: 1;
}

.foot-action-content:has(> .booking-sticky-trigger:only-child) {
  padding-inline-start: calc(var(--increment) * 2);
}

[data-sheet][data-rt-summoned] {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: var(--surface-bottom-expanded);
  z-index: var(--layer-sheet);
  display: block;
  inline-size: var(--surface-width-expanded);
  block-size: var(--surface-height-expanded);
  pointer-events: auto;
  translate: -50% 0;
}

/* As a sheet, a part's content is its surface's frame, which insets its
 * parts. */
[data-sheet][data-rt-summoned] [data-surface-content] {
  --surface-content-scale: calc(var(--surface-open-scale) * var(--surface-pull-scale));
  --content: 1 / -1;
  --content-extended-1: 1 / -1;
  --content-extended-2: 1 / -1;
  --content-extended-3: 1 / -1;
  --bleed: 1 / -1;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  overflow-y: auto;
  /* The shell (the foot action) draws the fill and the edge, as a dialog's
   * shell does. */
  background: transparent;
  border-radius: var(--surface-radius-expanded);
  opacity: var(--surface-open-opacity);
  translate: 0 calc(var(--surface-pull-y) * 1px);
  scale: var(--surface-content-scale);
  transform-origin: 50% 100%;
  /* Clip the scaling content to the shell's box, in pre-transform
   * coordinates. */
  clip-path: inset(
    max(
      0px,
      var(--surface-height-expanded)
        - (
          var(--surface-height) + var(--surface-bottom)
            - var(--surface-bottom-expanded)
        ) / var(--surface-content-scale)
    )
    0
    max(
      0px,
      (var(--surface-bottom) - var(--surface-bottom-expanded))
        / var(--surface-content-scale)
    )
    0
    round var(--surface-radius-expanded)
  );
  overscroll-behavior: none;
  touch-action: pan-y;
}

.booking-panel[data-rt-summoned] .booking-widget-elevation {
  --surface-elevation-contact-shadow: 0 0 0 transparent;
  --surface-elevation-ambient-shadow: 0 0 0 transparent;
  --surface-elevation-edge-light-width: 0px;

  display: block;
  border-radius: inherit;
}

.booking-panel[data-rt-summoned] .booking-widget-elevation::before {
  display: none;
}

/* As a sheet the card is the shell's content, so the shell draws its fill. */
.booking-panel[data-rt-summoned] .booking-widget {
  background: transparent;
}



/* The summary is laid out on the page's grid in the page, and on its
 * surface's contained grid as a sheet. */
.flow-page-summary:not([data-rt-summoned]) .flow-summary-sheet > .modal-grid,
.flow-page-summary:not([data-rt-summoned]) .flow-summary-sheet > .modal-grid > .modal-document {
  display: contents;
}

.flow-page-summary[data-rt-summoned] .flow-summary-sheet {
  container: modal-grid-container / inline-size;
}

html:has([data-sheet][data-rt-summoned]) {
  --pull-size-up: var(--pull-size-down);
}

html:has([data-sheet][data-rt-summoned])
  :is(.foot-action, [data-surface-content]) {
  --pull-t-up: calc(1 + var(--surface-lift) / var(--drag-limit));
}

html:has([data-sheet][data-rt-summoned]) :is(body, [data-part="page"]) {
  --dim: calc(clamp(0, var(--p), 1) * var(--dim-sheet));
  transition: none;
}

/* Grown into its sheet, the foot action is a surface's shell: its edge
 * light follows its corner, and its shadow is a surface's, as a dialog's
 * shell is. */
html:has([data-sheet][data-rt-summoned]) .foot-action {
  --surface-elevation-radius: var(--surface-radius);
  --surface-elevation-ambient-geometry: var(--shadow-ambient-geometry);

  inset-inline: auto;
  inset-block-end: var(--surface-bottom);
  inset-inline-start: 50%;
  z-index: var(--layer-action-summoned);
  inline-size: var(--surface-width);
  block-size: var(--surface-height);
  border-radius: var(--surface-radius);
  translate:
    -50%
    calc(
      var(--surface-pull-y) * 1px
        + max(0px, -1 * var(--p) * var(--surface-landing-distance))
    );
  scale: var(--surface-pull-scale);
  transform-origin: 50% 100%;
  pointer-events: none;
}

html:has([data-sheet][data-rt-summoned]) [data-foot-action-content] {
  block-size: 100%;
  opacity: var(--surface-resting-opacity);
}

@media (hover: hover) {
  .calendar-day:has(input:enabled):not(:has(input:checked)):hover .calendar-day-number,
  .calendar-day:is(a, button):not([data-selected]):hover .calendar-day-number {
    background: var(--interactive-wash);
  }

  .choice-row:not(:has(input:checked)):hover {
    border-color: var(--control-line-hover);
  }

  /* Filled items deepen on hover. */
  .calendar-day[data-availability="open"]:has(input:enabled):not(:has(input:checked)):hover
    .calendar-day-number,
  .calendar-day[data-availability="open"]:is(a, button):not([data-selected]):hover
    .calendar-day-number {
    background: var(--availability-covered);
  }

  .day-timeline-more:hover {
    background: color-mix(in oklch, var(--availability-selected) 24%, transparent);
  }

  .time-picker-step:enabled:hover {
    background: var(--interactive-wash);
  }

  /* Week dates turn green on hover. */
  .calendar-weeks .calendar-day[data-availability="open"]:is(a, button):not([data-selected]):hover
    .calendar-day-number {
    background: var(--availability-fill);
  }
}

@container time-booking (max-width: 23rem) {
  .time-booking-form {
    --booking-inset: calc(var(--increment) * 4);
  }
}

/* Identity challenge. */
.auth-heading {
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.auth-heading-mark {
  color: var(--accent);
}

.auth-lead {
  color: var(--text);
  font-weight: var(--weight-regular);
}

/* The back office's frame for email HTML and report pages. */
.admin-mail {
  inline-size: 100%;
  block-size: calc(var(--increment) * 160);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
}

/* Site chrome. */
.site-header,
.site-masthead {
  --wordmark-size: 18px;
  --wordmark-leading: calc(var(--increment) * 6);

  font-weight: var(--weight-semibold);
}

.site-header {
  container: site-header / inline-size;
  z-index: var(--layer-header);
  color: var(--text);
}

/* A portal's front page masthead, white over the photo and scrolling
 * with the page. The header's own wordmark fades in when it sticks. Without
 * scroll-driven animations there is no masthead. */
.site-masthead {
  position: relative;
  z-index: 1;
  color: var(--on-photo);
}

@supports not (animation-timeline: scroll()) {
  .site-masthead {
    display: none;
  }
}

.site-masthead a {
  color: inherit;
  text-decoration: none;
}

.site-header-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.site-header-content {
  --search-divider-space: calc(var(--increment) * 3);

  position: relative;
  z-index: 2;
  flex: 1;
  min-inline-size: 0;
  /* The glass is a sibling layer, so backdrop filters inside still blur the
   * page. */
  overflow: visible;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: var(--search-divider-space);
  padding-inline: calc(var(--increment) * 3);
  border-radius: inherit;
}

.site-header-content > .wordmark {
  grid-column: 1;
}

.site-header-search {
  grid-column: 2;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: calc(var(--increment) * 12);
  padding-inline-start: calc(var(--search-divider-space) - var(--increment));
  box-shadow: inset var(--border-width-hairline) 0 0 var(--line);
}

/* The search magnifier, on the front page only. */
.site-header-search-icon {
  display: none;
}

.site-header-search-input {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  padding: 0 var(--increment);
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font-weight: var(--weight-regular);
  caret-color: var(--accent-strong);
  appearance: none;
}

.site-header-search-input::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.site-header-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.site-header-search-input:focus {
  outline: none;
}

/* A copy of the actions' label sizing the bar's last column
 * (`.site-actions`), seen only while unsticking. */
.site-header-room {
  grid-column: 3;
  display: flex;
  gap: var(--increment);
  visibility: hidden;
  font-weight: var(--weight-medium);
}

/* The actions at the bar's end, above its glass. */
.site-actions {
  --focus-ring-color: var(--text);

  z-index: var(--layer-header);
  justify-self: end;
  gap: var(--increment);
  padding-inline-end: calc(var(--increment) * 3);
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* Header links inherit their colour, at element specificity so components
 * override it. */
:where(.site-header, .site-actions, .site-mark) a {
  color: inherit;
  text-decoration: none;
}

.wordmark-label {
  font-size: var(--wordmark-size);
  font-variation-settings: "opsz" var(--wordmark-optical-size);
  line-height: var(--wordmark-leading);
  font-weight: var(--weight-semibold);
}

.wordmark-mark {
  color: var(--accent);
}

@supports (text-box: trim-both cap alphabetic) {
  .wordmark-label {
    text-box: trim-both cap alphabetic;
  }
}

.site-header-action {
  min-block-size: var(--minimum-target-size);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--increment);
  border-radius: calc(var(--increment) * 2);
}

/* Header dialogs open with the heading over the trigger's label, putting
 * the close under the pointer. Two classes to beat the centring rule. */
[data-modal].site-header-dialog {
  --surface-open-at: heading;
}

/* The account trigger: name, then disc. `.site-header-room` matches its
 * size. */
.account-dialog .modal-collapsed {
  gap: calc(var(--increment) * 2);
  padding-inline: calc(var(--increment) * 3) calc(var(--increment) * 1.5);
}

/* Only the first name on phones. */
@media (max-width: 687.98px) {
  .account-label-rest {
    display: none;
  }
}

/* The notification bell with an unread badge. */
.notices-dialog .modal-collapsed {
  position: relative;
  justify-content: center;
  inline-size: var(--minimum-target-size);
  padding: 0;
}

.notices-dialog .modal-collapsed > .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.notice-badge {
  position: absolute;
  inset-block-start: calc(var(--increment) * 1.5);
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  min-inline-size: calc(var(--increment) * 4.5);
  block-size: calc(var(--increment) * 4.5);
  padding-inline: var(--increment);
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--accent-strong);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* An unread dot. */
.unread-dot {
  flex: none;
  inline-size: calc(var(--minimum-target-size) / 4);
  block-size: calc(var(--minimum-target-size) / 4);
  margin-inline-end: var(--increment);
  border-radius: 50%;
  background: var(--accent);
}

/* A thread: messages by side, the reader's at the end in the accent's
 * wash. Notes are dashed with a lock. Events are quiet lines, and each day
 * opens with its date. */
.thread-entries {
  list-style: none;
}

.thread-day,
.thread-event {
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-align: center;
}

.thread-entry {
  max-inline-size: min(36rem, 88%);
}

.thread-entry-head {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.thread-entry-head b {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.thread-entry-head .icon,
.thread-event .icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
}

.thread-bubble {
  border-radius: var(--control-radius);
  border-start-start-radius: var(--increment);
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  overflow-wrap: anywhere;
}

.thread-own .thread-bubble,
.thread-note .thread-bubble {
  border-start-start-radius: var(--control-radius);
  border-start-end-radius: var(--increment);
  box-shadow: none;
}

.thread-own .thread-bubble {
  background: var(--accent-wash);
}

.thread-note .thread-bubble {
  border: var(--border-width-hairline) dashed var(--control-line);
  background: var(--well);
}

.thread-facts,
.thread-receipt {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

/* A by-mail marker. */
.thread-by-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-inline-start: 0.25em;
}

/* An entry's attachments. */
.thread-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread-files a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--accent-strong);
}

.thread-files .icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
}

.thread-facts a {
  color: var(--accent-strong);
  text-decoration: none;
}

/* A thread's subject under the customer's name. */
.thread-about {
  color: var(--text-muted);
}

.thread-about .icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
}

.thread-event {
  max-inline-size: 36rem;
}

.thread-entries time {
  font-variant-numeric: tabular-nums;
}

/* An account's disc with initials. */
.avatar {
  --avatar-size: calc(var(--increment) * 7);
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  overflow: hidden;
  border-radius: 50%;
  color: var(--accent-strong);
  /* Opaque on the header's glass. */
  background: color-mix(in srgb, var(--surface), var(--accent) 16%);
  font-family: var(--font-body);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar .icon {
  inline-size: 60%;
  block-size: 60%;
}

/* A party's picture fills its disc. */
.avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.avatar-xs {
  --avatar-size: calc(var(--increment) * 5);
}

.avatar-md {
  --avatar-size: calc(var(--increment) * 9);
}

.avatar-lg {
  --avatar-size: calc(var(--increment) * 14);
}

/* Tinted by a hue from the name (`--avatar-hue`). */
.avatar-hued {
  color: oklch(var(--avatar-ink-lightness) var(--avatar-ink-chroma) var(--avatar-hue));
  background: oklch(
    var(--avatar-wash-lightness) var(--avatar-wash-chroma) var(--avatar-hue)
  );
}

/* Phone width. */
[data-modal].modal-phone {
  --surface-measure: calc(var(--increment) * 100);
}

@container site-header (min-width: 48rem) {
  .site-header-content {
    --search-divider-space: calc(var(--increment) * 6);
  }
}

/* The front page header starts as a search box in the hero and morphs into
 * the bar as it scrolls up, without relayout. The glass is clipped to the
 * shape, with its own edge light ring and a contained shadow layer, and the
 * field text moves by transform. Keyframes come from `searchMorphKeyframes`
 * in enhance.js. The wordmark and actions fade in when it sticks. Travels
 * play the morph (`morphSearchHeaderAhead`). */
/* Every bar has the morph layers, shown only while morphing. */
.site-header-shadow,
.site-header-edge {
  display: none;
}

@supports (animation-timeline: scroll()) {
  /* A search header, also during a travel's morph
   * (`data-rt-search-morph`). */
  :is(.site-header[data-search-header], .site-header[data-rt-search-morph]) {
    --search-inline-max: calc(var(--increment) * 160);
    /* On narrow headers the box aligns with the text edge. */
    --search-inline: min(var(--search-inline-max), 100% - var(--increment) * 2);
    --search-radius: calc(var(--increment) * 10);
    --search-block-extra: calc(var(--increment) * 2);
    --search-pad: calc(var(--increment) * 6);
    --search-icon-size: calc(var(--increment) * 5);
    /* The magnifier and gap before the text. */
    --search-icon-space: calc(var(--search-icon-size) + var(--increment) * 2);
  }

  /* Lower on the front page. */
  .site-header[data-search-header] {
    margin-block-start: calc(var(--increment) * 2 + var(--search-drop));
  }

  :is([data-search-header], [data-rt-search-morph])
    > :is(.site-header-surface, .site-header-shadow, .site-header-edge),
  :is([data-search-header], [data-rt-search-morph])::before,
  [data-search-header]:not([data-rt-search-morph]) > .site-header-content,
  :is([data-search-header], [data-rt-search-morph]) .site-header-search-input,
  :is([data-search-header], [data-rt-search-morph]) .site-header-search-icon {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0 var(--search-drop);
  }

  :is([data-search-header], [data-rt-search-morph]) > .site-header-surface {
    inset: calc(-1 * var(--search-block-extra)) 0;
    border-radius: 0;
    box-shadow: none;
    animation-name: search-header-surface;
  }

  :is([data-search-header], [data-rt-search-morph]) > .site-header-shadow {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    contain: strict;
    border-radius: var(--corner-radius);
    box-shadow:
      var(--surface-elevation-contact-shadow),
      var(--surface-elevation-ambient-shadow);
    pointer-events: none;
    animation-name: search-header-shadow;
  }

  /* The morph draws its own edge light (`.site-header-edge`) and hands over
   * to the bar's at the end. */
  :is([data-search-header], [data-rt-search-morph])::before {
    animation-name: search-header-bar-ring;
  }

  /* Empty until the measured keyframes exist. */
  :is([data-search-header], [data-rt-search-morph]) > .site-header-edge {
    display: block;
    position: absolute;
    z-index: 1;
    inset: calc(-1 * var(--search-block-extra)) 0;
    clip-path: inset(50%);
    background: var(--surface-elevation-edge-light-fill);
    -webkit-backdrop-filter:
      saturate(var(--surface-elevation-edge-light-saturation))
      contrast(var(--surface-elevation-edge-light-contrast))
      brightness(var(--surface-elevation-edge-light-brightness));
    backdrop-filter:
      saturate(var(--surface-elevation-edge-light-saturation))
      contrast(var(--surface-elevation-edge-light-contrast))
      brightness(var(--surface-elevation-edge-light-brightness));
    pointer-events: none;
    animation-name: search-header-edge;
  }

  /* Not clipped during a travel, which holds the wordmark in place. */
  [data-search-header]:not([data-rt-search-morph]) > .site-header-content {
    animation-name: search-header-content;
  }

  :is([data-search-header], [data-rt-search-morph]) .site-header-search {
    position: relative;
    box-shadow: none;
  }

  :is([data-search-header], [data-rt-search-morph]) .site-header-search::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--border-width-hairline);
    background: var(--line);
  }

  :is([data-search-header], [data-rt-search-morph]) .site-header-search-input {
    animation-name: search-header-field;
  }

  /* Moves with the text and fades as the box leaves rest. */
  :is([data-search-header], [data-rt-search-morph]) .site-header-search-icon {
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--search-divider-space) - var(--search-icon-space));
    align-items: center;
    color: var(--text);
    pointer-events: none;
    animation-name: search-header-field, search-header-icon;
  }

  :is([data-search-header], [data-rt-search-morph]) .site-header-search-icon .icon {
    inline-size: var(--search-icon-size);
    block-size: var(--search-icon-size);
  }

  /* No wordmark or divider until stuck. */
  [data-search-header]:not([data-rt-stuck], [data-rt-unsticking])
    .site-header-content > .wordmark,
  [data-search-header]:not([data-rt-stuck], [data-rt-unsticking])
    .site-header-search::before {
    visibility: hidden;
  }

  /* Unsticking, the wordmark, divider and actions' label copy fade out
   * inside the narrowing box. */
  [data-search-header][data-rt-unsticking]
    :is(.site-header-content > .wordmark, .site-header-room),
  [data-search-header][data-rt-unsticking] .site-header-search::before {
    visibility: visible;
    animation: search-header-text-leaves var(--interaction-duration) ease-in both;
  }

  /* Sticking, they fade in. */
  [data-search-header][data-rt-sticking] .site-header-content > .wordmark,
  [data-search-header][data-rt-sticking] .site-header-search::before,
  .site-header[data-search-header][data-rt-sticking]:not([data-rt-search-morph])
    ~ .site-actions {
    animation: search-header-text-arrives var(--interaction-duration) ease-out both;
  }

  /* Before sticking, the actions are white over the photo and fade as the
   * page scrolls by the bar's height. */
  .site-header[data-search-header]:not([data-rt-stuck], [data-rt-search-morph])
    ~ .site-actions {
    --focus-ring-color: var(--on-photo);

    color: var(--on-photo);
    animation: site-actions-leave linear both;
    animation-timeline: scroll(root);
    animation-range: 0 calc(var(--increment) * 16);
  }
}

@keyframes site-actions-leave {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes search-header-surface {
  from {
    clip-path: inset(0 calc((100% - var(--search-inline)) / 2) round var(--search-radius));
  }
  to {
    clip-path: inset(var(--search-block-extra) 0 round var(--corner-radius));
  }
}

@keyframes search-header-content {
  from {
    clip-path: inset(
      calc(-1 * var(--search-block-extra)) calc((100% - var(--search-inline)) / 2)
      round var(--search-radius)
    );
  }
  to {
    clip-path: inset(0 round var(--corner-radius));
  }
}

@keyframes search-header-shadow {
  from {
    inset: calc(-1 * var(--search-block-extra)) calc((100% - var(--search-inline)) / 2);
    border-radius: var(--search-radius);
  }
  to {
    inset: 0;
    border-radius: var(--corner-radius);
  }
}

/* Visibility, since an opacity animation ran ahead of the clip. */
@keyframes search-header-bar-ring {
  0%,
  99.9% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/* The placeholder's opacity. */
@keyframes search-header-icon {
  from {
    opacity: 0.5;
  }
  40%,
  to {
    opacity: 0;
  }
}

@keyframes search-header-text-arrives {
  from {
    opacity: 0;
  }
}

@keyframes search-header-text-leaves {
  to {
    opacity: 0;
  }
}

:is(.site-header, .site-masthead) .wordmark {
  min-block-size: var(--minimum-target-size);
  display: inline-flex;
  align-items: center;
}

/* Only links show a pressed wash. */
.site-header-action:not(summary):active {
  background: var(--interactive-wash);
}

:is(.site-header, .site-masthead) .wordmark:active {
  opacity: var(--pressed-opacity);
}

.site-header :is(a, button, summary):focus-visible,
.site-footer a:focus-visible {
  --focus-ring-color: var(--text);
  outline-offset: 3px;
  border-radius: var(--increment);
}

.site-masthead :is(a, button, summary):focus-visible {
  --focus-ring-color: var(--on-photo);
  outline-offset: 3px;
  border-radius: var(--increment);
}

/* The focus ring follows the actions' colour. */
.site-actions :is(a, button, summary):focus-visible {
  outline-offset: 3px;
  border-radius: var(--increment);
}

.site-footer {
  color: var(--text);
}

.site-footer-rule {
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.site-footer-row,
.site-footer-actions,
.site-footer-nav,
.site-footer-locales,
.site-footer-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.site-footer-row {
  justify-content: space-between;
  gap: calc(var(--increment) * 5) calc(var(--increment) * 10);
}

.site-footer-actions {
  gap: calc(var(--increment) * 4) calc(var(--increment) * 10);
}

.site-footer-nav {
  gap: calc(var(--increment) * 5);
}

.site-footer-topline {
  gap: calc(var(--increment) * 2) calc(var(--increment) * 5);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.site-footer-locales {
  gap: calc(var(--increment) * 2);
}

.site-footer a {
  width: max-content;
  color: inherit;
  text-decoration: none;
}

.site-footer-nav a,
.site-footer-locales a {
  font-weight: var(--weight-book);
}

.site-footer-locale-current,
.site-footer-language-separator {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* Option rows: a dot, a name and a detail line, styled as tiles
 * (`.choice-set`) within the content line. */
/* A flex column, since Safari sized a fieldset grid too tall after
 * `display: none` (measured 2026-11-01: 362px instead of 162px). */
.choice-rows {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  row-gap: calc(var(--increment) * 2);
}

.choice-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: calc(var(--increment) * 3);
  min-block-size: var(--minimum-target-size);
  padding: calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  box-shadow: var(--control-recess);
  cursor: pointer;
}

/* The rail's row height with a second line. */
.choice-row:has(.choice-row-detail) {
  min-block-size: calc(var(--increment) * 18);
}

/* On a flow step, rows size to their content. */
.flow-page-step .choice-row {
  min-block-size: var(--minimum-target-size);
}

/* The dot centred on the name's line. */
.choice-row::before {
  content: "";
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  margin-block-start: calc((1lh - var(--increment) * 4) / 2 + var(--text-trim, 0px));
  border: var(--border-width-thin) solid var(--control-line-hover);
  border-radius: 50%;
  background: var(--surface);
}

.choice-row:has(input:checked)::before {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  box-shadow: inset 0 0 0 calc(var(--increment) - 1px) var(--surface);
}

.choice-row:has(input:checked) {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--accent-strong);
}

/* Overrides `.form input:is([type=radio], [type=checkbox])`. */
.choice-row input[type="radio"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  appearance: none;
  opacity: 0;
}

.choice-row:has(input:checked) .muted {
  color: var(--text);
}

/* Unavailable rows, including by their fit line (`summary::fit_html`). */
.choice-row:is([data-unavailable], :has(.choice-row-detail[data-unavailable])):not(:has(input:checked)) > .choice-row-copy {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A chosen but unavailable option is grey, not accented. */
.choice-row:is([data-unavailable], :has(.choice-row-detail[data-unavailable])):has(input:checked) {
  border-color: var(--text-muted);
  background: var(--interactive-wash);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--text-muted);
}

.choice-row:is([data-unavailable], :has(.choice-row-detail[data-unavailable])):has(input:checked)::before {
  border-color: var(--text-muted);
  background: var(--text-muted);
}

.choice-row:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-inset);
}

.choice-row-copy > strong {
  font-weight: var(--weight-semibold);
}

.choice-row-detail {
  font-variant-numeric: tabular-nums;
}

/* Answers share form styling. */
.choice-set {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 2);
  min-inline-size: 0;
}

.choice-set > * {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.choice-set:not(.scale) > label {
  flex-basis: calc(50% - var(--increment) * 2);
}

.choice-set :is(label, a, button) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(var(--increment) * 12);
  padding: calc(var(--increment) * 2) calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  box-shadow: var(--control-recess);
  color: var(--text);
  font-weight: var(--weight-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.choice-set > span > :is(a,
button) {
  inline-size: 100%;
}

.choice-set label input[type="radio"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-set label:has(:checked),
.choice-set [aria-current] > :is(a, button),
.choice-set button[aria-pressed="true"] {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--accent-strong);
}

.choice-set label:has(:focus-visible),
.choice-set :is(a, button):focus-visible {
  outline: 3px solid var(--control-focus-halo);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .choice-set :is(label,
  a,
  button):hover {
    border-color: var(--control-line-hover);
  }
}

.booking-widget > .field {
  margin: 0;
  padding: 0 var(--booking-inset);
}

.booking-widget > .field > legend {
  padding-block-start: var(--booking-section-space);
}

.time-selection {
  position: relative;
  min-inline-size: 0;
}

/* A leaving calendar view's snapshot (`snapshot`). */
.calendar-ghost {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.calendar-ghost.availability-calendar {
  display: block;
}

.calendar-ghost > .calendar-page {
  inline-size: 100%;
}

/* Projected slots have no box. */
.projected {
  display: contents;
}

.flow-price {
  padding-block: calc(var(--increment) * 3);
}

/* Facts keep their line breaks. */
.flow-summary-text > span {
  white-space: pre-line;
}

/* User text breaks anywhere rather than widening the column. */
.flow-summary,
.flow-page-summary {
  overflow-wrap: anywhere;
}

/* A booking flow page (`flow-page`), on the content line. */
.flow-page-step {
  --booking-inset: 0px;
  --booking-section-space: calc(var(--increment) * 4);
}

/* A step's calendar card, inset as the panel is. */
.flow-calendar {
  --booking-inset: calc(var(--increment) * 4);
  /* The card's corner (`.round.content`), which the edge light needs. */
  --corner-radius: calc(var(--radius) - 20px);
  border-radius: var(--corner-radius);
  min-inline-size: 0;
}

/* Padding on the content, not the gliding section, whose own padding
 * made glides jump 16px (measured 2026-10-31). Bottom room is on the rail's
 * pages. */
.flow-calendar .time-selection-stage {
  padding-block-start: calc(var(--increment) * 2);
}

.flow-calendar .availability-calendar:not(.calendar-weeks) {
  --calendar-padding-end: calc(var(--increment) * 4);
}


.flow-step-body {
  min-block-size: 0;
}

.flow-step-body h1:focus {
  outline: none;
}

/* Amount choices styled as option rows. */
.flow-questions .choice-set.scale :is(label, a, button) {
  border-color: transparent;
  background: var(--interactive-wash);
  box-shadow: none;
}

.flow-questions .choice-set.scale label:has(:checked) {
  border-color: transparent;
  background: var(--accent-wash);
  color: var(--accent-strong);
  box-shadow: none;
}

@media (hover: hover) {
  .flow-questions .choice-set.scale label:not(:has(:checked)):hover {
    border-color: transparent;
    background: color-mix(in oklab, var(--interactive-wash), var(--accent-wash));
  }
}

/* Step questions are headed like the options heading. */
.flow-questions .form-field-group > :is(.field-label, .field-legend) {
  padding-block-end: calc(var(--increment) * 2);
  color: var(--text);
  mix-blend-mode: normal;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Seller headings a size below the step's. */
.flow-message > :is(h2, h3, h4) {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.flow-step-back,
.flow-step-about,
.flow-guidance,
.flow-terms,
.flow-summary-place {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* The back link from the first step, quiet until hovered. */
.flow-step-back {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: calc(var(--increment) / 2);
  text-decoration: none;
}

/* Offset by the chevron's inner margin, 337 of 960 units
 * (`chevron_left`). */
.flow-step-back .icon {
  margin-inline-start: calc(-337em / 960);
}

@media (hover: hover) {
  .flow-step-back:hover {
    color: var(--text);
    mix-blend-mode: normal;
  }
}


/* The continue button: ink, with an accent arrow. Disabled has no
 * arrow. */
.flow-continue {
  --form-action-block-size: calc(var(--increment) * 12);
  --form-action-padding-inline: calc(var(--increment) * 6);

  color: var(--ground);
  background: var(--ink);
}

.flow-continue .icon {
  color: var(--accent);
}

@media (hover: hover) {
  .flow-continue:hover:not(:disabled) {
    background: var(--ink-hover);
  }
}

/* In the month view of an hourly day, continue is hidden but keeps its
 * room. Folds show it fading (`foldToWeek`). Without the runtime it stays,
 * opening the week (`view=week`). */
:root[data-rt-js] .flow-step-body:has([data-calendar-views]:not([data-rt-folding]) [data-calendar="dates"] [data-calendar-input][name="day"]) .flow-actions {
  visibility: hidden;
}

/* The foot bar's summary takes the room. */
:root[data-rt-js]:has([data-calendar-views] [data-calendar="dates"] [data-calendar-input][name="day"]) .flow-summary-bar > .flow-continue {
  display: none;
}

/* Continue's label: the projected problem first, else the rest. */
.flow-continue-rest {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
}

[data-projected]:has([data-blocked]:not([data-rt-fading])) ~ .flow-continue-rest {
  display: none;
}

/* A press's waiting mark (`Press::waiting_for`, the flow's continue) hides
 * the label after it until its field has text. */
button [data-blocked]:not([hidden]) ~ * {
  display: none;
}

/* A flow's foot action: a summary card that grows into the full
 * summary. */
.flow-foot-action {
  --surface-elevation-radius: calc(var(--increment) * 6);
  --foot-action-max-width: calc(var(--increment) * 100);
  --foot-action-inline-inset: calc(
    var(--grid-edge-track-width) + var(--grid-contained-content-inset-inline)
  );
}

.flow-foot-action .foot-action-content {
  padding: 0;
}

.flow-summary-bar {
  inline-size: 100%;
  block-size: 100%;
}

.flow-summary-bar > .flow-continue {
  flex: none;
}

/* The foot bar's continue shows only its arrow. The rest is for screen
 * readers. */
.flow-continue-short {
  display: none;
}

/* A projected label is `display: contents`, which leaves nothing to clip. */
.flow-summary-bar .flow-continue > .projected {
  display: block;
}

.flow-summary-bar .flow-continue-short {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
}

.flow-summary-peek {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: inherit;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: start;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Concentric with the card it stands in. */
.flow-summary-peek-photo {
  flex: none;
  inline-size: calc(var(--increment) * 12);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--surface-elevation-radius) - var(--increment) * 3);
}

.flow-summary-peek-copy {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* One line each. `clip`, since `overflow: hidden` cuts descenders
 * (`notes/visual.md`). */
.flow-summary-peek-title,
.flow-summary-peek-fact {
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-summary-peek-fact,
.flow-summary-peek-chevron {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.flow-summary-peek-end {
  flex: none;
}

/* The chevron points up. */
.flow-summary-peek-chevron .icon {
  rotate: 180deg;
}

/* The summary as a sheet. */
.flow-page-summary {
}

.flow-page-summary {
  --surface-inset: calc(var(--increment) * 5);
}

/* Space under the summary's head. */
.flow-summary-head {
  padding-block-end: calc(var(--increment) * 4);
}

/* The summary on the page: a thumbnail and what is booked, a line per
 * part, and the price. */
.flow-summary-title {
  color: var(--text);
  text-decoration: none;
}

.flow-summary-price {
  border-block-start: var(--border-width-hairline) solid var(--line);
}

/* The seller line. */
.checkout-seller {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.checkout-seller-label {
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* The discount code toggle. */
.checkout-discount > summary {
  justify-self: start;
  inline-size: max-content;
}

/* Summary lines under rules, each with a visible change action. */
.flow-summary-line {
  border-block-start: var(--border-width-hairline) solid var(--line);
  font-variant-numeric: tabular-nums;
}

.flow-summary-label {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.flow-summary-edit {
  font-weight: var(--weight-medium);
}

/* No rule without a price. */
.flow-summary-price:not(:has(.flow-price, .flow-terms)) {
  display: none;
}

/* Product offers, each a form over its photo. */
.product-card {
  padding-block: 0;
}

.product-card-panel {
  --veil-ink: var(--shadow-ink);
  --veil-near: 84%;
  --veil-hold: 0%;
  --veil-far: 44%;
  --veil-fade: 55%;
  --veil-block-size: 80%;
  --veil-mask: 40%;
  --haze: 22%;
  --haze-block-size: 52%;
  --haze-mask: 0%;

  min-block-size: calc(var(--increment) * 60);
  color: var(--on-photo);
  background: var(--photo-ground);
}

.product-card-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.product-card-copy {
  align-content: end;
  gap: calc(var(--increment) * 2);
  padding: calc(var(--increment) * 5);
}

.product-card-copy > .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--increment) * 3);
}

.product-card-copy > .form .form-submit-primary {
  inline-size: auto;
  min-inline-size: 5rem;
  color: var(--photo-ground);
  background: var(--on-photo);
}

@media (hover: hover) {
  .product-card-copy > .form .form-submit-primary:hover {
    background: var(--on-photo-hover);
  }
}

.product-card-copy > .form .form-submit-primary:focus-visible {
  outline-color: var(--on-photo);
}

/* A gift code, large, breaking anywhere. */
.benefit-code {
  font-family: var(--font-mono);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--increment) * 3);
  padding-block: var(--increment);
}

.receipt-line > :last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.receipt-total {
  font-weight: var(--weight-semibold);
  border-block-start: var(--border-width-hairline) solid var(--line);
  margin-block-start: calc(var(--increment) * 2);
  padding-block-start: calc(var(--increment) * 2);
}

/* A lone total needs no extra rule (`summary_breakdown_html`). */
.receipt-total:first-child {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

/* The stepper wraps below the copy when narrow. */
.booking-addon-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--increment) * 3);
  padding: calc(var(--increment) * 4);
  border-radius: var(--control-radius);
  cursor: pointer;
}

.booking-addon-card:has(input:checked),
.booking-addon-card[data-taken] {
  background: var(--accent-wash);
}

.booking-addon-image {
  inline-size: clamp(3rem, 6vw, 4.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--increment) * 2);
  flex-shrink: 0;
}

.booking-addon-copy {
  flex: 1 1 calc(var(--increment) * 24);
}

.booking-addon-selection {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
  flex-shrink: 0;
  margin-inline-start: auto;
}

.booking-addon-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.booking-addon-selection > input {
  margin: 0;
  flex-shrink: 0;
}

/* A stepper. The buttons show once wired (`wireStepper`). */
.stepper {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  align-items: center;
  block-size: var(--minimum-target-size);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  box-shadow: var(--control-recess);
}

.stepper:focus-within {
  border-color: var(--control-focus-line);
  outline: 3px solid var(--control-focus-halo);
  outline-offset: var(--focus-ring-offset);
}

.stepper input[data-quantity] {
  inline-size: calc(3ch + var(--increment) * 4);
  min-block-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}

.stepper input[data-quantity]::-webkit-inner-spin-button,
.stepper input[data-quantity]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

/* Extension steps are form buttons (`form/extension`), shown always. */
.stepper :is([data-quantity-step], button[name="pick"]) {
  display: none;
  inline-size: var(--minimum-target-size);
  block-size: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: var(--text-subtitle);
  line-height: 1;
  cursor: pointer;
}

.stepper[data-rt-wired] [data-quantity-step],
.stepper button[name="pick"] {
  display: grid;
}

.stepper button[name="pick"]:disabled {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  cursor: default;
}

.stepper :is([data-quantity-step], button[name="pick"]):focus-visible {
  outline-offset: var(--focus-ring-inset);
}

.stepper-count {
  min-inline-size: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The reservation book: the day's head with navigation and actions, then
 * a row per booking led by time and party size. Rows fold to two lines on
 * phones. Printing hides the controls. */
.day-book {
  display: grid;
  gap: calc(var(--increment) * 4);
  margin-block-end: calc(var(--increment) * 8);
}

.day-book-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--increment) * 4);
}

.day-book-title {
  flex: 1 0 100%;
}

.day-book-day {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.day-book-summary {
  margin: 0;
  color: var(--text-muted);
}

.day-book-steps {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
}

.day-book-step {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--minimum-target-size);
  block-size: var(--minimum-target-size);
  border-radius: var(--radius-pill);
  background: var(--interactive-wash);
  color: var(--text);
}

.day-book-step .icon {
  inline-size: 1.25em;
  block-size: 1.25em;
}

.day-book-presses {
  display: flex;
  gap: calc(var(--increment) * 2);
  margin-inline-start: auto;
}

.day-book-new {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.day-book-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.day-book-table th {
  padding: calc(var(--increment) * 2);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  text-align: start;
}

.day-book-table td {
  padding: calc(var(--increment) * 3) calc(var(--increment) * 2);
  border-block-start: var(--border-width-hairline) solid var(--line);
  vertical-align: baseline;
}

.day-book-time,
.day-book-party {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day-book-time b {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-semibold);
}

.day-book-time span {
  color: var(--text-muted);
}

.day-book-party {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-semibold);
}

.day-book-name a {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.day-book-price {
  margin-inline-start: calc(var(--increment) * 2);
  color: var(--text-muted);
}

.day-book-cancelled :is(.day-book-time, .day-book-party, .day-book-name a) {
  color: var(--text-muted);
  text-decoration: line-through;
}

.day-book-empty {
  margin: 0;
  padding-block: calc(var(--increment) * 6);
  border-block-start: var(--border-width-hairline) solid var(--line);
  color: var(--text-muted);
}

.day-book-foot {
  display: grid;
  gap: calc(var(--increment) * 3);
}

/* The day picker between the steppers. */
.day-book-steps > .form:not(.form-action-row) {
  flex: none;
  inline-size: auto;
  flex-direction: row;
}

.day-book-steps input[type="date"] {
  min-block-size: var(--minimum-target-size);
  padding-block: 0;
}

/* The name link covers the row, under the phone link. */
.day-book-row {
  position: relative;
}

@media (hover: hover) {
  .day-book-row:hover {
    background: var(--interactive-wash);
  }
}

.day-book-name a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.day-book-row a[href^="tel:"] {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* The party label, only on phones. */
.day-book-party-label {
  display: none;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

@media print {
  .day-book-steps,
  .day-book-presses {
    display: none;
  }

  .day-book-row a {
    color: var(--text);
  }
}

@media (max-width: 40rem) {
  .day-book-table thead {
    display: none;
  }

  .day-book-table tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--increment) calc(var(--increment) * 3);
    padding-block: calc(var(--increment) * 3);
    border-block-start: var(--border-width-hairline) solid var(--line);
  }

  .day-book-table td {
    padding: 0;
    border: 0;
  }

  .day-book-table td:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Place and phone on the last line. */
  .day-book-table td:nth-child(4) {
    grid-column: 1 / 3;
  }

  .day-book-table td:nth-child(5) {
    grid-column: 3;
    justify-self: end;
  }

  .day-book-presses {
    flex: 1 0 100%;
  }

  .day-book-presses > * {
    flex: 1;
    justify-content: center;
  }

  .day-book-party-label {
    display: inline;
  }
}

/* A booking in the seller admin. */
.booking-detail-offering {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* The inbox: a row per thread with topic, correspondent, time, subject,
 * handler and last message. Unread rows are bold with a dot. */
.inbox-list {
  border-block-start: var(--border-width-hairline) solid var(--line);
  list-style: none;
}

.inbox-row {
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text);
  text-decoration: none;
}

@media (hover: hover) {
  .inbox-row:hover {
    background: var(--interactive-wash);
  }
}

.inbox-row-topic {
  color: var(--text-muted);
}

.inbox-row-topic .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.inbox-row-who {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-when {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.inbox-row-about,
.inbox-row-said {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-about {
  font-size: var(--text-caption);
}

.inbox-row-handler {
  margin-inline-start: calc(var(--increment) * 2);
  color: var(--text-muted);
}

.inbox-row-said {
  color: var(--text-muted);
}

.inbox-row-unread :is(.inbox-row-who, .inbox-row-said) {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.inbox-empty {
  color: var(--text-muted);
}

/* Day headings in a multi-day book. */
.day-book-date th {
  padding: calc(var(--increment) * 6) calc(var(--increment) * 2) calc(var(--increment) * 2);
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-title);
  text-align: start;
}

@media (max-width: 40rem) {
  .day-book-table tr.day-book-date {
    display: block;
    border: 0;
  }
}

/* The hours page (`seller::hours`), led by a sentence. */
.hours-said {
  max-inline-size: 42rem;
  font-size: var(--text-subtitle);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.hours-said b {
  font-weight: var(--weight-semibold);
}

/* Lane colours: the place's hours in the free green, and each bookable
 * thing in its own tone. */
.hours-tone-open {
  background: var(--availability-fill);
  color: var(--availability-ink);
}

.hours-tone-lane-1 {
  --hours-tone-ink: var(--hours-lane-1);
  background: var(--hours-lane-1-fill);
}

.hours-tone-lane-2 {
  --hours-tone-ink: var(--hours-lane-2);
  background: var(--hours-lane-2-fill);
}

.hours-tone-lane-3 {
  --hours-tone-ink: var(--hours-lane-3);
  background: var(--hours-lane-3-fill);
}

:is(.hours-tone-lane-1, .hours-tone-lane-2, .hours-tone-lane-3) {
  box-shadow: inset 0 0 0 calc(var(--border-width-thin) * 1.5) var(--hours-tone-ink);
  color: var(--hours-tone-ink);
}

/* Lane hours in the lane's ink. */
.hours-ink-open {
  color: var(--availability-ink);
}

.hours-ink-lane-1 {
  color: var(--hours-lane-1);
}

.hours-ink-lane-2 {
  color: var(--hours-lane-2);
}

.hours-ink-lane-3 {
  color: var(--hours-lane-3);
}

.hours-date-hours > span {
  display: block;
}

/* The regular week, a row per weekday with stacked lanes. */
.hours-week {
  --hours-day-column: calc(var(--increment) * 28);
  --surface-elevation-radius: var(--control-radius);
  display: grid;
  gap: calc(var(--increment) / 2);
  padding: calc(var(--increment) * 4) calc(var(--increment) * 2) calc(var(--increment) * 2);
  border-radius: var(--control-radius);
}

.hours-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--increment) calc(var(--increment) * 5);
  padding-inline: calc(var(--increment) * 2);
  padding-block-end: calc(var(--increment) * 2);
}

.hours-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
}

.hours-legend-item > i,
.hours-sheet-lane > i,
.hours-sheet-follows > i {
  flex: none;
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 2.5);
  border-radius: var(--radius-pill);
}

@media (max-width: 599px) {
  .hours-week {
    --hours-day-column: calc(var(--increment) * 20);
  }
}

.hours-week-head,
.hours-day {
  display: grid;
  grid-template-columns: var(--hours-day-column) 1fr;
  align-items: center;
  column-gap: calc(var(--increment) * 3);
}

.hours-week-head {
  padding-inline: calc(var(--increment) * 2);
}

.hours-week [data-modal] {
  inline-size: 100%;
}

.hours-day {
  inline-size: 100%;
  min-block-size: var(--minimum-target-size);
  padding: calc(var(--increment) * 2);
  border-radius: calc(var(--control-radius) - var(--increment));
  text-align: start;
}

@media (hover: hover) {
  .hours-day:hover {
    background: var(--interactive-wash);
  }
}

.hours-day-name {
  font-weight: var(--weight-semibold);
}

.hours-axis {
  position: relative;
  block-size: calc(var(--increment) * 5);
}

.hours-axis > span {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: var(--at);
  translate: -50% 0;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-variant-numeric: tabular-nums;
}

.hours-lanes {
  display: grid;
  gap: var(--increment);
}

/* A lane and its windows. The first, the place's, is wide enough for
 * text. */
.hours-lane {
  position: relative;
  block-size: calc(var(--increment) * 3);
}

.hours-lane-main {
  block-size: calc(var(--increment) * 7.5);
}

.hours-lane::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: calc(50% - var(--border-width-hairline) / 2);
  block-size: var(--border-width-hairline);
  background: var(--control-line);
}

.hours-segment {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--from);
  inline-size: calc(var(--to) - var(--from));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours-lane-main > .hours-segment {
  border-radius: calc(var(--increment) * 2.5);
}

.hours-closed {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  padding-inline-end: calc(var(--increment) * 2);
  background: var(--surface);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A day's sheet. */
.hours-sheet-lane,
.hours-sheet-follows {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
  margin: 0;
}

.hours-sheet-lane {
  padding-block-start: calc(var(--increment) * 3);
  border-block-start: var(--border-width-hairline) solid var(--control-line);
  font-weight: var(--weight-semibold);
}

.hours-sheet-follows {
  color: var(--text-muted);
}

/* A draggable hours band (`wireHoursBand`), hidden without the runtime. */
.hours-drag {
  position: relative;
  block-size: calc(var(--increment) * 12);
}

.hours-drag:empty {
  display: none;
}

.hours-drag::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: calc(50% - var(--increment));
  border-radius: var(--radius-pill);
  background: var(--fill);
}

.hours-drag-window {
  position: absolute;
  inset-block: calc(var(--increment) * 2);
  inset-inline-start: var(--from);
  inline-size: calc(var(--to) - var(--from));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--increment) * 3);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hours-drag-label {
  overflow: hidden;
  white-space: nowrap;
}

.hours-drag-handle {
  position: absolute;
  inset-block: calc(var(--increment) * -1);
  inset-inline-start: var(--at);
  inline-size: calc(var(--increment) * 6);
  translate: -50% 0;
  border-radius: calc(var(--increment) * 3);
  background: var(--surface);
  box-shadow: var(--elevation-raised);
  cursor: ew-resize;
  touch-action: none;
}

.hours-drag-handle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
}

/* The end date, for ranges only. */
form:has(input[name="scope"][value="until"]:not(:checked)) .field:has(> input[name="to_date"]) {
  display: none;
}

/* Upcoming dates with their hours. Exceptions are ringed and closed days
 * unfilled. */
.hours-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--increment);
}

.hours-dates [data-modal] {
  inline-size: 100%;
}

.hours-date-weekday {
  text-align: center;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.hours-date {
  display: grid;
  align-content: space-between;
  justify-items: center;
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 16);
  padding: calc(var(--increment) * 1.5) calc(var(--increment) / 2);
  border-radius: calc(var(--control-radius) - var(--increment));
  background: var(--surface);
  box-shadow: var(--elevation-resting);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hours-date-number {
  font-weight: var(--weight-semibold);
}

.hours-date-hours {
  color: var(--availability-ink);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hours-date-closed {
  background: none;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--control-line);
}

.hours-date-closed .hours-date-hours {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.hours-date-changed {
  box-shadow: inset 0 0 0 calc(var(--border-width-thin) * 2) var(--accent);
}

.hours-date-past {
  opacity: 0.4;
}

@media (hover: hover) {
  .hours-date:not(.hours-date-past):hover {
    background: var(--interactive-wash);
  }
}

.hours-dates-paging {
  display: flex;
  justify-content: space-between;
  padding-block-start: calc(var(--increment) * 2);
}

.hours-dates-paging > :only-child {
  margin-inline-start: auto;
}

.hours-date-today .hours-date-number {
  color: var(--accent-strong);
}

/* The place switch. */
.place-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--increment);
  padding: calc(var(--increment) * 0.75);
  border-radius: var(--radius-pill);
  background: var(--interactive-wash);
  inline-size: fit-content;
  max-inline-size: 100%;
}

.place-switch-item {
  padding: calc(var(--increment) * 2) calc(var(--increment) * 4);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.place-switch-item[aria-current="true"] {
  background: var(--surface);
  box-shadow: var(--elevation-resting);
}