/* rw-components.css: the RoachWares primitives.
   The page ground, focus and selection; the field's canvas; surfaces at four elevations with real
   lighting; buttons, links, chips and inputs; the theme selector; reveals and theme transitions.
   Primitives, not templates: each site composes its own layouts from them.

   Everything sits in cascade layers (rw-base, rw-components), so a site's own CSS always wins
   without fighting specificity. Colours, radii and durations come from the theme tokens
   (rw-themes.css) and the foundation (tokens/foundation.css). No inline styles anywhere: the
   scripts change custom properties through CSSOM only. */

@layer rw-base, rw-components;

/* ------------------------------------------------------------------ base */
@layer rw-base {
  :root {
    background-color: var(--rw-ground);
    color: var(--rw-text);
    font-family: var(--rw-font-text);
    font-size: 100%;
    line-height: var(--rw-leading-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--rw-action);
    transition: background-color var(--rw-dur-3) var(--rw-ease-gentle), color var(--rw-dur-3) var(--rw-ease-gentle);
  }
  /* the ground belongs to the root alone: a body background would cover the field's canvas */
  body { background: transparent; }
  ::selection { background: var(--rw-selection); color: var(--rw-selection-ink); }
  :focus-visible {
    outline: var(--rw-focus-width, 3px) solid var(--rw-focus);
    outline-offset: var(--rw-focus-offset);
    border-radius: var(--rw-r-xs);
  }
  .rw-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ------------------------------------------------------------------ the field */
@layer rw-components {
  .rw-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--rw-z-field);
    display: block;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    opacity: 0;
    transition: opacity var(--rw-dur-scene) var(--rw-ease-assemble);
  }
  .rw-field[data-field] { opacity: 1; }
  /* a field inside a box (a card, a sample) instead of behind the whole page */
  .rw-field--contained { position: absolute; width: 100%; height: 100%; }
  .rw-field-host { position: relative; overflow: hidden; isolation: isolate; }
  @media print { .rw-field { display: none !important; } }

  /* ---------------------------------------------------------------- the veil
     A soft pool of the theme's own ground behind a block of text, so the text keeps its contrast over
     the busiest patch of any theme's field at every frame, with WebGL or without. Opt in per block:
       data-veil           the theme's strength (--rw-veil-strength)
       data-veil="soft"    lighter, for display type that holds up on its own
       data-veil="strong"  heavier, for small, muted or dense text
       data-veil="still"   only while the field is a still (no WebGL), where it cannot go quiet itself
       data-veil="off"     none (cancels an opt-in, say on a card that carries its own surface)
     The pool is a rounded core inset inside the block, wrapped in a box-shadow of the same colour.
     The shadow's spread is three times its blur's sigma (blur / 2), so it is already at full strength
     where the core stops: no seam, no edge, and every corner rounds off by the spread. Over the text
     the pool holds 98% of its strength or more; it fades to nothing about 84 px past the block (68 px
     on a phone). A blurred rounded rectangle is one of the browser's fast paths and the pool never
     moves, so it is painted once. It sits under the block's own content in the block's own stacking
     context: it takes no pointer events, it cannot be selected and it never covers the text. A veiled
     block becomes positioned (position: relative), so its absolutely placed children measure from it.
     The colour is the ground mixed toward transparent, so it follows every theme and brand. */
  :where([data-veil]) {
    --rw-veil-inset: 16px;
    --rw-veil-blur: 40px;
    --rw-veil-spread: 60px;
    --rw-veil-radius: 24px;
  }
  :where([data-veil="soft"]) { --rw-veil-k: 0.76; }
  :where([data-veil="strong"]) { --rw-veil-k: 1.24; }
  @media (max-width: 759px) {
    :where([data-veil]) { --rw-veil-inset: 12px; --rw-veil-blur: 32px; --rw-veil-spread: 48px; --rw-veil-radius: 20px; }
  }
  @media (prefers-contrast: more) {
    :where([data-veil]) { --rw-veil-k: 1.6; }
  }
  /* The live field goes quiet behind text (quiet regions); a still cannot, so its veils are a little stronger */
  :root:has(.rw-field.is-still) { --rw-veil-still: 1.18; }
  :where([data-veil]:not([data-veil="off"], [data-veil="still"])),
  :where(:root:has(.rw-field.is-still) [data-veil="still"]) { position: relative; isolation: isolate; }
  :where([data-veil]:not([data-veil="off"], [data-veil="still"]))::before,
  :where(:root:has(.rw-field.is-still) [data-veil="still"])::before {
    --_veil: color-mix(in srgb, var(--rw-ground) calc(min(1, var(--rw-veil-strength, 0.72) * var(--rw-veil-k, 1) * var(--rw-veil-still, 1)) * 100%), transparent);
    content: "";
    position: absolute;
    inset: var(--rw-veil-inset);
    z-index: -1;
    pointer-events: none;
    border-radius: var(--rw-veil-radius);
    background-color: var(--_veil);
    box-shadow: 0 0 var(--rw-veil-blur) var(--rw-veil-spread) var(--_veil);
  }
  @supports not (color: color-mix(in srgb, #000 50%, transparent)) {
    :where([data-veil]:not([data-veil="off"]))::before { background-color: var(--rw-scrim); box-shadow: 0 0 var(--rw-veil-blur) var(--rw-veil-spread) var(--rw-scrim); }
  }
  /* Forced colours paint the page in system colours but leave the field's canvas alone, so every
     veiled block, the still-only ones included, gets a solid plate of Canvas with the same soft edge */
  @media (forced-colors: active) {
    :where([data-veil]:not([data-veil="off"])) { position: relative; isolation: isolate; }
    :where([data-veil]:not([data-veil="off"]))::before {
      content: "";
      position: absolute;
      inset: var(--rw-veil-inset);
      z-index: -1;
      pointer-events: none;
      border-radius: var(--rw-veil-radius);
      forced-color-adjust: none;
      background-color: Canvas;
      box-shadow: 0 0 var(--rw-veil-blur) var(--rw-veil-spread) Canvas;
    }
  }
  @media print { :where([data-veil])::before { content: none; } }

  /* ---------------------------------------------------------------- surfaces
     Four elevations. Each has a lit top edge (inset highlight), layered shadows tinted by the
     theme, and a faint sheen. .rw-glass lets the field show through, blurred and capped; it turns
     solid when the visitor asks for less transparency or the field's governor drops to low power. */
  .rw-surface {
    --_bg: var(--rw-surface-1);
    position: relative;
    background-color: var(--_bg);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--rw-highlight) 55%, transparent), transparent 42%);
    border: var(--rw-border-width) solid var(--rw-line);
    border-radius: var(--rw-r-lg);
    box-shadow: var(--rw-elev-1);
    color: var(--rw-text);
  }
  .rw-surface--sunken { --_bg: var(--rw-surface-0); background-image: none; box-shadow: inset 0 1px 2px var(--rw-shadow), var(--rw-elev-0); }
  .rw-surface--raised { --_bg: var(--rw-surface-2); box-shadow: var(--rw-elev-2); border-color: var(--rw-line-strong); }
  .rw-surface--overlay { --_bg: var(--rw-surface-3); box-shadow: var(--rw-elev-3); border-color: var(--rw-line-strong); }
  .rw-glass {
    background-color: var(--rw-glass);
    -webkit-backdrop-filter: blur(min(var(--rw-glass-blur), 20px)) saturate(1.25);
    backdrop-filter: blur(min(var(--rw-glass-blur), 20px)) saturate(1.25);
  }
  @media (prefers-reduced-transparency: reduce) {
    .rw-glass { background-color: var(--_bg, var(--rw-surface-1)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .rw-low-power .rw-glass { background-color: var(--_bg, var(--rw-surface-1)); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* a light that follows the pointer across a surface (rw-motion.js lights() sets --rw-lx/--rw-ly) */
  .rw-lit { isolation: isolate; }
  .rw-lit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--rw-lx, 50%) var(--rw-ly, -20%), color-mix(in srgb, var(--rw-glow) 70%, transparent), transparent 60%);
    opacity: var(--rw-lit, 0);
    transition: opacity var(--rw-dur-3) var(--rw-ease-gentle);
  }

  /* ---------------------------------------------------------------- buttons
     Primary: the action fill (Kernel 600) with pale ink. Hover adds a 500 inner light and halo
     without lightening the fill below 4.5:1; press drops to 700; focus is the signal ring. */
  .rw-btn {
    --_fill: var(--rw-surface-2);
    --_ink: var(--rw-text);
    --_edge: var(--rw-line-strong);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rw-sp-2);
    min-height: var(--rw-tap);
    padding: 0 calc(var(--rw-sp-4) + 2px);
    border: var(--rw-border-width) solid var(--_edge);
    border-radius: var(--rw-r-pill);
    background: var(--_fill);
    color: var(--_ink);
    font: 650 0.95rem/1.1 var(--rw-font-text);
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-shadow: inset 0 1px 0 var(--rw-highlight);
    transition:
      transform var(--rw-dur-2) var(--rw-ease-snap),
      background-color var(--rw-dur-1) var(--rw-ease-gentle),
      border-color var(--rw-dur-1) var(--rw-ease-gentle),
      box-shadow var(--rw-dur-2) var(--rw-ease-assemble),
      color var(--rw-dur-1) var(--rw-ease-gentle);
  }
  .rw-btn:hover { border-color: var(--rw-text-soft); }
  .rw-btn:active { transform: translateY(1px) scale(0.985); transition-duration: var(--rw-dur-1); }
  .rw-btn:focus-visible { outline-offset: 3px; }
  .rw-btn[disabled], .rw-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
  .rw-btn--primary {
    --_fill: var(--rw-action);
    --_ink: var(--rw-action-ink);
    --_edge: transparent;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rw-action-light) 70%, transparent), 0 10px 26px -12px var(--rw-glow);
  }
  .rw-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rw-action-light) 32%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--rw-dur-2) var(--rw-ease-gentle);
    pointer-events: none;
  }
  .rw-btn--primary:hover {
    border-color: transparent;
    box-shadow: inset 0 1px 0 var(--rw-action-light), 0 0 0 4px color-mix(in srgb, var(--rw-action-light) 26%, transparent), 0 14px 34px -12px var(--rw-glow);
  }
  .rw-btn--primary:hover::before { opacity: 1; }
  .rw-btn--primary:active { --_fill: var(--rw-action-press); box-shadow: inset 0 1px 2px color-mix(in srgb, black 30%, transparent); }
  .rw-btn--primary:active::before { opacity: 0; }
  .rw-btn--secondary { --_fill: var(--rw-surface-2); --_edge: var(--rw-line-strong); }
  .rw-btn--secondary:hover { --_fill: var(--rw-surface-3); }
  .rw-btn--ghost { --_fill: transparent; --_edge: transparent; box-shadow: none; }
  .rw-btn--ghost:hover { --_fill: color-mix(in srgb, var(--rw-text) 7%, transparent); border-color: transparent; }
  .rw-btn--icon { width: var(--rw-tap); padding: 0; }
  .rw-btn--icon svg { width: 20px; height: 20px; }
  .rw-btn--sm { min-height: 36px; padding: 0 var(--rw-sp-3); font-size: 0.86rem; }
  .rw-btn--sm.rw-btn--icon { width: 36px; }
  .rw-btn--lg { min-height: 52px; padding: 0 var(--rw-sp-5); font-size: 1.04rem; }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rw-btn:hover { transform: translateY(-1px); }
  }

  /* ---------------------------------------------------------------- links */
  .rw-link {
    color: var(--rw-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    transition: text-decoration-color var(--rw-dur-2) var(--rw-ease-gentle), text-decoration-thickness var(--rw-dur-2) var(--rw-ease-gentle);
  }
  .rw-link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

  /* ---------------------------------------------------------------- chips */
  .rw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 11px;
    border-radius: var(--rw-r-pill);
    border: var(--rw-border-width) solid var(--rw-line-strong);
    background: color-mix(in srgb, var(--rw-surface-2) 70%, transparent);
    color: var(--rw-text-muted);
    font: 600 0.8rem/1.2 var(--rw-font-text);
  }
  .rw-chip--mono { font-family: var(--rw-font-mono); font-weight: 500; letter-spacing: 0.02em; }
  .rw-chip--signal { color: var(--rw-signal-text); border-color: color-mix(in srgb, var(--rw-signal) 40%, transparent); }
  .rw-chip--accent { color: var(--rw-accent); border-color: color-mix(in srgb, var(--rw-accent) 40%, transparent); }
  .rw-chip--live { color: var(--rw-text); }
  .rw-chip--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rw-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-live) 28%, transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .rw-chip--live::before { animation: rw-live 1.6s var(--rw-ease-gentle) infinite; }
  }
  @keyframes rw-live { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rw-live) 0%, transparent); } }
  .rw-led {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: var(--rw-signal);
    box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--rw-signal) 22%, transparent), 0 0 1em color-mix(in srgb, var(--rw-signal) 60%, transparent);
  }

  /* ---------------------------------------------------------------- inputs
     Borders use --rw-line-input, which every theme keeps at 3:1 or more against its surfaces. */
  .rw-label { display: block; margin-bottom: 6px; font: 650 0.88rem/1.3 var(--rw-font-text); color: var(--rw-text); }
  .rw-help { margin-top: 6px; font-size: 0.84rem; color: var(--rw-text-soft); }
  .rw-error { margin-top: 6px; font-size: 0.84rem; font-weight: 600; color: var(--rw-danger); }
  .rw-input, .rw-select, .rw-textarea {
    display: block;
    width: 100%;
    min-height: var(--rw-tap);
    padding: 10px 14px;
    border: var(--rw-border-width) solid var(--rw-line-input);
    border-radius: var(--rw-r-md);
    background: var(--rw-surface-0);
    color: var(--rw-text);
    font: 400 1rem/1.4 var(--rw-font-text);
    box-shadow: inset 0 1px 2px var(--rw-shadow);
    transition: border-color var(--rw-dur-1) var(--rw-ease-gentle), box-shadow var(--rw-dur-2) var(--rw-ease-assemble);
  }
  .rw-input::placeholder, .rw-textarea::placeholder { color: var(--rw-text-soft); opacity: 1; }
  .rw-input:hover, .rw-select:hover, .rw-textarea:hover { border-color: var(--rw-text-soft); }
  .rw-input:focus-visible, .rw-select:focus-visible, .rw-textarea:focus-visible {
    outline: none;
    border-color: var(--rw-focus);
    box-shadow: 0 0 0 var(--rw-focus-width, 3px) color-mix(in srgb, var(--rw-focus) 40%, transparent), inset 0 1px 2px var(--rw-shadow);
  }
  .rw-input[aria-invalid="true"], .rw-textarea[aria-invalid="true"] { border-color: var(--rw-danger); }
  .rw-textarea { min-height: 120px; resize: vertical; }
  .rw-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--rw-text-muted) 50%), linear-gradient(135deg, var(--rw-text-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
  .rw-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--rw-tap); cursor: pointer; }
  .rw-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--rw-action); }

  /* ---------------------------------------------------------------- the theme selector */
  rw-theme-select { position: relative; display: inline-block; vertical-align: middle; font-family: var(--rw-font-text); }
  .rw-ts__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--rw-tap);
    padding: 0 12px 0 6px;
    border: var(--rw-border-width) solid var(--rw-line-strong);
    border-radius: var(--rw-r-pill);
    background: color-mix(in srgb, var(--rw-surface-2) 82%, transparent);
    color: var(--rw-text);
    font: 600 0.88rem/1 var(--rw-font-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--rw-highlight);
    transition: border-color var(--rw-dur-1) var(--rw-ease-gentle), background-color var(--rw-dur-2) var(--rw-ease-gentle);
  }
  .rw-ts__button:hover { border-color: var(--rw-text-soft); }
  .rw-ts__label { color: var(--rw-text-soft); font-weight: 600; }
  .rw-ts__label, .rw-ts__value { white-space: nowrap; }
  .rw-ts__value { color: var(--rw-text); }
  .rw-ts__chev { width: 14px; height: 14px; color: var(--rw-text-muted); transition: transform var(--rw-dur-2) var(--rw-ease-assemble); }
  rw-theme-select.is-open .rw-ts__chev { transform: rotate(180deg); }
  .rw-ts__swatch {
    position: relative;
    width: 32px;
    height: 32px;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: var(--rw-ground);
    box-shadow: inset 0 0 0 1px var(--rw-line-strong);
  }
  .rw-ts__swatch i { position: absolute; inset: 0; background: var(--rw-sample); background-color: transparent; }
  .rw-ts__swatch::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--rw-action); box-shadow: 0 0 0 2px var(--rw-ground); }
  .rw-ts__panel {
    position: fixed;
    inset: auto;
    left: var(--rw-ts-left, 12px);
    top: var(--rw-ts-top, auto);
    bottom: var(--rw-ts-bottom, auto);
    width: var(--rw-ts-width, 360px);
    max-height: var(--rw-ts-max, 70vh);
    margin: 0;
    padding: 6px;
    z-index: var(--rw-z-popover);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--rw-border-width) solid var(--rw-line-strong);
    border-radius: var(--rw-r-lg);
    background: var(--rw-surface-3);
    color: var(--rw-text);
    box-shadow: var(--rw-elev-3);
  }
  .rw-ts__panel[hidden] { display: none; }
  .rw-ts__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 8px 10px 6px; font: 650 0.78rem/1.2 var(--rw-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rw-text-soft); }
  .rw-ts__hint { font: 500 0.78rem/1.2 var(--rw-font-text); letter-spacing: 0; text-transform: none; }
  .rw-ts__list { overflow-y: auto; overscroll-behavior: contain; padding: 2px; border-radius: var(--rw-r-md); outline: none; }
  .rw-ts__list:focus-visible { outline: none; }
  .rw-ts__group + .rw-ts__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rw-line); }
  .rw-ts__glabel { padding: 6px 10px 4px; font: 650 0.72rem/1.2 var(--rw-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rw-text-soft); }
  .rw-ts__option {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 8px;
    border-radius: var(--rw-r-md);
    cursor: pointer;
    transition: background-color var(--rw-dur-1) var(--rw-ease-gentle);
  }
  .rw-ts__option.is-active { background: color-mix(in srgb, var(--rw-text) 8%, transparent); box-shadow: inset 0 0 0 1px var(--rw-line-strong); }
  .rw-ts__list:focus-visible .rw-ts__option.is-active { box-shadow: inset 0 0 0 2px var(--rw-focus); }
  .rw-ts__text { display: grid; gap: 2px; min-width: 0; }
  .rw-ts__name { font: 650 0.95rem/1.2 var(--rw-font-text); color: var(--rw-text); }
  .rw-ts__desc { font-size: 0.8rem; line-height: 1.3; color: var(--rw-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rw-ts__check { width: 18px; height: 18px; color: var(--rw-signal-text); opacity: 0; }
  .rw-ts__option[aria-selected="true"] .rw-ts__check { opacity: 1; }
  .rw-ts__option[aria-selected="true"] .rw-ts__name::after { content: " · current"; font-weight: 500; color: var(--rw-text-soft); }
  /* the live mini sample: the theme's own ground, field pattern, surface, text and action */
  .rw-ts__sample {
    position: relative;
    width: 64px;
    height: 42px;
    overflow: hidden;
    border-radius: calc(var(--rw-r-sm) + 2px);
    background: var(--rw-ground);
    box-shadow: inset 0 0 0 1px var(--rw-line-strong);
  }
  .rw-ts__sfield { position: absolute; inset: -6px; background: var(--rw-sample); background-color: transparent; }
  .rw-ts__scard {
    position: absolute;
    left: 8px;
    bottom: 7px;
    width: 30px;
    height: 17px;
    padding: 3px 4px;
    display: grid;
    gap: 2px;
    align-content: start;
    border-radius: 4px;
    background: var(--rw-glass);
    box-shadow: inset 0 1px 0 var(--rw-highlight), 0 2px 5px var(--rw-shadow);
  }
  .rw-ts__scard b { display: block; height: 2px; border-radius: 1px; background: var(--rw-text); }
  .rw-ts__scard b:nth-child(2) { width: 70%; background: var(--rw-text-muted); }
  .rw-ts__scard b:nth-child(3) { position: absolute; right: -14px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--rw-action); box-shadow: 0 0 0 1.5px var(--rw-ground); }
  @media (prefers-reduced-motion: no-preference) {
    .rw-ts__option.is-active .rw-ts__sfield { animation: rw-ts-drift 6s linear infinite; }
  }
  @keyframes rw-ts-drift { to { transform: translate3d(6px, 4px, 0); } }
  .rw-ts__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* a sheet from the bottom on small screens */
  @media (max-width: 560px) {
    .rw-ts__panel {
      left: 8px;
      right: 8px;
      top: auto;
      bottom: calc(8px + env(safe-area-inset-bottom, 0px));
      width: auto;
      max-height: min(72vh, 620px);
      border-radius: var(--rw-r-xl);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .rw-ts__panel:not([hidden]) { animation: rw-ts-in var(--rw-dur-2) var(--rw-ease-assemble); }
    .rw-ts__panel.is-up:not([hidden]) { animation-name: rw-ts-in-up; }
  }
  @keyframes rw-ts-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
  @keyframes rw-ts-in-up { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
  /* the no-JavaScript fallback: a plain select, styled like the inputs */
  .rw-theme-fallback { min-height: var(--rw-tap); padding: 0 12px; border: var(--rw-border-width) solid var(--rw-line-input); border-radius: var(--rw-r-md); background: var(--rw-surface-0); color: var(--rw-text); font: 500 0.95rem var(--rw-font-text); }

  /* ---------------------------------------------------------------- reveals (rw-motion.js)
     Only when scripts and motion are on: without either, everything is simply there. A failsafe
     shows any element still waiting after 2.5 s, whatever happens to the script. */
  html.rw-js[data-motion="full"] [data-rw-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, var(--rw-reveal-y, 18px), 0) scale(var(--rw-reveal-scale, 1));
    animation: rw-reveal-failsafe 0s linear 2.5s forwards;
  }
  html.rw-js[data-motion="full"] [data-rw-reveal="fade"]:not(.is-in) { transform: none; }
  html.rw-js[data-motion="full"] [data-rw-reveal="stretch"]:not(.is-in) { transform: none; font-stretch: 58%; letter-spacing: 0.02em; opacity: 0.25; }
  html.rw-js[data-motion="full"] [data-rw-reveal] {
    transition:
      opacity var(--rw-dur-4) var(--rw-ease-assemble) var(--rw-delay, 0ms),
      transform var(--rw-dur-4) var(--rw-ease-assemble) var(--rw-delay, 0ms),
      font-stretch var(--rw-dur-scene) var(--rw-ease-assemble) var(--rw-delay, 0ms),
      letter-spacing var(--rw-dur-scene) var(--rw-ease-assemble) var(--rw-delay, 0ms);
  }
  @keyframes rw-reveal-failsafe { to { opacity: 1; transform: none; font-stretch: inherit; letter-spacing: inherit; } }

  /* ---------------------------------------------------------------- the theme reveal
     rw-theme.js reveals a new theme in a circle from the selector, in step with the field's sweep.
     The page stays usable while it plays: pointer events pass through the transition's overlay */
  html.rw-theme-vt::view-transition { pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    html.rw-theme-vt::view-transition-old(root) { animation: none; }
    html.rw-theme-vt::view-transition-new(root) {
      animation: rw-theme-reveal calc(860ms * var(--rw-tempo, 1)) var(--rw-ease-assemble) both;
      mix-blend-mode: normal;
    }
  }
  @keyframes rw-theme-reveal {
    from { clip-path: circle(0 at var(--rw-vt-x, 50%) var(--rw-vt-y, 0)); }
    to { clip-path: circle(var(--rw-vt-r, 150vmax) at var(--rw-vt-x, 50%) var(--rw-vt-y, 0)); }
  }

  /* ---------------------------------------------------------------- reduced motion
     The system's own movement resolves at once (the duration tokens are 0 ms, see foundation.css) */
  @media (prefers-reduced-motion: reduce) {
    .rw-btn, .rw-ts__chev, .rw-ts__panel, .rw-lit::after, .rw-field { transition: none; animation: none; }
  }
}