/* N parts (N-SYSTEM.md). Every part of the site, in its final form, on the tokens in tokens.css. One rule per part:
   concentric corners, items with their own space, one row grid, a hover that is a step of fill (never a size change),
   red only for what destroys something or went wrong, green for done, layered dark tones in dark mode. Classes are x-.
   The values the UI lab tunes are var(--name, default) where they are used: a dial changes one part, and without it
   the part has the system's value. */

/* ============================== base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html.x { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-gutter: stable; background: var(--paper); }
body.x { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-b) / var(--l-b) var(--sans); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ol, ul, figure, blockquote { margin: 0; }
img, video { display: block; max-width: 100%; }
b, strong { font-weight: 500; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.x [hidden] { display: none !important; }
.x * { letter-spacing: 0; }
.x p, .x li, .x dd, .x dt, .x figcaption, .x label, .x .x-row, .x td, .x th { text-wrap: pretty; }
.x h1, .x h2, .x h3, .x .x-display, .x .x-title, .x .x-headline, .x .x-sec-h .t p { text-wrap: balance; }
.x-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* focus: a calm ring, for keyboards only */
.x-btn:focus-visible, .x-row:focus-visible, .x-chip:focus-visible, .x-seg a:focus-visible, .x-pick:focus-visible, .x-ibtn:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* layout: the Swiss grid */
.x-wrap { padding-inline: var(--margin); }
.x-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.x-full { grid-column: 1 / -1; }
.x-read { max-width: 34em; }

/* the five type roles */
.x-display { font-size: var(--t-d); line-height: var(--l-d); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.x-title { font-size: var(--t-t); line-height: var(--l-t); font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
.x-headline { font-size: var(--t-h); line-height: var(--l-h); font-weight: 500; }
.x-body { font-size: var(--t-b); line-height: var(--l-b); }
.x-small { font-size: var(--t-s); line-height: var(--l-s); letter-spacing: 0.01em; }
.x-g { color: var(--grey); }
.x-display .x-g, .x-title .x-g, .x-headline .x-g { font-weight: 400; }
.x-strong { font-weight: 500; }

/* the iOS continuous corner, where the browser has it (pills stay true capsules) */
@supports (corner-shape: superellipse(var(--sq, 1.8))) {
  .x-card, .x-plate, .x-sheet, .x-field input, .x-field textarea, .x-viewer-track img, .x-group, .x-group .x-row, .x-rows, .x-rows .x-row, details.x-disc, .x-pick, .x-when, .x-msg, .x-compose { corner-shape: superellipse(var(--sq, 1.8)); }
}
.x-sq-fallback * { corner-shape: round !important; }   /* the fallback (sq.js), forced for comparing */

/* ============================== layer 2: controls float on glass ============================== */
.x-glass { background: color-mix(in oklab, var(--raised) var(--glass-tint, 94%), transparent); box-shadow: var(--rim-light), var(--lift-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat, 1.6)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat, 1.6)); }

/* ---------- the frame (Owen 6 Nov): the screen is a canvas with a soft edge at the top and bottom, and whatever scrolls through it fades at the
   same place by the same amount. Nothing on the page moves or has to know about it. It lives just under the controls, so a panel covers it and the
   dim falls on it. The top waits until the page has moved, so the name stays clear. ---------- */
main::before, body.x::after { content: ""; position: fixed; inset-inline: 0; pointer-events: none; background: var(--paper); }
main::before { top: 0; z-index: calc(var(--z-controls) - 1); height: var(--frame-top); -webkit-mask-image: linear-gradient(to bottom, var(--frame-stops)); mask-image: linear-gradient(to bottom, var(--frame-stops)); opacity: 0; transition: opacity 200ms var(--ease-respond); }
.x-scrolled main::before { opacity: 1; }
body.x::after { bottom: 0; z-index: calc(var(--z-bar) - 1); height: var(--frame-bot); -webkit-mask-image: linear-gradient(to top, var(--frame-stops)); mask-image: linear-gradient(to top, var(--frame-stops)); transition: height 300ms var(--ease-respond); }

/* ---------- the header: the name, then Menu and Book a call ---------- */
.x-head { position: fixed; inset: 0 0 auto 0; z-index: var(--z-controls); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4);
  padding: var(--head-y, var(--s4)) var(--margin); pointer-events: none; }
.x-head > * { pointer-events: auto; }
.x-who { justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); height: var(--c-reg); padding: 0 var(--s4) 0 var(--s3); border-radius: var(--r-pill);
  font-weight: 500; color: var(--ink); text-decoration: none; }
.x-who svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.x-head-r { justify-self: end; display: flex; gap: var(--s2); align-items: center; }
.x-head-r .x-btn.sec { background: var(--btn-float); box-shadow: var(--lift-2); }   /* it floats over the page, as the phone bar's does */
.x-head .x-glass { transition: background-color 140ms var(--ease-respond); }
@media (hover: hover) { .x-head-r .x-btn.sec:hover { background: var(--btn-float-hover); } }
.x-head-r .x-btn.sec:active { background: var(--btn-float-press); }
/* on a phone the top is a title, not a toolbar: it scrolls away and holds nothing to press */
@media (width < 900px) {
  .x-head { position: absolute; grid-template-columns: minmax(0, 1fr) auto; }
  .x-head .x-head-r, .x-head .x-who .x-g, .x-head #theme-toggle { display: none; }
  .x-head .x-who { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; pointer-events: none; gap: var(--s3); font-size: var(--who-t, var(--t-h)); }
  .x-head .x-who svg { width: var(--who-mark, calc(28 * var(--pt))); height: var(--who-mark, calc(28 * var(--pt))); }
}
/* a static copy, to show on a page */
.x-head.is-static { position: relative; inset: auto; padding: 0; pointer-events: auto; }
.x-head.is-static .x-head-r { display: flex !important; }
.x-head.is-static .x-who { background: color-mix(in oklab, var(--paper) var(--glass-mix, 72%), transparent); box-shadow: var(--rim-light), var(--lift-2); pointer-events: auto; padding: 0 var(--s4) 0 var(--s3); }

