/* The full examples: the O2 bar around a fictional business, and the kit every
   such business is built from. Loaded instead of site.css, never with it.

   Three families of class names and nothing else:
     exbar-*   the O2 wrapper (the bar, the notice, its two dialogs). O2's own colours.
     x-*       the kit (src/examples/ex-ui.js, ex-forms.js, ex-map.js). The business's colours.
     xw- xb- xs- xq- xd-   the engines, in their own stylesheets.
   A business's colours arrive as --x-* custom properties on main#main, written into
   the page head by the build (themeCss() in src/lib/example-shell.mjs); nothing here
   sets one. Kit rules are kept to one class of specificity so an engine can restyle
   a piece with one class of its own. */

@font-face { font-family: "Anuphan"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/fonts/anuphan-thai.d1ad2c518e.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
/* Figures in a Thai heading come from a plain sans already on the device, like the Thai letters beside them,
   not from the business's display face (a serif "19:15" between Anuphan words). Nothing is downloaded. */
@font-face { font-family: "x-figures"; font-weight: 100 500; src: local("Helvetica Neue"), local("Arial"), local("Roboto"), local("Noto Sans"); unicode-range: U+0030-003A; }
@font-face { font-family: "x-figures"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("Arial Bold"), local("Roboto Bold"), local("Noto Sans Bold"); unicode-range: U+0030-003A; }

/* ---- tokens --------------------------------------------------------------------
   --o2-* are copies of site.css tokens (the same name without "o2-"); a test in
   tests/examples-core.test.mjs fails if one drifts. */
:root {
  color-scheme: light;
  --o2-canvas: #F6F8FC; --o2-surface: #FFFFFF; --o2-sunken: #EEF1F6;
  --o2-ink: #111722; --o2-ink-2: #4B5668; --o2-ink-3: #5F6A7D;
  --o2-accent: #245BFF; --o2-accent-press: #1B49D6; --o2-accent-soft: #EAF0FF; --o2-on-accent: #FFFFFF;
  --o2-hair: rgba(17, 23, 34, .08); --o2-hair-2: rgba(17, 23, 34, .14);
  --o2-warn: #7E5300; --o2-warn-soft: #FFF4DB;
  --o2-sun: #B26F00; --o2-sun-soft: #FFF1D0;
  --o2-scrim: rgba(16, 21, 34, .3);
  --o2-font: "Anuphan", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Thai", "Leelawadee UI", Thonburi, sans-serif;

  /* The height of whatever sticks to the top. ex-boot.js keeps it true; 0 when the bar does not stick. */
  --ex-top: 48px;
  /* The one z-index scale. Dialogs live in the browser's top layer and need none. */
  --ex-z-stick: 10;      /* an engine's one sticky element (.x-stick) */
  --ex-z-actionbar: 20;  /* the kit's bottom bar */
  --ex-z-bar: 30;        /* the O2 bar and its "More" panel */
  --ex-z-skip: 40;       /* the skip link, when focused */

  /* Body text is the system face. A business picks its display face by name ("--x-display": "serif");
     Thai letters come from Anuphan in every stack, and every stack ends in a generic family. */
  --x-text: var(--o2-font);
  --x-stack-serif: "Anuphan", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  --x-stack-grotesque: "Anuphan", "Helvetica Neue", Helvetica, "Arial Nova", Arial, Roboto, "Noto Sans", sans-serif;
  --x-stack-humanist: "Anuphan", "Gill Sans", "Gill Sans Nova", Optima, Candara, "Segoe UI", "Noto Sans", sans-serif;
  --x-stack-didone: "Anuphan", Didot, "Bodoni 72", "Bodoni MT", "Noto Serif Display", "Playfair Display", Georgia, serif;
  --x-stack-mono: "Anuphan", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --x-lh: 1.55; --x-lh-head: 1.16; --x-lh-label: 1.3;   /* running text, headings, and labels on controls (buttons, pills) */
  --x-caps: uppercase; --x-caps-track: .07em;   /* small labels; both are switched off for Thai below */
  --x-gutter: clamp(16px, 4vw, 40px);
  --x-ease: cubic-bezier(.2, .8, .2, 1);
  --x-fast: 140ms; --x-panel: 240ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --o2-canvas: #0C1019; --o2-surface: #161C2A; --o2-sunken: #1E2536;
  --o2-ink: #F2F4F8; --o2-ink-2: #C4CCDA; --o2-ink-3: #A2ADC1;
  --o2-accent: #8FADFF; --o2-accent-press: #B3C7FF; --o2-accent-soft: #1A2644; --o2-on-accent: #0B1226;
  --o2-hair: rgba(255, 255, 255, .09); --o2-hair-2: rgba(255, 255, 255, .17);
  --o2-warn: #EDBE63; --o2-warn-soft: #2C2410;
  --o2-scrim: rgba(0, 0, 0, .55);
}
/* Thai has tall vowel and tone marks: open the leading, never track or capitalise. */
:root:lang(th) { --x-lh: 1.66; --x-lh-head: 1.34; --x-lh-label: 1.4; --x-caps: none; --x-caps-track: 0em; }
:root:lang(th) :is(body, .exbar-notice, .exbar-fail, .exbar-dialog) { line-height: 1.6; }   /* the bar's own running text */

/* ---- base ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ex-top) + 12px); scrollbar-gutter: stable; }
html:has(.x-actionbar) { scroll-padding-bottom: calc(var(--ex-bottom, 84px) + 12px); }   /* the bottom bar's height, as ex-ui.js measures it */
html:has(dialog[open]) { overflow: hidden; }   /* the page under a dialog does not scroll */
body { margin: 0; background: var(--o2-canvas); color: var(--o2-ink); font: 400 1rem/1.5 var(--o2-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset, legend { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--o2-accent); outline-offset: 2px; border-radius: 6px; }
.exbar-vh, .x-vh, .exbar[data-fit~="biz"] :is(.exbar-switch-biz, .exbar-switch-dot, .exbar-switch-dash) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- the O2 bar ----------------------------------------------------------------- */
/* Out of sight by its own height: a fixed distance is not enough once the reader's text is larger. */
.exbar-skip { position: absolute; left: 8px; top: 0; transform: translateY(-110%); z-index: var(--ex-z-skip); padding: 11px 16px; border-radius: 10px; background: var(--o2-ink); color: var(--o2-canvas); font-weight: 600; text-decoration: none; }
.exbar-skip:focus { top: 8px; transform: none; }
.exbar { position: sticky; top: 0; z-index: var(--ex-z-bar); background: var(--o2-canvas); color: var(--o2-ink); box-shadow: 0 1px 0 var(--o2-hair-2); font: 500 .875rem/1.2 var(--o2-font); }
.exbar-row { position: relative; display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); }
.exbar-i { width: 16px; height: 16px; flex: none; }
.exbar-home { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; }
.exbar-mark { width: 30px; height: auto; }
.exbar-tag { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--o2-accent-soft); color: var(--o2-accent-press); font-size: .75rem; font-weight: 700; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.exbar-switch { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-weight: 600; text-align: start; }
.exbar-switch-who { display: contents; }   /* on one line the business, what is shown and the arrow are the button's own three parts */
.exbar-switch-name, .exbar-switch-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exbar-switch-name { flex: none; max-width: 100%; }
.exbar-switch-what { flex: 0 1 auto; min-width: 0; font-weight: 500; color: var(--o2-ink-2); }
.exbar-switch .exbar-i { order: 1; }
.exbar-switch-pad, .exbar-switch-dot { display: none; }
.exbar-more-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-start: auto; border: 0; border-radius: 10px; background: none; }
/* 44 px to touch, a slimmer pill to look at: the transparent border is part of the target. */
.exbar-discuss { display: inline-block; flex: none; height: 44px; padding: 0 13px; line-height: 34px; border: 5px solid transparent; border-radius: 22px; background: var(--o2-accent) padding-box; color: var(--o2-on-accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.exbar-more { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 2px; padding: 8px 12px 14px; background: var(--o2-surface); box-shadow: 0 1px 0 var(--o2-hair-2), 0 18px 32px -18px rgba(0, 0, 0, .35); }
.exbar-more--open { display: flex; }
.exbar-link { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--o2-ink-2); font-weight: 500; text-decoration: none; text-align: start; }
a.exbar-link { text-decoration: underline; text-decoration-color: var(--o2-hair-2); text-underline-offset: 3px; }
.exbar-to { color: var(--o2-accent-press); font-weight: 600; }   /* this example's link to another one */
.exbar-to-wrap { display: flex; flex-direction: column; align-items: flex-start; }   /* ...with its line of context under it */
.exbar-nb { white-space: nowrap; }   /* a Thai word a browser would cut in the middle */
.exbar-hint, .exbar-to-note { max-width: 34rem; padding: 0 10px 6px; color: var(--o2-ink-2); font-size: .8125rem; font-weight: 400; line-height: 1.45; }
.exbar-roles, .exbar-lang { display: inline-flex; align-self: flex-start; }
/* Guest | Staff: each side is 44 px to touch; the track and the lit side are drawn inside that. */
.exbar-roles { position: relative; isolation: isolate; }
.exbar-roles::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 12px; background: var(--o2-sunken); }
.exbar-roles a { display: grid; place-items: center; min-width: 76px; height: 44px; padding: 0 12px; border: solid transparent; border-width: 7px 3px; border-radius: 16px; background-clip: padding-box; color: var(--o2-ink-2); text-decoration: none; }
.exbar-roles a[aria-current] { background-color: var(--o2-surface); color: var(--o2-ink); font-weight: 700; }
.exbar-lang a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 10px; color: var(--o2-ink-2); text-decoration: none; }
.exbar-lang a[aria-current] { color: var(--o2-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.exbar-theme { position: relative; display: inline-grid; place-items: center; align-self: flex-start; flex: none; width: 44px; height: 44px; border: 4px solid transparent; border-radius: 50%; background: var(--o2-sun-soft) padding-box; color: var(--o2-sun); }
.exbar-theme svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity var(--x-panel) var(--x-ease), transform var(--x-panel) var(--x-ease); }
.exbar-theme .i-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .exbar-theme { background-color: var(--o2-accent-soft); color: var(--o2-accent-press); }
:root[data-theme="dark"] .exbar-theme .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .exbar-theme .i-moon { opacity: 1; transform: none; }
.exbar-notice-what { font-weight: 600; }   /* the O2 product this is an example of */
.exbar-notice { padding: 6px var(--x-gutter); background: var(--o2-sunken); color: var(--o2-ink-2); font-size: .8125rem; line-height: 1.45; text-align: center; text-wrap: balance; }
/* The sentence about storage: shown from the first paint when the head script found storage refused (html.ex-mem). */
.exbar-notice-mem { display: none; }
.ex-mem .exbar-notice-mem { display: inline; }
.exbar-fail { padding: 10px var(--x-gutter); background: var(--o2-warn-soft); color: var(--o2-warn); font-size: .9375rem; font-weight: 500; text-align: center; }
.exbar-done { background: var(--o2-accent-soft); color: var(--o2-ink); }   /* what Reset demo cleared */
.exbar-fail a { font-weight: 700; }
.exbar-fail-btn { min-height: 44px; margin: 4px 0 0 8px; padding: 0 16px; border: 1px solid currentColor; border-radius: 22px; background: none; color: inherit; font-weight: 700; }
/* A row too narrow for everything gives up, in order: the business's name, the product after "About", "this
   setup" after "Discuss"; last, what is shown wraps. The page's script names what went in data-fit; each part
   stays in its control's name and no word is cut. Without scripts there is no attribute and the lines wrap,
   onto a second row where a word needs it. */
.exbar[data-fit~="discuss"] .exbar-wide { display: none; }
.exbar:is(:not([data-fit]), [data-fit~="wrap"]) :is(.exbar-switch-name, .exbar-switch-what) { overflow: visible; white-space: normal; }
@media (min-width: 30em) { .exbar:is(:not([data-fit]), [data-fit~="wrap"]) .exbar-row { flex-wrap: wrap; } .exbar:is(:not([data-fit]), [data-fit~="wrap"]) .exbar-switch { flex: 1 1 0; min-width: min-content; } }
/* The bar's widths are in em, so a reader's larger text gets the narrower layout that has room for it. */
@media (max-width: 29.99em) {
  .exbar-wide { display: none; }
  /* The label is .exbar-tag, laid over an unseen copy of its text (.exbar-switch-pad) that holds its place at the
     start of the button's first line. What follows runs on over the button's two lines, the arrow in the corner. */
  .exbar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: 2px; padding: 2px max(4px, env(safe-area-inset-right)) 2px max(4px, env(safe-area-inset-left)); }
  .exbar-tag, .exbar-switch { grid-area: 1 / 2; }
  .exbar-tag, .exbar-switch-pad { font-size: .75rem; font-weight: 700; letter-spacing: calc(var(--x-caps-track) * .6); text-transform: var(--x-caps); }
  .exbar-tag { z-index: 1; align-self: start; justify-self: start; margin: 6px 0 0 5px; padding: 0; background: none; line-height: 1.3334; pointer-events: none; }   /* where the button's own first line begins */
  .exbar-switch { position: relative; display: block; padding: 6px 20px 4px 5px; font-size: .75rem; line-height: 1.3334; }
  .exbar-switch-who, .exbar-switch-name, .exbar-switch-what { display: inline; overflow: visible; white-space: normal; }
  .exbar-switch-what { font-weight: 600; color: var(--o2-ink); }
  .exbar-switch-pad { display: inline-block; visibility: hidden; margin-inline-end: .4em; }   /* a box: the line can break after it */
  .exbar-switch-dot { display: inline; margin-inline: 2px; }
  .exbar-switch .exbar-i { position: absolute; inset-inline-end: 3px; bottom: 7px; width: 14px; }
  /* Everything fits: "Example · the business" and the arrow above, what is shown below with the line to itself. */
  .exbar[data-fit=""] .exbar-switch { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding-inline-end: 5px; }
  .exbar[data-fit=""] .exbar-switch-who { display: flex; flex-wrap: wrap; column-gap: 3px; height: 1.3334em; overflow: hidden; font-weight: 500; color: var(--o2-ink-2); }
  .exbar[data-fit=""] :is(.exbar-switch-name, .exbar-switch-what) { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
  .exbar[data-fit=""] .exbar-switch-what { line-height: 1.5; }
  .exbar[data-fit=""] .exbar-switch-pad { margin-inline-end: 0; }
  .exbar[data-fit=""] .exbar-i { position: static; height: 1.3334em; }
  .exbar[data-fit=""] .exbar-switch-dash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .exbar-discuss { padding: 0 8px; }
}
@media (min-width: 67.5em) {
  .exbar-row { gap: 6px; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .exbar-more-btn, .exbar-hint { display: none; }
  /* One row: the controls keep their width and only the switcher gives way. */
  .exbar-more { position: static; display: flex; flex: none; flex-direction: row; align-items: center; gap: 4px; margin-inline-start: auto; padding: 0; background: none; box-shadow: none; }
  .exbar-link { flex: none; white-space: nowrap; }
  .exbar-roles, .exbar-lang, .exbar-theme { align-self: center; flex: none; }
  .exbar-roles { margin-inline-end: 6px; }
  .exbar-roles a { min-width: 0; }
  .exbar[data-fit~="about"] .exbar-p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* One row: the link's line shows under it while the link has focus or is pointed at. */
  .exbar-to-wrap { position: relative; flex: none; }
  .exbar-to-note { display: none; position: absolute; top: 100%; right: 0; width: max-content; max-width: 24rem; padding: 8px 12px; border-radius: 10px; background: var(--o2-surface); box-shadow: 0 0 0 1px var(--o2-hair-2); }
  .exbar-to:focus-visible + .exbar-to-note { display: block; }
}

/* The bar's two dialogs (switch example, reset): O2's own surface, a sheet on a phone. */
.exbar-dialog, .x-dialog { width: min(36rem, calc(100vw - 24px)); max-width: none; max-height: 85dvh; padding: 0; border: 0; overflow: hidden; }
.exbar-dialog { border-radius: 20px; background: var(--o2-surface); color: var(--o2-ink); font: 400 .9375rem/1.5 var(--o2-font); box-shadow: 0 0 0 1px var(--o2-hair-2), 0 40px 80px -28px rgba(0, 0, 0, .5); }
.exbar-dialog[open], .x-dialog[open] { display: flex; flex-direction: column; animation: x-rise var(--x-panel) var(--x-ease); }
.exbar-dialog::backdrop { background: var(--o2-scrim); }
.exbar-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 6px 20px; }
.exbar-dialog-head h2 { font-size: 1.125rem; line-height: 1.3; outline: none; }
.exbar-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; }
.exbar-dialog-body { position: relative; display: grid; gap: 14px; padding: 4px 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.exbar-kept { color: var(--o2-ink-2); font-size: .875rem; }
.exbar-list + .exbar-kept, .exbar-none + .exbar-kept { margin-top: 10px; }
.exbar-h3 { margin-bottom: 8px; color: var(--o2-ink-3); font-size: .75rem; font-weight: 700; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.exbar-h4 { margin: 12px 0 6px; font-size: .875rem; }
.exbar-list { display: grid; gap: 6px; }
.exbar-list a, .exbar-here { display: block; min-height: 48px; padding: 12px 14px; border-radius: 12px; background: var(--o2-sunken); font-weight: 600; text-decoration: none; }
.exbar-here { background: none; box-shadow: inset 0 0 0 1px var(--o2-hair-2); }
.exbar-list-biz { display: block; color: var(--o2-ink-2); font-weight: 400; font-size: .875rem; }
.exbar-none, .exbar-why { color: var(--o2-ink-2); font-size: .875rem; }
.exbar-why li + li { margin-top: 6px; }
.exbar-all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--o2-accent-press); font-weight: 600; text-underline-offset: 3px; }
.exbar-counts li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--o2-hair-2); }
.exbar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.exbar-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--o2-hair-2); border-radius: 22px; background: none; font-weight: 600; }
.exbar-btn--go { border-color: transparent; background: var(--o2-ink); color: var(--o2-canvas); }
@keyframes x-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---- the example root ----------------------------------------------------------
   main#main is the fictional business. Before the example mounts it holds the static
   first frame; under html.ex-js (set by the inline head script) that frame is not
   drawn, and the root keeps its height, so the mount moves nothing. */
