@swiftbrowser/web 0.1.0

package/src/styles.css

@@ -0,0 +1,2834 @@
+/* ---------------------------------------------------------------------------
+   iOS design tokens. Light values live on the device frame; dark ones switch
+   with the frame's data-theme so the page chrome and the "phone" are
+   independent.
+   ------------------------------------------------------------------------- */
+
+:root {
+  /* The UINavigationController push curve: fast start, long settle. */
+  --sb-nav-easing: cubic-bezier(0.32, 0.72, 0, 1);
+  --sb-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter,
+    system-ui, sans-serif;
+  /* Body size for the default (Large) Dynamic Type size; the device frame
+     overrides this with the current size (see .device below). */
+  --sb-font-size-body: 17px;
+
+  /* Page chrome (not iOS) */
+  --page-bg: #e9e9ee;
+  --page-fg: #1c1c1e;
+  --page-muted: #6e6e73;
+  --page-border: rgba(0, 0, 0, 0.08);
+  --page-surface: rgba(255, 255, 255, 0.8);
+  --page-error-bg: #ffe5e5;
+  --page-error-fg: #a1000d;
+
+  /* Device dimensions (iPhone 15 Pro logical points) */
+  --device-screen-width: 393px;
+  --device-screen-height: 852px;
+  --device-bezel: 12px;
+  --device-radius: 58px;
+  --device-safe-top: 59px;
+  --device-safe-bottom: 34px;
+
+  /* The real safe-area insets (device mode). env() is substituted at
+     computed-value time, so main.ts reads these with getComputedStyle; they
+     are 0 outside standalone (home screen) mode and landscape. */
+  --sb-inset-top: env(safe-area-inset-top, 0px);
+  --sb-inset-right: env(safe-area-inset-right, 0px);
+  --sb-inset-bottom: env(safe-area-inset-bottom, 0px);
+  --sb-inset-left: env(safe-area-inset-left, 0px);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page-bg: #111114;
+    --page-fg: #f2f2f7;
+    --page-muted: #98989f;
+    --page-border: rgba(255, 255, 255, 0.1);
+    --page-surface: rgba(28, 28, 30, 0.85);
+    --page-error-bg: #3a0b10;
+    --page-error-fg: #ff8a8a;
+  }
+}
+
+.device {
+  /* Dynamic Type: main.ts writes --sb-ts-<style>-size / -lh / -scale on the
+     device frame for the selected size (typography.ts); the fallbacks are the
+     Large values. Unstyled text is `body` and scales with it. */
+  --sb-font-size-body: var(--sb-ts-body-size, 17px);
+}
+
+.device,
+.device[data-theme="light"] {
+  color-scheme: light;
+  --sb-color-primary: #000000;
+  --sb-color-secondary: rgba(60, 60, 67, 0.6);
+  --sb-color-accent: #007aff;
+  --sb-color-system-background: #ffffff;
+  --sb-color-secondary-system-background: #f2f2f7;
+  --sb-color-separator: rgba(60, 60, 67, 0.29);
+  --sb-color-tertiary-label: rgba(60, 60, 67, 0.3);
+  --sb-color-quaternary-label: rgba(60, 60, 67, 0.18);
+  --sb-color-red: #ff3b30;
+  --sb-color-green: #34c759;
+  --sb-color-grouped-background: #f2f2f7;
+  --sb-color-grouped-cell: #ffffff;
+  --sb-color-fill: rgba(120, 120, 128, 0.2);
+  --sb-color-secondary-fill: rgba(120, 120, 128, 0.16);
+  --sb-color-tertiary-fill: rgba(118, 118, 128, 0.12);
+  --sb-color-quaternary-fill: rgba(116, 116, 128, 0.08);
+  /* Phase 6 materials: rgb components of the color blurred over the backdrop. */
+  --sb-color-material-base: 255, 255, 255;
+  --sb-color-switch-off: #e9e9ea;
+  --sb-color-field-border: #c6c6c8;
+  --sb-color-field-background: #ffffff;
+  --sb-color-placeholder: rgba(60, 60, 67, 0.3);
+  --sb-color-sheet-background: #ffffff;
+  --sb-color-grabber: rgba(60, 60, 67, 0.3);
+  /* Phase 4 */
+  --sb-color-tabbar-background: rgba(249, 249, 249, 0.94);
+  --sb-color-segment-track: rgba(118, 118, 128, 0.12);
+  --sb-color-segment-selected: #ffffff;
+  --sb-color-menu-background: rgba(250, 250, 250, 0.96);
+}
+
+.device[data-theme="dark"] {
+  color-scheme: dark;
+  --sb-color-primary: #ffffff;
+  --sb-color-secondary: rgba(235, 235, 245, 0.6);
+  --sb-color-accent: #0a84ff;
+  --sb-color-system-background: #000000;
+  --sb-color-secondary-system-background: #1c1c1e;
+  --sb-color-separator: rgba(84, 84, 88, 0.6);
+  --sb-color-tertiary-label: rgba(235, 235, 245, 0.3);
+  --sb-color-quaternary-label: rgba(235, 235, 245, 0.16);
+  --sb-color-red: #ff453a;
+  --sb-color-green: #30d158;
+  --sb-color-grouped-background: #000000;
+  --sb-color-grouped-cell: #1c1c1e;
+  --sb-color-fill: rgba(120, 120, 128, 0.36);
+  --sb-color-secondary-fill: rgba(120, 120, 128, 0.32);
+  --sb-color-tertiary-fill: rgba(118, 118, 128, 0.24);
+  --sb-color-quaternary-fill: rgba(118, 118, 128, 0.18);
+  --sb-color-material-base: 30, 30, 30;
+  --sb-color-switch-off: #39393d;
+  --sb-color-field-border: #3a3a3c;
+  --sb-color-field-background: #1c1c1e;
+  --sb-color-placeholder: rgba(235, 235, 245, 0.3);
+  /* Sheets float above the window and take the elevated system background. */
+  --sb-color-sheet-background: #1c1c1e;
+  --sb-color-grabber: rgba(235, 235, 245, 0.3);
+  /* Phase 4 */
+  --sb-color-tabbar-background: rgba(29, 29, 29, 0.94);
+  --sb-color-segment-track: rgba(118, 118, 128, 0.24);
+  --sb-color-segment-selected: #636366;
+  --sb-color-menu-background: rgba(37, 37, 37, 0.96);
+}
+
+/* ---------------------------------------------------------------------------
+   Page layout
+   ------------------------------------------------------------------------- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--page-bg);
+  color: var(--page-fg);
+  font-family: var(--sb-font-family);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: var(--page-surface);
+  border-bottom: 1px solid var(--page-border);
+  backdrop-filter: blur(16px);
+}
+
+.toolbar-brand {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--page-border);
+}
+
+.toolbar-label {
+  color: var(--page-muted);
+}
+
+.toolbar-value {
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--page-border);
+}
+
+.toolbar-spacer {
+  flex: 1 1 0;
+}
+
+/* Hot-reload indicator, driven by the dev server's sb:build-* events. */
+.toolbar-build {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--page-muted);
+}
+
+.toolbar-build[hidden] {
+  display: none;
+}
+
+.toolbar-build::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  animation: sb-spin 0.9s linear infinite;
+}
+
+.toolbar-build[data-state="error"] {
+  color: var(--page-error-fg);
+}
+
+.toolbar-build[data-state="error"]::before {
+  animation: none;
+  border-color: currentColor;
+}
+
+.toolbar-button {
+  font: inherit;
+  padding: 6px 12px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.toolbar-button:hover {
+  background: var(--page-border);
+}
+
+.toolbar-button[aria-pressed="true"] {
+  background: var(--page-fg);
+  color: var(--page-bg);
+  border-color: transparent;
+}
+
+.toolbar-select {
+  font: inherit;
+  padding: 5px 8px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px 16px 48px;
+}
+
+.status {
+  max-width: 560px;
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: var(--page-error-bg);
+  color: var(--page-error-fg);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---------------------------------------------------------------------------
+   Device frame
+   ------------------------------------------------------------------------- */
+
+.device {
+  position: relative;
+  flex: 0 0 auto;
+  width: calc(var(--device-screen-width) + 2 * var(--device-bezel));
+  height: calc(var(--device-screen-height) + 2 * var(--device-bezel));
+  padding: var(--device-bezel);
+  border-radius: var(--device-radius);
+  background: linear-gradient(160deg, #3a3a3f 0%, #141417 45%, #0c0c0e 100%);
+  box-shadow:
+    0 0 0 1.5px #5a5a60,
+    0 0 0 3px #1a1a1d,
+    0 30px 60px -20px rgba(0, 0, 0, 0.55),
+    0 12px 24px -12px rgba(0, 0, 0, 0.4);
+}
+
+/* Side buttons */
+.device::before,
+.device::after {
+  content: "";
+  position: absolute;
+  background: #2a2a2e;
+  border-radius: 2px;
+}
+
+.device::before {
+  /* volume up + down (one element, drawn with a gradient gap) */
+  left: -4.5px;
+  top: 180px;
+  width: 3px;
+  height: 160px;
+  background: linear-gradient(#2a2a2e 0 40%, transparent 40% 60%, #2a2a2e 60%);
+}
+
+.device::after {
+  /* power */
+  right: -4.5px;
+  top: 220px;
+  width: 3px;
+  height: 100px;
+}
+
+.device-screen {
+  position: relative;
+  width: var(--device-screen-width);
+  height: var(--device-screen-height);
+  overflow: hidden;
+  border-radius: calc(var(--device-radius) - var(--device-bezel));
+  background: var(--sb-color-system-background);
+  color: var(--sb-color-primary);
+  font-size: var(--sb-font-size-body);
+  /* Unitless so fixed-size fonts keep proportional line boxes; text styles
+     set their iOS line height in px on the styled box. */
+  line-height: 1.3;
+}
+
+.dynamic-island {
+  position: absolute;
+  top: 11px;
+  left: 50%;
+  width: 126px;
+  height: 37px;
+  transform: translateX(-50%);
+  border-radius: 20px;
+  background: #000;
+  z-index: 3;
+}
+
+.status-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--device-safe-top);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px 6px 40px;
+  pointer-events: none;
+  z-index: 2;
+  color: var(--sb-color-primary);
+}
+
+.status-time {
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.status-glyphs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.glyph {
+  display: block;
+  fill: currentColor;
+}
+
+.glyph-battery .battery-shell {
+  fill: none;
+  stroke: currentColor;
+  stroke-opacity: 0.4;
+}
+
+.glyph-battery .battery-cap {
+  fill: currentColor;
+  fill-opacity: 0.4;
+}
+
+.home-indicator {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  width: 139px;
+  height: 5px;
+  transform: translateX(-50%);
+  border-radius: 3px;
+  background: var(--sb-color-primary);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* Root container (element id 0). The layout engine positions every element
+   absolutely in screen coordinates (safe areas are part of the proposal), so
+   the root is just a clipping box. */
+.screen {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.device[data-state="loading"] .screen::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 22px;
+  height: 22px;
+  margin: -11px 0 0 -11px;
+  border-radius: 50%;
+  border: 2.5px solid var(--sb-color-secondary);
+  border-top-color: transparent;
+  animation: sb-spin 0.9s linear infinite;
+}
+
+@keyframes sb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Device mode (html[data-sb-mode="device"], see src/deviceMode.ts)
+
+   On a real phone there is no toolbar and no fake bezel: the OS draws the
+   status bar and #screen fills the viewport. The layout engine still gets a
+   status-bar / home-indicator safe area, but from env(safe-area-inset-*)
+   (via --sb-inset-*), so it is only non-zero in standalone mode / landscape.
+   ------------------------------------------------------------------------- */
+
+html[data-sb-mode="device"] {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+  /* No double-tap zoom, no text inflation in landscape. */
+  touch-action: manipulation;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+html[data-sb-mode="device"] body {
+  min-height: 100dvh;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: manipulation;
+  background: var(--sb-color-system-background, var(--page-bg));
+}
+
+html[data-sb-mode="device"] .toolbar {
+  display: none;
+}
+
+html[data-sb-mode="device"] .stage {
+  padding: 0;
+  gap: 0;
+}
+
+html[data-sb-mode="device"] .device {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  padding: 0;
+  border-radius: 0;
+  background: var(--sb-color-system-background);
+  box-shadow: none;
+}
+
+html[data-sb-mode="device"] .device::before,
+html[data-sb-mode="device"] .device::after,
+html[data-sb-mode="device"] .dynamic-island,
+html[data-sb-mode="device"] .status-bar,
+html[data-sb-mode="device"] .home-indicator {
+  display: none;
+}
+
+html[data-sb-mode="device"] .device-screen {
+  width: 100dvw;
+  height: 100dvh;
+  border-radius: 0;
+}
+
+/* The error banner floats over the app, clear of the home indicator. */
+html[data-sb-mode="device"] .status {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: calc(16px + var(--sb-inset-bottom));
+  z-index: 10;
+  max-width: none;
+  max-height: 40dvh;
+  overflow: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Rendered elements
+
+   Every protocol element is an absolutely positioned box whose left/top/
+   width/height come from the layout engine (src/layoutDom.ts). Slots of
+   compound kinds (.sb-slot) stay static so their children are positioned
+   against the compound element itself; the content boxes of lists and scroll
+   views are the exception (they scroll).
+   ------------------------------------------------------------------------- */
+
+.screen [data-sb-id],
+.screen [data-sb-ghost] {
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.sb-slot {
+  position: static;
+}
+
+/* Text: the engine hands over the exact lines, joined with newlines.
+   Phase 6: a gradient foreground is painted as the text's own background
+   clipped to the glyphs. The styled box sets `--sb-text-gradient`,
+   `--sb-text-clip` and `--sb-text-color` (inherited by every text below it;
+   a nested flat foreground resets them to `initial`). With the properties
+   unset the declarations are invalid at computed-value time: the image and
+   clip fall back, and `color` becomes `unset`, i.e. inherits as before. */
+.sb-text {
+  display: block;
+  white-space: pre;
+  overflow: visible;
+  text-align: left;
+  background-image: var(--sb-text-gradient, none);
+  -webkit-background-clip: var(--sb-text-clip, border-box);
+  background-clip: var(--sb-text-clip, border-box);
+  color: var(--sb-text-color);
+}
+
+.sb-vstack,
+.sb-hstack,
+.sb-zstack,
+.sb-styled,
+.sb-spacer {
+  display: block;
+}
+
+.sb-button {
+  appearance: none;
+  display: block;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.1s ease;
+}
+
+.sb-button:active {
+  opacity: 0.3;
+}
+
+.sb-button:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 4px;
+  border-radius: 6px;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 2: button styles, disabled, image, divider, scrollview
+   ------------------------------------------------------------------------- */
+
+.sb-button[data-sb-style="bordered"],
+.sb-button[data-sb-style="borderedProminent"] {
+  border-radius: 9999px;
+}
+
+.sb-button[data-sb-style="bordered"] {
+  background: var(--sb-color-fill);
+  color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
+}
+
+.sb-button[data-sb-style="borderedProminent"] {
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+}
+
+.sb-button[data-sb-role="destructive"] {
+  color: var(--sb-color-red);
+}
+
+.sb-button[data-sb-style="borderedProminent"][data-sb-role="destructive"] {
+  background: var(--sb-color-red);
+  color: #ffffff;
+}
+
+/* .disabled(true): opacity and pointer-events are set inline by the renderer
+   (so update() clears them); the attribute carries the state for tooling. */
+[data-sb-disabled] {
+  user-select: none;
+}
+
+/* Image(systemName:): a 1em glyph centered in its line-height square; the
+   renderer sets font-size from the resolved font. */
+.sb-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.sb-image > svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+}
+
+/* Unknown symbol or catalog image: a dashed box named by `title`. */
+.sb-image[data-sb-missing] {
+  border: 1px dashed currentColor;
+  border-radius: 2px;
+  opacity: 0.6;
+}
+
+/* Phase 5: a catalog image. The layout engine decides the frame (intrinsic
+   size, or the proposal for `.resizable()`), so the bitmap fills the box;
+   `.aspectRatio` fitting is a layout concern, not object-fit's. */
+.sb-image > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Phase 5: a `.symbolset` SVG drawn as a template: the SVG masks a box
+   filled with the current foreground color, like an SF Symbol. */
+.sb-image > .sb-image-mask {
+  display: block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.sb-divider {
+  background: var(--sb-color-separator);
+}
+
+/* ScrollView: the engine sizes the viewport; the inner content box is sized
+   to the content so the browser scrolls it. iOS-style invisible scrollbars. */
+.sb-scrollview {
+  overflow: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sb-scrollview::-webkit-scrollbar,
+.sb-list::-webkit-scrollbar {
+  display: none;
+}
+
+.sb-scrollview[data-sb-axes="vertical"] {
+  overflow-y: auto;
+}
+
+.sb-scrollview[data-sb-axes="horizontal"] {
+  overflow-x: auto;
+}
+
+.sb-scrollview[data-sb-axes="both"] {
+  overflow: auto;
+}
+
+/* Phase 12: `.scrollTargetBehavior(.viewAligned)` / `.paging` snap the scroll
+   view on its axis; the children of the `.scrollTargetLayout()` stack (or of
+   the content, for paging) are the snap points. */
+.sb-scrollview[data-sb-snap][data-sb-axes="horizontal"] {
+  scroll-snap-type: x mandatory;
+}
+
+.sb-scrollview[data-sb-snap][data-sb-axes="vertical"] {
+  scroll-snap-type: y mandatory;
+}
+
+.sb-scrollview[data-sb-snap][data-sb-axes="both"] {
+  scroll-snap-type: both mandatory;
+}
+
+[data-sb-scroll-target] > * {
+  scroll-snap-align: start;
+}
+
+.sb-scrollview[data-sb-snap="paging"] > .sb-scroll-content > * {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.sb-scroll-content,
+.sb-list-content {
+  position: relative;
+  display: block;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 2: text fields and toggles
+   ------------------------------------------------------------------------- */
+
+.sb-textfield {
+  appearance: none;
+  display: block;
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+  color: var(--sb-color-primary);
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+.sb-textfield::placeholder {
+  color: var(--sb-color-placeholder);
+}
+
+.sb-textfield[data-sb-style="roundedBorder"] {
+  padding: 0 7px;
+  border: 1px solid var(--sb-color-field-border);
+  border-radius: 5px;
+  background: var(--sb-color-field-background);
+}
+
+.sb-textfield[data-sb-style="roundedBorder"]:focus-visible {
+  border-color: var(--sb-color-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-color-accent) 30%, transparent);
+}
+
+/* Toggle: the label children are positioned by their frames; the switch sits
+   at the engine's `switch` rect (51×31 at the trailing edge). */
+.sb-switch {
+  appearance: none;
+  position: absolute;
+  width: 51px;
+  height: 31px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--sb-color-switch-off);
+  cursor: pointer;
+  transition: background-color 0.25s ease;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-switch[aria-checked="true"] {
+  background: var(--sb-tint, var(--sb-color-green));
+}
+
+.sb-switch:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 2px;
+}
+
+.sb-switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 27px;
+  height: 27px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 3px 1px rgba(0, 0, 0, 0.06);
+  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.sb-switch[aria-checked="true"] .sb-switch-knob {
+  transform: translateX(20px);
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 2: lists (iOS inset grouped). Geometry comes from the engine: the
+   list is the scrolling viewport, sections carry the inset card (`rows`),
+   every row's DOM box is the full-width row inside the card.
+   ------------------------------------------------------------------------- */
+
+.sb-list {
+  background: var(--sb-color-grouped-background);
+  overflow-y: auto;
+  scrollbar-width: none;
+  --sb-icon-knockout: var(--sb-color-grouped-cell);
+}
+
+.sb-section-header,
+.sb-section-footer {
+  position: absolute;
+  white-space: pre;
+  color: var(--sb-color-secondary);
+  text-align: left;
+}
+
+.sb-section-header[hidden],
+.sb-section-footer[hidden] {
+  display: none;
+}
+
+.sb-section-rows {
+  position: absolute;
+  border-radius: 10px;
+  background: var(--sb-color-grouped-cell);
+  overflow: hidden;
+}
+
+/* Rows: every direct child of a section's card, and every non-section child
+   of a list (loose rows form their own card). */
+.sb-section-rows > [data-sb-id],
+.sb-section-rows > [data-sb-ghost],
+.sb-list-content > :not(.sb-section) {
+  background: var(--sb-color-grouped-cell);
+  text-align: left;
+}
+
+.sb-list-content > :not(.sb-section):first-child,
+.sb-list-content > .sb-section + :not(.sb-section) {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.sb-list-content > :not(.sb-section):last-child,
+.sb-list-content > :not(.sb-section):has(+ .sb-section) {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+/* Hairline separators, inset 16px from the leading edge. */
+.sb-section-rows > :not(:last-child)::after,
+.sb-list-content > :not(.sb-section):not(:last-child):not(:has(+ .sb-section))::after {
+  content: "";
+  position: absolute;
+  left: 16px;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-section-rows > .sb-button,
+.sb-list-content > .sb-button {
+  border-radius: 0;
+  font-size: var(--sb-font-size-body);
+}
+
+.sb-section-rows > .sb-button:active,
+.sb-list-content > .sb-button:active {
+  opacity: 1;
+  background: var(--sb-color-fill);
+}
+
+.sb-section-rows > .sb-navlink:active,
+.sb-list-content > .sb-navlink:active {
+  background: var(--sb-color-fill);
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 2: navigation
+   ------------------------------------------------------------------------- */
+
+.sb-navstack {
+  overflow: hidden;
+}
+
+.sb-navscreen {
+  background: var(--sb-color-system-background);
+  will-change: transform;
+  transition:
+    transform 0.4s var(--sb-nav-easing),
+    visibility 0s linear 0s;
+}
+
+/* A screen with a list as its content takes the grouped background, like a
+   UINavigationController hosting an inset-grouped table view. */
+.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list) {
+  background: var(--sb-color-grouped-background);
+}
+
+/* Screens below the top one slide partially left and are hidden once the
+   transition has finished. */
+.sb-navscreen[data-sb-nav-position="below"] {
+  transform: translateX(-30%);
+  visibility: hidden;
+  transition:
+    transform 0.4s var(--sb-nav-easing),
+    visibility 0s linear 0.4s;
+}
+
+.sb-navscreen--push {
+  animation: sb-nav-push 0.4s var(--sb-nav-easing) both;
+}
+
+.sb-navstack > .sb-navscreen--pop {
+  z-index: 2;
+  pointer-events: none;
+  visibility: visible;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+  animation: sb-nav-pop 0.4s var(--sb-nav-easing) both;
+}
+
+@keyframes sb-nav-push {
+  from {
+    transform: translateX(100%);
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+  }
+  to {
+    transform: translateX(0);
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0);
+  }
+}
+
+@keyframes sb-nav-pop {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* Navigation bar: the engine's `bar` rect (status bar + 44); the renderer
+   pads the status bar height so the 44px row sits at the bottom. */
+.sb-navbar {
+  position: absolute;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+  background: transparent;
+  /* Phase 8: content that ignores the safe area paints under the bar; the
+     bar itself lets pointers through to toolbar items laid out over it. */
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sb-navbar > * {
+  pointer-events: auto;
+}
+
+.sb-navbar-trailing:empty {
+  pointer-events: none;
+}
+
+.sb-navbar-back {
+  appearance: none;
+  grid-column: 1;
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  /* Width comes from the layout engine (chrome.back); this is only a fallback. */
+  max-width: 45%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-color-accent);
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-navbar-back[hidden] {
+  display: none;
+}
+
+.sb-navbar-back:active {
+  opacity: 0.3;
+}
+
+.sb-navbar-back > svg {
+  width: 1.4em;
+  height: 1.4em;
+  margin-left: -4px;
+  stroke-width: 2.5;
+  flex-shrink: 0;
+}
+
+.sb-navbar-back-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sb-navbar-title {
+  /* Positioned at the engine's `title` rect (Phase 6), centered and truncated
+     to the room the back button and the toolbar items leave. Not a grid item:
+     an absolutely positioned grid child would be placed against its grid
+     area, not the bar's padding box. */
+  position: absolute;
+  display: block;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  font-size: var(--sb-ts-headline-size, 17px);
+  font-weight: 600;
+  color: var(--sb-color-primary);
+}
+
+.sb-navbar-title[hidden] {
+  display: none;
+}
+
+.sb-navbar-trailing {
+  grid-column: 3;
+}
+
+.sb-navscreen-body,
+.sb-navscreen-content {
+  position: static;
+  display: block;
+}
+
+/* Large title: the engine's `largeTitle` rect (52px row), text already
+   truncated to one line. */
+.sb-navbar-large-title {
+  position: absolute;
+  z-index: 1; /* Phase 8: above content that ignores the safe area */
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  box-sizing: border-box;
+  font-size: var(--sb-ts-largeTitle-size, 34px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  text-align: left;
+  color: var(--sb-color-primary);
+  white-space: pre;
+  overflow: hidden;
+}
+
+.sb-navbar-large-title[hidden] {
+  display: none;
+}
+
+/* NavigationLink: a tappable label. Inside a list it is a row with a chevron
+   at the engine's `chevron` rect; elsewhere it reads as plain accent text. */
+.sb-navlink {
+  color: var(--sb-color-accent);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-navlink:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+.sb-navlink-chevron {
+  position: absolute;
+  stroke-width: 2.5;
+  color: var(--sb-color-tertiary-label);
+}
+
+.sb-navlink-chevron[hidden] {
+  display: none;
+}
+
+.sb-section-rows > .sb-navlink,
+.sb-list-content > .sb-navlink {
+  color: var(--sb-color-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb-navscreen,
+  .sb-navscreen--push,
+  .sb-navstack > .sb-navscreen--pop,
+  .sb-switch,
+  .sb-switch-knob {
+    animation-duration: 0.01s;
+    transition-duration: 0.01s;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 3: color and shape views (the engine sizes them to their proposal)
+   ------------------------------------------------------------------------- */
+
+.sb-color,
+.sb-shape {
+  display: block;
+}
+
+/* An exit clone of a removed element, positioned by the Animator. */
+.sb-exit-clone {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 3: sheets
+   ------------------------------------------------------------------------- */
+
+/* A sheet is a root-level layer covering the screen: a scrim over the
+   presenting tree and the card at the engine's frame (large: screen height −
+   status bar − 10; medium: half), sliding up from the bottom. */
+.screen > .sb-sheet,
+.sb-sheet {
+  position: absolute;
+  inset: 0;
+  width: auto;
+  height: auto;
+  z-index: 5;
+  display: block;
+}
+
+.sb-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  animation: sb-sheet-scrim-in 0.4s ease-out both;
+}
+
+.sb-sheet-card {
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 10px 10px 0 0;
+  background: var(--sb-color-sheet-background);
+  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  will-change: transform;
+  touch-action: none;
+  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.sb-sheet-grabber {
+  position: absolute;
+  border-radius: 2.5px;
+  background: var(--sb-color-grabber);
+  z-index: 1;
+}
+
+.sb-sheet-content {
+  position: static;
+  display: block;
+}
+
+/* Present: the card slides up over 0.4s while the scrim fades in. */
+.sb-sheet--in > .sb-sheet-card {
+  animation: sb-sheet-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+/* Dismiss: the clone slides down from where a drag left it and fades its scrim. */
+.sb-sheet--out {
+  pointer-events: none;
+}
+
+.sb-sheet--out > .sb-sheet-card {
+  transition: none;
+  animation: sb-sheet-out 0.4s cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+.sb-sheet--out > .sb-sheet-scrim {
+  animation: sb-sheet-scrim-out 0.4s ease-out both;
+}
+
+/* While dragging the card follows the pointer (inline transform). */
+.sb-sheet[data-sb-dragging] > .sb-sheet-card {
+  transition: none;
+}
+
+/* Sheets under the top one park slightly scaled, like iOS stacks them. */
+.sb-sheet[data-sb-sheet-position="below"] > .sb-sheet-card {
+  transform: translateY(-10px) scale(0.92);
+  transform-origin: 50% 0;
+}
+
+/* Behind a `large` sheet the presenting tree scales to 0.92 and dims. */
+.screen > :not(.sb-sheet) {
+  transform-origin: 50% 0;
+  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.screen[data-sb-sheet="large"] > :not(.sb-sheet, .sb-exit-clone, .sb-picker-menu) {
+  transform: scale(0.92);
+}
+
+@keyframes sb-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes sb-sheet-out {
+  from {
+    transform: translateY(var(--sb-sheet-drag, 0px));
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes sb-sheet-scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes sb-sheet-scrim-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb-sheet-scrim,
+  .sb-sheet-card,
+  .sb-sheet--in > .sb-sheet-card,
+  .sb-sheet--out > .sb-sheet-card,
+  .sb-sheet--out > .sb-sheet-scrim,
+  .screen > :not(.sb-sheet) {
+    animation-duration: 0.01s;
+    transition-duration: 0.01s;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 4: list styles. `grouped` sections are full width with hairlines
+   instead of inset cards; `plain` has no cards and the system background.
+   The geometry (no inset, no gaps) comes from the engine; this only drops the
+   radii and swaps the backgrounds.
+   ------------------------------------------------------------------------- */
+
+.sb-list[data-sb-list-style="grouped"] .sb-section-rows,
+.sb-list[data-sb-list-style="plain"] .sb-section-rows,
+.sb-list[data-sb-list-style="grouped"] > .sb-list-content > :not(.sb-section),
+.sb-list[data-sb-list-style="plain"] > .sb-list-content > :not(.sb-section) {
+  border-radius: 0;
+}
+
+.sb-list[data-sb-list-style="grouped"] .sb-section-rows {
+  box-shadow:
+    0 -1px 0 var(--sb-color-separator),
+    0 1px 0 var(--sb-color-separator);
+}
+
+.sb-list[data-sb-list-style="plain"] {
+  background: var(--sb-color-system-background);
+  --sb-icon-knockout: var(--sb-color-system-background);
+}
+
+.sb-list[data-sb-list-style="plain"] .sb-section-rows,
+.sb-list[data-sb-list-style="plain"] .sb-section-rows > [data-sb-id],
+.sb-list[data-sb-list-style="plain"] .sb-section-rows > [data-sb-ghost],
+.sb-list[data-sb-list-style="plain"] > .sb-list-content > :not(.sb-section) {
+  background: var(--sb-color-system-background);
+}
+
+.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list[data-sb-list-style="plain"]) {
+  background: var(--sb-color-system-background);
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 4: tab views. The tabs are stacked in the content slot (every tab has
+   the tab view's frame); the selected one is visible, the others keep their
+   DOM hidden. The bar is the engine's `bar` rect (49 + bottom safe area):
+   translucent system background, hairline on top, items in the 49px row.
+   ------------------------------------------------------------------------- */
+
+.sb-tabview {
+  overflow: hidden;
+}
+
+.sb-tabview-content {
+  position: static;
+  display: block;
+}
+
+.sb-tab {
+  display: block;
+}
+
+.sb-tab[data-sb-tab-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.sb-tabbar {
+  position: absolute;
+  z-index: 3;
+  background: var(--sb-color-tabbar-background);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+.sb-tabbar::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-tabbar-item {
+  appearance: none;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 2px;
+  margin: 0;
+  padding: 6px 0 0;
+  border: 0;
+  background: none;
+  color: var(--sb-color-secondary);
+  font-family: var(--sb-font-family);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-tabbar-item[aria-selected="true"] {
+  color: var(--sb-color-accent);
+}
+
+.sb-tabbar-item:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: -2px;
+  border-radius: 8px;
+}
+
+.sb-tabbar-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.sb-tabbar-icon[hidden] {
+  display: none;
+}
+
+.sb-tabbar-icon > svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+  stroke-width: 1.75;
+}
+
+.sb-tabbar-icon[data-sb-missing] {
+  border: 1px dashed currentColor;
+  border-radius: 4px;
+  opacity: 0.6;
+}
+
+.sb-tabbar-title {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 4: pickers. Segmented: a gray track with equal segments at the
+   engine's `segment<i>` rects; the selected one carries a raised pill inset
+   2px. Menu: label leading, value + chevron trailing (engine `label`/`value`
+   rects); the control opens a menu appended to #screen.
+   ------------------------------------------------------------------------- */
+
+.sb-picker[data-sb-style="segmented"] {
+  display: block;
+}
+
+/* The track is placed at the control's frame (in a list row the element's
+   box is the whole row, so the track cannot be the element's background). */
+.sb-segment-track {
+  position: absolute;
+  border-radius: 8px;
+  background: var(--sb-color-segment-track);
+  pointer-events: none;
+}
+
+.sb-segment {
+  appearance: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-color-primary);
+  font: 600 13px/16px var(--sb-font-family);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-segment::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 7px;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.sb-segment[aria-checked="true"]::before {
+  background: var(--sb-color-segment-selected);
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, 0.12),
+    0 3px 1px rgba(0, 0, 0, 0.04);
+}
+
+.sb-segment-title {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 8px);
+}
+
+.sb-segment:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: -2px;
+  border-radius: 7px;
+}
+
+.sb-picker[data-sb-style="menu"] {
+  display: block;
+  color: var(--sb-color-primary);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-picker[data-sb-style="menu"]:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+.sb-section-rows > .sb-picker[data-sb-style="menu"]:active,
+.sb-list-content > .sb-picker[data-sb-style="menu"]:active {
+  background: var(--sb-color-fill);
+}
+
+.sb-picker-label,
+.sb-picker-value {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sb-picker-label {
+  text-overflow: ellipsis;
+}
+
+.sb-picker-value {
+  justify-content: flex-end;
+  gap: 4px;
+  color: var(--sb-color-secondary);
+}
+
+.sb-picker-value-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-picker-value > svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  stroke: currentColor;
+  stroke-width: 2.5;
+}
+
+/* The option menu: anchored under (or above) the control by the renderer. */
+.sb-picker-menu {
+  position: absolute;
+  z-index: 6;
+  border-radius: 13px;
+  background: var(--sb-color-menu-background);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.08),
+    0 10px 40px rgba(0, 0, 0, 0.22);
+  overflow: hidden;
+  transform-origin: 50% 0;
+  animation: sb-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.sb-picker-menu[data-sb-placement="above"] {
+  transform-origin: 50% 100%;
+}
+
+.sb-picker-menu-item {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  margin: 0;
+  padding: 0 16px;
+  border: 0;
+  background: none;
+  color: var(--sb-color-primary);
+  font: 400 var(--sb-font-size-body) / 1.3 var(--sb-font-family);
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.sb-picker-menu-item, .sb-picker-menu-static) + :is(.sb-picker-menu-item, .sb-picker-menu-static) {
+  box-shadow: inset 0 1px 0 var(--sb-color-separator);
+}
+
+.sb-picker-menu-item:active {
+  background: var(--sb-color-fill);
+}
+
+.sb-picker-menu-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  flex-shrink: 0;
+  visibility: hidden;
+}
+
+.sb-picker-menu-item[aria-checked="true"] > .sb-picker-menu-check {
+  visibility: visible;
+}
+
+.sb-picker-menu-check > svg {
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+  stroke-width: 2.5;
+}
+
+.sb-picker-menu-title {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes sb-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* GeometryReader: a plain box the engine sizes to its proposal. */
+.sb-geometry {
+  display: block;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 6: layout containers (docs/phase6/layout-containers.md). Grids, the
+   custom `layout` element and `decorated` are plain boxes whose children the
+   engine positions; the gauge draws its bar as chrome.
+   ------------------------------------------------------------------------- */
+
+.sb-layout,
+.sb-grid,
+.sb-gridrow,
+.sb-lazyvgrid,
+.sb-decorated {
+  display: block;
+}
+
+/* `.background { }`: the decoration (the last child) draws under the content.
+   The box is its own stacking context so the content's z-index stays local. */
+.sb-decorated {
+  isolation: isolate;
+}
+
+.sb-decorated[data-sb-role="background"] > [data-sb-id]:first-child {
+  z-index: 1;
+}
+
+.sb-gauge {
+  display: block;
+}
+
+.sb-gauge-track,
+.sb-gauge-fill {
+  position: absolute;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.sb-gauge-track {
+  background: var(--sb-color-fill);
+}
+
+.sb-gauge-fill {
+  background: var(--sb-tint, var(--sb-color-accent));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb-picker-menu,
+  .sb-segment::before {
+    animation-duration: 0.01s;
+    transition-duration: 0.01s;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 6 (docs/phase6/chrome.md): menus, inline pickers, navigation bar
+   toolbars, search fields, tap gestures and list row badges.
+   ------------------------------------------------------------------------- */
+
+/* Menu: the label (first child) is the tappable control, the item children
+   are listed in the popover and never shown inline. */
+.sb-menu {
+  display: block;
+  color: var(--sb-color-accent);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-menu > [data-sb-id]:not(:first-child),
+.sb-menu > [data-sb-id][hidden] {
+  display: none;
+}
+
+.sb-menu:active {
+  opacity: 0.3;
+}
+
+.sb-menu:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 4px;
+  border-radius: 6px;
+}
+
+/* Popover rows for menu items: a tap row shows its symbol trailing; a
+   destructive role is red; a disabled item dims; section headers are 32px
+   captions; `text` items are static 44px rows; groups are split by 8px bands. */
+.sb-picker-menu-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.sb-picker-menu-symbol > svg {
+  width: 1.15em;
+  height: 1.15em;
+  stroke: currentColor;
+}
+
+.sb-picker-menu-item[data-sb-role="destructive"] {
+  color: var(--sb-color-red);
+}
+
+.sb-picker-menu-item:disabled {
+  color: var(--sb-color-tertiary-label);
+  cursor: default;
+}
+
+.sb-picker-menu-caption {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 16px;
+  color: var(--sb-color-secondary);
+  font: 400 13px/16px var(--sb-font-family);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-picker-menu-static {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  color: var(--sb-color-secondary);
+  font: 400 var(--sb-font-size-body) / 1.3 var(--sb-font-family);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-picker-menu-separator {
+  height: 8px;
+  background: var(--sb-color-fill);
+}
+
+/* Inline picker: a dim label row (when the label is non-empty) and 44px
+   option rows at the engine's `label` / `option<i>` rects; inside a list the
+   rows span the list row, with the usual 16px content inset and hairlines. */
+.sb-picker[data-sb-style="inline"] {
+  display: block;
+  color: var(--sb-color-primary);
+}
+
+.sb-picker-inline-label {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  color: var(--sb-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-picker-option {
+  appearance: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-color-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-picker-option:active {
+  background: var(--sb-color-fill);
+}
+
+.sb-picker-option:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: -2px;
+}
+
+.sb-picker-option-title {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sb-picker-option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  flex-shrink: 0;
+  color: var(--sb-color-accent);
+  visibility: hidden;
+}
+
+.sb-picker-option[aria-checked="true"] > .sb-picker-option-check {
+  visibility: visible;
+}
+
+.sb-picker-option-check > svg {
+  width: 1.1em;
+  height: 1.1em;
+  stroke: currentColor;
+  stroke-width: 2.5;
+}
+
+/* Hairlines between the inline rows (the first row has the row above it). */
+.sb-picker-inline-label + .sb-picker-option::before,
+.sb-picker-option + .sb-picker-option::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-section-rows > .sb-picker[data-sb-style="inline"] > .sb-picker-inline-label,
+.sb-list-content > .sb-picker[data-sb-style="inline"] > .sb-picker-inline-label,
+.sb-section-rows > .sb-picker[data-sb-style="inline"] > .sb-picker-option,
+.sb-list-content > .sb-picker[data-sb-style="inline"] > .sb-picker-option {
+  padding: 0 16px;
+}
+
+.sb-section-rows > .sb-picker[data-sb-style="inline"] > .sb-picker-option::before,
+.sb-list-content > .sb-picker[data-sb-style="inline"] > .sb-picker-option::before {
+  left: 16px;
+}
+
+/* Toolbars: the element's frame is its item group in the bar (items are
+   ordinary children with frames). A bottom toolbar is the whole 49px + safe
+   area bar, translucent with a hairline like the tab bar. */
+.sb-toolbar {
+  display: block;
+}
+
+.sb-toolbar[data-sb-placement="bottom"] {
+  z-index: 3;
+  background: var(--sb-color-tabbar-background);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+.sb-toolbar[data-sb-placement="bottom"]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+/* Search field: a 36px rounded gray field (engine `searchField` rect) with a
+   magnifier leading; the input sends `text` events like a textfield. */
+.sb-searchfield {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: 10px;
+  background: var(--sb-color-fill);
+  color: var(--sb-color-primary);
+}
+
+.sb-searchfield > svg {
+  display: block;
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+  color: var(--sb-color-secondary);
+  stroke: currentColor;
+  stroke-width: 2.25;
+}
+
+.sb-searchfield-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  color: var(--sb-color-primary);
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+}
+
+.sb-searchfield-input::placeholder {
+  color: var(--sb-color-secondary);
+}
+
+/* Tap gesture: a plain box the size of its child; the renderer sends `tap`
+   for clicks no inner control claimed. */
+.sb-tapgesture {
+  display: block;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* List row badge: trailing secondary text at the engine's `badge` rect. */
+.sb-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--sb-color-secondary);
+  white-space: pre;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 7: split navigation, selected rows, ViewThatFits, hidden and masks
+   (docs/ops-protocol.md, "Phase 7").
+   ------------------------------------------------------------------------- */
+
+/* NavigationSplitView: two navstack columns (protocol children, positioned by
+   the engine) with a hairline between them at the engine's `separator` rect. */
+.sb-navsplit {
+  overflow: hidden;
+  background: var(--sb-color-system-background);
+}
+
+.sb-navsplit-separator {
+  position: absolute;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+/* A selected `navlink` row (`List(selection:)`): the sidebar-style rounded
+   fill. The engine omits the chevron inside a navsplit sidebar; elsewhere
+   the chevron stays. The list-row selectors outrank the per-style row
+   background and `border-radius: 0` rules above. */
+.sb-navlink[data-sb-selected],
+.sb-list[data-sb-list-style] > .sb-list-content > .sb-navlink[data-sb-selected],
+.sb-list[data-sb-list-style] .sb-section-rows > .sb-navlink[data-sb-selected] {
+  background: var(--sb-color-tertiary-fill);
+  border-radius: 10px;
+}
+
+/* ViewThatFits: the candidates it did not choose have no frame and carry the
+   `hidden` attribute (src/layoutDom.ts). */
+.sb-viewthatfits > [data-sb-id][hidden] {
+  display: none;
+}
+
+/* `.hidden()`: the styled box keeps its layout but is invisible and inert
+   (inline `visibility: hidden; pointer-events: none`, see applyStyle). */
+.sb-styled[data-sb-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 7: charts (docs/ops-protocol.md, "Phase 7: charts"). The engine
+   frames the chart and its `chartitem` children; src/chartDom.ts draws the
+   plot SVG, ticks, text labels and legend as chrome inside .sb-chart-chrome,
+   which stays static so its absolutely positioned pieces resolve against
+   the chart box. The slot comes after the chrome, so annotations draw above
+   the marks.
+   ------------------------------------------------------------------------- */
+
+.sb-chart,
+.sb-chartitem {
+  display: block;
+}
+
+.sb-chart-chrome {
+  position: static;
+}
+
+.sb-chart-plot {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.sb-chart-gridline {
+  stroke: var(--sb-color-separator);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+.sb-chart-tick {
+  position: absolute;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-chart-label {
+  position: absolute;
+  color: var(--sb-color-secondary);
+  white-space: pre;
+  pointer-events: none;
+}
+
+.sb-chart-legend-item {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--sb-color-secondary);
+  white-space: pre;
+  pointer-events: none;
+}
+
+.sb-chart-legend-glyph {
+  display: block;
+  flex: none;
+}
+
+.sb-chart-legend-label {
+  flex: none;
+}
+
+/* The SwiftUI chart palette (and the other system colors) as `--sb-color-<name>`,
+   which a named `Color` without a semantic token resolves to (src/styles.ts). */
+.device,
+.device[data-theme="light"] {
+  --sb-color-blue: #007aff;
+  --sb-color-orange: #ff9500;
+  --sb-color-yellow: #ffcc00;
+  --sb-color-purple: #af52de;
+  --sb-color-pink: #ff2d55;
+  --sb-color-teal: #30b0c7;
+  --sb-color-indigo: #5856d6;
+  --sb-color-mint: #00c7be;
+  --sb-color-cyan: #32ade6;
+  --sb-color-brown: #a2845e;
+  --sb-color-gray: #8e8e93;
+}
+
+.device[data-theme="dark"] {
+  --sb-color-blue: #0a84ff;
+  --sb-color-orange: #ff9f0a;
+  --sb-color-yellow: #ffd60a;
+  --sb-color-purple: #bf5af2;
+  --sb-color-pink: #ff375f;
+  --sb-color-teal: #40c8e0;
+  --sb-color-indigo: #5e5ce6;
+  --sb-color-mint: #63e6e2;
+  --sb-color-cyan: #64d2ff;
+  --sb-color-brown: #ac8e68;
+  --sb-color-gray: #8e8e93;
+}
+
+/* ---------------------------------------------------------------------------
+   Phase 8: gestures, rows, navigation (docs/ops-protocol.md, "Phase 8:
+   interaction"; src/interaction.ts drives the data attributes).
+   ------------------------------------------------------------------------- */
+
+/* `gesture`: a drag gesture owns touches in both axes; long-press subtrees
+   never show the browser's text selection or callout. */
+.sb-gesture,
+.sb-contextmenu {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-gesture[data-sb-drag] {
+  touch-action: none;
+}
+
+/* `contextmenu` / `swipeactions`: only the content (the first child) shows
+   inline; the items are listed in the popover / drawn as action buttons
+   (they are in `hidden` without frames). */
+.sb-contextmenu > [data-sb-id]:not(:first-child),
+.sb-contextmenu > [data-sb-id][hidden],
+.sb-swipeactions > .sb-swipe-content > [data-sb-id]:not(:first-child),
+.sb-swipeactions > .sb-swipe-content > [data-sb-id][hidden] {
+  display: none;
+}
+
+/* `.allowsHitTesting(false)` (set inline by the renderer as well). */
+[data-sb-hit-testing="false"] {
+  pointer-events: none;
+}
+
+/* Hit testing like SwiftUI's: a stack, spacer or plain modifier box is not
+   hit in its empty space (what is under it is), only content is: text, images,
+   shapes, controls, rows. A `styled` with a `background` paint is content too.
+   Containers therefore drop pointer events and their children opt back in;
+   subtrees that must stay inert (hidden, disabled, hit testing off, exit and
+   pop animations) are blocked explicitly, since the opt-in breaks inheritance. */
+.sb-vstack,
+.sb-hstack,
+.sb-zstack,
+.sb-spacer,
+.sb-styled,
+.sb-geometry,
+.sb-layout,
+.sb-grid,
+.sb-gridrow,
+.sb-lazyvgrid,
+.sb-viewthatfits,
+.sb-decorated,
+.sb-gesture,
+.sb-tapgesture {
+  pointer-events: none;
+}
+
+:is(.sb-vstack, .sb-hstack, .sb-zstack, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture)
+  > [data-sb-kind]:not(.sb-vstack, .sb-hstack, .sb-zstack, .sb-spacer, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture) {
+  pointer-events: auto;
+}
+
+.sb-styled[data-sb-background] {
+  pointer-events: auto;
+}
+
+:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) [data-sb-kind],
+:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-navbar > * {
+  pointer-events: none !important;
+}
+
+/* While a pointer session runs (src/interaction.ts) nothing on the screen is
+   selectable: a mouse drag is a gesture, not a text selection. */
+[data-sb-pointer-session],
+[data-sb-pointer-session] * {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Swipe rows (`swipeactions`, deletable `listrow`): the content slot paints
+   the row background and slides over the action buttons behind it. */
+.sb-swipeactions,
+.sb-listrow {
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+.sb-swipeactions > .sb-swipe-content,
+.sb-listrow > .sb-swipe-content {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-color: inherit;
+  border-radius: inherit;
+  transition: transform 0.3s var(--sb-nav-easing);
+  will-change: transform;
+}
+
+.sb-swipeactions[data-sb-swiping] > .sb-swipe-content,
+.sb-listrow[data-sb-swiping] > .sb-swipe-content {
+  transition: none;
+}
+
+/* The hairline separator stays above the sliding content. */
+.sb-swipeactions::after,
+.sb-listrow::after {
+  z-index: 2;
+}
+
+.sb-swipe-actions {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.sb-swipe-actions[data-sb-edge="trailing"] {
+  right: 0;
+}
+
+/* Leading: the first declared action is nearest the content, so the row is reversed. */
+.sb-swipe-actions[data-sb-edge="leading"] {
+  left: 0;
+  flex-direction: row-reverse;
+}
+
+.sb-swipe-action {
+  appearance: none;
+  flex: 1 1 74px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  background: var(--sb-swipe-tint, var(--sb-color-gray));
+  color: #fff;
+  font: 500 var(--sb-ts-footnote-size, 13px) / 1.2 var(--sb-font-family);
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-swipe-action[data-sb-role="destructive"] {
+  background: var(--sb-swipe-tint, var(--sb-color-red));
+}
+
+.sb-swipe-action:active {
+  filter: brightness(0.85);
+}
+
+/* Once every button has its 74px, only the one nearest the content grows. */
+.sb-swipe-actions[data-sb-stretch] > .sb-swipe-action {
+  flex: 0 0 74px;
+}
+
+.sb-swipe-actions[data-sb-stretch] > .sb-swipe-action:first-child {
+  flex: 1 1 74px;
+}
+
+.sb-swipe-action-symbol {
+  display: inline-flex;
+}
+
+.sb-swipe-action-symbol > svg {
+  width: 22px;
+  height: 22px;
+  stroke-width: 2;
+}
+
+.sb-swipe-action-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* `listrow`: the edit-mode control at the engine's `editControl` rect (hidden
+   otherwise); a selected row reuses the Phase 7 selected-row fill. */
+.sb-listrow-control {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  animation: sb-fade-in 0.25s ease-out both;
+}
+
+.sb-listrow-control[hidden] {
+  display: none;
+}
+
+.sb-listrow-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 1.5px solid var(--sb-color-tertiary-label);
+  color: #fff;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
+}
+
+.sb-listrow-circle > svg {
+  display: none;
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 3;
+}
+
+.sb-listrow[data-sb-selectable][data-sb-selected] .sb-listrow-circle {
+  background: var(--sb-color-accent);
+  border-color: var(--sb-color-accent);
+}
+
+.sb-listrow[data-sb-selectable][data-sb-selected] .sb-listrow-circle > .sb-listrow-check {
+  display: block;
+}
+
+/* Deletable only: the red minus. */
+.sb-listrow[data-sb-deletable]:not([data-sb-selectable]) .sb-listrow-circle {
+  background: var(--sb-color-red);
+  border-color: var(--sb-color-red);
+}
+
+.sb-listrow[data-sb-deletable]:not([data-sb-selectable]) .sb-listrow-circle > .sb-listrow-minus {
+  display: block;
+}
+
+.sb-listrow[data-sb-selectable] {
+  cursor: pointer;
+}
+
+.sb-listrow[data-sb-selected],
+.sb-list[data-sb-list-style] > .sb-list-content > .sb-listrow[data-sb-selected],
+.sb-list[data-sb-list-style] .sb-section-rows > .sb-listrow[data-sb-selected] {
+  background: var(--sb-color-tertiary-fill);
+  border-radius: 10px;
+}
+
+@keyframes sb-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Pull to refresh: a 40px spinner row above the content while `refreshing`
+   (the content moves down by 40 like an iOS content inset); during a pull the
+   controller fades it in by `--sb-pull` (0...1). */
+.sb-refresh {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: var(--sb-pull, 0);
+  transition: opacity 0.2s;
+}
+
+.sb-refresh-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2.5px solid var(--sb-color-secondary);
+  border-top-color: transparent;
+  transform: rotate(calc(var(--sb-pull, 0) * 360deg));
+}
+
+[data-sb-refreshing] > .sb-refresh {
+  opacity: 1;
+}
+
+[data-sb-refreshing] > .sb-refresh > .sb-refresh-spinner {
+  animation: sb-spin 0.9s linear infinite;
+}
+
+.sb-list[data-sb-refreshable] > .sb-list-content,
+.sb-scrollview[data-sb-refreshable] > .sb-scroll-content {
+  transition: transform 0.3s var(--sb-nav-easing);
+}
+
+[data-sb-pulling] > .sb-list-content,
+[data-sb-pulling] > .sb-scroll-content {
+  transition: none;
+}
+
+[data-sb-refreshing] > .sb-list-content,
+[data-sb-refreshing] > .sb-scroll-content {
+  transform: translateY(40px);
+}
+
+/* Swipe back: the strip along a pushed screen's leading edge where a
+   rightward pan starts. Only touch needs it (to keep the browser from
+   scrolling): for the mouse the controller reads the pointer position. */
+.sb-navscreen-edge {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  z-index: 3;
+  display: none;
+  pointer-events: none;
+  touch-action: none;
+}
+
+.sb-navscreen[data-sb-nav-position="top"]:not([data-sb-depth="0"]) > .sb-navscreen-edge {
+  display: block;
+}
+
+@media (pointer: coarse) {
+  .sb-navscreen[data-sb-nav-position="top"]:not([data-sb-depth="0"]) > .sb-navscreen-edge {
+    pointer-events: auto;
+  }
+}
+
+/* The screen below dims by `--sb-nav-dim` while it sits behind the top one
+   (0.12 at rest; the swipe back fades it out as the top screen uncovers it). */
+.sb-navscreen::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  background-color: rgba(0, 0, 0, var(--sb-nav-dim, 0));
+  pointer-events: none;
+  transition: background-color 0.4s var(--sb-nav-easing);
+}
+
+.sb-navscreen[data-sb-nav-position="below"] {
+  --sb-nav-dim: 0.12;
+}
+
+/* While dragging, the screens follow the pointer (inline transforms); the
+   dragged screen casts the push shadow. */
+.sb-navscreen[data-sb-swipe-dragging],
+.sb-navscreen[data-sb-swipe-pop] {
+  z-index: 2;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+}
+
+/* The pop clone starts where a swipe back left the screen (overrides the
+   Phase 2 keyframes of the same name). */
+@keyframes sb-nav-pop {
+  from {
+    transform: translateX(var(--sb-nav-from, 0px));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+
+/* Phase 8: alerts, controls, effects */
+
+/* ---------------------------------------------------------------------------
+   Alerts and confirmation dialogs: a root-level layer above sheets (z 6 > 5).
+   The scrim fades in over 0.25s; the layer (cards, texts, buttons, OK) fades
+   and, for the `alert` style, scales from 1.1 about the card's center (the
+   renderer sets the layer's transform-origin from the engine's `card` rect).
+   A dismissed alert leaves a ghost clone that fades out.
+   ------------------------------------------------------------------------- */
+.screen > .sb-alert,
+.sb-alert {
+  position: absolute;
+  inset: 0;
+  width: auto;
+  height: auto;
+  z-index: 6;
+  display: block;
+}
+
+/* Above a `large` sheet the presenting tree scales down; an alert never does. */
+.screen[data-sb-sheet] > .sb-alert,
+.screen > .sb-alert {
+  transform: none;
+  transition: none;
+}
+
+.sb-alert-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  animation: sb-alert-fade-in 0.25s ease-out both;
+}
+
+/* Chrome the engine gave no rect gets the `hidden` attribute (layoutDom);
+   the display rules below must not override it. */
+.sb-alert-layer > [hidden],
+.sb-datepicker > [hidden],
+.sb-stepper > [hidden],
+.sb-slider > [hidden] {
+  display: none;
+}
+
+/* The layer spans the screen only to be animated as one; taps between its
+   parts fall through to the scrim. */
+.sb-alert-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.sb-alert-layer > * {
+  pointer-events: auto;
+}
+
+.sb-alert--in > .sb-alert-layer {
+  animation: sb-alert-fade-in 0.25s ease-out both;
+}
+
+.sb-alert[data-sb-style="alert"].sb-alert--in > .sb-alert-layer {
+  animation: sb-alert-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.sb-alert--out {
+  pointer-events: none;
+  animation: sb-alert-fade-out 0.25s ease-out both;
+}
+
+.sb-alert--out > .sb-alert-scrim,
+.sb-alert--out > .sb-alert-layer {
+  animation: none;
+}
+
+.sb-alert-card,
+.sb-alert-cancel-card {
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--sb-color-secondary-system-background) 85%, transparent);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  overflow: hidden;
+}
+
+.sb-alert-cancel-card {
+  background: var(--sb-color-sheet-background);
+}
+
+.sb-alert-title,
+.sb-alert-message {
+  position: absolute;
+  display: block;
+  white-space: pre;
+  text-align: center;
+  color: var(--sb-color-primary);
+  overflow: hidden;
+}
+
+/* The action sheet's title and message are a dim caption. */
+.sb-alert[data-sb-style="dialog"] .sb-alert-title,
+.sb-alert[data-sb-style="dialog"] .sb-alert-message {
+  color: var(--sb-color-secondary);
+}
+
+/* Button children: the engine gives each its row and centers its label;
+   every row has a hairline above it. Two side-by-side buttons (`row` layout)
+   also get a hairline between them. */
+.sb-alert-buttons > .sb-button,
+.sb-alert-ok {
+  color: var(--sb-tint, var(--sb-color-accent));
+  font-size: var(--sb-font-size-body);
+  text-align: center;
+  overflow: hidden;
+}
+
+.sb-alert-buttons > .sb-button::before,
+.sb-alert-ok::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-alert[data-sb-layout="row"] .sb-alert-buttons > .sb-button:nth-child(2)::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--sb-color-separator);
+  pointer-events: none;
+}
+
+.sb-alert-buttons > .sb-button[data-sb-role="cancel"] {
+  font-weight: 600;
+}
+
+.sb-alert-buttons > .sb-button[data-sb-role="destructive"] {
+  color: var(--sb-color-red);
+}
+
+.sb-alert-buttons > .sb-button:active,
+.sb-alert-ok:active {
+  opacity: 1;
+  background: var(--sb-color-fill);
+}
+
+.sb-alert-ok {
+  appearance: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Action sheet rows are taller and 20pt; its cancel button sits in its own card (no hairline). */
+.sb-alert[data-sb-style="dialog"] .sb-alert-buttons > .sb-button,
+.sb-alert[data-sb-style="dialog"] .sb-alert-ok {
+  font-size: 20px;
+}
+
+.sb-alert[data-sb-style="dialog"] .sb-alert-buttons > .sb-button[data-sb-role="cancel"]::before {
+  display: none;
+}
+
+/* Without a title or message the first row is flush with the card's top: no hairline. */
+.sb-alert[data-sb-style="dialog"]:not([data-sb-header]) .sb-alert-buttons > .sb-button:first-child::before,
+.sb-alert[data-sb-style="dialog"]:not([data-sb-header]) .sb-alert-ok::before {
+  display: none;
+}
+
+@keyframes sb-alert-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes sb-alert-in {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes sb-alert-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Full-screen cover: a sheet with `detents: ["full"]` has no radius, grabber
+   (the engine gives it none) or drag to dismiss.
+   ------------------------------------------------------------------------- */
+.sb-sheet[data-sb-detent="full"] > .sb-sheet-card {
+  border-radius: 0;
+  box-shadow: none;
+  touch-action: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Stepper: the label children are positioned by their frames; the 94×32
+   segmented control sits at the engine's `control` rect, its halves divided
+   by a hairline. A dimmed half (`aria-disabled`) swallows taps.
+   ------------------------------------------------------------------------- */
+.sb-stepper-control {
+  position: absolute;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--sb-color-tertiary-fill);
+  overflow: hidden;
+}
+
+.sb-stepper-button {
+  appearance: none;
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-color-primary);
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-stepper-button + .sb-stepper-button {
+  box-shadow: -1px 0 0 var(--sb-color-separator);
+}
+
+.sb-stepper-button > svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2.5;
+}
+
+.sb-stepper-button:active:not([aria-disabled="true"]) {
+  background: var(--sb-color-fill);
+}
+
+.sb-stepper-button[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------------
+   Slider: the label children are positioned by their frames; the 4pt track,
+   the accent fill and the 27pt thumb are chrome at the engine's rects. A
+   pointer anywhere on the slider moves the thumb (touch-action none).
+   ------------------------------------------------------------------------- */
+.sb-slider {
+  touch-action: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-slider-track {
+  position: absolute;
+  border-radius: 2px;
+  background: var(--sb-color-tertiary-fill);
+}
+
+.sb-slider-fill {
+  position: absolute;
+  border-radius: 2px;
+  background: var(--sb-tint, var(--sb-color-accent));
+}
+
+.sb-slider-thumb {
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 3px 1px rgba(0, 0, 0, 0.06),
+    0 0 0 0.5px rgba(0, 0, 0, 0.04);
+}
+
+/* ---------------------------------------------------------------------------
+   Date picker (compact): the label children are positioned by their frames;
+   the date / time capsules are chrome at the engine's rects, each with an
+   invisible native input stretched over it that opens the browser's picker.
+   ------------------------------------------------------------------------- */
+.sb-datepicker-capsule {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--sb-color-tertiary-fill);
+  color: var(--sb-color-primary);
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sb-datepicker-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-datepicker-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+  color-scheme: light dark;
+}
+
+.sb-datepicker-input::-webkit-calendar-picker-indicator {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+/* ---------------------------------------------------------------------------
+   Text editor: a borderless textarea filling its frame in the body font (its
+   parent provides any frame or background).
+   ------------------------------------------------------------------------- */
+.sb-texteditor {
+  appearance: none;
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  background: transparent;
+  color: var(--sb-color-primary);
+  font: inherit;
+  font-size: var(--sb-font-size-body);
+  line-height: 1.3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb-alert-scrim,
+  .sb-alert--in > .sb-alert-layer,
+  .sb-alert[data-sb-style="alert"].sb-alert--in > .sb-alert-layer,
+  .sb-alert--out {
+    animation-duration: 0.01s;
+  }
+}