/* ============================== buttons ============================== */
/* primary (ink; the lightest dark tone in dark mode) or secondary, regular 44 or large 52 */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--c-reg); padding: 0 var(--btn-px, var(--s4)); border: 0; border-radius: var(--r-pill);
  font: 500 var(--t-b) / 1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 150ms var(--ease-ui), background-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui); }
.x-btn.lg { height: var(--c-lg); padding: 0 var(--btn-px-lg, var(--s5)); }
/* an icon beside a word (after Material and Apple, measured on what is drawn): 14pt tall, the word's capital height and a
   touch over; its stroke the word's weight; drawn to the edge of its box, so the 8pt gap is the gap you see */
.x-btn svg { width: auto; height: calc(14 * var(--pt)); }
.x-btn svg path { stroke-width: 1.4; }
.x-btn.pri { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink));
  box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .09)), 0 0 0 1px light-dark(transparent, rgb(255 255 255 / .05)); }
.x-btn.pri:hover, .x-btn.pri.is-hover { background: light-dark(color-mix(in oklab, var(--ink) 88%, var(--paper)), var(--dk-hi-2)); }
.x-btn.pri:active, .x-btn.pri.is-pressed { background: light-dark(color-mix(in oklab, var(--ink) 78%, var(--paper)), color-mix(in oklab, var(--dk-hi), var(--paper) 25%)); }
/* asleep: the step's button before it has what it needs. It says what that is, quietly, and wakes when it has it */
.x-btn.pri.is-asleep { background: var(--btn-quiet); color: var(--ink); }
.x-btn.pri.is-asleep:hover { background: var(--btn-quiet-hover); }
.x-btn.pri.is-asleep:active { background: var(--btn-quiet-press); }
/* Done: Close's shape in green, the tick in place of the cross */
.x-btn.pri.ok { background: color-mix(in oklab, var(--ok) 14%, var(--raised)); color: var(--ok); box-shadow: var(--rim-light); }
.x-btn.pri.ok:hover { background: color-mix(in oklab, var(--ok) 22%, var(--raised)); }
.x-btn.sec { background: var(--btn-quiet); color: var(--ink); box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .05)); }
.x-btn.sec:hover, .x-btn.sec.is-hover { background: var(--btn-quiet-hover); }
.x-btn.sec:active, .x-btn.sec.is-pressed { background: var(--btn-quiet-press); }

/* the icon button: no bare-word actions (Owen 3 Nov), an icon in its own round button with a tooltip */
.x-ibtn { flex: none; display: inline-grid; place-items: center; width: var(--ibtn, var(--c-reg)); height: var(--ibtn, var(--c-reg)); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--btn-quiet); color: var(--ink); transition: transform var(--dur-tap) var(--ease-respond), background-color 150ms var(--ease-respond); }
.x-ibtn:hover { background: var(--btn-quiet-hover); }
.x-ibtn:active { background: var(--btn-quiet-press); }
.x-ibtn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.x-ibtn.sm { width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); }
.x-ibtn.sm svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.x-ibtn.is-done { background: oklch(0.6 0.14 150); color: #fff; }
/* only destructive actions are red (Owen 5 Nov: closing a menu is not destructive); Close, Cancel and Back are neutral */
.x-ibtn:is([aria-label^="Remove"], [aria-label^="Delete"]):not(.x-goo-face) { color: var(--danger) !important; background: var(--danger-bg) !important; }
.x-ibtn:is([aria-label^="Remove"], [aria-label^="Delete"]):not(.x-goo-face):hover { background: var(--danger-bg-hover) !important; }
.x-ibtn:is([aria-label^="Remove"], [aria-label^="Delete"]):focus-visible { outline-color: var(--danger); }

/* the tooltip: on a pointer that can hover, after a beat, centred above what it describes */
[data-tip] { position: relative; }
@media (hover: hover) {
  [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + var(--s2)); transform: translate(-50%, 4px); z-index: var(--z-tip); pointer-events: none; white-space: nowrap;
    padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: var(--r-pill); background: var(--tip-bg); color: var(--tip-fg); box-shadow: var(--lift-4);
    font: 500 var(--t-s) / var(--l-s) var(--sans); letter-spacing: 0.01em; opacity: 0; transition: opacity 150ms var(--ease-respond), transform 200ms var(--ease-respond); }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: var(--tip-delay, 450ms); }
  /* on a row, over its trailing column */
  .x-row[data-tip]::after { left: auto; right: calc(var(--rpr) + var(--slot) / 2); transform: translate(50%, 4px); }
  .x-row[data-tip]:hover::after, .x-row[data-tip]:focus-visible::after { transform: translate(50%, 0); }
}
[data-tip].show-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + var(--s2)); transform: translate(-50%, 0); white-space: nowrap; padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font: 500 var(--t-s) / var(--l-s) var(--sans); letter-spacing: 0.01em; opacity: 1 !important; }

/* ============================== the switch (segmented control) ============================== */
.x-seg { position: relative; isolation: isolate; display: inline-flex; gap: calc(2 * var(--pt)); padding: var(--s1); height: var(--c-reg); border-radius: var(--r-pill);
  background: light-dark(transparent, var(--dk-1)); box-shadow: inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / .05)); }