#main { --x-hair: color-mix(in srgb, var(--x-ink) 14%, transparent); display: block; min-height: 100svh; background: var(--x-bg); color: var(--x-ink); font: 400 1rem/var(--x-lh) var(--x-text); accent-color: var(--x-accent); }
#main:focus { outline: none; }
#main :focus-visible { outline-color: var(--x-focus); }
html.ex-js #ex-first { visibility: hidden; }
:where(#main) :where(h1, h2, h3) { font-family: var(--x-display, var(--x-text)); font-weight: var(--x-display-weight, 600); line-height: var(--x-lh-head); text-wrap: balance; }
:where(#main) h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); }
:where(#main) h2 { font-size: clamp(1.3125rem, 1.1rem + 1vw, 1.75rem); }
:where(#main) h3 { font-size: 1.125rem; }
:where(#main) h1:focus { outline: none; }   /* focus lands here after a navigation; it is a place, not a control */
/* Thai is never tracked, capitalised, slanted or faked into a weight Anuphan does not have.
   A Latin name inside a Thai page keeps its styling when it is marked lang="en". */
#main :lang(th) { letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; font-synthesis: none; }
:where(#main) :where(h1, h2, h3):lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
/* No last line of one short word. The longhand, not text-wrap: that would also switch wrapping back on inside a nowrap box. */
:where(#main) :where(p, li, dd, figcaption) { text-wrap-style: pretty; }
.x-nb { white-space: nowrap; }   /* words that must stay together (a Thai compound the browser would split) */

/* Layout helpers, so a screen is composed the same way in every engine. */
.x-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--x-gutter); }
.x-page { padding-block: clamp(24px, 5vw, 56px); }
.x-stack { display: grid; align-content: start; gap: var(--x-gap, 18px); }
.x-stack > * { min-width: 0; }
.x-grid { display: grid; gap: var(--x-gap, 16px); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--x-min, 240px)), 1fr)); }
.x-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--x-gap, 10px); }
.x-i { display: inline-block; flex: none; width: 1em; height: 1em; min-width: 16px; min-height: 16px; vertical-align: -.14em; }
/* A link standing on its own (in a table cell, a list, a card) is 44 px to touch without taking 44 px of the layout. */
.x-link { display: inline-block; min-width: 44px; padding-block: 12px; margin-block: -12px; color: var(--x-accent-ink); text-underline-offset: 3px; }
/* In a line of text a link stays in the line, and vertical padding on it moves nothing. The only link in its
   paragraph is 44 px tall to touch; beside other links it is as tall as its line, so neither takes the other's taps. */