.x-decide .x-seg, .x-theme-row .x-seg, .x-seg-flat { background: light-dark(color-mix(in oklab, var(--ink) 6%, transparent), var(--dk-1)); }
.x-seg > a, .x-seg > button { position: relative; z-index: 1; transition: color 220ms var(--ease-respond), transform var(--dur-tap) var(--ease-respond); }
.x-seg a { display: inline-flex; align-items: center; height: calc(36 * var(--pt)); padding: 0 var(--s4); border-radius: var(--r-pill); color: var(--grey); font-size: var(--t-b); text-decoration: none; white-space: nowrap; }
.x-seg a:hover, .x-seg > a:active { color: var(--ink); }
.x-seg a[aria-current] { background: light-dark(var(--paper), var(--dk-hi)); color: var(--ink);
  box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .08)), 0 1px 2px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .35)), 0 0 0 1px light-dark(color-mix(in oklab, var(--ink) 6%, transparent), transparent); }
.x-seg.has-thumb > a[aria-current] { background: transparent; box-shadow: none; }
/* the thumb slides between options (motion.js) */
.x-thumb { position: absolute; z-index: 0; left: 0; top: var(--s1); bottom: var(--s1); width: 0; border-radius: var(--r-pill); pointer-events: none; will-change: transform, width;
  background: light-dark(var(--paper), var(--dk-hi)); transition: opacity 200ms var(--ease-respond);
  box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .08)), 0 1px 2px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .35)), 0 0 0 1px light-dark(color-mix(in oklab, var(--ink) 6%, transparent), transparent),
    0 4px 12px -6px light-dark(rgb(0 0 0 / .18), transparent); }

/* ============================== rows ============================== */
/* a row: disclosure (+) or link (arrow), at least 56, the whole width tappable. Never a line between rows: they sit together in one soft group */
.x-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--c-row); padding: var(--s3) 0;
  font-size: var(--t-b); line-height: var(--l-b); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; }
button.x-row { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; padding-inline: 0; }
.x-mark svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); display: block; }
.x-row .x-mark { flex: none; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); display: grid; place-items: center; border-radius: 50%; color: var(--grey); transition: transform 300ms var(--ease-sheet), background-color 150ms; }
.x-row:hover .x-mark { background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink); }
.x-sheet .x-rows .x-row .x-mark { width: auto; min-width: calc(24 * var(--pt)); padding-inline: var(--s1); border-radius: var(--r-pill); font-size: var(--t-s); }
.x-row-ask { display: inline-flex; align-items: center; gap: var(--s3); }
.x-row-ask img { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%; object-fit: cover; }

/* disclosure ("What's included" and Questions): flat on the page, on the row grid; the + in the 36pt trailing column */
details.x-disc > summary { list-style: none; }
details.x-disc > summary::-webkit-details-marker { display: none; }
.x-disc > .x-row { min-height: calc(56 * var(--pt)); gap: var(--s4); }
.x-disc > .x-row .x-mark { flex: none; width: var(--slot); min-width: var(--slot); height: var(--slot); padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: var(--t-b);
  transition: transform 300ms var(--ease-sheet), background-color 140ms, color 140ms; }
.x-disc > .x-row:hover .x-mark { background: var(--fill-1); color: var(--ink); }
details.x-disc[open] > .x-row .x-mark { transform: rotate(45deg); }
details.x-disc { border-radius: var(--r-item); transition: background-color 150ms var(--ease-respond); }
details.x-disc[open] { background: var(--fill-1); }   /* the open one is its own small surface, question and answer together */
details.x-disc[open] > .x-row:hover { background: none; }
details.x-disc > p { padding: 0 var(--rpr) var(--s4) var(--rpl); margin: calc(-1 * var(--s1)) 0 0; color: var(--grey); max-width: 34em; }

/* sections (D): rows in a barely-there group, 4pt apart, the hover the one clear shape; one row grid, words 12 in,
   a 36pt trailing column 6 in, every icon centred in it */
.x-group, .x-rows { display: grid; gap: var(--row-gap, calc(4 * var(--pt))); min-width: 0; padding: var(--gp); border-radius: var(--r-group); background: var(--fill-0); }
.x-group .x-row { border: 0; min-height: var(--row-h, calc(46 * var(--pt))); padding: 0 var(--rpr) 0 var(--rpl); border-radius: var(--r-item); transition: background-color 150ms var(--ease-respond); }
.x-rows .x-row { min-height: var(--row-h, var(--c-row)); padding: var(--s2) var(--rpr) var(--s2) var(--rpl); border-radius: var(--r-item); transition: background-color 150ms var(--ease-respond); }
.x-rows p.x-row { margin: 0; cursor: default; }
.x-group .x-row:hover, .x-group .x-row:focus-visible, .x-rows :is(a, button, summary).x-row:hover, .x-rows :is(a, button, summary).x-row:focus-visible { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.x-group .x-row[aria-current="page"] { background: var(--fill-2); font-weight: 500; }   /* the page you are on */
.x-group .x-row .x-mark, .x-group .x-row .x-ibtn { flex: none; width: var(--slot); min-width: var(--slot); height: var(--slot); padding: 0; display: grid; place-items: center; border-radius: 50%; }
.x-group .x-row .x-mark { color: var(--grey); }
.x-group .x-row:hover .x-mark { background: transparent; color: var(--ink); transform: translateX(2px); }
.x-group .x-row .x-row-ask, .x-group .x-row > span:not(.x-mark):not(.x-ibtn) { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; }
/* the Appearance row: its label never truncates, the switch is the compact size and ends on the icons' line */
.x-theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--c-row); }
.x-theme-row > span { font-size: var(--t-b); }
.x-group.x-theme-row { flex-wrap: nowrap; gap: var(--s3); min-height: auto;
  padding: calc(var(--gp) + 6 * var(--pt)) calc(var(--gp) + var(--rpr)) calc(var(--gp) + 6 * var(--pt)) calc(var(--gp) + var(--rpl)); }
.x-group.x-theme-row:has(.x-seg) { flex-wrap: wrap; }
/* a row with a control: the label on the row's left edge, the control on its right, both centred on one line. Only if they truly can't share a line does the control drop and take the whole width */
.x-group.x-theme-row > span { flex: 999 1 auto; padding: 0; min-width: 0; white-space: nowrap; }
.x-group.x-theme-row .x-seg { flex: 1 0 auto; height: auto; padding: calc(3 * var(--pt)); }
.x-group.x-theme-row .x-seg a { flex: 1; height: calc(34 * var(--pt)); padding: 0 var(--s2); font-size: var(--t-s); }