p .x-link { display: inline; min-width: 0; margin: 0; padding-block: .25em; }
p > .x-link:only-child { padding-block: calc((44px - 1em) / 2); }
p .x-link:focus-visible { padding-block: 0; }   /* the ring is drawn round the words */
.x-hint { color: var(--x-muted); font-size: .875rem; }
.x-stick { position: sticky; top: var(--ex-top); z-index: var(--ex-z-stick); }

/* The static first frame: who this is, what it shows, where to go. */
.x-first { display: grid; gap: 14px; max-width: 46rem; padding: clamp(28px, 7vw, 80px) var(--x-gutter); }
.x-first-kicker { color: var(--x-muted); font-size: .8125rem; font-weight: 600; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.x-first-lead { font-size: 1.125rem; }
.x-first-h2 { margin-top: 10px; font-size: 1.125rem; }
.x-first ul:not(.x-first-pages) { display: grid; gap: 6px; padding-inline-start: 1.2em; list-style: disc; }
.x-first-pages, .x-first-links { display: flex; flex-wrap: wrap; gap: 8px; }
.x-first-pages a, .x-first-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); text-decoration: none; font-weight: 500; }
.x-first-links a:first-child { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }

/* ---- the business's own header and footer: frame() ------------------------------- */
.x-frame { display: flex; flex-direction: column; min-height: 100svh; }
.x-body { flex: 1 0 auto; }
.x-head { background: var(--x-bg); border-bottom: 1px solid var(--x-hair); }
.x-head-in { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.x-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-inline-end: auto; font: var(--x-display-weight, 600) 1.25rem/1.2 var(--x-display, var(--x-text)); text-decoration: none; }
.x-nav { display: none; }
.x-nav ul { display: flex; gap: 2px; }
.x-nav a, .x-menu-list a { display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--x-radius, 8px); text-decoration: none; }
.x-nav a { justify-content: center; }   /* a two-letter page name still makes a 44 px target */
.x-nav a[aria-current], .x-menu-list a[aria-current] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--x-accent); border-end-start-radius: 0; border-end-end-radius: 0; }
.x-head .x-head-cta { display: none; }
.x-menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: none; font-weight: 600; }
.x-menu-list { display: grid; gap: 2px; margin-bottom: 14px; }
.x-menu-list a { min-height: 48px; font-size: 1.0625rem; }
.x-foot { margin-top: clamp(40px, 7vw, 88px); padding: 32px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--x-hair); color: var(--x-muted); font-size: .9375rem; }
.x-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .7em; margin-top: 22px; font-size: .8125rem; }
/* The studio credit: words on the O's baseline, as in the logo. */
.x-o2 { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: .75rem; line-height: 1; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.x-o2-mark { display: inline-block; width: 1.95em; height: 1.6em; margin-right: .5em; vertical-align: -.366em; }
@media (min-width: 30em) { .x-head .x-head-cta { display: inline-flex; } }
@media (min-width: 53.75em) { .x-nav { display: block; } .x-menu-btn { display: none; } }

/* ---- buttons and links ----------------------------------------------------------- */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); color: var(--x-ink); font-weight: 600; line-height: var(--x-lh-label); text-align: center; text-decoration: none; transition: background-color var(--x-fast) ease, border-color var(--x-fast) ease, transform 100ms ease-out; }
.x-btn:active { transform: scale(.98); }
.x-btn--primary { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }
.x-btn--quiet { border-color: transparent; background: none; color: var(--x-accent-ink); }
.x-btn--danger { border-color: currentColor; color: var(--x-danger); }
.x-btn--s { padding: 6px 12px; font-size: .9375rem; }
.x-btn--block { display: flex; width: 100%; }
.x-btn:disabled, .x-btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }
.x-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: x-spin .8s linear infinite; }
.x-back { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; color: var(--x-accent-ink); font-weight: 600; text-decoration: none; }