/* ============================== cards and plates ============================== */
.x-card { border-radius: var(--r-card); padding: var(--x-card-pad, var(--i-card)); background: var(--x-tint); display: grid; gap: var(--s4); align-content: start; }
/* the ink card: ink in light, a raised dark tone in dark; its button keeps its own fill whatever the metal does */
.x-card.ink { background: light-dark(var(--ink), var(--dk-2)); color: light-dark(var(--paper), var(--ink));
  box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .05)), 0 0 0 1px light-dark(transparent, rgb(255 255 255 / .04)); }
.x-card.ink .x-g { color: light-dark(color-mix(in oklab, var(--paper) 62%, transparent), var(--grey)); }
.x-card.ink .x-btn.pri, .x-card.ink .metal-fx-root.x-metal-ink { background: light-dark(var(--paper), var(--dk-hi)) !important; color: var(--ink) !important; }
.x-plate { border-radius: var(--r-plate); overflow: hidden; background: var(--x-tint); }
.x-plate img, .x-plate video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================== booking's insides: fields, chips, picks ============================== */
/* fields: filled, not outlined; the ring arrives on focus; red when something's wrong, with the reason beneath */
.x-field { display: grid; gap: var(--s2); }
.x-field label { font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); letter-spacing: 0.01em; }
.x-field input, .x-field textarea { font: inherit; font-size: max(16px, var(--t-b)); color: var(--ink); height: var(--field-h, var(--c-lg)); padding: 0 calc(14 * var(--pt)); border: 0; border-radius: var(--r-item);
  background: var(--fill-1); box-shadow: none; outline: none; transition: background-color 140ms, box-shadow 140ms; }
.x-field textarea { height: calc(120 * var(--pt)); padding-top: var(--s3); resize: vertical; }
.x-field input:hover, .x-field textarea:hover { background: var(--fill-2); }
.x-field input:focus, .x-field textarea:focus { outline: none; background: transparent; box-shadow: 0 0 0 2px var(--ring); }
.x-field.is-wrong input, .x-field.is-wrong textarea { background: var(--danger-bg); box-shadow: none; }
.x-field.is-wrong label { color: var(--danger); }
.x-field .x-err { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* for screen readers: an error adds nothing to the screen, the step's button says it */
.x-part .x-field + .x-field { margin-top: calc(-1 * var(--s1)); }
/* chips: one pick or many, 44 */
.x-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pt)); }
.x-chip { display: inline-flex; align-items: center; height: var(--c-reg); padding: 0 var(--chip-px, var(--s4)); border: 0; border-radius: var(--r-pill); background: var(--btn-quiet);
  font: 400 var(--t-b) / 1 var(--sans); color: var(--ink); cursor: pointer; transition: background-color 140ms; }
.x-chip:hover { background: var(--btn-quiet-hover); }
.x-chip[aria-pressed="true"] { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); }
/* picks: days as five tiles, times as a grid; the item radius (they sit mid-panel) */
.x-picks { display: grid; gap: var(--pick-gap, calc(6 * var(--pt))); }
.x-picks.days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.x-picks.times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-pick { display: grid; place-items: center; align-content: center; gap: calc(2 * var(--pt)); min-height: var(--c-reg); padding: var(--s2) 0; border: 0; border-radius: var(--r-item);
  background: var(--btn-quiet); color: var(--ink); font: 400 var(--t-b) / 1.1 var(--sans); cursor: pointer; transition: background-color 140ms var(--ease-respond), color 140ms; }
.x-picks.days .x-pick { min-height: var(--day-h, calc(56 * var(--pt))); }
.x-pick .x-g { font-size: var(--t-s); }
.x-pick b { font-weight: 500; font-variant-numeric: tabular-nums; }
.x-pick:hover { background: var(--btn-quiet-hover); }
.x-pick:active { background: var(--btn-quiet-press); }
.x-pick[aria-pressed="true"] { background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .08)); }
.x-pick[aria-pressed="true"] .x-g { color: light-dark(color-mix(in oklab, var(--paper) 70%, transparent), color-mix(in oklab, var(--ink) 70%, transparent)); }
/* booked: a green tick, said once */
.x-done-tick { flex: none; display: inline-grid; place-items: center; }
.x-done-tick path { stroke-dasharray: 16; animation: x-tick-draw 320ms var(--ease-arrive) 200ms backwards; }
@keyframes x-tick-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .x-done-tick path { animation: none; } }
/* what you chose, carried with you */
.x-when { padding: var(--s3); border-radius: var(--r-item); background: var(--fill-1); color: var(--ink); font-weight: 500; text-align: center; }
.x-when:empty::before { content: "\00a0"; }   /* it holds its line before there is a time, so the card is measured right */
/* the times wait for a day, in place, so nothing moves when they wake */
.x-picks.is-asleep .x-pick { opacity: .4; }
.x-picks .x-pick { transition: background-color 140ms var(--ease-respond), color 140ms, opacity 200ms var(--ease-respond); }
.x-sheet-body > [data-step] { min-height: var(--step-h, 0px); }
.x-step { display: grid; gap: var(--s5); align-content: start; }

/* ============================== the chat ============================== */
.x-chat { display: grid; gap: calc(8 * var(--pt)); }
.x-msg { max-width: 82%; padding: calc(10 * var(--pt)) calc(14 * var(--pt)); border-radius: var(--r-group); line-height: var(--l-b); }
.x-msg.them { justify-self: start; background: var(--fill-1); border-bottom-left-radius: calc(6 * var(--pt)); }
.x-msg.me { justify-self: end; background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); border-bottom-right-radius: calc(6 * var(--pt)); }
.x-msg-who { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); color: var(--grey); }
.x-msg-who img { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; object-fit: cover; }
.x-typing { justify-self: start; display: inline-flex; gap: calc(5 * var(--pt)); padding: calc(14 * var(--pt)) calc(16 * var(--pt)); border-radius: var(--r-group); border-bottom-left-radius: calc(6 * var(--pt)); background: var(--fill-1); }
.x-typing i { width: calc(7 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 50%; background: var(--grey); animation: x-typing 1.1s infinite ease-in-out; }
.x-typing i:nth-child(2) { animation-delay: .15s; } .x-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes x-typing { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 calc(-3 * var(--pt)); } }
/* the composer: a field with its send button in the trailing column */
.x-compose { display: flex; align-items: center; gap: var(--s2); min-height: var(--c-lg); padding: calc(8 * var(--pt)) calc(8 * var(--pt)) calc(8 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(var(--c-lg) / 2); background: var(--fill-1); transition: box-shadow 140ms; }
.x-compose:focus-within { box-shadow: 0 0 0 2px var(--ring); }
.x-compose input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: max(16px, var(--t-b)); color: var(--ink); outline: none; }
.x-compose .x-send { flex: none; display: grid; place-items: center; width: var(--slot); height: var(--slot); border: 0; border-radius: 50%; cursor: pointer;
  background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); transition: opacity 140ms, background-color 140ms; }
.x-compose .x-send:disabled { opacity: .35; cursor: default; }
.x-compose .x-send svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }

/* ============================== layer 4: the toast ============================== */
.x-toast { position: fixed; z-index: var(--z-toast); left: 50%; top: var(--s4); transform: translate(-50%, calc(-100% - var(--s5))); display: inline-flex; align-items: center; gap: var(--s2);
  height: var(--toast-h, var(--c-reg)); padding: 0 var(--s5) 0 calc(6 * var(--pt)); border-radius: var(--r-pill); background: var(--raised); color: var(--ink); box-shadow: var(--rim-light), var(--lift-4);
  font-size: var(--t-b); font-weight: 500; transition: transform var(--dur-sheet) var(--ease-sheet); }
.x-toast.is-on { transform: translate(-50%, 0); }
.x-toast .x-toast-i, .x-toast .x-tick { display: grid; place-items: center; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%; background: var(--ok-solid); color: var(--ok-on); font-size: 0; }
.x-toast.is-wrong .x-toast-i { background: var(--danger); color: #fff; }
.x-toast .x-toast-i svg, .x-toast .x-tick svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); display: block; }
@media (width < 900px) {   /* on a phone it rises just above the bar */
  .x-toast { top: auto; bottom: calc(60 * var(--pt) + var(--bar-edge) + var(--s3)); transform: translate(-50%, calc(100% + 140 * var(--pt))); }
  .x-toast.is-on { transform: translate(-50%, 0); }
}
.x-toast.is-static { position: relative; left: auto; top: auto; bottom: auto; transform: none !important; display: inline-flex; }
.x-cap-dot { display: inline-block; width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); margin-right: var(--s2); border-radius: 50%; background: var(--live); vertical-align: middle; }

/* ============================== metal (off by default; ?metal=one brings it back) ============================== */
.metal-fx-root.x-metal { border-radius: var(--r-pill); transition: transform var(--dur-tap) var(--ease-respond); }
.metal-fx-root.x-metal-ink[data-variant] { background: var(--ink); color: var(--paper); }
.metal-fx-root.x-metal-glass[data-variant] { background: color-mix(in oklab, var(--paper) 72%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px -12px rgb(0 0 0 / .22); }
.metal-fx-root.x-metal-glass .x-glass { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.metal-fx-root.x-metal > canvas, .metal-fx-root.x-metal > div[aria-hidden] { transition: opacity 420ms var(--ease-respond); }
.metal-fx-root.x-metal-off > canvas, .metal-fx-root.x-metal-off > div[aria-hidden] { opacity: 0 !important; }
.x-head .metal-fx-root { width: fit-content; }
.x-head .metal-fx-root:has(.x-who) { justify-self: start; }
.x-head .metal-fx-root:has(#theme-toggle) { border-radius: 50%; }
@media (width < 900px) { .x-head .metal-fx-root:has(#theme-toggle) { display: none; } }
@media (width < 600px) { .x-head .x-btn.pri, .x-head .metal-fx-root:has(.x-btn.pri) { display: none; } }

/* ============================== the phone bar (D + 3, Owen 3 Nov) ==============================
   No capsule: the Menu pill and Book a call float on their own, on the page's margins, the same shapes as a panel's
   foot. While the menu is open the bar is its foot: Menu turns into a red Close (its two lines become a cross), Book a
   call stays where the thumb already is, and the menu drops its own foot. On scroll the bar shrinks to 44, never hides. */
.x-tabbar { display: none; }
.x-tab { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--s2); min-width: 0; height: var(--c-lg); padding: 0 var(--tab-pr, var(--s5)) 0 var(--tab-pl, var(--s4));
  border: 0; border-radius: var(--r-pill); background: var(--btn-float); color: var(--ink); box-shadow: var(--lift-2); font: 500 var(--t-b) / 1 var(--sans); cursor: pointer;
  transition: background-color 180ms var(--ease-respond), color 180ms var(--ease-respond), height 300ms var(--ease-respond); }
@media (hover: hover) { .x-tab:hover { background: var(--btn-float-hover); } }   /* a finger leaves hover stuck on, so only a mouse gets it */
.x-tab:active { background: var(--btn-float-press); }
.x-tabbar .x-tab-cta { box-shadow: var(--lift-2); }   /* both buttons on the phone bar float the same way (4 Nov) */
.x-tab svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); fill: none; overflow: visible; }
.x-tab .w-c { display: none; }
.x-burger path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 12px 12px; transition: transform 220ms var(--ease-respond); }
.x-tab.is-close .b1 { transform: rotate(45deg) translateY(3px); }
.x-tab.is-close .b2 { transform: rotate(-45deg) translateY(-3px); }
.x-tab.is-back .b1 { transform: translate(.5px, -2.5px) rotate(-45deg) translateY(3px) scaleX(.5); }
.x-tab.is-back .b2 { transform: translate(.5px, 2.5px) rotate(45deg) translateY(-3px) scaleX(.5); }
.x-tab:is(.is-close, .is-back) .w-m { display: none; } .x-tab:is(.is-close, .is-back) .w-c { display: inline; }
.x-tab-cta { width: 100%; transition: height 300ms var(--ease-respond); }
.x-tabbar .x-tab-cta { box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .09)), 0 0 0 1px light-dark(color-mix(in oklab, var(--ink) 8%, transparent), rgb(255 255 255 / .05)),
  0 1px 2px light-dark(rgb(20 18 16 / .06), transparent), 0 4px 14px -4px light-dark(rgb(20 18 16 / .12), transparent); }