/* ---- status, notes, facts -------------------------------------------------------- */
.x-pill { display: inline-flex; align-items: center; justify-self: start; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--x-surface-2); color: var(--x-ink); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); white-space: nowrap; }
.x-pill--ok { background: var(--x-ok-soft); color: var(--x-ok); }
.x-pill--warn { background: var(--x-warn-soft); color: var(--x-warn); }
.x-pill--danger { background: var(--x-danger-soft); color: var(--x-danger); }
.x-pill--info { background: var(--x-info-soft); color: var(--x-info); }
.x-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--x-radius, 8px); background: var(--x-info-soft); }
.x-note > .x-i { margin-top: .28em; color: var(--x-info); }
.x-note--ok { background: var(--x-ok-soft); } .x-note--ok > .x-i { color: var(--x-ok); }
.x-note--warn { background: var(--x-warn-soft); } .x-note--warn > .x-i { color: var(--x-warn); }
.x-note--danger { background: var(--x-danger-soft); } .x-note--danger > .x-i { color: var(--x-danger); }
.x-note--neutral { background: var(--x-surface-2); } .x-note--neutral > .x-i { color: var(--x-muted); }
.x-note-body { display: grid; gap: 4px; min-width: 0; }
.x-note-title { font-weight: 700; }
.x-sample { display: flex; gap: 8px; color: var(--x-muted); font-size: .875rem; }
.x-sample > .x-i { margin-top: .3em; }
/* A label beside its value: 34% of the row, 7rem at least. In a row too narrow for both (under 17rem: a slim
   card, large text) the label takes the whole row and the value goes under it. --x-fact-label sets the width. */