@media (width < 900px) {
  .x-tabbar { --bar-inset: var(--margin); position: fixed; z-index: var(--z-bar); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s2); padding: 0;
    left: max(var(--bar-inset, var(--margin)), env(safe-area-inset-left)); right: max(var(--bar-inset, var(--margin)), env(safe-area-inset-right));
    bottom: calc(var(--bar-edge) + var(--kb, 0px)); height: var(--bar-h, calc(60 * var(--pt))); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: height 300ms var(--ease-respond), opacity 300ms var(--ease-respond); }
  .bar-small { --bar-now: var(--bar-h-s, calc(52 * var(--pt))); }
  .x-sheet.is-open, .x-goo { translate: 0 calc(-1 * var(--kb-lift, 0px)); transition: translate 240ms var(--ease-respond); }   /* the keyboard lifts a panel and its button */
  .bar-small .x-tabbar { height: var(--bar-h-s, calc(52 * var(--pt))); }
  .bar-small .x-tab, .bar-small .x-tab-cta { height: var(--c-reg); }
  body.x { padding-bottom: calc(60 * var(--pt) + var(--bar-edge) + var(--frame-h) + var(--s2)); }
  /* while a panel is open the bar hides, unless the panel grew out of it (then it stays, as that panel's foot) */
  .x-sheet-open .x-tabbar { opacity: 0; pointer-events: none; transition: opacity 0s linear 420ms; }
  .x-pop-open .x-tabbar { opacity: 1; pointer-events: auto; transition: none; }
  .x-bar-foot .x-tabbar { z-index: calc(var(--z-panel) + 5); pointer-events: none; }
  .x-bar-foot .x-tabbar .x-tab-cta, .x-bar-lead .x-tabbar .x-tab { pointer-events: auto; }
  .x-bar-foot .x-sheet:not(:has([data-step])) .x-act { display: none !important; }
  .x-bar-foot .x-sheet:not(:has([data-step])) .x-sheet-body { padding-bottom: var(--panel-in) !important; }
}
.x-tabbar.is-static { position: relative; inset: auto; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2); padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  width: min(100%, calc(370 * var(--pt))); height: var(--bar-h, calc(60 * var(--pt))); transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .x-tabbar, .x-tab, .x-tab-cta, .x-burger path { transition: none !important; } }

/* ============================== layer 3: panels ============================== */
/* the page dims under a panel; it never blurs */
.x-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim, var(--dim)); opacity: 0; pointer-events: none; transition: opacity var(--dur-panel-out) var(--ease-settle); }
.x-scrim.is-on { opacity: 1; pointer-events: auto; transition-duration: var(--dur-panel); }
.x-sheet { position: fixed; z-index: var(--z-panel); display: flex; flex-direction: column; overflow: clip; color: var(--ink); outline: none; visibility: hidden; scrollbar-width: none;
  transition: transform var(--dur-sheet) var(--ease-sheet), opacity var(--dur-sheet) var(--ease-sheet), visibility 0s linear var(--dur-sheet); }
.x-sheet.is-open { visibility: visible; transition: transform var(--dur-sheet) var(--ease-sheet), opacity var(--dur-sheet) var(--ease-sheet), visibility 0s; }
.x-sheet.is-dragging { transition: none; }
.x-sheet.x-morph { transition: none !important; will-change: transform, opacity; }
.x-sheet.x-resizing { overflow: hidden; }
.x-sheet::-webkit-scrollbar { display: none; }
/* every panel is solid and raised: the page never shows through it */
.x-sheet.x-glass { background: var(--raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--rim-light), var(--lift-3); }
/* a panel's inset (Owen 6 Nov): one value, on all four sides, on every screen. Words sit 24 in. A panel of sections sits 12 in, so its corners nest (30 outside, 18 inside);
   any words directly on it still sit 24 in. With no title, the first thing starts at the inset. */