.x-fact { display: flex; flex-wrap: wrap; row-gap: 4px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.x-fact dt { flex: none; width: clamp(var(--x-fact-label, max(7rem, 34%)), (17rem - 100%) * 999, 100%); padding-inline-end: 16px; color: var(--x-muted); }
.x-fact dd { flex: 1 1 0; min-width: min(8rem, 100%); }

/* ---- photographs, and the plate that stands in for one --------------------------- */
.x-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--x-surface-2); border-radius: inherit; }
.x-img--thumb { width: 96px; flex: none; }
.x-img--hero { max-height: min(72svh, 640px); }   /* a wide screen does not turn the opening photograph into the whole page */
/* No file yet: a tonal panel of the same shape with a small photograph mark. Deliberate, not broken. */
.x-img--plate { position: relative; background: linear-gradient(140deg, var(--x-surface-2), color-mix(in srgb, var(--x-accent) 16%, var(--x-surface-2))); box-shadow: inset 0 0 0 1px var(--x-hair); }
.x-img--plate::after { content: ""; position: absolute; inset: 0; margin: auto; width: clamp(20px, 16%, 34px); aspect-ratio: 1; background: var(--x-muted); opacity: .7; -webkit-mask: var(--x-photo-mark) center / contain no-repeat; mask: var(--x-photo-mark) center / contain no-repeat; }
#main { --x-photo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 16 5-5 4 4 2.5-2.5 5.5 5.5'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.4'/%3E%3C/svg%3E"); }