.x-sheet:has(> .x-sheet-body > .x-group) { --panel-in: var(--i-panel); --sheet-gap: var(--section-gap); }
.x-sheet:not(:has(> .x-sheet-bar)) > .x-sheet-body { padding-top: var(--panel-in); }
.x-sheet .x-sheet-body > .x-cap { padding: calc(var(--i-card) - var(--panel-in)) var(--s4) var(--s2); }
.x-sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); padding: var(--panel-in) var(--panel-in) var(--s2); flex: none; }
.x-sheet-bar .l { justify-self: start; } .x-sheet-bar .r { justify-self: end; }
.x-sheet-bar .x-headline { font-size: var(--t-b); line-height: var(--l-b); text-align: center; }
/* the counter above the title: a mark a step, filling as you go and green when it is done, or the number rolling (data-progress="count") */
.x-sheet-bar:has(.x-progress) > :not(.x-progress) { grid-row: 2; }
.x-sheet-bar:has(.x-progress) .x-headline { grid-column: 2; }
.x-progress { grid-column: 1 / -1; grid-row: 1; justify-self: center; display: flex; align-items: center; height: var(--s4); margin: calc(-1 * var(--s1)) 0 0; }
.x-marks { display: flex; gap: var(--s1); }
.x-marks i { position: relative; overflow: hidden; width: var(--s5); height: var(--s1); border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 16%, transparent); }
.x-marks i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-respond), background-color 240ms var(--ease-respond); }
.x-marks i.on::after { transform: none; }
.x-progress.is-done .x-marks i::after { background: var(--ok-solid); }
.x-count { display: none; align-items: center; gap: .25em; font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); font-variant-numeric: tabular-nums; }
.x-roll { display: inline-block; height: var(--l-s); overflow: hidden; color: var(--ink); font-weight: 500; }
.x-roll b { display: block; font-weight: inherit; transform: translateY(calc(var(--at, 0) * -100%)); transition: transform 320ms var(--ease-respond); }
.x-progress.is-done .x-roll { color: var(--ok); }
[data-progress="count"] .x-marks { display: none; }
[data-progress="count"] .x-count { display: inline-flex; }
.x-sheet .x-sheet-bar .x-btn { visibility: hidden !important; }   /* a panel's top is its title; its two actions are at its foot */
.x-sheet-body { overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 var(--panel-in) var(--panel-in); display: grid; gap: var(--sheet-gap, var(--s5)); align-content: start; flex: 1; }
.x-sheet-body::-webkit-scrollbar { display: none; }
/* a step fills its panel, so its actions rest at the foot */
.x-sheet-body:has(> [data-step]) { display: flex; flex-direction: column; padding-bottom: 0; }
.x-sheet-body > [data-step]:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
.x-sheet-body > [data-step] > .x-act { margin-top: auto; }
@media (width < 900px) { .x-sheet-body:has(~ .x-act, > .x-act, > [data-step]) { padding-bottom: 0; } }
/* the caption sits centred under the title, dot and words as one line */
.x-sheet .x-cap { display: flex; align-items: center; justify-content: center; gap: var(--s2); text-align: center; }
.x-sheet .x-cap .x-cap-dot { flex: none; margin: 0; }
/* the grabber: 36 by 5pt in a 24pt strip */
.x-grab { flex: none; display: grid; place-items: center; height: var(--s5); width: 100%; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.x-grab span { width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 28%, transparent); }

/* the foot: two actions, the lead a circle as tall as the primary (neutral), on the panel's own inset */
.x-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: center; }
.x-act:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.x-act .x-btn { width: 100%; }
.x-act-lead { display: inline-flex; }
.x-act-lead.x-ibtn { display: inline-grid; place-items: center; }
.x-act .x-ibtn { width: var(--c-lg); height: var(--c-lg); }
.x-sheet .x-act { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--panel-in)); padding: var(--s4) var(--panel-in) calc(var(--panel-in) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--sheet-fill, var(--raised)) 28%); }
@media (width < 900px) { .x-sheet .x-act { padding-top: var(--s2); } }
.x-sheet .x-act .x-act-lead.x-ibtn { width: var(--c-lg); height: var(--c-lg); min-width: var(--c-lg); border-radius: 50%; background: color-mix(in oklab, var(--ink) 8%, transparent); }
.x-act.is-static { position: relative !important; margin: 0 !important; padding: 0 !important; background: none !important; width: min(100%, calc(370 * var(--pt))); }

/* presentations. Beside its control (form and popover) is the one every panel uses; bottom and top are for panels opened
   with no control (a phone's own sheet), the viewer is full screen */
.x-sheet[data-as="form"] { inset: 0; margin: auto; width: min(calc(560 * var(--pt)), calc(100vw - 2 * var(--margin))); height: fit-content; max-height: min(calc(720 * var(--pt)), calc(100dvh - 2 * var(--s7)));
  border-radius: var(--r-book); opacity: 0; transform: translateY(var(--s5)) scale(.985); }
.x-sheet[data-as="form"].is-open { opacity: 1; transform: none; }
.x-sheet[data-as="form"] .x-grab { display: none; }
.x-sheet[data-as="popover"] { width: min(calc(340 * var(--pt)), calc(100vw - 24px)); height: auto; max-height: min(78vh, calc(640 * var(--pt))); border-radius: var(--r-panel);
  opacity: 0; transform: translateY(calc(-6 * var(--pt))) scale(.98); transform-origin: top right; }