/* ---- forms ----------------------------------------------------------------------- */
.x-form { display: grid; gap: 18px; max-width: 40rem; }
.x-field { display: grid; gap: 6px; min-width: 0; }
.x-label, .x-filter-label { font-size: .9375rem; font-weight: 600; }
.x-opt { color: var(--x-muted); font-weight: 400; }
.x-input { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); color: var(--x-ink); font-size: 1rem; line-height: 1.4; }   /* 16 px: iOS does not zoom the page on focus */
.x-input::placeholder { color: var(--x-muted); opacity: 1; }
.x-textarea { min-height: 7.5rem; resize: vertical; }
#main .x-input:focus-visible { outline-offset: 0; border-color: var(--x-focus); }
.x-input[aria-invalid="true"] { border-color: var(--x-danger); box-shadow: inset 0 0 0 1px var(--x-danger); }
.x-err { display: flex; gap: 6px; color: var(--x-danger); font-size: .9375rem; font-weight: 600; }
.x-err > .x-i { margin-top: .22em; }
.x-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.x-check input { flex: none; width: 22px; height: 22px; }
.x-radios { display: grid; }
.x-errsum { padding: 14px 16px; border: 2px solid var(--x-danger); border-radius: var(--x-radius, 8px); background: var(--x-danger-soft); }
.x-errsum-h { margin-bottom: 6px; font: 700 1.0625rem/1.3 var(--x-text); }
.x-errsum a { display: inline-flex; align-items: center; min-height: 44px; color: var(--x-danger); font-weight: 600; text-underline-offset: 3px; }

/* ---- choosing and finding -------------------------------------------------------- */
.x-filter { display: grid; gap: 6px; }
.x-chips { display: flex; flex-wrap: wrap; gap: 0 8px; }
.x-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.x-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.x-chip-face { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--x-line); border-radius: 999px; background: var(--x-surface); font-size: .9375rem; font-weight: 500; transition: background-color var(--x-fast) ease, color var(--x-fast) ease; }
.x-chip-n { color: var(--x-muted); font-weight: 400; }
/* Selected is a tick as well as a fill: never colour alone. */
.x-chip input:checked + .x-chip-face { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }
.x-chip input:checked + .x-chip-face::before { content: ""; width: 5px; height: 10px; margin: -3px 3px 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.x-chip input:checked + .x-chip-face .x-chip-n { color: inherit; }
.x-chip input:focus-visible + .x-chip-face { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.x-chip input:disabled + .x-chip-face { opacity: .5; }
.x-search { display: grid; gap: 6px; max-width: 32rem; }
.x-search-box { position: relative; }
.x-search-box > .x-i { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--x-muted); pointer-events: none; }
.x-search-box .x-input { padding-inline: 40px 48px; }
.x-search-box input::-webkit-search-cancel-button { display: none; }
.x-search-clear { position: absolute; inset-inline-end: 2px; top: 2px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--x-muted); }
.x-count { color: var(--x-muted); font-size: .9375rem; }
/* A row that may scroll sideways shows a soft edge where there is more. --x-under is the colour beneath it. */
/* position: relative keeps visually hidden text (.x-vh) inside the scroller, where it cannot widen the page. */
.x-tablist, .x-table-wrap { --x-under: var(--x-bg); position: relative; overflow-x: auto; background: linear-gradient(90deg, var(--x-under) 40%, transparent) 0 0 / 32px 100% no-repeat local, linear-gradient(270deg, var(--x-under) 40%, transparent) 100% 0 / 32px 100% no-repeat local, linear-gradient(90deg, var(--x-hair), transparent) 0 0 / 14px 100% no-repeat scroll, linear-gradient(270deg, var(--x-hair), transparent) 100% 0 / 14px 100% no-repeat scroll; }
.x-tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--x-hair); }
.x-tab { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--x-muted); font-weight: 600; white-space: nowrap; }
.x-tab[aria-selected="true"] { border-bottom-color: var(--x-accent); color: var(--x-ink); }
#main .x-tab:focus-visible { outline-offset: -2px; }
.x-tabpanel { padding-top: 18px; }

/* ---- cards ----------------------------------------------------------------------- */
.x-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); transition: border-color var(--x-fast) ease, transform var(--x-fast) ease; }
.x-card-media { position: relative; overflow: hidden; border-radius: calc(var(--x-radius, 8px) - 1px) calc(var(--x-radius, 8px) - 1px) 0 0; }
.x-card-badge { position: absolute; inset-inline-start: 10px; top: 10px; }
.x-card-badge--flow { position: static; }
.x-card-body { display: grid; align-content: start; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.x-card-title { font: 600 1.0625rem/1.3 var(--x-text); }
.x-card-title a { text-decoration: none; }
.x-card--link .x-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link's target */
#main .x-card--link .x-card-title a:focus-visible { outline: none; }
#main .x-card--link:has(.x-card-title a:focus-visible) { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.x-card-meta { color: var(--x-muted); font-size: .9375rem; }
.x-card-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---- quantity, steps, hours ------------------------------------------------------ */
.x-qty { display: inline-flex; align-items: center; border: 1px solid var(--x-line); border-radius: 999px; background: var(--x-surface); }
.x-qty-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; }
.x-qty-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.x-qty-n { min-width: 2ch; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.x-steps-now { color: var(--x-muted); font-size: .9375rem; }
.x-steps-now strong { color: var(--x-ink); }
.x-steps-list { display: none; flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
.x-step { display: flex; align-items: center; gap: 8px; color: var(--x-muted); font-size: .9375rem; font-weight: 600; }
.x-step + .x-step::before { content: ""; width: clamp(12px, 3vw, 36px); height: 1px; margin-inline-end: 4px; background: var(--x-line); }
.x-step-n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--x-line); border-radius: 50%; font-size: .8125rem; }
.x-step--now { color: var(--x-ink); }
.x-step--now .x-step-n { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }
.x-step--done .x-step-n { border-color: var(--x-ink); color: var(--x-ink); }
/* Wide enough to try the list: it shows while all of it fits on one line (steps() measures it); otherwise the short form stays. */
@media (min-width: 45em) {
  .x-steps-now { display: none; } .x-steps-list { display: flex; }
  .x-steps[data-compact] .x-steps-now { display: block; }
  .x-steps[data-compact] .x-steps-list { height: 0; overflow: hidden; visibility: hidden; }
}
/* A day and its hours share a line where both fit, and the hours go under the day where they do not. */
.x-hours table, .x-hours tbody, .x-hours-cap { display: block; }
.x-hours-cap { padding-bottom: 8px; font-weight: 700; text-align: start; }
.x-hours tr { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 16px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
.x-hours th, .x-hours td { padding: 0; font-weight: 400; text-align: start; }
.x-hours td { font-variant-numeric: tabular-nums; }
.x-hours[data-stack] th { flex-basis: 100%; }   /* set by hours() when any day's hours would not fit beside it: then all stack */
.x-hours-day, .x-hours-tag, .x-hours-period { white-space: nowrap; }
.x-hours-period { display: inline-block; }
.x-hours-period:not(:last-child) { margin-inline-end: .3em; }
.x-hours-today th, .x-hours-today td { font-weight: 700; }
.x-hours .x-hint { margin-top: 8px; }

/* ---- tables that become cards ---------------------------------------------------- */
.x-table th, .x-table td { padding: 12px 14px; border-bottom: 1px solid var(--x-hair); text-align: start; vertical-align: top; }
.x-table thead th { color: var(--x-muted); font-size: .8125rem; font-weight: 600; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); white-space: nowrap; }
.x-table tbody th { font-weight: 600; }
.x-table .x-td--end { text-align: end; }
/* As cards: each row a card, each value beside its column's label, or under it where the card is too narrow
   for both (under 15rem inside, or large text). Under 600 px; a table of many columns (cards: "wide") under 900 px. */
@media (max-width: 37.49em) {
  .x-table-wrap { overflow: visible; background: none; }
  .x-table-wrap .x-table, .x-table-wrap tbody { display: block; }
  .x-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .x-table-wrap tr { display: block; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
  .x-table-wrap tbody th { display: block; padding: 5px 0 8px; border: 0; font-size: 1.0625rem; }
  .x-table-wrap td { display: flex; flex-wrap: wrap; row-gap: 2px; padding: 5px 0; border: 0; }
  .x-table-wrap .x-td--end { text-align: start; }
  .x-table-wrap td::before { content: attr(data-label); flex: none; width: clamp(var(--x-td-label, max(6.5rem, 38%)), (15rem - 100%) * 999, 100%); padding-inline-end: 12px; color: var(--x-muted); font-size: .875rem; }
  .x-table-wrap .x-td-v { flex: 1 1 0; min-width: min(7rem, 100%); }
}
@media (max-width: 56.24em) {
  .x-table-wrap--wide { overflow: visible; background: none; }
  .x-table-wrap--wide .x-table, .x-table-wrap--wide tbody { display: block; }
  .x-table-wrap--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .x-table-wrap--wide tr { display: block; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
  .x-table-wrap--wide tbody th { display: block; padding: 5px 0 8px; border: 0; font-size: 1.0625rem; }
  .x-table-wrap--wide td { display: flex; flex-wrap: wrap; row-gap: 2px; padding: 5px 0; border: 0; }
  .x-table-wrap--wide .x-td--end { text-align: start; }
  .x-table-wrap--wide td::before { content: attr(data-label); flex: none; width: clamp(var(--x-td-label, max(6.5rem, 38%)), (15rem - 100%) * 999, 100%); padding-inline-end: 12px; color: var(--x-muted); font-size: .875rem; }
  .x-table-wrap--wide .x-td-v { flex: 1 1 0; min-width: min(7rem, 100%); }
}

/* ---- dialogs and sheets ---------------------------------------------------------- */
.x-dialog { border-radius: calc(var(--x-radius, 8px) + 6px); background: var(--x-surface); color: var(--x-ink); font: 400 1rem/var(--x-lh) var(--x-text); box-shadow: 0 0 0 1px var(--x-hair), 0 40px 80px -28px rgba(0, 0, 0, .55); }
.x-dialog::backdrop { background: rgba(8, 10, 14, .5); }
.x-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 6px 20px; }
.x-dialog-h { font-size: 1.1875rem; outline: none; }
.x-dialog-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; }
.x-dialog-body { position: relative; display: grid; gap: 14px; padding: 6px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.x-dialog-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--x-hair); }
.x-lightbox { width: min(64rem, calc(100vw - 24px)); }
.x-lightbox-in, .x-lightbox-fig { display: grid; gap: 12px; }
.x-lightbox-fig .x-img { max-height: 62dvh; }
.x-lightbox-fig figcaption { color: var(--x-muted); font-size: .9375rem; }
.x-lightbox-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.x-lightbox-n { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 37.49em) {
  .exbar-dialog, .x-sheet, .x-lightbox { width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}

/* ---- the one bottom bar ---------------------------------------------------------- */
.x-actionbar { position: sticky; bottom: 0; z-index: var(--ex-z-actionbar); background: var(--x-surface); border-top: 1px solid var(--x-hair); box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, .4); }
.x-actionbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1200px; margin-inline: auto; padding: 10px max(var(--x-gutter), env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(var(--x-gutter), env(safe-area-inset-left)); }
/* While someone types, the bar joins the page, so the keyboard cannot push it over the field. */
#main[data-typing] .x-actionbar { position: static; }