.x-sheet[data-as="popover"].is-open { opacity: 1; transform: none; }
.x-sheet[data-as="popover"], .x-sheet[data-as="form"] { --sheet-fill: var(--raised); background: var(--raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--rim-light), var(--lift-3); }
.x-sheet[data-as="popover"] .x-sheet-bar, .x-sheet[data-as="popover"] .x-grab, .x-sheet[data-as="popover"] .x-act { display: none !important; }
.x-sheet[data-as="popover"] .x-sheet-body { padding-bottom: var(--panel-in); }
.x-sheet[data-as="bottom"] { left: 0; right: 0; bottom: 0; height: calc(100dvh - var(--s7)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; transform: translateY(100%); }
.x-sheet[data-as="bottom"].is-open { transform: translateY(var(--y, 0px)); }
.x-sheet[data-as="bottom"][data-detents="fit"] { height: auto; max-height: min(calc(var(--fit-max, 0.6) * 100dvh), calc(100dvh - var(--kb, 0px) - var(--s2))); }
.x-sheet[data-as="bottom"][data-detents="fit"] .x-sheet-body:has(~ .x-act, > .x-act, > [data-step]) { padding-bottom: 0; }
.x-sheet[data-detents="fit"] .x-sheet-body:has(> [data-step]) { flex: 0 1 auto; }
.x-sheet[data-detents="fit"] .x-sheet-body > [data-step]:not([hidden]) { flex: 0 0 auto; }
@media (width < 900px) { .x-sheet[data-as="bottom"] { bottom: var(--kb, 0px); max-height: calc(100dvh - var(--kb, 0px) - var(--s2)); } }   /* the keyboard lifts it */
/* on a phone without a control it floats as a tray, inset from the edges */
.x-sheet[data-as="bottom"].x-tray { left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: calc(36 * var(--pt)); max-height: calc(100dvh - 24px - var(--s7)); box-shadow: 0 24px 48px -16px rgb(0 0 0 / .3); }
.x-sheet[data-as="bottom"].x-tray .x-act { padding-bottom: var(--s4); }
.x-sheet[data-as="top"] { left: 0; right: 0; top: 0; border-radius: 0 0 var(--r-sheet) var(--r-sheet); padding-top: calc(var(--c-reg) + var(--s5)); transform: translateY(-100%); }
.x-sheet[data-as="top"].is-open { transform: translateY(var(--y, 0px)); }
.x-sheet[data-as="top"] .x-grab { order: 9; }

/* the liquid (Pour, sheet.js): while the liquid is a panel's surface the panel is see-through and round-cornered (the
   liquid draws circular corners); the button's stand-in is the button itself, cloned, on the liquid */
.x-sheet.x-goo-on { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; corner-shape: round !important;
  clip-path: none !important; pointer-events: auto; color: var(--ink); }
.x-goo svg g[filter] { transition: fill var(--goo-fill-ms, 220ms) linear; }
.x-pour > svg { position: absolute; inset: 0; overflow: visible; }
.x-pour-shadow { position: absolute; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; }
@supports (corner-shape: superellipse(2)) { .x-pour-shadow { corner-shape: superellipse(var(--sq, 1.8)); } }
.x-goo-seed { pointer-events: auto; }
.x-goo-seed .x-goo-face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.x-goo-seed .x-goo-face.x-tab { transition: background-color 180ms var(--ease-respond), color 180ms var(--ease-respond); }
/* one action, two options: the button you pressed stays, wearing the panel's Close or Back, and the panel drops it from its foot.
   Both stay in the foot's place for a keyboard, and come back into view when they are reached. */
.x-goo-seed .x-goo-face:is(.x-as-close, .x-as-back) { background: var(--btn-float) !important; color: var(--ink) !important; box-shadow: var(--lift-2) !important; }
.x-goo-seed .x-goo-face.x-as-done { background: color-mix(in oklab, var(--ok) 14%, var(--raised)) !important; color: var(--ok) !important; box-shadow: var(--rim-light) !important; }
.x-goo-seed .x-goo-face:is(.x-as-close, .x-as-back, .x-as-done) { padding: 0 var(--tab-pr, var(--s5)) 0 var(--tab-pl, var(--s4)); transition: width 240ms var(--ease-respond), background-color 180ms var(--ease-respond), color 180ms var(--ease-respond); }
.x-lead-out .x-act:not(:has(.x-act-lead:focus-visible)) { grid-template-columns: minmax(0, 1fr); }
.x-lead-out .x-act-lead:not(:focus-visible), .x-foot-out .x-act:not(:has(:focus-visible)) { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.x-foot-out .x-sheet-body { padding-bottom: var(--panel-in) !important; }
.x-lead-out.x-foot-out .x-sheet-body { padding-bottom: 0 !important; }   /* the last step keeps the height of the steps with a foot */
.x-foot-note { margin-top: auto; padding-bottom: var(--s5); }

/* the full-screen viewer: one piece of work at a time, on its own dark ground */
.x-sheet[data-as="viewer"] { inset: 0; background: rgb(12 12 11 / .96); color: #f2f1ee; transform: translateY(var(--y, 6%)); opacity: 0; }
.x-sheet[data-as="viewer"].is-open { transform: translateY(var(--y, 0px)); opacity: 1; }
.x-viewer-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.x-viewer-track::-webkit-scrollbar { display: none; }
.x-viewer-track figure { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: var(--s5) var(--margin); margin: 0; gap: var(--s3); align-content: center; }
.x-viewer-track img { max-width: 100%; max-height: calc(100dvh - 12rem); border-radius: var(--r-plate); box-shadow: 0 20px 60px -20px rgb(0 0 0 / .6); }
.x-viewer-track figcaption { font-size: var(--t-s); line-height: var(--l-s); color: rgb(242 241 238 / .62); }
.x-viewer-count { justify-self: center; padding: calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius: var(--r-pill); background: rgb(255 255 255 / .1); color: rgb(242 241 238 / .8); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.x-sheet .x-viewer-act { margin: 0; padding: var(--s4) var(--margin) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); background: none; }
.x-sheet[data-as="viewer"] .x-btn.sec, .x-sheet[data-as="viewer"] .x-ibtn { background: rgb(255 255 255 / .14); color: #f2f1ee; }
.x-sheet[data-as="viewer"] .x-btn.pri { background: #f2f1ee; color: #151514; }
@media (width < 900px) { .x-sheet[data-as="viewer"] .x-sheet-bar { padding-bottom: var(--s2); } }
@media (width >= 900px) { .x-sheet .x-viewer-act { max-width: calc(560 * var(--pt)); width: 100%; margin: 0 auto; } }

@media (prefers-reduced-motion: reduce) {
  .x-sheet, .x-sheet.is-open, .x-toast { transition: opacity 200ms linear, visibility 0s !important; }
  .x-sheet[data-as] { transform: none !important; } .x-sheet[data-as]:not(.is-open) { opacity: 0; }
  .x-typing i { animation: none; opacity: .7; }
}

/* ============================== links ============================== */
.x a:not([class]), .b-foot a, .x-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); transition: text-decoration-color 140ms; }
.x a:not([class]):hover, .b-foot a:hover, .x-link:hover { text-decoration-color: currentColor; }
.x .x-seg a, .x .x-seg button { text-decoration: none; }   /* a switch's options are controls, not links in text (after the link rule, which it overrides) */