/* ---- nothing here, working, did not work ----------------------------------------- */
.x-state { display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 6vw, 56px) 20px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); text-align: center; }
.x-state-title { font-weight: 700; font-size: 1.0625rem; }
.x-state > .x-i { width: 22px; height: 22px; color: var(--x-danger); }
.x-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.x-state--bad { border-style: solid; border-color: var(--x-danger); background: var(--x-danger-soft); }
.x-spinner { width: 22px; height: 22px; border: 2px solid var(--x-line); border-top-color: var(--x-accent); border-radius: 50%; animation: x-spin .8s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }
.x-lost { display: grid; gap: 14px; padding-block: clamp(32px, 7vw, 72px); max-width: 44rem; }
.x-lost-pages { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.x-lost-pages a { display: inline-flex; align-items: center; min-height: 44px; color: var(--x-accent-ink); text-underline-offset: 3px; }

/* ---- copy, map ------------------------------------------------------------------- */
.x-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.x-copy-msg { color: var(--x-muted); font-size: .875rem; }
.x-copy-msg[data-ok="false"] { color: var(--x-danger); }
.x-map { display: grid; gap: 16px; }
.x-map-info { display: grid; align-content: start; gap: 10px; min-width: 0; }
.x-map-title { font-size: 1.25rem; }
.x-map-label { display: flex; gap: 8px; font-weight: 600; }
.x-map-label > .x-i { margin-top: .28em; color: var(--x-accent-ink); }
.x-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.x-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.x-skip:focus { position: static; width: auto; height: auto; clip-path: none; justify-self: start; padding: 10px 0; color: var(--x-accent-ink); font-weight: 600; }
/* The reserved area: the same shape whatever state the map is in, so nothing below it moves. The shape is
   made by a spacer in the frame's one cell, not by aspect-ratio: with a minimum height, aspect-ratio would
   also force a minimum width (200 px high at 16:10 is 320 px wide) and push the frame out of a narrow column. */
.x-map-frame { position: relative; display: grid; place-items: center; min-height: 200px; overflow: hidden; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface-2); }
.x-map-frame::before { content: ""; grid-area: 1 / 1; width: 100%; padding-top: 62.5%; pointer-events: none; }
.x-map-frame > * { grid-area: 1 / 1; }
.x-map-msg { display: grid; justify-items: center; gap: 12px; max-width: 34ch; padding: 16px; color: var(--x-muted); text-align: center; }
.x-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.x-map-wait { position: relative; padding: 6px 12px; border-radius: 999px; background: var(--x-surface); font-size: .875rem; }
/* No map key in this build: no map will come, so the notice keeps the 200 px minimum and not a map's whole shape. */
.x-map[data-state="not-configured"] .x-map-frame { align-self: start; }
.x-map[data-state="not-configured"] .x-map-frame::before { content: none; }
@media (min-width: 53.75em) { .x-map { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 32px; } .x-map-frame { grid-column: 2; grid-row: 1 / span 3; } .x-map-frame::before { padding-top: 75%; } .x-map-blank { grid-column: 2; } }

/* ---- preferences ----------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .x-o2:hover { opacity: .8; }
  .exbar-home:hover, .exbar-switch:hover, .exbar-more-btn:hover, .exbar-link:hover, .exbar-lang a:hover, .exbar-x:hover { background: var(--o2-sunken); }
  .exbar-discuss:hover { background-color: var(--o2-accent-press); }
  .exbar-list a:hover { box-shadow: inset 0 0 0 1px var(--o2-hair-2); }
  .exbar-btn:hover { background: var(--o2-sunken); } .exbar-btn--go:hover { background: var(--o2-ink-2); }
  .x-btn:hover:not(:disabled, [aria-disabled="true"]), .x-menu-btn:hover, .x-first-pages a:hover { border-color: var(--x-ink); }
  .x-btn--primary:hover:not(:disabled, [aria-disabled="true"]), .x-btn--quiet:hover:not(:disabled, [aria-disabled="true"]) { border-color: transparent; filter: brightness(1.08); }
  .x-btn--quiet:hover:not(:disabled, [aria-disabled="true"]), .x-nav a:hover, .x-menu-list a:hover, .x-dialog-x:hover, .x-qty-btn:hover:not([aria-disabled="true"]), .x-search-clear:hover { background: var(--x-surface-2); }
  .x-chip:hover input:not(:checked):not(:disabled) + .x-chip-face { border-color: var(--x-ink); }
  .x-tab:hover { color: var(--x-ink); }
  .x-card--link:hover { border-color: var(--x-line); transform: translateY(-2px); }
  .exbar-to:hover + .exbar-to-note { display: block; }
}
/* Too short to give any of it away: nothing sticks. */
@media (max-height: 479px) { .exbar, .x-stick, .x-actionbar { position: static; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .x-card--link, .x-btn { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .x-chip input:checked + .x-chip-face, .x-btn--primary, .x-step--now .x-step-n { border-color: Highlight; }
  .x-img--plate::after { background: CanvasText; }
}